自主制作Whistle cafe

whistle cafeサイト制作プロジェクト

ヒューマンアカデミー様の通信講座「動画編集」学習の中で提供された動画編集素材を使用させて頂いて、サイトを作成させていただきました。
※講義内の課題とは全く別のものです。
※素材の使用や、サイトへの掲載許可頂いてます。

whistle cafeページ

担当範囲

要件定義、情報設計、デザインカンプ制作

使用ツール

• Figma
• Visual Studio Code
• Adobe　Illustrator

目標設定

サイトの目的

このサイトの主な目的は、カフェの魅力的な雰囲気と料理を伝え、来店や予約に繋げることです。

特に、ターゲット層である20代後半〜30代が「行ってみたい」「写真を撮りたい」と思えるような、視覚的に訴求力の高いサイトを目指します。

ターゲットユーザー

20代後半〜30代の男女がメインターゲット層としました。
・SNSなどで情報収集をする人
・雰囲気の良いカフェで食事や時間を楽しみたい人
・レコードやアートに興味があり、居心地の良い空間を求める人

その他:友人同士やカップル、カジュアルなデート、一人でゆったり過ごしたい人

店舗の設定

架空の店舗ということでお店の設定を決めました。

雰囲気・テーマ

「都会の喧騒を忘れさせる、心地よい隠れ家ダイナー」

MUSIC＆GALLERYという文字が入っているロゴマークや、
木のぬくもりやヴィンテージ感ある店内の動画素材がありましたので、
レコードで音楽が流れる店内、時々小さなライブが行われております。
おしゃれな友達の家のような居心地の良い空間を目指します。

提供する料理・サービス

手元にある素材からハンバーグを使用するメニューを検討。
カジュアルなダイニングキッチン、カフェで出てきそうな料理をセレクト。

その他

場所:福岡市中央区大名エリアにある店舗

要件定義・情報設計

フロントページ構成

基本コンセプト

情報をフロントページに集約しつつ、詳細ページへの導線を確保。
視覚的に店の雰囲気や知りたい情報が伝わりやすい事を重視。

• メインビジュアル
• コンセプト
• おすすめメニュー
• 最新情報・お知らせ
• ギャラリー・店内写真
• アクセス情報
• 予約やSNSリンク

デザインコンセプト・方向性

カラーパレット

店の外観と内観の動画がすでにあり、壁や看板などに繰り返し使用されている色があったことから

メインカラーとアクセントカラーを決定

フォント

こちらもロゴに使われている文字に雰囲気を寄せるために、
太くて丸みのあるフォントを採用。
その他、視認性の高い本文フォントで読みやすく、かつ表示速度を落さないため。

レイアウト

全幅とコンテンツ幅を絞って、見せ方を変えていくことで
ユーザーが離脱しないように気を配りました。

こだわった点・工夫した点

限られた素材で魅力的にしたい

使える素材に制限があるのはよくあることだと思うので、
自分の持っている素材、あるいは集められる素材で魅力的に見せるにはという視点で考えました。

自分に実装可能なデザインで

今回コーディングもしようと考えていたので、
サイト制作経験が浅い私が自分で実装できそうなデザインで、
HTML/CSSで表現する（可能であればJsも使う）ことを検討しました。

Figmaを使いこなすため

学習ではXDで学習しましたが、業界ではFigmaを採用されていることも多く、
どちらも触れるようになるため試行錯誤しながら制作しました。

今後の展望・学習内容

③まで作成し、実際の製作部分の流れをつかむことを目標に
まずはカンプを再現することを目標とします。

フロントページコーディング8/4～8/5

HTML/CSSのみでコーディングいたしました。
ボタンのデザインや文字の大きさなどカンプのまま表現した際に視認性が少し悪かったのでも少しデザインを修正しました。

他の写真の方がよいのではないかなど、
課題はまだ残っていますが一旦次のフェーズに行きたいと思います。

その後の予定はこちらです。

1. ファーストビュー用動画制作（現在のFVを動画に差し替え予定です）
2. レスポンシブデザインカンプ作成→コーディング
3. 子ページカンプ作成→コーディング