初級者向け2021.06.11TweetWebデザインに携わる方々の中で、“レイアウト”について一度は考えたことがあるでしょう。「デザイン」と言う言葉には計画・設計などの意味があり、「レイアウト」とは、配置や配列のことを意味します。Webデザインにおけるレイアウトとは、伝えたい情報を整理してわかりやすく配置することです。見せればユーザーがわかりやすいか、そのデザインの目的を考慮して、どのようなレイアウトが効果的かを考える...。言葉で言うとあっさりとしていますが、いざ実践に移すとなると戸惑ってしまうこともあると思います。そこで、誰でも簡単に出来るデザインのポイントを紹介していきます!端を揃えるこの2つのレイアウトの例をご覧ください。どちらが見やすいと思いますか?左の図のように配置されている要素がズレていると、ユーザーに違和感を与える原因となってしまいます。比べて右の図は、要素が右端・左端にそれぞれ揃って配置されています。このように整えるだけでも美しさが生まれ、より見やすいデザインになります。いうことも要素によって考える必要があります。ECサイトでよく見かけるこちらのレイアウトですが、高さが異なる商品写真が上に揃っていると、その下のテキストの部分もガタガタになってしまいます。このような画像は下線に合わせて商品同士を並べ、テキスト部分を揃えると見やすいデザインになります。リストをきれいに見せる上記も含め、これらはデザインの基本ルール“整列”にあたりますが、他にもこのような例があります。箇条書きや注釈分などは、文言の前に記号や番号がつくことが多いです。その場合、接頭文字と文言を別々に整列させると改行が入っても読みやすくなります。このようなレイアウトにすると余白もでき、窮屈な印象もなくなるのです。縦に区切るしかし、ひとつ注意点があります。文章が横書きの場合、人の視点は基本的に左から右へ、そして上から下へと向かっていきます。これをZの法則といいますが、Web上では少し異なります。Web上は左から右に進み、その後は右端から下の段の左端へ戻っていきます。Zのように斜め下に飛ぶのではなく、一段ずつ降りていくためこちらはFの法則といわれています。先程のリストの例ですが、このFの法則を当てはめた時に、文章が長い=横幅いっぱいに文字が並んでいると左端から右端に視線を動かすことを繰り返し、読むのに疲れてしまいます。そんな時は、単に要素を積み上げるのではなく、縦に区切ってみましょう!このように要素を横並びにすると、内容が把握しやすくなり、ひとつのコンテンツとして統一感も生まれます。いかがでしたか?Webデザイン以外に、雑誌やポスターなどでも以上のポイントを抑えておくと情報の整理がしやすいのではないかと思います。何より重要なのは、いかにわかりやすく情報を伝えられるか、ということです。うまくいかない...と行き詰まってしまった時は、自身が見る側の人になりきって考えてみましょう!弊社ではレイアウトのことを考えたWeb制作の構築や運営を行っています。お気軽にお問い合わせ下さい。Watanabeベイクロスマーケティングでは、現在スタッフを募集しております。