ママスペースWebデザイン講座課題 デザインカンプ(サイト全体編)
こちらで作成したワイヤーフレームから、デザインカンプを作成しました。
長くなるのでFV編とサイト全体編の二本立てにします。
依頼内容
・表参道にあるカフェのWebサイト
・ターゲットは20～30代の女性、キレイ系OL
・サイトはシンプルに。ごちゃごちゃさせない。
・instagramには価格やメニューを載せておらず、写真から興味を持ったユーザがプロフィール→サイトアクセス→来店という流れが理想
・TOPページ内には人気メニューを4つ掲載。他は下層ページへ。
・Web予約は受け付けていないため、場所は時間の情報のみでOK。
必要なコンテンツ
・キービジュアル
・グローバルナビゲーション
・CONCEPT
・ACCESS(店名・営業時間・電話番号・住所・地図埋め込み)
・人気MENU4つ(商品名・価格)、moreボタン
・新作MENU4つ(商品名・価格)、moreボタン
・Instagramの写真を連動させてサイトにも表示
・フッター、コピーライト
提出3回目(サイト全体)
参考：作成したワイヤーフレーム
◆気を付けたポイント
・メインカラーの使いどころ
→各セクションで一か所はメインカラーが入るようにした。
Concept：写真のコーヒーカップ
メニュー：商品名・ボタン
Access：店名・店舗写真
Instagram：インジゲータ
・なるべくリンクやボタンなど、クリック可能な部分にのみ
メインカラーの使用を集中させた。
→タイトル文字は文字色を変えるのではなく、ブラシで背景を描いた
・ヘッダーの文字の背景色と自分が見ている画面を合わせることにより、
自分がどのコンテンツを見ているのかすぐにわかるようにした。
・メニュー写真の選定
→なるべく同じ構図で撮影された写真を使用した。
目線がブレないよう、皿のサイズや位置を揃えるようにした。
◆学んだこと
・クリックの可不可で文字色を変えているサイトが多いこと
→タイトルなどの目立たせたい場所以外にも
ボタンやリンクにメインカラーを使っているサイトが多く、
ぱっと見ただけで「クリックできそう」感があった。
講師からのアドバイス
・ナビのデザインは良いが、全部アンカーリンクの場合、
結局TOPであることに変わりがないのでわざわざ分ける必要はないかも。
ここでいうHOMEは「ページの最上端」なので、下層ページがあれば
GOODデザインだと思う。
・セクションの幅がメニューのところだけ狭くしたのには意図があるか
ボタンと見出しの色・幅が似ており、ボタンが見にくいと感じたので
どちらかの色を変えるか、ボタンの幅高さをもうすこし取るか、
タイトルのあしらい変えるなどしたらもっと良くなるかも。
ConceptとAccessがアンカーリンクでメニューは下層ページがあるため、
ナビで位置がわかると良いかと思ってナビをデザインした。
メニューのところだけセクションが狭くなっているのは、
メニューという大項目の中に新作メニュー・人気メニューの2コンテンツが
入るイメージだったので狭くしていたが、
言われた通りボタンと見出しが似ていてわかりにくくなってしまった。
提出4回目(サイト全体、FV)
・ボタンの色を修正。
→色を反転させただけだが、タイトルと差別化できたことによって
より分かりやすく、スッキリした。
・タイトルのあしらい
→タイトルだけにあしらいを入れることにより、
全体的にリズム(反復)ができたような気がする。
この記事が気に入ったらサポートをしてみませんか？