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

制作概要

実在する定食店のWebサイトを題材に、既存サイトの世界観を活かしながら、情報の見つけやすさと操作性を改善する架空のリニューアルを行いました。

WordPress＋Elementorでサイトを制作し、完成後はNovamira / Codexを活用して表示やUIを検証し、追加の改善を行っています。

目的

Instagramから訪れたユーザーが、営業時間・休業日・メニュー・アクセスなど、来店前に必要な情報をスムーズに確認できるサイトを目指しました。

既存サイトの個性的な「野球」をテーマとした世界観は残しつつ、スマートフォンでも情報を探しやすい構成にしています。

デザイン

フォント

既存サイトで使用されていたMeiryoの読みやすい印象を踏襲しながら、デザイン性とのバランスを考えて選定しました。

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

カラー

店舗の持つ雰囲気と野球のモチーフをもとに配色しました。

• メインカラー：野球場の芝生をイメージしたダークグリーン
• サブカラー：視認性の高い明るいイエロー
• アクセントカラー：CTAに使用する明るいブルー
• 文字色：やや明るめのブラック

情報設計・UIの工夫

ファーストビュー

既存サイトではロゴとテキストを中心とした構成でしたが、サイト下部にあった野球のイメージとキャッチフレーズをファーストビューへ移動。

サイトを開いた段階で、店舗のコンセプトが伝わる構成にしました。

また、画像内に描かれていたキャッチフレーズをテキストの見出しとして独立させ、情報として扱いやすい構成へ変更しています。

メニュー紹介

既存サイトでは、イラスト・タイトル・説明文が縦に並んでいました。

リニューアルでは、それらを1枚のカードにまとめ、野球のトレーディングカードをイメージしたデザインに変更しました。

和の雰囲気を残すため、店舗の紙チラシでも使用されている「青海波」のパターンを取り入れています。

さらに、縦方向に長くなりすぎないよう、一覧表示からスライダー形式へ変更しました。

メンバー紹介

メニューを「野球のメンバー」に見立てて紹介している既存サイトの特徴を活かし、画像・タイトル・説明文を一体化したカード型UIを採用しました。

各リストの直下に関連カードを配置することで、情報を追いやすくし、ページ内の回遊性を高めています。

FAQ

質問と回答が常時表示されていた「店主への質問」は、アコーディオン形式へ変更。

必要な情報だけを開いて確認できるようにし、情報量の多さによる圧迫感を軽減しました。

Novamira / Codexを活用した改善

サイト完成後、Novamira / Codexを開発・修正支援ツールとして活用し、UIや表示内容を検証しました。

特にメニュースライダーでは、説明文の長さが「なし」から10行以上まで大きく異なり、カードごとの情報量にばらつきがあることを確認しました。

そこで、3行を超える説明文には「もっと読む」ボタンを表示し、展開後は「閉じる」で元の状態へ戻せる仕様に改良。

デザインを大きく変えることなく、情報量の多いカードでも読みやすく、操作しやすいUIへ改善しました。

苦心した点

既存サイトはモバイルファースト、またはモバイル特化型に近い構成だったため、その特徴的なレイアウトをElementorで再現する点に苦労しました。

また、スライダーには当初Elementor ProのCarouselウィジェットを使用していましたが、使用サイト数の制限を考慮し、無料で利用できるUnlimited ElementsのContent Carouselへ切り替えて実装しました。

デザインを再現するだけでなく、実際の運用や使用環境も考慮しながら実装方法を選択しています。

使用ツール

• デザイン：Figma
• サイト制作：WordPress / Elementor
• UI・機能追加：Unlimited Elements
• 画像制作・調整：ChatGPT
• 開発・修正支援：Novamira / Codex

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