個人制作

バナー

LP

テーマ:カフェ公式サイト
(自主制作・コーディング作品)

制作期間: 2週間

使用ツール: VS Code / Photoshop

対応範囲: デザイン・HTML / CSSコーディング

コンセプト・目的:

幅広い年代層に向けたカフェの公式サイトを想定し、店舗の魅力やメニューのこだわりが伝わる構成とビジュアルを意識して制作しました。ユーザーが心地よく情報を得られるよう、視認性と統一感を重視しています。

デザイン・構成の工夫:

  • ファーストビュー:色味の強い写真は避け、店内の雰囲気を伝える淡くおしゃれなイメージ写真を採用し、やさしい印象を演出。
  • 全体カラー:ヘッダーとフッターには落ち着いたグレーを使用し、ページ全体に安定感と信頼感をプラス。 料理写真を掲載するカラム背景は、写真が引き立つように配色を調整しています。
  • ABOUTセクション:お店の特徴を視覚的に伝えるため、コンテンツを中央配置にし、白背景で明るく読みやすい印象に。
  • こだわりMENUセクション:2列のカラムレイアウトを採用し、背景にはグラデーションを用いて他セクションと調和を持たせつつ、単調にならないように工夫しています。

振り返り・学び:

デザインとコーディングの両面を一貫して担当したことで、配色バランス・余白・セクションごとの役割を意識しながら制作を進められました。

今後はJavaScriptを取り入れた動きのある表現にも挑戦し、よりユーザー体験を意識したサイト制作を目指していきたいです。