【実技試験/自主制作】LP制作（要件定義/デザインカンプ/コーディング）

＜担当範囲＞

• テーマ決め・要件定義〜ワイヤーフレーム〜デザインカンプ〜コーディングまでを担当
• HTML、CSS、JQueryを用いて実装しております。

★右下の「WEBSITE」の黒いボタンを押していただくと、実際のサイトをご覧いただけます。

【WEBサイト制作の概要とクライアントの課題】

• 韓国の人気ベーカリーが日本初上陸！渋谷にオープン
• お店に興味を持って、来店してもらう  

【ターゲット】

• 韓国が好きな人
• おしゃれな飲食店・カフェ巡りが好きな人
• 流行に敏感でインスタ映えを重視する20代
• 関東近郊に住む方だけでなく、話題のスポット目当てで地方から遊びに来る方も

【カフェのコンセプト】

• 渋谷や原宿にあるファッションショップのような、POPかつ洗練された雰囲気
• 韓国旅行に行かなくても、現地の雰囲気を味わうことができる

【デザインの方向性】

• ターゲットの特性を踏まえて、親しみやすさや落ち着きよりも「POPかつ綺麗めな雰囲気」をイメージしました。
• ベーカリー中心のカフェのため、ブラウン系の商品写真が多くｘｘになってしまうので、サイト全体のインパクトを出すために明度と彩度の高いブルーをメインカラー・補色のオレンジをアクセントカラーにしました。

【情報設計】

↓要件定義シート、ペルソナ

要件定義を設定した後、ペルソナを作成しデザインの方向性を選定しました。

【メインビジュアル】

• ターゲットの特性を踏まえて、各種SNSのリンクを画面右側に固定して配置しました。
• 認知度アップがクライアントの目的だったため、MVの後ろに店名を大きく配置することで店名への興味喚起を狙いました。かつ、店名を波打たせることでPOPな雰囲気を演出しました。
• よりPOPな雰囲気になるよう「new open！」は丸みを帯びたフォントを使用しました。

【concept】

• テキスト量が多くなってしまうため、視覚でも訴求できるように写真を大きく配置しました。

【service～accessまで】

• メニューセクションでは、ただ陳列された商品写真を使用するのではなく、一つひとつアングルなどにこだわった「正方形のメニュー写真」を配置することでターゲットが実際のInstagramへの投稿をイメージできるよう工夫しました。
• サービスセクションでは、アイコンを使いながらサービス内容を表現することで、タイパを重視する世代がテキストを読まなくても直感的に分かるデザインしました。
• アクセスはGoogleマップをはめ込むことで、すぐに調べられるようにしました。 

★UXを意識した流れ

MV（視覚で訴求）

concept（文章・感情で訴求）

＝＝ここまででカフェの世界観を感じ興味を持ってもらう＝＝

menu ・service（ビジュアルで訴求。行ってみたいと思ってもらう）

accessを見て場所や営業時間を知る

【アニメーション】

明度や彩度の高いカラーを使用しており全体的にパキッとした印象になっているので、フェードイン、スライダーを実装し、なめらかな動きをつけることで若者向けらしいやわらかい雰囲気を出しました。