いろり庵きらくのwebページ分析
今回の課題はwebページの分析ということで、「いろり庵きらく」というお蕎麦屋さんのwebページを分析していきたいと思います。
「いろり庵きらく」とは？
JR東日本の子会社である「JR東日本クロスステーション」が運営している、立ち食いそば・うどんのお店で、多くは駅前に店舗を構えていること・提供がスムーズで早いこと・生そばを使用するなど、味のクオリティも高いことなどから、駅を利用する会社員、学生から男女問わず人気のあるお店です。
私も学校帰りやお昼に利用したことがあり、注文方法もシンプルですぐ食べられ、お蕎麦も美味しいのでとても好きなお店です。
①PC用ページ
ページを開いてみると、上部にはそれぞれの情報に飛べるバーがレイアウトされ、次に「今日も、旨い蕎麦を一杯。」といういろり庵全体のキャッチコピーと、いろり庵の看板商品であるかき揚げそばがヘッダーになっています。
この画面をデザイン面で見ると、
プラス面
- 全体的に和風で統一され、コンセプトとマッチしている
- いろり庵のイメージカラー的な小豆色のような赤が映えて、店としての色のイメージがつきやすい
- 看板商品であるかき揚げ蕎麦を最初にドンと出すことで味を想像させ、行きたくさせる（食べたい！となる）
マイナス面
- 全体的に右に寄りすぎているので、もっと左にレイアウトしても良いかも
- ヘッダー下の黒い点の役割がない（スクロールするとキャンペーンや期間限定商品のヘッダーが出てくるはず？）ので、なくすかスクロールして他の情報も表示できるようにする
と、店のコンセプトやイメージに基づいたデザインができているものの、レイアウトに改善点や使用者側が「コレいる？」と思ってしまうような箇所がいくつか見られました。
さらにスクロールしていくと、ヘッダー上部にあったバーの順番でそれぞれこだわり、おしながき（メニュー）、ニュース（新店舗開店や期間限定商品など）、店舗情報（JR東日本クロスステーションの店舗全体検索）、採用情報、その他利用規約とボタンが配置されていました。
例として「こだわり」のボタンを押して飛んでみると、このようなページに飛ぶことができ、「こだわり」のページであるとわかるように上部バーの「こだわり」のボタンの色が変わるため、webページ内でどこにいるのかがわかるようになっていました。
↓ 色が変わる演出
この「こだわり」ページでは文章が少し読みづらい印象があり、フォントや文字の大きさ、縁取りなども見直した方がいいのではないかと感じました。
また、「おしながき」ページは使用面では特に使いづらいことはなかったのですが、商品の写真と一緒にその商品の説明文などもあるとさらに伝わりやすく、「食べたい！」と思わせられると思いました。
個人的には期間限定商品が「おしながき」またはヘッダーをスクロールなどして表示されると、近いうちに行ってみようかなという気にもなるのであるとよりいいなと感じました。
②SPページ
スマートフォンで見てみると、全体的な和風のデザインは同じですが、PCよりもレイアウトが綺麗で違和感がなく、見やすい印象を受けました。
ボタンの押し具合など操作性の面では、PC・SPどちらも色が変わる演出が加えられていたため、どこを押しているのかもわかりやすく、特に時間差のラグもなく使いやすい印象でした。
↓ 「かき揚げそば」を選択中
まとめ
PC用ページを見てからSPページを見ると、いろり庵のWebページはスマートフォンを基本としたレイアウトがされているように感じました。
客層やこのWebページにアクセスする環境を考えると、
- 店に入る前にメニューを見たり、近場の店舗を探したりなど
- 主に外で
- スマートフォンで
このページにアクセスすることが多いと思われるため、
全てに当てはまる訳ではないと思いますが、Webページを作成する際には、
・いつ（いつアクセスするのか？）...when
・どこで（どこでアクセスする？使用するデバイスは何か？環境は？）...where
・誰が（どんな人がアクセスする？）...who
・なにを（何を伝えるサイトなのか？）...what
・なぜ（なぜアクセスする？何を最優先で知りたい？）...why
・どのように（どのようにサイトを知るのか？）...how といった、
『5W1H』
を意識して制作すると、コンセプトやデザインがはっきりしてわかりやすいWebページになるのではないかと考えました。
また、以前課題で自分のブログのバナーを作成した際に感じたことですが、同じデザインで違うサイズやレイアウトを作ると、どこか違和感が出たり、綺麗に収まらないことがあったので、さまざまなバリエーションを作るという面ではWebページも同じ理由で難しい場合があるのかなと思いました。
0コメント