Web site
飲食店サイト
- ■ 担当範囲
- ・コーディング（HTML・CSS・jQuery）
・WordPress構築（オリジナルテーマ）
・ドメイン取得 / DNS設定（ネームサーバー設定） / 公開対応
- ■ 概要
- 飲食店の情報発信がグルメサイト（食べログ等）に依存している状態から脱却するため、公式サイトを新規制作し、店舗の強みを明確にしたブランディング設計を実施。
また、Google検索およびGoogleマップ経由での集客強化を目的に、Googleビジネスプロフィールと連携した予約導線を設計。
さらに、訪日外国人の来店機会を創出するため、英語対応ページを実装し、インバウンド需要への対応を行いました。
- ■ 使用技術
- HTML・CSS・jQuery・WordPress
- ■ 実装内容
- ・HTML / CSS / jQueryによるコーディング
・レスポンシブ対応（PC / スマートフォン）
・スライダー実装（Swiper）
・スクロールに応じたアニメーション制御
・オープニングアニメーション実装
・お問合せフォーム（Contact Form 7）
短時間で必要な情報にアクセスできるよう、シンプルな構造と視認性を重視した設計を意識
■ 多言語対応
英語版ページの実装にも対応しています。
日本語版と構造を統一しつつ、テキスト量や改行位置の違いを考慮し、レイアウトが崩れないよう調整しています。
■ 実装の工夫
・セクションごとにクラスを整理し、再利用性を意識した構造で実装
・余白やフォントサイズを調整し、スマートフォンでも読みやすいレイアウトに最適化
・画像中心の構成のため、テキストとのバランスを考慮したマークアップを意識
■ UI/UX設計
ユーザーが迷わずメニューや店舗情報にたどり着けるよう、情報の優先順位を整理し、シンプルな導線設計を行いました。
視線の流れを意識し、重要な情報が自然に目に入る構成にしています。
■ パフォーマンス
・画像の最適化により表示速度を改善・不要な処理を削減し、軽量な実装を意識
■ マークアップ
・セマンティックなHTML構造を意識
・情報構造が分かりやすいマークアップを心がけています
■ 今後の改善
・より保守性を高めるため、設計手法（BEMなど）の導入を検討
DATA
- 概要
- 飲食店の情報発信がグルメサイト（食べログ等）に依存している状態から脱却するため、公式サイトを新規制作し、店舗の強みを明確にしたブランディング設計を実施。
また、Google検索およびGoogleマップ経由での集客強化を目的に、Googleビジネスプロフィールと連携した予約導線を設計。
さらに、訪日外国人の来店機会を創出するため、英語対応ページを実装し、インバウンド需要への対応を行いました。
- 想定ユーザー
- Google検索・Googleマップで飲食店を探すユーザー
食べログなどのグルメサイト以外で店舗を比較・検討するユーザー
訪日外国人観光客（英語で飲食店を探すユーザー）
- 使用技術
- HTML・CSS・jQuery・WordPress
- 実装期間
- 3週間（デザインカンプ支給）
- URL
- https://shabucho.com