2021.1-10 デザイン日記#5 レイアウトデザインを考察

こんにちは。今日もデザイン日記書いていきたいと思います。今回は大手回転寿司チェーン店のWebサイト3つを比較していこうと思います。回転寿司チェーン店を選んだ理由は、回転寿司が好きだからです。

今回比較するWebサイト
くら寿司：https://www.kurasushi.co.jp/menu/?area=area0
はま寿司：https://www.hamazushi.com/hamazushi/
スシロー：https://www.akindo-sushiro.co.jp/

レイアウトを比較してみる

今回3つのWebサイトを比較する上で、それぞれのレイアウトの取り方を見ていこうと思います。レイアウトが上手く取れているWebサイトは重要な情報が入ってきやすく、レイアウトの良し悪しはWebサイトの雰囲気の良し悪しにも関係してきます。注目していくポイントは情報の優先順位に沿ってしっかりとレイアウトを取っているか、余白をきちんと取り、広々した印象を与えてくれているかです。

くら寿司

くら寿司はトップページの最上位に大きなスライダーを取り入れ、新着情報などをそこにまとめていました。新着情報を１番の優先事項として画面トップに配置させ、他の要素とのボリューム感の差を生むことによって、Webサイトの流れを上手く作れていました。また要素同士の余白もちょうど良く、全体的に見やすい印象を持ちました。


はま寿司

はま寿司は要素のサイズに差をつけ、同じ要素との余白を狭くすることにより、情報のグループ化が出来ていると感じました。ただ、くら寿司と同じくトップページの最上位にスライダーを採用していますが、横幅いっぱいに画面を表示していないので、くら寿司と比べると少し商品の魅力が視覚的には伝わりにくいとも感じました。

スシロー

スシローは要素のサイズにあまり差がない印象を受けました。また要素同士の余白が狭い為、はま寿司やくら寿司と比べると情報のグループ化が出来ておらず、わかりにくい印象を持ちました。縦のレイアウトを横向きのレイアウトに変えたり、横のレイアウトとの余白を取るなどの工夫をしたら今よりも１つ１つの情報が入ってきやすいWebサイトになると感じました。

個人的感想

今回３つのwebサイトのレイアウトの違いを比較してみて、要素の大きさに差を付けたり、余白の取り方を工夫したりと、伝えたい情報を上手く伝える為のレイアウトデザインの手法がそれぞれのWebサイトに組み込まれていると感じました。その中でもくら寿司のWebサイトは要素同士との大きさの差やコンテンツごとの余白がちょうど良かったりと、他のWebサイトと比べて見やすい印象を持ちました。これからも他のWebサイトでレイアウトや余白違いなどを比較していければ良いなと思います。