制作月：2023. 11・12
概要：架空の猫カフェサイトになります。別で制作した猫カフェチラシを元に制作しました。ユーザーの情報取得方法を想定した構成、且つカフェのコンセプトや雰囲気を掴みやすいデザインにしました。
ターゲット：日々の忙しい生活で癒しが欲しい20〜30代女性向け
目的：カフェのコンセプトや雰囲気、情報の発信
情報設計：ユーザーがSNSとサイトで知りたい・掴める情報を分けたうえで構成を組みました。
SNSで店舗情報や内部の情報を、サイトではカフェ全体のコンセプトや雰囲気を得るとして、webサイトコンテンツをコンセプト→猫の紹介→料金システム→SNSと並べました。店舗情報・アクセスはサイトにおいて優先度が低いと考えたため、画像を挟み一番下に配置しています。
また、猫の紹介ページでは最後にSNSを配置し、猫の情報をSNSでさらに掴んでもらうことを想定しています。
SNSで店舗情報や内部の情報を、サイトではカフェ全体のコンセプトや雰囲気を得るとして、webサイトコンテンツをコンセプト→猫の紹介→料金システム→SNSと並べました。店舗情報・アクセスはサイトにおいて優先度が低いと考えたため、画像を挟み一番下に配置しています。
また、猫の紹介ページでは最後にSNSを配置し、猫の情報をSNSでさらに掴んでもらうことを想定しています。
最後に、チラシからサイトに飛ぶことを想定してレスポンシブ対応にしています。
デザイン：デザイン面では、配色・フォントをポイントとして制作しました。
まず配色では、ベージュ・オレンジ・ブラウンと、チラシと同色を使用し、媒体は違えど統一感を出すことでコンセプトや雰囲気をユーザーに伝えやすくしています。
まず配色では、ベージュ・オレンジ・ブラウンと、チラシと同色を使用し、媒体は違えど統一感を出すことでコンセプトや雰囲気をユーザーに伝えやすくしています。
次にフォントでは、丸みのある”よもぎフォント”を使用し、サイトの目的に合わせデザイン重視にしています。親しみやすさ、くつろげるカフェであることを表現しています。
サイトURL：https://reina-pf.com/
制作範囲/期間：
企画・ワイヤーフレーム 3日
デザイン 1週間
コーディング 2週間
使用ツール： Figma・Visual Studio Code
