特別な才能や感性はあったらうれしいですが、レイアウトには基本的なパターンや構成方法があるので、パズルのように組み合わせてレイアウトしていけます。
まずは、基本的なパターンを覚えて真似してみることからです。
レイアウトの表情をつくる基本的な流れ
レイアウトの枠組みは「要素」の組み合わせによって作成され、要素は大きく分けて「文字」「余白」「グリッド」「イメージ」「配色」があります。
| 文字 | 文字の選択をし、文字組み（文字の整列、字間など）、ジャンプ率（文字やコントラストの大小比）を調整。 |
| 余白 | 版面率、ホワイトスペースを調整。 ＊余白（ホワイトスペース）は、紙面や画面の文字が置かれていないスペースのことで、版面は紙面が画面の中で文字、本文、画像などをレイアウトする範囲です（版面率は範囲の割合）。 |
| グリッド | グリッド拘束率は、グリッド線に対して、写真や文字などがどの程度拘束されているかの割合。 グリッドに正確であるほど「グリッド拘束率」が高く、グリッドに不正確であるほど「グリッド拘束率」は低い。 |
| イメージ | 視覚度は文字以外の写真やイラストなどの要素が与える視覚的な強さの度合い。ジャンプ率（文字やコントラストの大小比）を調整。 ＊一般的には写真はイラストよりも視覚度が低い) |
| 配色 | イメージに合った配色を行う。 |
文字
文字の選択をし、文字組み（文字の整列、字間など）、ジャンプ率（文字の大小比）を調整します。
【ジャンプ率】
「文字」「イメージ（写真やイラスト）」「色」の大きさやコントラストの大小の比率のことで、一般的にジャンプ率が高いと要素間のコントラストが高まりメリハリがきいた活気あるものになる。
逆に低いと要素間のコントラストが弱まり落ち着いたものになります。
コントラスト：一般的に「対比」という意味で明度差を指すが、レイアウトではオブジェクト要素の強弱を変えて対比させることもコントラストと呼ばれる。
〔同一カラーの文字での比較〕
左はジャンプ率を低めの比率、右はジャンプ率を高めの比率。
〔写真のジャンプ率の比較〕
左はジャンプ率を低め、右はジャンプ率が高めの写真。
〔色によってのジャンプ率の比較〕
明度や彩度を変えることでもコントラストを高めたり弱めたりできます。
文字と背景との明度差を高くすればコントラストが生まれ「視認性」が高まり、明度差を与えると一般的に濃い色に視線が集まります。
また、赤や黄色の色相は、注意や警告を表し「誘目性」が高い色として利用されています。
余白
余白（ホワイトスペース）は、紙面や画面の文字が置かれていないスペースのことで、版面は紙面や画面の中で文字、本文、画像などをレイアウトする範囲です。
版面率は、誌面や画面全体に対してどれくらい文字、本文、画像などの面積が占めているかの割合（版面率は「版面」の範囲の割合）です。余白（ホワイトスペース）が多いと版面率が低く、少ないと版面率が高いとされます。
グリッド拘束率
グリッド拘束率は、グリッド線（レイアウトを補助してくれる線）に対して、写真や文字などがどの程度拘束されているかの割合のことです。
グリッド線から離れずに正確であるほど「グリッド拘束率」が高く、逆にグリッ線から離れて不正確であるほど「グリッド拘束率」は低いとされます。
ひとまとめで「グリッド」と説明していますが、細かく分けると「三分割法」「対角線」「三角系」「黄金比」、全てを含んだ「グリッドシステム」などのレイアウトを補助する線があります。
グリッド
縦横に均等な格子状の線を引く方法。升目に沿って配置すると規則正しく整列できます。
| メリット | 効果 |
| ・整然と並べるレイアウトが作業がしやすくなる ・写真を角版で統一し、グリッドに合わせるとわかりやすい ・全体が落ち着いた印象のデザインで、読みやすくなる | ・角版をグリッドに沿って規則正しく並べると、連続したリズムが生まれる ・時系列で異なるイメージを複数連続して並べると、ストーリー性が生まれる |
三分割法
幅と高さ、それぞれが均等に三等分する線を引く方法。交差部分を基準に配置を考える。
対角線
４５度で交差する線を引く方法。線、交差点を基準に配置、奥行を表現できる。
三角系
対角線に対し別の頂点から垂直に線を引く方法。三角形は安定感のある印象にもなる。
グリッドシステム
「黄金比」「三分割法」「グリッド」「対角線」「三角形」などを組み合わせ、規則的な格子状の縦横線や縦横の中心線や対角線の補助線を使いその補助線に沿って構成する方法もある。
グリッドの四角に写真を並べた例と対角線のグリッドに文字やオブジェクトを配置した例。
イメージ
テーマやコンセプトに合わせてイメージ（写真やイラスト）を選択します。選択するとき「視覚度」を意識して選択していきましょう。
視覚度とは文字以外の写真やイラストなどの要素が与える視覚的な強さの度合いとなります。
視覚度の強弱は、ほぼ「訴求力」に等しく一般的には写真よりイラストの方が視覚度が強いとされます。イメージを選択するとき訴求力の強弱は、一般的に図のようになっています。
配色
テーマに沿った配色を考えます。
例えば「新入生」がテーマなら「春」をイメージできるピンクや緑がふさわしく思えます。
また、配色を選択するさい類似した色どうしを組み合わせるとイメージしやすく、反対色を組み合わせると派手、カラフルな印象になります。
色については以下の項目から学習できます。
文字情報の整理と揃え方
文字情報だけに限りませんが、それぞれの要素を見やすくするためまずは要素を「整列（整理）」させることが大事になります。
次に、整列させた要素を順に見てもらうための視線誘導が必要なので「ジャンプ率」を変化させ「視認性」「誘目性」を調整します。
さらに、見やすくするため「コントラスト」を与えメリハリをつけ、最後に、「装飾」でリズムや動きなどを与えると活気や面白さが演出していけます。
図は文字情報を見やすく整理した例です。
基本的な揃え方
情報を整理する基本的な揃え方は「中央揃え」「左端揃え」「右端揃え」「縦書き中央/上下端揃え」「両端揃え」などがあります。
【中央揃え】
中央に揃えるシンメトリー構図。シンメトリー（左右対称）は安定感や優雅で貴重高い印象になります。
＊シンメトリーの逆は「アシンメトリー（左右非対称）」
【左端揃え】
左端のラインに揃えます。文の堅さを和らげる印象です。
【右端揃え】
右端に合わせて揃える方法です。デザイン的な印象になります。
【縦書き中央/上下端揃え】
【両端揃え】
左右、上下の両端に揃える方法です。整然とした印象を感じます。
レイアウトパターン例
レイアウトのパターン例の紹介です。
 | 「中央揃え」 |
 | 「上端揃え」 |
 | 「右端揃え」 |
 | 「左端揃え」 |
 | 「垂直軸を基準」 |
 | 「水平軸を基準」 |
 | 「斜めの軸を基準」 |
 | 「放射線を基準」 |
まとめ
レイアウトは感性や才能的なものだけというわけではありません。
基本的な要素をまとめる手法や方法があります。最初はむずかしく感じるかもしれませんが、真似ながらいろいろと試していくと感覚がつかめてきます。