物足りなさの原因は整理ができていないから?デザイナーのためのグリッド活用術
ロゴやビジュアルのデザインをしているとき、なんとなく上手くできないと感じた経験はないでしょうか。
デザインが失敗する原因の一つとして、レイアウトが問題となっていることが多くあります。
その場合は、レイアウトに規則をつくるだけでしっかりとしたデザインになることも多いので、デザインをおこなう機会がある方は覚えておくと便利です。
今回は、レイアウトを行う際に使う手法である「グリッド」の活用に関する情報をまとめてご紹介します。参考実例として実際にグリッドを使ったロゴデザインもピックアップしています。
自分のデザインがいまいちだと感じている方、デザインを始めたばかりの方は特に必見です。
デザインのクオリティを高める!グリッドの活用まとめ
1.グリッドとは
引用:http://welovetypography.com/post/11817
グリッド・システムとは、スイス出身のデザイナー ヨゼフ・ミューラー・ブロックマン(1914〜1996年)が提唱したデザイン技法です。
著書『Grid Systems in Graphic Design』は、事例にグリッド・システムを取り入れたことでとても有名です。
この技法は、1950年代からデザインの基本の一つとして広まり、広告のような印刷物、Webデザイン、ロゴデザインをはじめ様々なグラフィックで活用されています。
最近では、Webデザインに関する情報でよく耳にする言葉ではないでしょうか。
具体的には、縦横に線を引いたガイドラインをベースに、図形や文字といった要素を配置することを指します。
このガイドラインは、あくまで仮のガイドですので、完成品では見えない状態です。
グリッド(格子)を基準に配置することで、秩序と安定感を保ったレイアウトになります。
2.グリッドの活用例
ここでは、実際にグリッドを使ってデザインした活用事例をご紹介します。
ご覧頂ければ、デザイナーがどのようにグリッドを作業に取り入れているかよく分かります。
どのデザインもバランスがよく、規則性のある配置となっていますので、ぜひ細部まで注目してみてください。
引用:http://www.creativebloq.com/logo-design/6-tips-using-grids-logo-design-11513984
有名なシェルグループのロゴは、1971年にパリ出身のデザイナー レイモンド・ローウィ(Raymond Loewy)がリニューアルしています。
彼はデザイン作業にグリッドをベースに取り入れており、人々にインパクトを与えるデザインを完成させました。
ガイドに完璧に沿ったデザインではありませんが、全体的にはガイドと線が合っていることが分かります。精密でなくても、ある程度のガイドとして利用するというのも一つの手です。
引用:http://www.creativebloq.com/logo-design/6-tips-using-grids-logo-design-11513984
デザイナーであるKaelgrafiが作成したロゴです。
グリッドを使うことで線を美しく配置し、対称性を表現することに成功しました。非常にシンプルながら、整った印象と上品さを持っています。
角には正円を使っており、細部までしっかりとデザインした作品であることがうかがえます。
このデザインは、デザインコンテストを開催しているサービス「99design」において見事に成果をあげており、グリッドと幾何学的形状を使うことで、説得力のあるデザインに仕上がった好事例です。
引用:https://www.behance.net/gallery/Linda-Corporative-Identity/498046
ブラジル出身のクリエイティブディレクターが制作した、LINDAというロゴのデザインです。
繊細でエレガントな雰囲気が印象的で、一目見れるだけで美しさが伝わってきます。
こちらの制作過程を見ると、やはりグリッドを使って細かな部分まで配慮して制作していることがよく分かります。
中央の"LINDA"のテキストから勲章のようなマークまで、すべて円形のグリッドを活用しています。
引用:https://dribbble.com/shots/1954438-A-logo
スイスのHelvetic Brandsという会社が、コミュニティサイト「dribbble」に掲載したロゴデザインです。円、三角形のグリッドに沿って規則正しくデザインしています。シンプルなデザインだからこそ、しっかりと整理されていることがよく分かります。
なお、画像を掲載している「dribbble」では、"grid"などのキーワードで検索するとグリッドを使ったデザインを数多く見ることができます。
色々な事例を見てみたいと思った方は、ぜひ「dribbble」やその他のサービスをチェックしてみてください。
3.グリッドを使うことで得られる効果
引用:https://dribbble.com/shots/325244-Sixbase-Logo
グリッド・システムをデザインに活用すると、以下のように様々な効果を得ることができます。
安定感のある、バランスのいいレイアウトができる
グリッドは、バラバラになった要素のバランスを保つ効果を持ちます。
デザイン作業に取り入れることで、美しく決まったデザインを作ることが可能です。
例えば、アイデアは良いはずなのに実際に作ったらイマイチ、という時に使ってみると仕上がりが良くなるケースがあります。
また、レイアウトはパッと見た時の印象だけでなく情報を上手く伝達するためにも重要です。
雑誌、ポスターなどの情報量が多い媒体の場合、デザインに秩序を持たせることで読み手が把握しやすく、流れを整理するデザインにもなります。
効率よくバランスを整えることができる
ガイドに沿ってレイアウトをおこなうため、作業時間を短縮してくれるというのも一つのメリットです。
グリッドは必須のものではありませんので、感覚に頼ってデザインする方や、あまり好まない方もいらっしゃいます。
しかし、素早く正確にバランスを取るために有効な手法であることは間違いないでしょう。
説得力の高いデザインができる
グリッドをデザインに取り入れることは、他者に説明をする際に納得してもらうための材料にもなります。
クライアントや社内の人間であっても、デザインを学んでいない相手に意味や意図を理解してもらうのは簡単なことではありません。
そのため、どのような構造を持っているか説明できれば、どういった意図をもってデザインしたかが明確になるでしょう。
自分では良いと思ったのに分かってもらえない、相手を納得させることができない、という場合には、説得力を高める方法としてグリッドを活用してみることをオススメします。
4.グリッドの使い方
デザインする面に均等な格子状のグリッドを作成し、線に従って配置するのが基本的なグリッドの使い方です。ドローソフトで簡単に表示することができます。
なお、グリッドは自分だけのオリジナルを作ったり、既存のテンプレートを使ったりすることもできます。
用途や好みに合わせて最も最適なものを選択してください。
ソフトでのグリッド表示方法は以下の通りです。
<Illustratorの場合>
基本の線を表示する「表示」→「グリッドを表示」
細かく設定する「編集」→「環境設定」→「ガイド・グリッド」
<Photoshopの場合>
基本の線を表示する「表示」→「表示・非表示」→「グリッド」
細かく設定する「環境設定」から「ガイド・グリッド・スライス」
まとめ
以上、グリッド活用に関する情報をまとめてご紹介しました。
いかがでしたでしょうか。
グリッドを必ず使わないといけないというルールはありませんし、デザイナーの中には使わないほうがいいという考えの方もいます。
中には、デザインがきっちりしすぎてしまいユニークな発想を妨げてしまう、似たデザインになってしまうなどの意見もあるようです。
しかし、デザインに規則を生み出してくれるグリッドを使えば、微調整をおこなう時のサポートになるほか、デザインのクオリティを高めたい、バランスを取るときのガイドがほしい、時の便利な技法として今後のデザイン作業に活用してみましょう。
このニュースを読んだあなたにおすすめ
デザインする際に知っておくと使える小ワザ集
Webデザイナー必見!すぐに使える高品質な無料デザイン素材まとめ
Webデザインに役立つ無料のツール・デザイン集まとめ
このニュースに関連するカリキュラム
タグ・HTMLとは。ホームページの基礎技術
ホームページはタグとよばれるプログラムで書かれています。それをブラウザが処理し表示することで、レイアウトされたり、リンクが機能したりします。本カリキュラムではタグと、その1つであるHTMLを解説します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- 広告
- 広告とは販売のための告知活動を指します。ただし、広告を掲載するための媒体、メッセージがあること、広告を出している広告主が明示されているなどの3要素を含む場合を指すことが多いようです。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング