4/24(Wed)

今日の生放送

デザイン理論の基礎

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

 

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

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

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


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

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

デザイン理論の基礎

 


■目次

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

2.レイアウトとは?

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

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

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


 

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

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

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

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

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

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

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

 

2. レイアウトとは?

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

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

 

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

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

・静的なレイアウト

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

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


 

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

・動的なレイアウト

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

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

 

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

(1)揃える

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

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

 

(2)分ける

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

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

 

(3)崩す

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

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

 

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

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

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

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

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

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

 

レイアウトデザインを学びたい人必見!レイアウトデザインを学ぶためのオンライン動画授業5選

デザインの基礎である「レイアウト」に興味のあるあなたにレイアウトデザインを学ぶための授業5選をご紹介します!これらの授業を通じて、デザインの基礎知識や、レイアウトの具体的なポイントなどについて理解することができます。ぜひこれらの授業を受講し、レイアウトデザインに関する知識を身につけましょう!

 

1.デザインのよみかた

この講座では、これまでの時代背景を追いながら「デザイン」の意味と価値を浮き彫りにし、日常的な視点で咀嚼してゆくことを目指します。デザインという概念をもう一度デザインしなおしながら、これからのデザインを考えるきっかけを一緒につくっていきましょう。

 

2.ミル文字ヨム文字ミセル文字

本授業では、あらゆる伝達のカナメである「文字」のデザインとその作法 ——、専門用語で言うところの「タイポグラフィ(Typography)」について体系的に学びます。
タイポグラフィとはいったい何かというところから、活字(フォント)の基本、その配置や日本語と欧文(英語)の違い、レイアウトの基礎となるグリッド・システムまで贅沢に学ぶことで、「良いタイポグラフィ」とは何か、考えていきましょう。

 

3.Webのためのグラフィックデザイン

この授業では、Webサイトという平面を構成するグラフィックデザインについて、その言葉の意味、タイポグラフィ、SVGを使ったロゴやフォントの作り方、ポートフォリオサイトの制作方法まで学べます。

 

4.いろのいろいろ

本授業は「色」について深く楽しく学ぶことができます。各色の背景・機能・印象について、またその色と他の色の組み合わせについて、デザインという領域における事例をふまえ、実践的な色彩の基礎を楽しく学びます。各回、赤・青・黄色...というようにある特定の色に焦点を当て、その色彩の特性に触れ、色について理解を深めていきましょう。

 

5.資料作成に活かせる、ビジネス教養としてのデザイン

本授業では、ビジネスの現場で苦手意識を感じる方も多いプレゼン資料等の文書デザインの考え方とその活用方法を学んでいきます。情報を的確に伝えることのできる良質なデザインをぜひ身につけましょう。

 

いかがでしたでしょうか?
これらの授業を受講することで、レイアウトデザインに関する基本的な知識を身につけることが出来るでしょう。さらに、これらの授業を通じて、自身がこれからレイアウトデザインをどのように実行に移していくかを考えることも出来たのではないでしょうか?
Schooではこれら5つの授業以外にレイアウトデザインに関する授業を多数開講しています。ぜひSchooでさまざまな授業を受講し、レイアウトデザインに関する知見を深めていきましょう!

今日の生放送

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

デザイン学部の記事一覧