デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。

デザイン理論の基礎

この記事を読んで美しいレイアウトを手に入れましょう。

 

「色は統一感があるけど、なぜか配置がうまくいかない…」

「フォントは揃えたけど、写真とのバランスがうまくとれない…」

「良いレイアウト・悪いレイアウトの違いが分からない…」


この記事ではそんな悩みを抱えている方へ向けて、東洋美術学校によるレイアウトのデザイン基礎理論をまとめました。

明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

デザイン理論の基礎


 

■目次

1. あなたはレイアウトセンスあり?なし?

2. レイアウトとは?

3. レイアウトの種類(静的・動的)

4. レイアウトの3大原則

5. レイアウトにおける重要なポイント

 

1. あなたはレイアウトセンスあり?なし?


以下にチェックポイントを並べてみました。自分にレイアウトのセンスがあるかどうかチェックしてみましょう。

・苗字と名前の間を全角スペースであける

・和文フォントと英文フォントを並べる時に悩んでしまう

・いつもなんとなく素材を動かしてデザインにしている

・情報をグループ化するのが苦手
 

1つでも当てはまる方は、もしかしたらレイアウトセンスが残念かもしれません。
そこで必要なのが、レイアウトのデザイン理論です。デザインはセンスだけでは安定した成果物を出すことは出来ません。理論を学び、自分の癖を理解することで、デザイン力を確実に安定させていくことができます。


2. レイアウトとは?


文字や色、そして写真やイラストなどの図版を伝えたいイメージに沿って”効果的に”配置すること。

グラフィックデザイナーの一番の腕の見せどころは、レイアウトを決める時です。

 

3. レイアウトの種類(静的・動的)


デザイン理論の基礎
(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

・静的なレイアウト

情報誌などに多い。“規則正しい”図版とテキストの配置。

図:左右のページの同じ位置に見出しやロゴがあり、同じサイズの写真とコメントが並んでいる。


 

デザイン理論の基礎
(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

・動的なレイアウト

ファッション雑誌などに多い。規則性のある“様々な形”での図版とテキストの配置。

図:写真や黒字のコメントは規則正しく並んでいるが、ブルーやオレンジの値段が書いてある四角形がバラバラに配置されている。

 

4. レイアウトの3大原則


(1)揃える

当たり前ですがバラバラではいけません。画像や文章のサイズ、幅、行間などに規則性を持たせて配置します。ガイド・グリッドをうまく使って上下左右を揃えましょう。

デザイン理論の基礎
(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

 

(2)分ける

情報を整理整頓しましょう。同じ情報はグループ化して近くに配置しましょう。(図では2つのグループがまとまって配置されている。)

レイアウトデザイン理論の基礎
(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

 

(3)崩す

(1)で綺麗に揃え、(2)で分類した後に、特に見せたい部分を崩します。
他は規則正しく並んでいるので、斜めになっていたり、はみ出している部分が注目されるようなデザインになります。

デザイン理論の基礎
(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

 

5. レイアウトにおける重要なポイント


レイアウトの際に重要なのは、配置したテキストや図版のまわりの「マージン(余白)」です。

マージンの取り方で、制作物の表情が大きく変わってきます。

デザイン理論の基礎
(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

情報が少ない場合は広めに余白をとることができ、ゆったりとした印象になります。

一方、情報が多い場合は狭くなるため、少ない余白でどのように整理するかが重要になってきます。ここで注意しなければいけないポイントは、どんなに情報が多くても、余白は必ずとるようにするということです。

 

レイアウトについてさらに学んでみたい方へ


Webデザインの骨組み「ワイヤーフレーム」を学ぼう(田中 晶子先生)

WEBサイトを作成する前に制作する、コンテンツやレイアウトを確認・整理するための構成図「ワイヤーフレーム」を家造りに例えて学んでいきます。最後には実習課題もあります。

デザイン理論の基礎
 

グラフィックデザインを重視したランディングページの作り方
(イシジマ ミキ先生)

グラフィックデザインが重視される傾向が強くなりがちなランディングページの作り方を基にデザインの順番を学んでいきます。ランディングページのレイアウト技術や覚えておきたいコツやツールの機能や使い方も学べます。

デザイン理論の基礎

 


WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。

学部登録すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!


 

スクー教務課:塩原

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

デザイン学部の記事一覧