はま寿司のサイトを分析してみた。
6月10日にブランドを一新したはま寿司さん。少しおしゃれにカジュアルな印象になってます。それに伴いサイトもどうなってるのかな？と気になり分析させていただきました。
KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。
デザイン分析元の基本情報
商品の特徴：「お寿司を食べる」という特別な時間を提供するお寿司屋さん
#はま寿司 #いなりの日 #寿司 #回転寿司 #おいしいお店 #ブランディング #Webデザイン #デザイン
URL：https://www.hama-sushi.co.jp/
企業名：株式会社はま寿司
トップページ
どんな年齢層から見ても見やすいサイトになってます。
-ファーストビュー
いろんなキャンペーンやイベントが分かるようにスライドになっています。youtubeも自動で再生されるよう埋め込みがされています。スライドの中央に来た時だけ自動再生されて他のバナーが中心のときは止まるので、他のお知らせを邪魔しない工夫がされています。
-コンテンツ
スクロールしたときに動画で見せることでより美味しく、新鮮に見える工夫がされています。リンクのボタンも分かりやすく作られており、レイアウトを崩している分、分かりやすさが大事だなと感じました。
背景には和風のテクスチャが入っていて、ロゴにも入っているので統一感があります。
寿司屋っぽい筆文字のフォントを使用して縦書きで和な印象があります。ネタとシャリが大文字になっており、よりこだわりがあるのも伝わってきます。
-共通箇所（サイトマップ、フッター）
細かいところまで寿司要素が入っています。いくらとかでなく、ツナやコーンなどちょっとマニアックなところが愛着がわきます。
スマホデザイン（レスポンシブ）
LPなどは、スマホファーストで作られており色々なコンテンツが読みやすくなっていました。
下層ページ
それぞれターゲット層に向けたコンテンツに合わせて作られています。
LPで１つ１つに対してこだわってるのが伝わってきます。LPがあるだけでラーメンや、スイーツにも力が入れるのが伝わってきますね。
-こだわりページ
ファーストビューでは写真を大きく使用することで新鮮さ・素材感を感じます。それぞれ「ネタ」「シャリ」などこだわりポイントでは動画が埋め込まれており、
コンテンツの区切り目で濃い色を使用して切り替わりが分かりやすくしながら重くならない印象になってます。波打っている感じが海の粋の良さや新鮮さを連想させます。
切ってるところや〆ているところなど実際店舗で見れない部分も動画で確認できるので安心感もあります。
醤油っていっぱいあってもどれを使っていいかわからなかったので、ネタごとに書いてくれてるのが嬉しいのと、専門性の高く見え上質なイメージも生まれます。
-醤油パッケージ
パッケージにも合うネタが書かれており、お店でも選ぶとき分かりやすくなってました。
-メニューページ
画像で全部出てくるので、分かりやすいです。遅延ローダーなどを入れることで、画像が多かったりページ内リンクがあっても見やすくなっています。
サイドにもメニューが出ており、途中で見るものも変更できます。
突然ですが、ここで3人の好きな寿司ネタを発表！
写真
シズル感のある雰囲気写真と、商品単体の写真で使い分け、分かりやすさと美味しさを兼ね備えていました。
フォント
文字はほぼ画像フォントを使用していました。恐らく勘亭流系統のフォントを使用しており、お寿司屋さん(日本)のイメージをより感じさせてくれました。
日本語：Noto Sans JP(一部)
英語：Noto Sans JP(一部)
フォントのカラー：# B4BFDA
フォントの説明
勘亭流は歌舞伎の文字に使われていたようなうねりのある文字になっています。お寿司屋さんに限らず、居酒屋などでも見かけますね。
カラースキーム分析
リニューアルしたロゴが海を感じさせるデザインになっており、サイトも青をメインに使用していました。ロゴとは違う色味を使うことでサイト全体が明るく、新鮮さも感じられる配色となっていました。
ファビコン
OG画像
タイトル
TOP｜はま寿司｜回転寿司
「はま寿司」のオフィシャルサイトです。一皿一皿を最高の品質で提供することをモットーに、はま寿司のこだわりや多種多様なメニュー、店舗情報を掲載しています。新鮮で美味しいお寿司はぜひはま寿司で！
この記事を書いているメンバーが働いている会社
よかったら見に来てください！
