飲食店 Webサイト制作

課題

　アルバイトの勤務先のサイトを改良することにします。元のサイトでは「WordPress」で制作されているが簡素なデザインで構成されており肝心なメニューが画像としてそのまま記載しているため、写真は良いのに低画質で掲載されており、ユーザビリティが悪いと分析します。写真の活用についてはメニューはクリックしないと拡大して見れない仕様で、画質は低いのであまり訴求力がないと感じます。特にギャラリーではスタッフが日ごろ撮っていた素敵な写真がサイトマップを経由しないと見れないのが凄く惜しいと考えています。また、レスポンシブデザインとしては PCの両端の空白が大きすぎると分析します。

https://birioncoffee.comより

施策

　色彩は基本的に変更せずに見やすくクリックしやすいレイアウトに改良します。特にメニューのレイアウトを綺麗な写真を活かしたオシャレなデザインに仕上げます。メニューの画像が低画質であるため「Photoshop」のスーパー解像度の機能で高解像度にします。またフードやドリンクの素材は単独の方が見やすく、タイル状のレイアウトにするため背景を切り抜きPNGの素材にします。

デザインカンプ

　写真の用意が出来たら「XD」で元のサイトの雰囲気を維持しつつ見やすく、使いやすくなるようにレイアウトを組み直します。またサイト構成をトップからアクセスしやすくなるようサイドにニュース欄を移します。

コーディング

　先ほどのような多くのページを制作するにはページの作成順とHTMLとCSSの構成と管理を工夫する必要がありました。そこでヘッダーやメインとなる記事、フッターのCSSを各ページに設定するのではなく全ページに共通するよう連携し修整が発生しても一括で反映されるように下記のファイル構成を定義しました。また似たようなデザインは１ページだけ先に作成し、それを複製し内容を変更するようにしました。

Root/
├─ index.html
├─ 404.html
├─ sitemap.html
│
├─ pages/                         … 主要ページ
│   ├─ company.html
│   ├─ gallery.html
│   ├─ accession_of_FC.html
│   ├─ go_to_campaign.html
│   ├─ recruit_class.html
│   ├─ recruit_staff.html
│   └─ menu/
│       ├─ hot_coffee.html
│       └─ morning.html
│
├─ stores/                        … 店舗一覧＋各店舗
│   ├─ index.html                 （旧 store_list.html）
│   └─ list/
│       ├─ hikone.html            （旧 store_list_hikone.html …接頭辞を削って短縮）
│       ├─ nagahama.html
│       └─ …(各店舗)
│
└─ assets/
    ├─ css/
    │   ├─ common/                … 全ページ共通
    │   │   ├─ style.css / header.css / footer.css / aside.css
    │   │   ├─ hyperlink.css / slideshows.css / food_and_drink_navi.css
    │   └─ pages/                 … ページ専用
    │       ├─ company.css / gallery.css / hot_coffee.css / morning.css
    │       ├─ recruit.css / storelist.css / storelist_adress.css
    │       ├─ site_map.css / accession_of_FC.css / go_to_campaign.css / 404.css
    │
    └─ images/
        ├─ top/            … top1-1〜top5-1, coffee-fc_top_…, グループ7
        ├─ gallery/        … MG_0668〜MG_1218
        ├─ banners/        … Morningbanner, Premiumbanner, Royalbanner, birion-class, birion-recruit
        ├─ menu/
        │   ├─ coffee/     … americancoffee, cafeaulait, viennacoffee, hotcoffeeA/B, ○○mlesnatealeaf(茶葉)
        │   ├─ morning/    … ○○morningset 各種, boiledegg, minisalada, miniyogurt
        │   └─ bakery/     … croissant系, ○○rollbread, pancake系, toast系, bread
        ├─ stores/         … 店舗写真_○○.jpg
        ├─ areas/          … gihu, hukui, hyogo, ishikawa, kyoto, mie, shiga(県)
        └─ icons/          … warning ほか