calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

デザインセンスが上がった!レイアウトに詳しくなるまとめ

Design_Layouts

どうすれば初心者でも「分かりやすく見栄えのするレイアウト」を作ることが出来るのか。余白の使い方や知識、さまざまなレイアウトの例をご紹介させていただきます。闇雲な配置にならないように、レイアウトを組む前に読んでおきたいこと。今回はWebデザインのセンスを上げるために、イラストや構図から学べる知識をまとめました。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

レイアウトの基本知識

タイポグラフィ(基礎)

タイポグラフィ(応用)

レイアウトの基本知識

1.分割、対称、軸

division_layout

何もない空間に要素を配置・構成していくのがレイアウト。こちらは四等分割や軸を使ったレイアウトのパターンをまとめてあるサイトです。美しく配置するために見ておきたいレイアウトパターン。

Photoshopの機能拡張はこちら。

2.イラストから学ぶ構図

composition_layout

紙面や画面、絵画などにおけるページ全体の構成の型、パーツの配置を構図(コンポジション:composition)といいます。構図パターンを知ることで「理解されやすい」自然なレイアウトを作ることができます。

こちらはイラストについて書かれていますが、配色バランス・構図など広義でのデザインが分かります。空想上のものにリアリティを出す方法、小さく描いた主役を目立たせるにはどうすればよいのかなど「誰にでも見やすい構図」を生み出すための知識。

こちらは漫画から学ぶ構図や視線の動き。Webコンテンツに漫画を取り入れたい場合や、バナー作成時、読みやすい導線の配置をしたいとき。時間軸、視線の流れの作り方など読みやすさを上げるためのテクニックです。

3.ダイナミックシンメトリ―

dynamic_layout

安定感を感じさせる三角形、緊張感を出す逆三角形。三角形の構図は収まりのよいレイアウトを配置するための手法です。

こちらも構図に関するテクニック。三角形や黄金分割の他に面白かったのが、三分割法と呼ばれるダイナミックシンメトリーを使った配置方法。

シンメトリーについてはこちら。なぜ対称性や規則性が必要なのか、サイトに左右対称・回転を取り入れる場合どうすれば良いのか具体的に解説してあります。

4.ホワイトスペース

whitespace_layout

タイポグラフィやレイアウトでは余白の使い方が重要になります。高級感や清潔感を出したいときなど、余白は何もないようでいて、意図的に配置されています。

例えば、小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。上品さを演出することもできますよね。

空白により読者のコンテンツの読み進めを制御することができます。このような視線誘導を目的とした余白のことを「アクティブ・ホワイトスペース」と呼びます。

余白をcalcで自動算出する方法はこちら。

5.造形性

新たなものを創造しても上手くいかないことが多いですが、形をつくり整えることで完成度が上がります。筆者が名刺やコンテンツを作るときに、まず意識する部分がここです。

写真や文字をバランスよく配置し、読み手から信頼を得るためのテクニック。どうやって要素を整理整頓していくのか、グルーピングのコツ、アクセントの付け方を学びます。

6.プロポーション

proportion_layout

お次は、ロゴや見出し、グリッドを作る時に使いたいツール。フィボナッチ数列や黄金比を取り入れるとバランスよく見えます。名刺用のテンプレートとグリッドレイアウトテンプレはこちら。

見出しのサイズで使う場合は、本文の黄金比の(×1.61)倍で設定すると美しく見えます。Webでは16pxの本文なら、見出しは25pxくらい。

タイポグラフィ(基礎)

7.行間・行送り・行長・行送り

文章が伝わっていないと感じたときに見直したいこと。文字を読みやすくするには行間(行の間隔)と行長(行の長さ)の設定も必要です。行間はフォントサイズの2/3~全角くらいが読みやすい。どの文字の字間を詰めるか、空けるかを決定する際に参考になる記事です。

イラレとPhotoshopの文字を調節するショートカットキーはこちら。

8.カーニング・字送り・文字ツメの違い

kerning-shaped_layout

以前書きましたが、カーニングは隣り合う2つの文字間を調整すること、トラッキングは複数文字間(テキストブロック全体)を調整することでしたね。Photoshop/Illustratorならalt(Opt)+矢印キーで出来ます。

9.禁則処理

hyphenation_layout

禁則処理とは句読点・括弧・拗促音(小さなひらがな)・音引き(ー)などの約物を行頭や行末にこないように調整することです。読みやすい文章を作るために必要な処理なので覚えておきます。

jQueryで均等割り付けを表示する方法はこちら。

タイポグラフィ(応用)

10.フライヤーデザインから文字の配置方法を学ぶ

flyerdesign_layout

写真に文字を重ねる場合どうすればよいのか、文字の上に文字を重ねるには、文字の改変例など文字の配置問題を解決するためにポスターから学べる応用テクニック。

少し気になったので。Webのタイポグラフィのトレンドが今後どういった流れになっていくのか予想してある記事。フォントサイズ・見出し書体の割合など、次にデザイン時に参考にしたい情報です。

11.和欧混植(書体を組み合わせる)

複数の書体を組み合わせて使う混植。構造が異なるフォントの組み合わせ方、和文と欧文を美しく調和させるためのテクニック。

12.アンチゴチ(書体を組み合わせる)

anchigochi_layout

漫画の吹き出しにも混植があるということで。漫画吹き出しで使われるゴシックとアンチック体(かな専用書体、太い明朝体)の組み合わせ。(参考:フリーフォントやさしさアンチック

こちらによると文字の可読性を考えた結果、漢字にゴシック、かなにアンチック体を採用したそうです。

13.スイススタイルを参考にする

swiss-style_layout

1950年頃スイスに多く見られた、整理整頓(グリッドや黄金比に基づく)されたタイポグラフィを中心としたデザイン。フラットデザインの参考に。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする