フレンンチトースト専門店「ZEROICHI FACTORY」を想定した、架空店舗のホームページを制作しました。 既存のHTML・CSSテンプレートをもとに、Photoshopで制作した画像への差し替えやテキスト変更、Dreamweaverでの調整を行っています。 トップページに加えて、コンセプト・メニュー・よくあるご質問・アクセスの下層ページも制作しました。 ● 制作期間 約3週間 ●担当範囲 デザイン／画像制作／HTML・CSSの調整 ●使用ツール Photoshop／Dreamweaver ●ターゲット 20〜40代の女性を中心に、カフェ巡りやスイーツが好きな方。 落ち着いた空間で、少し特別感のあるフレンチトーストを楽しみたい方を想定しています。 ●制作目的 店舗の雰囲気やフレンチトーストのおいしさを視覚的に伝え、来店への興味につなげることを目的に制作しました。 また、店舗のコンセプトやメニュー、アクセスなど、来店前に知りたい情報を分かりやすく確認できるホームページを目指しました。 ●制作ポイント フレンチトーストの温かみや、自然素材を生かしたカフェの雰囲気を表現するため、ブラウンやベージュを中心に配色しました。 背景には木目やクラフト紙のような質感を取り入れ、手書き風の文字や植物、フルーツの装飾を組み合わせることで、親しみやすくナチュラルな印象に仕上げています。 トップページでは、フレンチトーストやコーヒーの写真を大きく配置し、商品の魅力が直感的に伝わる構成にしました。コンテンツごとに写真の形やレイアウトに変化をつけながら、ページ全体に統一感が出るよう意識しています。 ● 情報設計のポイント トップページでは、店舗の特徴である「フレンチトースト」「おいしさの秘密」「こだわりのコーヒー」の3つに内容を整理しました。 各ページへ移動できるナビゲーションに加え、サイドメニューにも主要ページへのリンクや店舗情報を掲載し、必要な情報へアクセスしやすい設計にしています。 下層ページでは情報量を絞り、写真と文章をシンプルに配置することで、内容を読みやすくまとめました。 ●制作を通して学んだこと Photoshopで制作した画像をWebページへ反映するだけでなく、HTML・CSSの構造を確認しながら、画像サイズや文字、余白、位置を調整しました。 ブラウザ上の表示と編集画面での見え方の違いを確認しながら修正を重ねたことで、デザインだけではなく、Web上で正しく表示させるための調整の大切さを学びました。 また、トップページだけでなく下層ページまで制作したことで、サイト全体の統一感を保ちながら、ページごとに必要な情報を整理する経験につながりました。