PHOTO GALLERY.
制作の目的
授業で制作した課題サイトの設計・構成を深く分析し、その意図を汲み取りながら、さらに独自のアイデアを盛り込んだリメイクサイトを制作しました。
リメイクサイト紹介
※ 新しいタブで開きます
Concept
サイト概要
Background
制作背景
「1,095日（3年間）の軌跡」を可視化する、学校紹介用の特設ランディングページとして制作。単なる学校行事の羅列ではなく、春夏秋冬の移ろいとともに生徒の表情が変化していく「ストーリー型ギャラリー」にすることで、パンフレットだけでは伝わらない学校の空気感を届けることを意識しました。
Target
ターゲット
受験生・保護者層
学校の雰囲気をリアルに感じ、入学後の自分（子供）の姿をイメージしたい方。
エモーショナルな視覚体験を求める層
スペック（偏差値や設備）よりも、そこで得られる「体験」や「成長」を重視する感度の高い層。
Concept
サイトコンセプト
「365日、すべてが成長の舞台。」
写真を主役にした「デジタルギャラリー」をコンセプトに、余白を活かしたレイアウトを採用。言葉で説明しすぎず、写真が持つ熱量と四季の美しさによって、見る人の心に深く残る没入体験を目指しました。
Style Guide
デザインの構成要素
Concept
静寂と物語の融合
高品質な写真を主役に据え、季節ごとの体験を具体的に描写。訪問者が「自分もここに行ってみたい」と感じられる、写真が語るビジュアルストーリーを目指しました。
Color Palette
#667EEA (Indigo)
グラデーションの起点色。洗練されたインディゴ。
#764BA2 (Purple)
グラデーションの終点色。深みのあるパープル。
#2C2C2C
テキスト。上質さを演出。
Typography
Noto Serif JP
明朝体で和の雰囲気と品格を演出。見出しに使用。
Noto Sans JP
本文の可読性を確保。モダンで読みやすい。
Key Points
こだわりポイント
写真を主役にしたレイアウト設計
学校生活の雰囲気が直感的に伝わるよう、テキストよりも写真を主役に構成しました。余白を十分に確保し、1枚1枚の写真が印象的に見えるレイアウトにすることで、閲覧者が"体験している感覚"を持てるよう意識しています。
ターゲットを意識したデザイン
受験生や保護者を想定し、安心感・清潔感のある配色を採用しました。派手さよりも「信頼感」「落ち着き」を優先し、実在する学校サイトとして違和感のないデザインに仕上げています。
使用ツール
Adobe Photoshop
画像編集
Adobe Firefly
画像生成AI
VSCode
コードエディタ
ChatGPT
AIアシスト
Gemini
AIアシスト
Claude AI
AIアシスト
Figma
UIデザイン
課題サイト
※ サムネイル画像のみ
実装時の学び
課題サイト分析
-
palette
デザイン
季節ごとに厳選された高品質な写真が視覚の中心。一枚一枚が「その場の空気感」を伝え、言葉より先に訪問者の感情に訴えかけるビジュアル構成が印象的です。
-
view_quilt
構成
「日常に四季の彩りを」というコンセプトのもと、季節限定コンテンツをメインに据え、体験へのこだわりを丁寧に言語化しています。
-
verified
信頼性
各季節ページの丁寧な情報設計により、訪問者に安心感と期待感を与える構成になっています。
-
groups
ターゲット
自然体験や季節の旅を好む層や、上質な時間を求めている層に響く内容です。
技術的アプローチ
余白と明朝体が生む品格の制御
CSS
line-height (1.8前後) と letter-spacing で明朝体の気品を強調。
余白
rem/vwを用いデバイスサイズに連動した空白を維持。
高精細な画像のパフォーマンス最適化
次世代形式
WebP採用、fetchpriority="high"で高速表示。
レイアウト
display: grid;でレスポンシブ崩れを防止。
季節ページのセマンティックな構造化
HTML
季節コンテンツを<article>、適切な見出しレベルで整理。
代替テキスト
具体的alt属性記述でSEOとアクセシビリティを担保。