情報整理から視線誘導まで、レイアウトに関するテクニックがこれでよく分かるデザイン書 -知りたいレイアウトデザイン
Post on:2023年9月29日
※本ページは、アフィリエイト広告を利用しています。
Webサイトやスマホアプリをはじめ、バナー、カード、雑誌やカタログなどで、情報を分かりやすく整理し、的確に伝えるためにもっとも重要なことはレイアウトを工夫することです。
テキストや画像、図版などのさまざまな情報の要素をどのようにデザインして配置するか、レイアウトデザインのルールとテクニックを学べ、そしてアイデアも満載の解説書を紹介します。

本書は「Second Edition」とある通り、2017年に刊行された「知りたいレイアウトデザイン」の第2版になります。前書では紙媒体のレイアウトが中心でしたが、第2版では紙媒体だけでなく、Webサイトやスマホアプリやバナーなどデジタル媒体のレイアウトが数多く解説されています。実例の数はおよそ3倍と大幅増量(担当者様より)です。
本書は今週、発売されたばかり!
Kindle版も同時発売されています!
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は3章構成、レイアウトに関する基礎知識をはじめ、実践ですぐに使えるレイアウトのルール、Webサイトやスマホアプリなどにおけるさまざまなレイアウトのテクニックを学べます。
第1章は「レイアウトの基本」として、伝わるレイアウトに関する基礎知識です。

本書におけるレイアウトは、情報を分かりやすく整理し、的確に伝わることが大前提となっています。「伝わる」ために重要なのは「誰に?」「何を?」「どうやって?」伝えるのかです。効果的に伝えるには、これらを明確にしておく必要があり、その目的にあった伝え方があります。

扱われているレイアウトには、Webサイトやスマホアプリをはじめ、バナー、カード、紙媒体などがあります。

このレイアウトのパターンは、後半の第3章「レイアウトのアイデア」の各ページにも豊富に掲載されています。

伝わるには、情報を分かりやすくする判読性、ビジュアルを見やすくする視認性、文字を読みやすくする可読性、の3つがポイントになります。
第2章では、「レイアウトのルール」としてこの3つのポイントを実現するレイアウトの基本となるルールを学びます。

判読性は、ビジターにコンテンツの内容や意味を正確に届けるためにどのようなレイアウトにすればよいのか。近接や余白を使用した「グループ化」、情報や要素が多い場合は区切り線や囲み線を使った「ライン」、色や形に変化をつけた「コントラスト」などが効果的です。

基本となるレイアウトのルールは8つほどあり、それぞれ4-6ページ、実践的なレイアウトを見ながらどのように使用するのか解説されています。

最後の第3章は、5つのカテゴリにさまざまなレイアウトのテクニックとアイデア。この章のボリュームがもっとも多く、本書の半分以上を占めています。
1つ目のカテゴリは「法則」、各カテゴリごとに5-10個くらいの項目があります。「法則」には、グリッド、反復、シンメトリー、対比、アクセントなどあります。

各項目は4ページで、基本となるレイアウトのパターン、サンプルを見ながらの解説、レイアウトのポイント、ワンランクUPなデザインテクニックなどが解説されています。

サンプルのレイアウトは、この第2版でWebデザインやスマホアプリがかなり増えました。「伝わる」ために重要な「誰に?」「何を?」「どうやって?」を踏まえて、どのようにレイアウトしていくのかがよく分かります。

他のページもざっと見てましょう。左上から時計回りに「時系列に並べて誘導する」「角度をつけてスピード感を出す」「カラーでアクセントをつける」「罫線で区切る」です。レイアウトのテクニックとアイデアは、5つのカテゴリに33項目あります。

同じコンテンツ、同じレイアウトでも、書体に何を使用するかで印象は大きく変わります。「誰に?」「何を?」「どうやって?」の各目的にあった書体の選び方があります。

「誰に?」のターゲットに合わせたレイアウトテクニックもあります。シニアに向けたデザイン、キッズ向けのデザイン、女性向けのデザイン、男性向けのデザインなど、デザインで注意すべきポイントや効果的なテクニックが解説されています。
知りたいレイアウトデザインの目次

知りたいレイアウトデザインの目次

知りたいレイアウトデザインの目次
Webサイトやスマホアプリをはじめとする、レイアウトのルールとテクニックがよく分かる一冊でした。コンテンツの情報整理から視線誘導にまつわるテクニックやルールなど、実践で役立つアイデアが満載です。
献本の御礼
最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors