チャートやグラフ図、写真、ビデオ映像などを利用することで、視覚的に情報をつたえることができるビジュアル・コミュニケーション（英: Visual Communication）。

 

デザインに迷ったときに確認したい、ビジュアル・コミュニケーションにおける基本原則10個をまとめた、インフォグラフィックス「The 10 Commnadments of Visual Communication」が公開されていたので、今回は項目ごとに詳しく見ていきましょう。

 

 

配色の決め方にはじまり、タイポグラフィやシェイプ、直線ラインの使い方、機能的な階層の作り方、余白スペースの取り方など、デザインに必要な基本事項がまとめられています。

 

 

 

詳細は以下から。

 

 

 

デザイナーが覚えておきたい、ビジュアルコミュニケーションの基本原則10個まとめ

 

The 10 Commnadments of Visual Communicationは、デザイン初心者が理想的で、効果的なビジュアルを作成できるポイント10個をまとめています。どの項目も基礎知識ばかりで、覚えておくことでより魅力的なデザインを、手軽に作成する手助けをしてくれます。

 

 

 

 

基本原則 その１

カラーホイールの使い方を覚えよう。

 

カラーホイールをうまく組み合わせることで、魅力的な配色カラーパレットを作成することができます。より詳しい内容については、デザイナーが知っておきたい、配色の基本原則10個まとめで触れていますので、こちらも参考にどうぞ。

 

• 類似色（英: Analogous）: 選択したメインカラーの両隣にある色を加えた、理想的な3色使い。
• 補色（英: Complementary）: 選択した色の反対側にある色との組み合わせ。
• コントラスト（英: Contrast）: 補色を利用したときに、コントラストきつい場合は、両サイドの色を選択。
• 二重補色（英: Double Complementary）: 配色に3色以上を利用するときに便利で、デザイン性を保ったまま色の追加が可能。
• 三角形（英: Triad）: メインカラーを支点として三角形を描いた配色の選び方。

 

 

 

基本原則 その２

利用するタイポグラフィーを選ぼう。

 

フォントの効果的な組み合わせ方を知ることで、自由にデザインルールを壊し、オリジナル性を演出することができます。現役デザイナーが実践している、フォント組み合わせ10個の黄金ルールでは、より詳しいフォントの組み合わせ方を紹介しています。

 

• コントラスト: 細字と太字を組み合わせ、コントラストを表現しよう。
• ムード: 雰囲気のあったフォントを利用しよう。
• フォント数: 利用するフォントの数を、２種類に制限しましょう。
• フォントウエイト: フォントの大きさ、ウエイトを調整しよう。
• 注意点: Comic Sasnフォントの利用は避けましょう。

 

 

 

基本原則 その３

シェイプの種類や雰囲気を知ろう。

 

利用するシェイプによって、それぞれ異なる雰囲気やムードを演出することができます。各シェイプの特長を覚えておくとよいでしょう。

 

• 三角形: 攻撃的（英: Aggressive）、ダイナミック（英: Dynamic）、方向性（英: Direction）
• 正方形: 安定的（英: Stability）、バランス（英: Balance）、強度（英: Strength）
• 円形: 積極性（英; Positivity）、感情（英: Emotion）、公平（英: Equity）
• 長方形: バランス（英: Balance）、能率的（英: Efficiency）、専門的（英: Professionalism）
• 曲線: 停止（英: Check）、バランス（英: Balance）、動き（英: Motion）

 

 

 

基本原則 その４

階層をうまく利用しよう。

 

視覚的階層（英: Visual Hierarchy）は、情報やデザイン要素をまとめることができ、メッセージをより伝えやすくしてくれます。より詳しい階層の解説は、こちらのエントリーを参考にどうぞ。

 

• 各デザイン要素を、三角形に並べよう。
• 黄金比（英: Golden Ratio）を利用しよう。
• 動きをうまく表現しよう。
• 最も注目して欲しい、フォーカルポイントを作成しよう。
• 規則性のある配置を心がけよう。
• デザイン要素をランダムに並べてみよう。

 

 

 

基本原則 その５

ライン線を有効活用しよう。

 

ラインをうまくデザインに利用することで、適切なムード、雰囲気を作りあげることができます。

 

• 水平ライン（英: Horizontal）ライン
• 垂直（英: Vertical）ライン
• ひだ状（英: Crimped）ライン
• リズミカルな（英: Rhythmic）ライン
• 末広がり（英: Divergent）ライン
• 移り変わり系（英: Transitional）ライン

 

 

 

基本原則 その６

図形や記号の使い方を学ぼう。

 

各デザイン要素をどのように加工し、利用することができるのかまとめています。作成しているデザインプロジェクトに応じて、編集方法も変わってくることを理解しておきましょう。

 

• クリップアート（英: Clip Art）
• 線画（英: Line Drawings）
• アニメーション（英: Animation）
• ラスター（英: Raster）
• イラスト（英: Illustration）

 

 

 

基本原則 その７

コントラストのあるデザインを心がけよう。

 

デザインにうまくコントラストを加えることで、より分かりやすく、情報を伝えることができるだけでなく、デザイン性の改善にもつながります。コントラストを表現できるテクニックは以下より。

 

• フォントサイズを調整しよう。
• フォントウエイトを利用し、強調したい単語を太字にしよう。
• 方向（英: Direction）、並べ方にもオリジナリティーを。
• 利用するフォントの形状（英: Form）や種類を検討しよう。
• デザイン全体の構図（英: Structure）にも目を向けよう。
• テクスチャを利用して、デザインの質感をアップしよう。

 

 

 

基本原則 その８

デザイン要素の順番を考えよう。

 

グリッドレイアウトを利用することで、注目して欲しいデザイン順に並べ、順序を作ってみましょう。利用できるレイアウトは以下よりどうぞ。

 

• ブロック型グリッド（英: Manuscript Grid）: Block Gridとも呼ばれ、ひとつの大きなグリッドが用意された、もっともシンプルなレイアウト。
• カラム型グリッド（英: Column Grid）: ウェブサイトでよく見かける、複数のカラムに分けられたレイアウト。
• モジュール型グリッド（英: Modular Grid）: カラム型グリッドに複数の水平ラインを追加したレイアウト。
• 階層型グリッドグリッド（英:Hierarchical Grid）: 直感的にフォーカル・ポイントをきめた、ウェブサイトでよく利用されているレイアウト。
• ゆがみ（英: Skewness）: 人工的な曲線を描くことで、注目して欲しいポイントをまとめます。
• 左右、中央揃え: デザインパーツを揃えて配置するテクニックのひとつ。

 

 

基本原則 その９

フォントウエイトを利用しよう。

 

異なるフォントを活用するのではなく、太さに応じて複数のウエイトを収録した、フォント・ファミリーを活用することで、デザインに統一性が生まれるだけでなく、注目ポイントを強調することもできます。フォントの実践的な組み合わせ方については、デザインに迷ったら見直したい、50個の秘訣テクニック完全ガイドを参考にどうぞ。

 

 

 

基本原則 その10

余白スペースを活用しよう。

 

各デザイン要素にうまく余白スペースを加えることで、デザインをより魅力的に仕上げることができます。さまざまなスペースの作成方法は以下より。

 

• ポジティブ・スペース（英: Positive Space）: デザイン画などの中心にくる部分。
• ネガティブ・スペース（英: Negative Space）: デザイン画などの背景にあたる空白の部分。
• 立体スペース（英: Perspective Space）: レイヤーを積み重ねることで、立体感を演出します。
• オーバーラップ・スペース（英: Overlapping Space）: 二つ以上のデザインが重なりあった様子。
• スペースなし: デザイン要素をパズルのように、びっしり並べます。

 

 

デザイナーが知っておきたい、配色の基本原則10個まとめ

同デザイナーが作成した、配色の基本原則をまとめたインフォグラフィックスにも、目を通しておくと良いかもしれません。

 

 

参照元リンク : The 10 Commandments of Visual Communication – Designmantic