今回はデザインレイアウトの基本をご紹介します。

デザインのレイアウトで揃っているデザイン、散らばっているデザインでは情報の伝達度が大きく変わってきます。

今回はデザインレイアウトの揃えるという点についての記事です。

スポンサーリンク







悪いデザインレイアウトと良いデザインレイアウト

悪いデザインレイアウトとは、写真や図、文字が散らばっていて、どのように見ればいいのかがわからないようなレイアウトです。

例えばこのような感じです。

<悪いデザインレイアウト>

赤が写真などの画像で、灰色はテキストだとします。

写真はサイズがバラバラで、位置もバラバラです。

テキストも画像からはみ出たりしていて、どの写真にどのテキストが関連しているかがわかりづらいレイアウトです。

 

逆に良いデザインレイアウトとはどのようなレイアウトかというと、

写真のサイズ、テキストの幅や位置が揃った状態です。

例えばこのような感じです。

<良いデザインレイアウト>

このように揃ったデザインレイアウトだと、写真の見る順番、テキストの読む順番がわかりやすく、伝わりやすいデザインになります。

 

では具体的にどのようにして揃えていけばいいのでしょうか?

 

整列させる

写真、テキストの端を整列させ、オブジェクト同士の間隔を揃えましょう。

整列

Adobeデザインソフトには整列という機能が搭載されています。

Illustratorではウインドウの整列にチェックが入っている状態で、ウインドウの中の整列を選択してください。

 

オブジェクトの整列

まず最上段がオブジェクトの整列です。

最上段の一番左から順に

・水平方向左に整列

・水平方向中央に整列

・水平方向右に整列

・垂直方向上に整列

・垂直方向中央に整列

・垂直方向下に整列

こちらの6種類が整列の機能です。

指定の位置へ整列されます。

オブジェクトの端を揃えるときに使用します。

 

オブジェクトの分布

続いて中央段がオブジェクトの分布です。

・垂直方向上に分布

・垂直方向中央に分布

・垂直方向下に分布

・水平方向左に分布

・水平方向中央に分布

・水平方向右に分布

こちらがオブジェクトの分布です。

 

等間隔に分布

最後に最下段の等間隔に分布です。

Illustratorでの分布はこの等間隔に分布をしようすることが多いです。

・垂直方向に等間隔に分布

・水平方向に等間隔に分布

等間隔に分布させることが出来ます。

 

定規、ガイドを利用する

Illustratorの場合は

「表示」>「定規」>「定規を表示」

で定規を表示します。

定規の上で左クリックしながら、アートボードの方にドラッグすると、グリッドを引くことが可能です。

 

まず最初に長方形ツールで空白部分(マージン)を決めて、長方形の端をめがけてグリッドを引くと綺麗にガイド作成が可能です。

 

揃ったデザインはとても視認性が高いデザインとなります。

整列、ガイドを意識してレイアウトを行ってみてください。