海鮮食堂まっく | 実在する定食店の架空サイトリニューアル

作品ノート

目的 Instagramと連動し、店舗の営業時間・休業日・メニュー・地図など、来店前に必要となる重要情報および付加的な情報を分かりやすく提示することを目的とした。

制作のポイント（余白・フォント・色調）

フォント設計 オリジナルサイトで使用されていた Meiryo の印象を踏襲しつつ、可読性とデザイン性のバランスを考慮し、以下のフォントを採用した。

• 日本語：Noto Serif JP
• 数字：Noto Sans

色調設計

• メインカラー：店主の好みである野球場の芝生をイメージした暗めのグリーン
• サブカラー：オリジナルサイトでも使用されており、メインカラーに対して視認性の高い明るいイエロー
• アクセントカラー：CTAボタン上の白文字が映える、オリジナル踏襲の明るいブルー
• 文字色：強すぎない印象を与える、やや明るめのブラック

構成・情報設計

1. ヘッダー 　オリジナルではCTAの下に配置されていた電話番号を、企業の基本情報として捉え、ファーストビューに近い位置へ移動した。
2. ファーストビュー 　オリジナルではロゴとテキストのみで構成されていたため、サイト下部に配置されていたコンセプトを表す野球のイメージとキャッチフレーズをファーストビューに配置。 　ロゴの店名および背景画像上のキャッチフレーズは、ChatGPTを活用して生成・変更している。
3. CTA 　オリジナルの構成を踏襲し、変更なし。
4. お知らせ 　変更なし。
5. メニュー紹介 　オリジナルでは、イラスト・タイトル・短い説明が縦に並ぶ構成であったが、これらを一つのカードにまとめ、番号を付与。 　野球のトレーディングカードをモチーフとしたデザインとし、和の要素として店舗の紙チラシにも使用されている「青海波」パターンを取り入れた。 　また、縦2列3行で表示されていた構成を、縦方向にコンパクトかつスマートに見せるため、スライダー形式に変更した。
6. メンバー紹介 　本サイトではメニューを野球のメンバーに見立てて紹介している点を活かし、画像・タイトル・短い説明を一体化したトレーディングカード風デザインを採用。 　オリジナルでは3つのリスト表示後、全メニューの詳細が縦に並んでいたが、各リスト直下にカード型スライダーを配置し、視線の流れと回遊性を高めた。
7. 人気ランキング 　変更なし。
8. ニュース 　変更なし。
9. 店主への質問 　オリジナルでは質問と回答が常時テキスト表示されていたが、アコーディオンを使用したFAQ形式に変更し、動きと視認性を加えた。 　以降の構成は変更なし。

使用ツール

• デザインカンプ：Figma
• サイト制作：WordPress + Elementor

苦心した点 オリジナルサイトは、モバイルファースト、もしくはモバイル特化型として設計されており、その構成をElementorで再現する点に苦労した。 また、スライダーについては当初 Elementor Pro の Carousel ウィジェットを使用していたが、使用サイト数制限を考慮し、無料で利用可能な Unlimited Elements の Content Carousel ウィジェットへ切り替えて実装している。

※本作品は、実在する店舗サイトを想定した架空のリニューアルデザインです。