ママスペースWebデザイン講座課題 ワイヤフレーム
第二回の講義にて作成したワイヤーフレームです。
依頼内容
・表参道にあるカフェのWebサイト
・ターゲットは20～30代の女性、キレイ系OL
・サイトはシンプルに。ごちゃごちゃさせない。
・instagramには価格やメニューを載せておらず、写真から興味を持ったユーザがプロフィール→サイトアクセス→来店という流れが理想
・TOPページ内には人気メニューを4つ掲載。他は下層ページへ。
・Web予約は受け付けていないため、場所は時間の情報のみでOK。
必要なコンテンツ
・キービジュアル
・グローバルナビゲーション
・CONCEPT
・ACCESS(店名・営業時間・電話番号・住所・地図埋め込み)
・人気MENU4つ(商品名・価格)、moreボタン
・新作MENU4つ(商品名・価格)、moreボタン
・Instagramの写真を連動させてサイトにも表示
・フッター、コピーライト
提出1回目
・意識したポイント
①各コンテンツの配置順
→クライアントがアピールしたい内容とﾕーザが求めている情報、
それぞれのコンテンツをどのような順で配置するのが親切かを考えた。
特にインスタ写真の位置について。
最初はアクセスの前に配置していたが、
ページを下部までスクロールするユーザ
＝アクセス、店舗情報を探している
＝インスタからの流入者の可能性が高い と考え、
アクセス情報より以前に持ってくるとスクロールが長く感じて
使いにくいかもしれないと思い、アクセス情報の前から移動した。
逆にFVの下に配置した理由は、
既視感のある写真をページの前半に並べることで、
以降のコンテンツへ誘導しやすくなるかもしれないと思ったから。
②ヘッダーのリンク
instagramからの流入をメインに考えているため、
instagramのコンテンツ部分へのリンクはなしにした。
メニューはTOPページ内でアンカーリンクを張るつもりであったが、
模範解答で直接下層ページへリンクしているのを見て
使い勝手が良さそうなのは直接下層ページへのリンクだと思い修正した。
③アクセス情報の外観写真
→初めて来店するお客様を考慮し、マップだけでなく外観写真を添えた。
④余白の取り方
→コンテンツ毎にまとまりを持たせつつも、
シンプルさを失わないように気を付けた。
※シンプルさを求めてファーストビューの写真を小さくした分、
コンセプトの写真を大きめにしたが、
写真が連続することでシンプルさが失われないか心配。
(そもそもコンセプト写真3枚も不要かも‥。)
講師からのアドバイス
・店舗外観はうまくデザインできるならあってもいいが、
店の雰囲気はサイト内で写真をふんだんに使っているため
必須でなくてもいいかもしれない。
・インスタをカルーセルにしたのはいいアイデアだと思う
・コンセプトの高さを大幅に取っているが、文字量があればという感じ。
→その場合「コンセプト」というタイトルでなく
「私達のこだわり」のようなMessageコンテンツでも良さそう◎
・インスタの位置を色々工夫したようだが、FVで見せてしまうと
離脱の恐れがありそうなためFVには無いほうが良さそう。
→参考で色々なサイトを見るとわかるかと思うが、
大体は最下部付近に設置しているカフェ、サロンが一般的には多い。
・メニューの画像下の商品名と価格の文字揃えが見辛い。
・店舗情報は、住所は最下部ではなく店名とセットの記載が一般的。
・ヘッダーはナビゲーションと比べるとロゴのが大きすぎる。
提出2回目
修正箇所
①コンテンツの配置順
→Instagramを最下部へ移動。
(Instagramからの流入ならFVで見える必要はないと思いなおした。)
②コンセプトの写真を1枚、文章を写真の上に配置
→シンプルを求められているので、こだわりやメッセージを追加するのは
求められていることとズレてしまう気がしたので減らした。
③メニューの商品名・価格の文字揃え
→商品名を中央、価格を右揃えにしていたものを両社左揃えへ修正。
④店舗情報の並び順
→店舗名・営業時間・電話番号・住所 を
店舗名・住所・電話番号・営業時間 の順に修正しました。
ヘッダーについては、ロゴの高さをナビ項目のサイズに合わせると
ロゴが小さすぎて視認性が悪くなりそうなことと、
逆にロゴに合わせてナビ項目を下げるとヘッダーが幅を取りすぎるため
スクロール時のヘッダーにはロゴを含まないor小さくする想定である。参考イメージは以下サイトのロゴの動き。
・おまけ
FVは以下のように見える想定。
この記事が気に入ったらサポートをしてみませんか？