◆制作期間：１ヶ月　(スクール卒業制作) ◆CursorAI、ImageFX、Figma、Photoshop 【コンセプト】 水産加工会社がリブランディングを行ったという設定の、架空ブランドサイトです。 このブランドでは、 飲食店をメイン業態として、洗練された空間や、おしゃれなお土産・ギフト、手軽な食べ歩きグルメを、新しい形で展開するブランドという設定です。 【サイトの目的】 業態内容を紹介しつつ、ブランドイメージを構築し、認知を広げ、ブランディングの強化を目的に作成しました。 【メインターゲット】 20代後半から30代の観光客層です。 【ブランド名】 ・「魚（さかな）」の訓読み。 ・海の下の恵みという意味で「Under the Ocean」の頭文字。 ・“あなた”を意味する「YOU」と Oarai＝ あなたと大洗が交わる場所。 以上の思いを込め、シンプルで印象的に残り、広告も展開しやすいネーミングにしました。 【ロゴ】 穏やかな波と、そこからのぞく太陽（または月）がモチーフで、波の形がアルファベットのUで、太陽または月が「O」になっています。 【サイトの構成】 ・全体 コピーは説明になりすぎないよう、 ポエム調で統一。letter-spacingやline-height、余白も十分に取り、スクロールもゆっくりにしています。 ・ファーストビュー 空間と料理の魅力を伝えるスライドショーを使用。 ・ポップアップメニュー FVから少し遅れて、右下にこの場所の今日の日の入りの時刻を表示。「夕陽をここで見たい」という期待感やワクワク感を演出しました。別日も検索できるようにリンクも設定。バツで消さず下にスクロールしても、縮小表示になり、コンテンツの邪魔をしないようにしました。 ・ ヘッダー シンプルに、コンテンツや写真の邪魔にならないよう配慮しました。FVを過ぎると、上スクロール時にだけ表示される仕様にし、余白を多くとって世界観へ没入できるように意識しました。視認性を高めるため、色も白と文字色の２色を使用。 ・ハンバーガーメニュー フルスクリーン＋背景を透過させて高級感とモダンな印象に。印象的なコピーを中央に配置し、 展開後の左のメニューは、上から順番に表示され、ホバーすると点が灯るような設定。 SP版ではマップはリンクにし、リザーブボタンに被らないように設定しました。 ・Story 文章が固定されて付いてくることで、文章を読んでもらいやすく印象に残り、動と静のコントラストで世界観を演出しています。 ・About 「View Our Space」のボタンから、Googleストリートビューへリンクさせていますが、実際の想定では、空間もこのブランドの魅力のため、インドアビューにし360度で内観・外観を体感できるようにしたいと思っています。 ・イメージセクション 日中・夕方・夜の3つの画像を、 ゆるやかに拡大しながら切り替わる構成にし、 時の流れを表現。ブランドサイトにあるような、ビジュアルで世界観を伝える演出を取り入れました。 ・Eat in、Gift、Take out それぞれを紹介するハブ的役割のセクションです。 Eat in、Take outのメニューはPDF形式にし、 実店舗のメニューと同じものを見せることでユーザーの選択のしやすさと安心感に繋げ、お店側としても更新がしやすいようにPDFを選択しました。 Giftは、母体の会社がすでに展開しているECサイトへリンクさせることを想定しています。 背景には、動くグラデーションを設定。次のセクションで使用した大洗を象徴する画像から色を抽出し、馴染みよく、かつ、空の移ろいや波がやさしく砂浜に打ち寄せるイメージを表現したく動くグラデーションを取り入れました。 ・イメージセクション "For the Best Exprience"最高の体験のためにという文字が出たところで、ヘッダーが再登場し、予約への動線を確保させています。 ・フッター 海面の動画を背景に持ってくることで最後まで「余韻」が残るような演出に。ヘッダーと同じく最低限の情報のみを掲載しています。 ・SP版 予約ボタンを右下に固定してCTAを明確に、予約への動線を確保。 ハンバーガーメニュー内のマップはリンクに変更し、予約ボタンと重ならないように調整しています。