パン屋さんのWebサイト

概要

【学校課題】大阪府天満橋にある仮想のパン屋さんのWebサイト制作。

使用ツール

Illustrator Photoshop HTML/CSS JavaScript

制作期間

1週間

担当範囲

企画 / デザイン / コーディング

制作について

目的・ゴール

Webサイトを作成することで、パン屋さんの認知度を上げ来客を促すこと。

ターゲット

天満橋はオフィス街でもある為、店舗周辺の30代前半の都会的な女性社員をメインの客層と想定しました。

要望

・行ってみたい・食べてみたいと思えるようなサイトにしてほしい
・認知度を上げたい

配色 　食欲を増進させる効果のあるオレンジや茶色を使用して、掲載しているパンがより美味しそうに見えるようにしました。30代前半の女性をターゲットにしていることもあり、落ち着いた印象を与えたかったので、少しくすんだ色味を選定しています。

全体像 　写真の形などは少し角を残し、見出し部分は筆記体のフォントを使用することで、都会のオフィス街の洗練されたスタイリッシュさを表せるように意識しました。
　現在はPCよりもスマートフォンなどで情報収集される方が多いと思われるので、レスポンシブ化することを前提としてシンプルなデザインにしています。
　グローバルナビゲーションもPC版でもハンバーガーメニューにすることで、よりミニマルなデザインになるようにしました。

こだわり 　自分がwebで見たお店に行こうと思うきっかけは、メニューの写真（商品内容）だと考えたので、メニューの写真を楽しい気持ちで見られるように、自動再生をつけたスライドでの表示にしました。

　デザインカンプの時点からレスポンシブ化を視野に入れていたので、コーディングも最初から相対値で数値を指定したりと、要領よく作業が進められるように意識しました。
　JS/JQueryの扱いに慣れるためにも、画像のスライド表示や自動切換え、ハンバーガーメニューの実装など動きをつける部分に力を入れています。

　レスポンシブを念頭に置いていたことで作業効率が上がりました。ただ、こういうデザインだとコーディングが難しいだろうなと考えてしまう場面があり、デザインの自由度が少し制限されたように感じます。どんなデザインでも再現できると自信を持てるように、コーディングの引き出しを増やしていきます。
　シンプルなページですが、トップビューやメニュー部分の画像スライドなど、動きをつけることで簡素になりすぎなかった点は良かったです。

• 作品一覧へ