【Webサイト】ミートショップたかはし（架空）
- 作業フェーズ
- 情報整理・構造の再編 / デザイン / コーディング
（地方にあるコロッケが有名な精肉店のWebサイトをリニューアルすると想定して制作）
- デモサイト
- https://xs445568.xsrv.jp/demo/takahashi/
- 制作期間
- 2023年11月〜2024年2月（情報整理・構造の再編8h / デザイン12h / コーディング10h）
- 使用ツール
- Photoshop・VS Code・Dreamweaver
- ターゲット
- お店を普段から利用している地元の人
オンラインでお取り寄せしたい人
- コンセプト
- 懐かしさと新しさのある地元に愛される精肉店
- 課題
-
- ・古さ／更新されていない感じをなくすこと。
- ・オンラインショップへの導線をわかりやすくすること。
- ・実店舗を利用する人へ向けた情報とオンラインショップを利用する人に向けた情報を棲み分けわかりやすくすること。
- ・お店のウリをわかりやすくすること。
- ・できるだけテキストの載った画像をなくしSEO的に損しないページにすること、情報を漏れることなく伝えること。
- ・情報のわかりにくさをなくすこと。
- アウトプットによる解決策
-
- ・「一昔前のサイト」という印象のデザインを一新した（全画面にコンテンツを広げる・粗い画像をなくす・ロゴとその他画像のチグハグな印象を統一した）。
- ・ヘッダーとフッターでオンラインショップへのリンクをボタンとして表現しわかりやすくした。
- ・情報を整理して、まとめられるページはまとめナビゲーションをわかりやすくした。
- ・アピールしたいコロッケ・メンチカツをアピールできるサイト構成・TOPページ構成にした。
- ・お店の情報はテキスト化した。
- こだわり
-
- ・新しさも出したいが、古くから地元で愛されている「懐かしさ」も出したかったので背景をざらっとした質感にしてレトロ感を出したり両サイドに縦線を。
- ・親しみやすさ、とっつきやすさ、楽しさを出すためにお肉やコロッケなどの写真が拡大して現れるようにした。
- ・他にも、レトロ感を出すためにフォントをレトロな印象の「Zen Kaku Gothic」にした。
