[ウェブデザインの基礎] レイアウト

ウェブデザインの構築 レイアウト

前回は手書きデザインラフのチェックポイントについて解説し、課題の提出を行いました。
未提出の人はできるだけ早く提出してくださいね。

今回は多くの人が悩むであろうレイアウトの技術をレクチャーしていきたいと思います。
皆がなんとなく考えている「レイアウト」も意味や役割をしっかり持ったものです。
そこを深掘りすることによってデザインレイアウトのセオリーを頭に落とし込んでいきましょう。

そもそもレイアウトとは一体何をさしているのでしょうか??
レイアウトはなんのために必要なのでしょうか??
レイアウトがもたらす効果にはどういったものがあるのでしょうか?

レイアウトは「何をどこにどうやって配置するかの設計」のこと

レイアウトの持つ意味、それはデザインの目的対象を明確にし、より適正かつ効果的にするために、
何をどこにどうやって配置するかを設計することを指します。
美しさをより向上させるバランスのよい配置を行うことが「レイアウト」だと考えましょう。

ただ「何をどこにどうやって配置するか」の正解は、時と場合によってさまざまです。
文章量が増えたり、コンテンツの順番が変わったり、横長の画像を縦長の画像に差し替えたり。
全体を完璧なバランスで組みあげたデザインも、こうした少しの変化によって崩れていきます。

大事なのは、いつ何時も伝えたい相手に伝えたい内容を違和感を与えずに伝えること。
そのために行う非常に重要な工程のひとつがデザインレイアウトだと理解しましょう。

レイアウトがそんなに重要な工程なら、ただ雑然と配置するようなことはあり得ないので、
もちろん手法やコツ、ルールなどがあるはずですよね??次の項目からはそれを紹介します。

レイアウトの手法・コツ① 情報の主役を決め優先順位をつける

まず最重要なのが、情報の優先順位を決めて優先させるべき重要度の高いものから配置していくことです。
そして、全体のバランスを何度も何度も確認しながら地道に調整していきます。
この作業こそが最初にこなす最重要工程です。デザインは準備が8割ですからね。

バナーデザインで優先順位の考え方もデザインスキルも身につく

ウェブページというよりバナーデザインに関してのものですが、優先順位に関してとてもいい記事を見つけました。

視線を引きつけるバナーデザインのポイント | キオミルブログ

バナーデザインは限られたスペースに伝えたい情報を詰め込まなければいけないため、
ウェブページの全体のデザインと比べるとより難易度が高くなります。
そして、情報の優先順位を決めないままでは制作できないので必然的に決めようとします。

でもそれだけにデザイン力は自然とつきます。
強弱の付け方や表現の広げ方、そしてバランスの取り方など、
全体的なデザインスキルの向上に最も適していると思います。

デザインスキルを向上したい人は、何でもいいから商品やサービスを取り上げて、
バナーやPOP、のぼりのデザインなんかを1日5本ほど1週間毎日作り続けてみるとわかってくると思います。
ついでに優先順位の考え方も身につくのでむしろ効率的ですよね。

判断基準は「機能的か機能的でないか」

機能的でないレイアウトを端的に言えば「伝わらない」もの。
さまざまな情報を盛り込んで、どこもこれも目立たせてはいるけど、
結局何が言いたいのかわからないデザインは機能的とは言えません。

対して機能的なレイアウトは「きちんと伝わる」もののこと。
優先されるべき正しい順番で的確に伝えられ「主役がはっきりとしていて配役が的確」な状態でしょうか。

レイアウトの手法・コツ② 視線の誘導を考える

次に重要なのは、視線の誘導を考えて配置場所を決めることです。
人はページ内のコンテンツを読む際に、多くの場合、特定の軌跡を描くように読んでいます。

ここで、アメリカの工学博士でWebサイトのユーザビリティに関する第一人者、
ヤコブ・ニールセン氏が2006年に発表した、とある研究結果の翻訳版の内容を見てみましょう。

ウェブページの読み方には一貫性がある

ユーザーの視線は、まず水平方向に動く。コンテンツの上部を、横に読み進むのが通例だ。この一つ目の要素が“F”の上の横棒を形作る。

次に、少しページを下ってから、水平方向に二度目の動きを見せる。最初よりも少し短い距離で視線が止まるのが典型的だ。これで、“F”の下の横棒が描かれる。

最後に、ユーザーの視線はコンテンツの左端部分を縦に動く。かなりゆっくりと上から順に視線を降ろしていく場合が多く、アイトラッキング結果を示すヒートマップには、隙間のない実線として現れてくる。素早く視線を降ろしていった場合には、ヒートマップに斑点が並ぶ。この最後の要素が、“F”の縦の棒を形成する。

参考:Webコンテンツを読む視線の軌跡は“F”を描く – U-Site

解説から分かる通り、ウェブサイトの視線誘導はFの形状を描くように読まれるということ。

配置のヒントが見えてくる

これを知れば、レイアウトを行う上でのそれぞれの配置のヒントが見えてきますね。

ユーザーが、あなたの書いたテキストをじっくりと読むことはない。一語一語を丁寧に読んではくれないのだ。ページを余すところなく読むことは稀であり、何か買い物をしようとしていて、販売店の情報をまず集めているような場合には特にあり得ない。もちろん、細部まで読んでくれる読者もいる。しかし、大多数はそうではない。

冒頭2つ目の段落までに、重要な情報を盛り込まなければならない。2段落目までならば、ユーザーが読んでくれると期待できる。もちろん、2段落目よりも1段落目の方が、読んでもらえる可能性はさらに上がるだろう。

分かりやすい小見出しを付け、段落や箇条書きの冒頭にも内容を端的に伝えられる言葉や表現を用いること。とにかく、ユーザーが“F”の縦棒を描く際に、視線の運びに困らないような目印を置くことだ。単語も3つ目になると、先の2つよりも読んでもらえる可能性が低くなる。

参考:Webコンテンツを読む視線の軌跡は“F”を描く – U-Site

ちょっとしたテクニックの紹介をしましょう。

優先度をわかりやすくする4つのテクニック

• F型の1段目、できれば起点に最も重要な要素を配置
• 優先すべきものを大きくする
• 優先すべきものの色を変える
• あえて余白を作って存在を際立たせる

これだけのことですが、レイアウトを行う際のデザインルールを決める上で非常に有効です。
特にデザインワークが初心者の頃は、先人の方々が作ってくださったこういったテクニックを参考にするのがベスト。

うまく活用できれば新人さんがよく言う「わからないことがわからない」という残念体験はしなくてすみますね。

客観的に見るためにも有効

デザインの制作者はどうしても成果物を主観的に見てしまう傾向があります。
そりゃあそうだよ。苦労して作った自分の作品だもの。可愛いよそりゃね。

立場上デザイナーの味方だからある意味では仕方がないと思っているんですが、
あまりに主観的になってしまうと誤った判断のまま制作を進める可能性が高く、
クオリティの低下につながってしまう恐れもあるので、あくまでも客観的に見る必要があります。

視線の誘導を考えることは、ユーザーの立場で考える行為そのものなので、
ノリノリで制作活動をしていても、我に返って成果物を客観的に見るためにも有効です。

レイアウトの手法・コツ③ 余白(ホワイトスペース)

余白はコンテンツの間で生じてしまったスペースだと思われがちですが、むしろ逆です。
デザイン上、意図的に生じさせるべき非常に重要なアイテムだと考えてください。
なぜならテクニック次第で以下のような効果を生み出すことができるからです。

余白の効果① 可読性の向上

デザイン上で最も重要なコンテンツは文字です。
文字と文字の間のスペース(文字間)や行ごとのスペース(行間)などを調整し、
文字コンテンツの可読性(読みやすさ)を向上することができます。

そして、文字間・行間と合わせ、段落や改行の余白の使い方も重要です。

余白の効果② 情報の間引き

情報には種類があり、正しく整理を行わないと何がどこにあるのかがわからなくなります。
そのためにはカテゴライズしグループ化された状態でページ上に表示されなければいけません。
グループとグループの間に余白を設けることで目的の情報を見つけやすくなります。

例:主な事業内容 – 龍弥デザイン 岡山 ホームページ制作
(事業ごとにスペースを設けています。)

余白の効果③ 視線の誘導を作る

前項目で出てきた「視線の誘導」ですが、
「情報の間引き」で作られたグループ内で順番をもって読ませたいコンテンツがある場合、
上下の余白よりも左右の余白を小さくすることで読む順番を意図的に制御することができます。

余白の効果④ イメージや方向性を操ることができる

例えば高級感やモダン・シックなデザインの余白は大きくとられ、
ポップでにぎやかなデザインになると余白は小さくなっているはずです。

これは重要なイメージづけであり、サイト全体で調整することによって、
ユーザーに与えるイメージや方向性を決定づけることができる余白が持つ最大の武器です。

余白が大きいと余裕があり上品なイメージを作ることができます。
参考:座禅を体験 | 自分と向き合う体験型の宿坊 望月庵 | ZEN&BED

余白が小さいとにぎやかで楽しいイメージを作ることができます。
参考:もぐし海のこども園|熊本県天草市牛深町の保育園

どれくらいの余白が適切か

余白を活用することでさまざまな効果を生み出すことができますが、
デザイン初心者の間はどれくらいの余白が適切なのかがわからないですよね。

私ももちろんそうでした。
ただ私の場合は毎日かなりの量のウェブサイトを見ていて、テイストやパターン別での平均値がなんとなく頭にあり、
いつのまにか自分の基準ができていて、プロのデザインワークとの比較がしやすかったのが大きかったかなと思います。

次のステップは、1ページでも1コンテンツでもいいからプロのデザインの余白の量がどれくらいか調べ、
同じ量の余白を自分のデザインに当て、余白量を増やしたり減らしたりして色々と試してみましょう。
これも立派な自分だけの引き出しです。

ただでさえ正解のわかりづらい性質を持つ「デザイン」の「何が正解か」を求めるなら、
第03回講義のような色々な種類のサイトを毎日毎日チェックするのがおすすめですよ。

レイアウトの手法・コツ④ 4つの基本的なルール

次に、レイアウトを組む上で最も基本的な4つのルールを説明します。

ウェブデザインレイアウトを考える時、何も考えずにただ闇雲に組んでみても、
雑然としたデザインレイアウトしか組めなくなってしまいます。

デザインレイアウトをあまりに難しく感じてしまうために組む人たちの苦手意識を増幅させ、
結果的にデザイン自体を諦めさせてしまう場合もあります。

実はデザインレイアウトにもルールがあります。
そのルールを頭に入れた上で、デザインレイアウトを組んでみましょう。

経験が増えれば、

デザインレイアウトのルールを守ること。
今度は守ったルールを客観的に見てみること。
そして、客観的に見て、あえてルール破ってみること。

そういったことができてくるはずです。

近接

近接とは、関連性の高い情報は配置を近づけ、逆に関連性の低い情報は配置を遠ざけるというもの。

人はウェブページを見たときに、
近くにあるものは関連性が高く、遠くにあるものは関連性が低い。と無意識に思ってしまうものです。

下の画像を見てみましょう。

サムネイル画像とキャプション(画像を説明するテキスト)がありますね。
キャプションを読んでみるとキャプションがサムネイル画像の説明だということがわかりますが、
上段の画像のものなのか、下段の画像のものなのかが明確ではなく、とてもわかりづらいですね。

こういった場合は「近接」をうまく使いましょう。
下の画像を見てみましょう。

キャプションがサムネイル画像の近くに配置され、とてもわかりやすくグルーピングされていますね。
先ほどの画像とこの画像、違いはなんでしょう?

違いは一つです。関連性の高いものを近づけて配置しただけ。
もっと具体的に言うと、キャプションを画像に近づけただけです。
近接の法則を守るだけでこれだけ違います。

近接に関しての参考になる解説がありますので見てみましょう。

参考:エンジニアのためのWebデザイン基礎の基礎(1):重要な情報は左上に――効果的なデザインに必要な4つの原則 – @IT

整列

整列の目的は、ユーザーの視線をバラバラにしないために統一感を生み、
「何がどこにあって何を見ればいいのか」を、無意識のうちに判断できるようにしてあげることです。

上端揃え、下端揃え、中央揃え、左揃え、右揃え・・・揃え方は様々ありますが、
いずれかの方法でページ内の要素どうしを揃えなければいけません。

効果的な整列のためのコツがあります。
それが「見えない線を意識すること」です。

Photoshopのグリッド線が一番わかりやすいと思いますが、
キャンバスにグリッド線を引き、線に要素を整列すれば、
美しく統一感のあるデザインの近道になります。

ではまず下の画像を見てみましょう。

画像とキャプションを左揃え、テキストを中央揃えにしているために統一感がありません。
見ていて視線がバラバラになってしまい、とてもわかりにくいですね。

では次の画像を見てみましょう。

全ての要素を見えない線を基準に左揃えにしたことで統一感が生まれ、
「近接の法則」合わせて使うことで全体がとても美しく見やすくなりました。

参考:エンジニアのためのWebデザイン基礎の基礎(2):“見えない”線を“見せる”グリッドシステム――Webデザインの4原則その2「整列」 – @IT

コントラスト

テキストや画像も含め、サイズや色などの強弱をつけて差を生み出すことを言います。
コントラストがつけば、タイトルやサブタイトル、本文などの区別がつき、
読みやすさや見やすさを生むことができます。

下の画像を見てみましょう。

ここにはタイトル・サブタイトル・本文があります。
けどどれがタイトルでどれがサブタイトルでどれが本文なのか・・・
タイトルと本文に差がないためこの状態では判別が難しいですね。

次に下の画像を見てみましょう。

タイトル・サブタイトル・本文に、フォントサイズ(文字の大きさ)・フォントウェイト(文字の太さ)・色などの差をつけました。それぞれの区分が明確になり、非常に見やすくなります。

参考:エンジニアのためのWebデザイン基礎の基礎(4):情報のレベルをコントロールする――Webデザインの4原則その4「コントラスト」 – @IT

反復

反復の法則とは、「レイアウトなどのデザインの要素を繰り返して使う」ことです。

ユーザーはサイトを訪れ、無意識にサイトのルールを頭に入れながらサイト内を見てまわります。
「どれだけ早く慣れさせるか」というのもデザインの大切な役割なので、
一貫性を持ったレイアウトにすることが重要です。

画像で見てみましょう。下の画像を見てみてください。

まずこの一覧は商品一覧です。
一覧にあるものは、全て同じフォーマットの商品詳細ページにリンクするようにしています。
つまり、商品は違えども、全て同じレベルの内容で同じ機能を持つ、ということです。

それを頭に入れた上で「商品の一覧」として見てみると、
フォントの書体やサイズも違う・・・さらに画像や文字もがあったり無かったり・・・
この状態では全く一貫性を保たずに、同じ機能を持ってるとはわかりづらいですね。

では次に下の画像を見てみてください。

今度は全て同じレイアウト、書体、画像もあり、一貫性のあるルールの中でデザインを行っています。
ユーザーは「選択」をすればいいだけなので、とてもスムーズに次の行動へ移行することができます。

またWebサイトにはページが複数存在する場合が多いですよね。
ページが複数存在するということは、ナビゲーションなどの機能が備わってることがほとんどだと思いますが、
例えばページごとに全然違うデザインのナビゲーションだとどうでしょう??

違うページを開くたびに考えなくてはならず、戸惑いながらページを見ることになります。
戸惑いを与えている時点でそもそも購入やお問い合わせに結びつくわけがないですよね。

参考:エンジニアのためのWebデザイン基礎の基礎(3):デザインで使い勝手を向上させる――Webデザインの4原則その3「反復」 – @IT