chapter00_rayout_1

レイアウトがうまくなりたい!そんな時に読むと少し参考になるレイアウトの基本

  • このエントリーをはてなブックマークに追加

レイアウトやデザインをしている時「ただなんとなく」で作っている時と、そういうことを意識して作っている時とでは、仕上がりや今後の成長に繋がってくるのでないかなーと思います。僕もまだまだレイアウトがすごいうまいよ!というわけではございませんが、いつもwebのデザインをしているときのレイアウトのお話です。今レイアウトの勉強中という方や、ちょっと知っておきたい、なんて方などに少しでも参考になればと思います。

 

はじめに

今回書かせていただくレイアウトのお話はとっても基本的なことを書いてあります。レイアウトと一概に言っても「空間デザイン」「新聞」「雑誌」など様々なシーンで用いられますが、今回は「webデザイン」のレイアウトに関して書いています。僕も完璧にできる!というわけではないため、もし間違えていることなどありましたらお教えしていただければ幸いでございます!

 

レイアウトの意味や目的、役割

レイアウト(英語: layout, lay-out)とは、デザイン(紙、ウェブ等)、建築設計、インテリア(展示会場・展覧会場設計、ショールーム設計などを含む)、書籍・雑誌・新聞などの編集等々において、何をどこにどのように配置(割り付け)するかということ、また、そのような配置(割り付け)をする行為も意味する。

レイアウト – Wikipedia

レイアウトとは「配置」という意味です。この配置の基本的なことを上手くすることによって、webを見ている観覧者(ユーザー)は、サイト内にある情報をうまく見つけ出すことができたり、ほしい情報を探しだしたり、読みたい文字などを心地よく読めたりすることができます。

webデザインのレイアウトの役割は、快適にそのwebを見せること、伝えたいことを伝えることができるか、ではないでしょうか。

webサイトを見ていて、このサイト見づらいなーなんてことあった方もいらっしゃるのではないでしょうか。そうだとすると、配色が悪かったり、情報の整理ができていない場合もあるとは思いますが、レイアウトが要因な場合もあると思います。

 

「レイアウトに意識しながら作る」

rayout_01

いきなりですが、上記の画像を見てみてください。「レイアウトが上手くなりたい」という文字が上下左右、中央に置かれていますね。 でも本当に中央におかれていますでしょうか?少し違和感を感じませんか?

 

rayout_02

もう一度上記の画像を見てみてください。今回は本当に上下左右、中央に置かれていませんか? 1つ目の「レイアウトが上手くなりたい」の画像と比較してみるとわかると思いますが、1つ目は「少しだけ下」に配置してみました。

1つの画像を見た時にすぐに「あれ?中央?ちょと下じゃない?」と気づけた方は目がレイアウトに肥えている方ではないかなと思います。 僕が思う「レイアウトがうまい!」という方は、こういうレイアウトをさっと判断できるようになっていることだと思います。

 

webデザインをしている時も、あえて空間や余白感を活かすデザインをしている以外に、中央に揃えなければならないところは自然と中央にささっと揃えれるようになりたいですよね。

ただ「なんとなく」で作っている場合だと気づかないことがありますが、少しでも「意識して作る」ようになれば必ずレイアウトはうまくなれるはずです!絶対に間違いない! 意識して作れば「あれ?真ん中?」と気づいた瞬間、ちょっとだけ上に置いてみよう、いや下に置いてみようというところに気づけるようになります。

 

レイアウトの基本は「意思しながら作る」ということ!

 

揃えれるところは揃える

よくwebデザインだと「グリッド上に揃ってない!」なんて聞いたことある方もいるかと思いますが、揃えられるところ、揃えなければならないところは揃えましょう。

rayout_03

webサイトに、多いレイアウトですが左にテキストエリアがり、右に写真(イラストや図)があるというレイアウトです。さすがにこんなにずれていたら気づくよ!と思いますが、今回は大胆にわかりやすくずらしてみました。Beforeの画像とAfterの画像をみてみるとわかりますが、縦や横のライン、揃えれるところは揃えましょう。

 

揃っていない場合だと、とってもテキストが読みづらくなってしまう場合があります。アイキャッチや写真などのイメージがあってもなかなか読み取れなく場合もあります。

もちろん、テイストや雰囲気に合わせて”あえてずらす”という手法のレイアウトもありますが今回の場合は揃えましょう。

 

上下左右のバランス

なにかのボックス内に、文字やオブジェクトを配置しなければならないのが、この上下左右のバランスです。右に詰まりすぎていない?上に寄りすぎていない?など余白感など注意しましょう。

rayout_04

Beforeの画像では、左端にコンテンツが寄りすぎていますが、Afterでは、上下左右のバランスをとっています。左端になど、寄りすぎているレイアウトにすると文字だと読みづらくなります。なので、程よい、その箇所に適した余白などを入れておきたいですね。

 

この上下左右のバランスは、いろんなところで必要になってきます。

例えば下記のようなボタンのデザインをする時などにも必要になってきます。

rayout_05

ボタンなどで、「どうしても押してほしい!」という気持ちが全面にでてきているのはわかるのですがボタンのサイズに対して文字が大きかったりするのはとっても見づらくなります。大きくすれば押してくれるようになる、というわけではないので要注意です!

 

グループ感を考える

おなじような要素が連続しているレイアウトなど、グループ感をつけてまとまりを考えてみましょう。そうすることによって、さっと見ただけで内容が見えてくるようになり、直感的にコンテンツを理解できるようになります。

rayout_06

読みやすいレイアウトとは

読みやすいレイアウトにするためには、いくつかの要素があります。

■文字【書体・大きさ・太さ(ウェイト)・色】

■字間や行間

■改行位置や1行の長さ

■上下左右の余白

もっと挙げるとするとまだまだあるとは思いますが、主に挙げると上記の要素が重要なのではないかと思います。

Beforeのレイアウトは、文字を太く、行間が狭く、左右の余白が狭くなっています。文字を太くすれば読みやすくなるかというとそういうわけではありません。行間が狭いのは長文にとってとても致命的なところです。そのためとっても読みづらくなるため、程よい行間をあけましょう。最適な行間と言われているのは、文字サイズの1.5倍〜2倍の行間を選びます。(文字サイズが12ptの場合、行間が18pt〜24ptぐらいが最適な行間です。)

 

和欧書体の組み合わせを考える

ひらがな、カタカナ、漢字などの和文と、アルファベットの大文字、小文字、数字など組み合わせているデザインなどよくありますよね。 そんな時に、少し覚えておきたいことです。

rayout_08

和文は和文書体、欧文は欧文書体で組んだ場合、欧文書体(アルファベットや数字)はウェイトや高さが違うことがあるため、欧文書体のところだけ、サイズを少し大きくすることによってバランスがとれるようにしましょう。 今回では、和文フォントを「ゴシックMB101 pro」欧文書体は「Helvetica Neue」にし、欧文書体ところだけ、サイズを109%に設定いたしました

 

まとめ

レイアウトと一言で言っても「ただ配置するだけ」ではないんですね。 色々考えて、コンテンツを以下に見やすく、快適に、読みやすく、わかりやすくしなければならないというのはすごく難しいです。 まだまだレイアウトのことは勉強中!という方も、たくさん見て作っていることによってきっとうまくなります。僕自身もまだまだ未熟者なので、これからもっと勉強していきたいと思います。

 CHAPTER 01ということでまだまだレイアウトについて続けて書けていけたらなーと思っていおります。

関連する記事がありません。

関連記事

PAGE TOP