Webデザイン、これからどうなるの?(全10回)

1カラムレイアウトはもはや王道! Webサイトデザインの基本を解説

シングルカラムのWebデザインって、2カラムとどう違うの? 特徴やメリットは? モバイルファーストなサイト制作が求められる今の時代、ワンスクロールで見ることのできるシングルページレイアウトは主流になっています。ワンカラムだからこそできるコンテンツ設計や、ハンバーガーボタンの標準化など、日々変わりゆくウェブサイトのこれからを大解説。(第3回)
Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来

この記事は、書籍『Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来』の一部をWeb担向けに特別にオンラインで公開しているものです。

Chapter 2レイアウトNo. 11シングルカラムシングルカラムレイアウト

3行で理解!

モバイルを中心にあらゆるWeb閲覧環境でも閲覧しやすい標準形
環境によるデザインの差を抑えること
閲覧者はリニアに情報に触れるため情報設計が重要

すべての要素を縦に積んでいくシングルカラムレイアウトは、HTML構造の原則としても、情報設計の面としても標準的なレイアウトだ。モバイル環境への対応が最優先と言える現代のWeb環境の基礎となるレイアウトである。

どんな画面サイズにも適応できる。
http://transbooks.center/

「モバイルファースト」時代の標準形

モバイルファーストなWebサイト制作が叫ばれて久しい昨今、今までPCを中心としたWebサイト制作手法も、スマートフォンやタブレットなどモバイル環境を中心としたものに移り変わりました。PC向けに制作されていたマルチカラムレイアウトをスマートフォンで閲覧する際に変形するのではなく、スマートフォンでの閲覧を前提としてPCで見ても差がないようにするということが、現在のレイアウトの主流です図1図2

図1従来はPCからスマートフォンへ。
図2これからはスマートフォンからPCへ。

※記事初出の時点で図1に誤りがあり差し替えました。

そのような背景もあり、現在のWebデザインのレイアウトの中心はシングルカラムレイアウトに移行しています。カラムの再配置などを考慮する必要がないため、レスポンシブデザインを組み立てやすく、閲覧環境によるデザインの差を少なくすることができます。

電子書籍をテーマにしたイベント「TRANS BOOKS」は一見通常のシングルカラムサイトですが、時間とともに表示領域が縮小し、最終的にはスマートフォンと同じサイズにまで小さくなります。電子書籍ならではの自由度を示す演出ですが、シングルカラムレイアウトの強度を示す非常に良い例ではないでしょうか。

スクロール内で伝えるリニアな情報設計

コンテンツの面からも、シングルカラムレイアウトが好まれる状況が増えています。情報をページ毎に分割するのではなく、1ページにまとめるほうが好まれます。

タッチパネルやトラックパッドの普及などにより、スクロールに対するコストが減少し、情報をページで分割してリンククリックによる遷移させるより、1ページに集約されているほうが閲覧しやすくなった結果と言えるでしょう。

情報をひとつの文脈の中で伝えることができるのも、シングルカラムレイアウトの有利な点です。余計な目移りを考えずに、どのように情報を与えるかという設計がしやすいのです。

例えばアプリのランディングページのように、「注目を集めるビジュアル→特徴的な機能の説明→利用者の声→ダウンロードボタン」といった段階を踏んだ情報設計を1ページで行う際に、シングルカラムレイアウトは有効に機能します。

「BALMUDA The Toaster」図3では、印象的なヒーローイメージから商品の概要、機能や製品特徴の説明と階層下へのナビゲーション、使用者のレビュー、そして購入ボタンや展示販売店を探すボタンなどを含めたコールトゥアクション…と、スクロールの中に閲覧者に与えたい情報と行動のための要素が詰め込まれています。ユーザーの情報理解とそれに伴う行動が、スクロールに連動しているのです。

図3製品紹介から購入まで1スクロールで。
https://www.balmuda.com/jp/toaster/

コンテンツを際立たせるシングルカラム

マルチカラムレイアウトがこれまでもたらしてきたものが、さまざまなコンテンツへの回遊性だとすれば、シングルカラムレイアウトがもたらすものはひとつのコンテンツへの集中力と言えるでしょう。

ひとつのコンテンツに対して、ディスプレイのサイズを最大限に活用できるシングルカラムレイアウトは、「画面いっぱいの写真」や「大きな見出し」「大胆なホワイトスペース」などの大きなオブジェクトを配置しやすく、閲覧者の注目をコントロールすることができます。

情報を詰め込んでいくマルチカラムレイアウトよりも、余裕を持ったコンテンツ設計が求められます。

「塩竈の藻塩」図4は、これでもかと言うほど、シズル感のある写真を連続して配置しています。シンプルながら情報の密度に余裕を持たせ、商品のイメージや世界観を大きな画像や見出しによって構築しています。

図4余裕を持たせたコンテンツ設計。
https://mosio.co.jp/

グリッドでレイアウトにリズムを作る

シングルカラムレイアウトでは情報を縦に積むことが基本ですが、そればかりでは単調なレイアウトになりがちです。メイン領域をグリッドで分割し、レイアウトに幅を持たせてみましょう。

「電通サイエンスジャム」図5は、冒頭から大きな見出しで注目を集め、メッセージに集中させています。ナビゲーションや他の情報に画面の横幅を取られることがない分、大胆なレイアウトが可能になっています。シングルカラムレイアウトはそのまま要素を置くだけでは単調な見た目になってしまうため、要素をグリッド毎にずらすことでリズムを作っています。

図5大胆なレイアウトでリズムを作る。
http://www.dentsusciencejam.com/

「201°」図6もグリッドを活用した例です。メイン領域を2分割や3分割したグリッドで、本文とビジュアルイメージを織り込みながら、コンテンツを読み進められるようにしています。イメージの横幅の違い(画面に対して1/1、1/2、1/3)でセクションを区切ることもできるでしょう。

図62分割、3分割のグリッドで区切る。
https://201d.jp/

ハンバーガーボタンが標準になりつつある

Webサイトのメニューをひとつのボタンに押し込める手法がハンバーガーボタンです。ボタンのデザインに三本線が用いられることが多く、その見た目からハンバーガーと呼ばれるようになりました。

画面領域が狭いモバイル環境において、ボリュームのあるメニューを実装する際に生まれたデザイン手法ですが、見慣れないデザインのボタンが重要なナビゲーションを担うことや、1クリックしないと一覧できないことなどに対して疑問視されていたときもありました。しかし現在では、幅広いサイトやアプリケーションで実装されたことにより、半ば標準化した存在となっています。

従来は、PCサイトで展開されて表示されたメニューを、モバイルサイトではハンバーガーボタンに置き換えることがほとんどでしたが図7、近年ではPC/モバイルどちらもハンバーガーボタンでメニューを実装するケースも増えています。

図7_1PCでの表示。
http://www.apple.com/
図7_2スマートフォン表示時にメニューがハンバーガーボタンに。
図7_3ボタンを押すとメニューが表示。

ハンバーガーボタンが広く浸透したことも一因でしょうが、誘導したいページへのリンクはメイン領域でカバーしていることがほとんどであるので、わざわざメニューを表示しなくてもいいのではないかという考えも含まれているのではないでしょうか。設計しているWebサイトの階層深度や閲覧者の行動も含め、ハンバーガーボタンの役割を考える必要があるでしょう。

Step Up

viewport基準で指定できるCSSプロパティ

変幻自在な画面サイズや画面比率に対応するために利用できるCSSプロパティがvw、vh、vmax、vminです。viewport(表示領域)に対して割合でサイズ指定することが可能です。例えば、width: 70vw;はviewportの70%の幅、という意味です。

単位意味
vwviewportの幅
vhviewportの高さ
vminviewportの幅か高さの値が小さい方
vmaxviewportの幅か高さの値が大きい方

表示領域との比率でサイズを指定できるのは強力だが、状況によって極端なサイズになる可能性もあるため注意。

  • 著者:森本友理、鈴木慶太朗、福岡 陽、三宅太門 共著
  • 価格:2,000円+税
  • ISBN:978-4-8443-6730-7
  • 発行:エムディエヌコーポレーション

常に進化し続けるWebデザインの「最新」と「これから」がわかる。新しい手法の意義と効果を知る

本書は、「UI」「レイアウト」「グラフィック」「タイポグラフィ」「配色」の5つをテーマに、さまざまな手法で作られた実例とその意義・効果を知ることで、Webデザインの最前線とこれからのデザイントレンドを一望できる内容になっています。

各分野の第一線で活躍するクリエイターや識者が、「いまのWebデザイン」に対する独自の意見や見解を交えた「オピニオンコラム」も掲載。Webの制作・発注に関わるすべての人々、そしてグラフィックなど他のデザインに携わる方にも必ず役立つ一冊です。

用語集
CSS / HTML / Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来 / クロール / コールトゥアクション / スマートフォン / ダウンロード / ナビゲーション / リンク
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]