00:00
こんにちは、フリーランスデザイナーのちふねこです。今日は、分割レイアウトっていうのをテーマに、いろいろお話ししたいなと思います。
まずタイトルにある、図やグラフは左側に配置した方が伝わりやすいっていう内容について、まず簡単に結論というか、触れておこうと思うんですけど、
この図やグラフは左側に配置した方が伝わりやすいっていう話を皆さんは聞いたことがあるでしょうか。
私は開催時代に上司から教わったんですけど、まあ諸説あるというか厳密には個人差はあるんですけど、
要はその、なんで左側に図やグラフを置いた方が伝わりやすいかっていうと、右脳で処理しやすいからなんですよね。
一般的に右脳はイラストとか画像とかイメージ的なものを処理しやすい脳みそって言われていて、
で右脳が処理してるのって左側の情報だったりするんですよね。
視界においては厳密には視界の中央部分は右脳でも左脳でも処理してるんですけど、左端の方に行くと右脳でしか見えてない部分もあって、
なのでその左側にはなるべくイラストとか右脳で処理しやすいものを配置した方がわかりやすいよねっていうのが今日のタイトルで、
逆に左脳ではテキスト情報とか、なんか論理的に考えるもの、計算の情報だったりとかを処理しやすいのが左脳なので、
右、視界の右端の方にはそういったテキストとかイラスト系じゃなくて文字情報とかを配置した方が伝わりやすいっていうふうに考えられています。
というのがタイトルの結論なんですけど、こんな感じでその文字情報とイラスト系、図形の情報を分割する時のレイアウトに関して、
あれこれ、今日はそのそもそもその分割レイアウトの特徴だったり、どういった分け方があるのか、その使い分けの仕方とかをお話ご紹介したいなと思います。
まず改めて分割レイアウトがどういったものかなんですけど、何かポスターだったりバナーを作る時に、
画像とかイラスト系の部分とテキスト情報の部分をパキッとエリア分けしちゃうっていうのが分割レイアウトで、
この特徴としては対比がわかりやすいっていうのと視線誘導がしやすいっていうような特徴があります。
対比がしやすいっていうのは、その分割する時にその面積の差をつけることで、どっちの方が優先度が高い情報かっていうのがすごく対比させやすいっていうのがあったり、
03:10
あとは視線誘導しやすいっていうのは、画像とテキストの情報があった時に一般的に画像の方が目が行きやすいんですよね。
っていうふうにその画像と、画像からのテキストみたいに視線の流れを作りやすいというか、見る側もそのわかりやすい、迷わずに
こう、画像を見てからテキストみたいに自然と視線が流れていきやすいっていう意味で、結構見る側にとってもわかりやすい親切なレイアウトかなと言えます。
以上が分割レイアウトの特徴です。で次に、じゃあ具体的にどんな分け方があるのっていうのと、その選び方、どういう分け方が適切なのかの判断の仕方のお話なんですけど、
一番シンプルでわかりやすい例は2等分ですね。 あとは3等分とかももちろんあったり、2等分じゃなくて、
ちょっと比率を変えて2つに分けるとか、等分じゃない分け方もあるんですけど、ちょっと今日はその分け方の判断基準を説明する上で、
まず2等分で考えた方がわかりやすいので、今日は2等分数のレイアウトについてちょっとお話ししていきます。
正方形のバナーとかで想像するとわかりやすいかなと思うんですけど、まず2等分って言っても上下に分けるのか左右に分けるのかで結構違いが、特徴が分かれてくるんですよね。
この上下で分けるのか左右で分けるのかを選ぶ時の基準として、大きく2つ判断基準があるかなと思っていて、1つは画像の動きに合わせる。
2つ目は文章の読みやすさで選ぶ。 この画像と文章っていう2つの判断基準があって、まず1つ目の画像の動きに合わせるっていうのがどういうことかというと、
例えば、正方形の画像を上下に分けた時って、それぞれのエリアは横長になりますよね。
なので、そこで画像を使う時は横長に広がりを感じる画像だったり、
横向き?横向きの広がりを感じる画像だったり、横に動きがある画像。
もっと具体的に言うと、視線が横向いてるとか、人の顔が横向いてる画像とかは横向きの動きがある感じられると思うんですよね。
そういった画像を使う時は、トリミングされる時もなるべく横長になってた方が、その動きを邪魔しないというか、あんまり違和感なくレイアウトすることができます。
06:08
反対に、その正方形のバナーを左右に分けると、分けたエリアは縦長になりますよね。
その時は画像の動きは上下に、縦の向きに動きを感じる画像を使った方が違和感がなくって、
具体的には包丁で野菜切ってる画像とかは手の動きが上下だから、その画像から感じられる動きも上から下の動きになりますよね。
なので、なるべく縦方向にトリミングされて使った方が、よりその画像の動きが活かせるというか、違和感なく使うことができます。
っていうような、その画像から感じられる動きとか方向を意識して、その分割のエリアの形に合わせて使うっていうのが判断基準一つ目ですね。
二つ目は、文章の読みやすさ。
これは、要は、横書きの文章を入れたい時に、縦長のエリアに収めようとすると、
文字サイズにもよるんですけど、場合によってはめちゃくちゃ開業が増えて、一文が5文字とかでレイアウトされる場合があるんですよね。
私が学生時代に本当に無意識にやってた失敗なんですけど、当人はね、あんまり自覚ないんですよね。
この読みにくいっていうことに、ちょっと気づきにくかったりするんですけど、
その縦長のエリアでも文字がとりあえず収まってればいいだろうっていう気持ちで当時は作ってたんですけど、
縦長のエリアに横長の文章、長い文章入れると本当に開業めちゃくちゃ増えて、一文短いとすごくしつこいんですよね。開業増えすぎちゃうと。
なので、そういった横書きで長文入れたい時は、やっぱり横長のエリアの方が適切だったり、
逆に縦長でコピー、縦書きでコピーを入れたいっていう場合は、縦長のエリアの方が入れやすいので、
左右分割にした方がいいなとか、そういった感じで、よりテキストが読みやすい分割の仕方を選ぶっていうのが判断基準2つ目ですね。
あとは、上下と左右の分け方決めたとして、じゃあ写真とか画像系とテキスト系、どっちをどっちに置こうってなった時、
これが冒頭のお話になるんですけど、左右に分けた時は、まあこれもあくまで万人に通用するものではないので、
09:01
まあ判断基準の一つとしてなんですけど、一般的に左側にイラストを置いた方がわかりやすいから、
左がイラストで右にテキストを置こうとか、あとは上下のレイアウトの時は、私は重心で判断することが多いかなと思います。
だいたい写真の方が重くなる、テキストエリアより重くなることが多いと思うので、重心上に持っていきたい時は上に画像を置くし、
下に持ってきてより安定感出したい時は下に画像を置いてみたりとか、そういうふうに決めるようにしています。
という感じで今日は分割っていう、分割レイアウトをテーマに色々特徴だったり判断の仕方っていうのをご紹介しました。
菊池フリーランス講座の毎週火曜日はこんな感じでサクッと学べるデザインのお話をお届けしています。
デザインをやっている方もそうじゃない方も、何かスキルアップのヒントとして参考になれば幸いです。