1979年生まれ。鳥取県鳥取市出身。プランナーと制作と、たまに実装のお仕事をしています。また、社内トピックスの広報を担当、アカウントの中の人。
俯瞰性と具体性の両立へ
スマホ画面でのウェブサイトのレイアウトは、デザイナーや開発者にとって常に課題となります。スマホの画面は小さいため、適切なレイアウトを構築することが求められます。画面の小ささから生じる制約を克服し、ユーザーに快適な閲覧体験を提供するために、創意工夫が必要です。
ウェブサイトの閲覧は、俯瞰性と具体性の相反する要素が混ざり合っていることでわかりやすくなると考えます。メニュー項目の並びをみるとサイト内に掲載されている情報を俯瞰でイメージできますが、具体的な情報がわかりません。逆に、具体性の高いレイアウトにしすぎると画面内に収まらなくなり俯瞰性がなくなってしまいます。これらの要素をバランスよく組み合わせることが重要です。
縦軸の俯瞰性と横軸の具体性
例えば、商品一覧と、特集一覧と、店舗一覧などのセクションが、それぞれ10件ずつの記事ブロックを並べたいとします。すべてを縦に並べると1画面にまず商品一覧しか見えなくなると思います。ユーザーは商品一覧だけの情報があるページだと思うかもしれません。逆に、商品/特集/店舗それぞれの一覧への誘導ボタンだけが並ぶと、タップしなければラインナップをイメージできません。
1画面内に最低でも2セクション(商品と特集の上のほう)までは見えていると、複数の情報があることが伝わりやすいレイアウトとなります。たくさん上下にスクロールしても1セクションしか見えない場合は他に情報がなさそうと思われるでしょう。
そこでカルーセル表現を使うことで解決させていきます。1セクションのなかの記事ブロックの並びを左右にならべ、画面からはみ出させることで、セクションの縦幅を短く保ちながら(一覧が複数あることを伝えながら)、1セクション内の具体的な記事を複数見せることができます。このように、スマホ画面でのウェブサイトのレイアウトにおいて、俯瞰性と具体性の両立が求められます。

カルーセルの活用メリット
スマホ画面でのウェブサイトのレイアウトにおいて、カルーセルは特に効果的なツールと言えます。カルーセルを活用することで、複数の情報を限られたスペース内で効率的に表示することが可能です。情報の効率的な表示やユーザーの利便性向上に貢献できる表現ですね。
スペースの効率的な利用 | カルーセルを使用することで、1つのセクション内に複数の記事や商品を表示できます。これにより、限られた画面スペースを最大限に活用しながら、ユーザーに豊富な情報を提供することができます。 |
---|---|
ユーザーの興味を引く | カルーセルは自動的にスライドすることができるため、ユーザーの注意を引くのに役立ちます。新着情報やおすすめ商品などを自動的に表示することで、ユーザーの興味を引き付け、サイト内のさまざまなコンテンツにアクセスしてもらいやすくなります。 |
操作の容易さ | カルーセルはスワイプやタップなどの直感的な操作で切り替えることができるため、ユーザーにとって使いやすいインターフェースを提供します。ユーザーは自分のペースで情報を見ることができ、必要な情報にすばやくアクセスできます。 |
EDITOR
- CCO(最高クリエイティブ責任者)
- デザイナー兼プランナー