MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
グリットデザインを使いこなそう!

グリットデザインを使いこなそう!

公開日:2018年08月10日
最終更新日:2019年05月28日
オンスタ運営
デザイン
Webデザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > グリットデザインを使いこなそう!
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは!Grow Groupデザイナーのさとおです!

皆さんは机の上に散乱したリモコンを見たとき、背の順で綺麗に揃えて並べる派ですか?

ちなみに私はO型ですが、綺麗に揃えずにはいられない派です…!!

今回は、そんな綺麗に揃えて並べるグリッドデザインについて、デザイナー目線でお話しいていこうと思います。

グリッドデザイン(グリッドシステム)とは

業界では定番とも言えるデザイン手法であるグリッドデザインですが、そもそもグリッドデザインとは何でしょうか。

グリッドデザインとは、Webページなどのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせて内部の要素の大きさや配置を決定していく方式。特に、ページを方眼紙のように同じ大きさの微細な正方形に分割し、これを複数組み合わせて要素や余白を構成する方式。

http://e-words.jp/w/%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3.html

はい、そういうことです。

グリッドデザインのメリット

Grow Groupでもお世話になりっきりのグリッドデザインについてぜひ活用すべき理由をまとめました。

整ったコンテンツ

複雑な情報をグリッドデザインによって整列化・順序化することによって、分かりやすく、長い文章も読みやすいコンテンツにすることができます。

バランスのとれたレイアウト

左右対称のグリットシステムによって、ブロックの大きさが揃えられ、上下左右に均整のとれたレイアウトを作ることができます。

また、他に複数ページがある場合は、そのデザインを継承し、一貫性を保ったレイアウトをつくることも容易になります。

それはデザインの途中でデザイナーが代わる場合にも有効になります。

デザインコントロールが容易

グリッドシステムによって大きさや位置が均一になることで、デザインが散らかることを防ぎ、自動的にデザインコントロールすることができます。

それよって、デザイナーの制作のスピードアップにもつながります。

レスポンシブデザインとの相性抜群

レスポンシブデザインとは、PC・タブレット・モバイルなどの複数端末に対して、その画面サイズによってレイアウトを柔軟に調整することのできるシステムのことです。

一つデザインを作るだけで、それぞれの端末に適した大きさ・位置に切り替えることができるメリットもあります。

レスポンシブデザインとして使用するWebサイトをグリッドデザインで制作した場合、レイアウトが整頓されているので、

大きさや位置などがどのように切り替わるかの予想をスムーズにおこなう事ことができるため、デザインとコーディングを別の人が担当する場合にも便利です。

デメリットとその対処法

メリットたくさんのグリッドデザインですが、もちろんデメリットもあります。

整ったレイアウトなため遊びを入れづらく、グリッド内に収まった似たり寄ったりなデザインになりやすいことです。

そこで!

Grow Groupでは、トップページなどのメインとなる「魅せるページ(スペシャルページ)」に関しては、インパクトを生み出すためにこのグリッドのルールを破ってデザインをしています!

そうすることによって、テンプレートではない、そのサイト唯一のオリジナルデザインを創り出すことを可能にしています。

実際に使ってみよう

グリッドデザインは、基本的に以下の2つで構成されます。

  • 「Colum:カラム」・・・要素の入る空間のこと
  • 「Gutter:ガーター」・・・要素と要素の隙間にあたる、余白のこと

まずはwebサイトの横幅を決めます。

横幅に関しては、そのWebサイトの用途や時代によっても左右されてきますので、以下の記事を参考にしてみてください。

最近のホームページの横幅は?世界基準に合わせてみよう

おすすめサイト GrigGuide

このサイトでは、自分の好きな幅でグリッドデザインを組むことができます。

横幅が決まったら、次はここで使いやすいグリッドサイズを見つけて、あなただけのオリジナルグリッドを作ってみるのもいいのではないでしょうか。ぜひ活用してみてくださいね♪

http://grid.guide/


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
Webデザイン
デザイン
公開日: 2016年12月08日
最終更新日: 2019年05月28日
これがあればデザイナーは助かる!修正を最小限に抑えるためのデザインディレクション
オンスタ運営
制作現場で使えるバナー制作のワークフロー
デザイン
公開日: 2017年02月16日
最終更新日: 2019年05月28日
制作現場で使えるバナー制作のワークフロー
オンスタ運営
知っておきたい!Photoshopを使ってできることを大公開
Webデザイン
公開日: 2019年06月14日
最終更新日: 2019年06月18日
知っておきたい!Photoshopを使ってできることを大公開
  • # Photoshop
  • # pickup
  • # できること
オンスタ運営
Webデザイナー、DTPデザイナーが取れる資格まとめ
デザイン
公開日: 2019年03月30日
最終更新日: 2019年06月21日
Webデザイナー、DTPデザイナーが取れる資格まとめ
オンスタ運営
デザイナーが知っておくべきデザイン業界用語集【DTP】
デザイン
公開日: 2018年12月27日
最終更新日: 2019年06月24日
デザイナーが知っておくべきデザイン業界用語集【DTP】
オンスタ運営
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2019年11月07日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # Udemy
  • # セール情報
  • # タイムセール
オンスタ運営
よく使われるA4パンフレットの折り加工の種類
デザイン
パンフレット
公開日: 2018年08月02日
最終更新日: 2019年05月28日
よく使われるA4パンフレットの折り加工の種類
オンスタ運営
なんか物足りない…デザインにひと工夫!簡単テクニック10選
Webデザイン
デザイン
公開日: 2019年01月25日
最終更新日: 2019年05月28日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
Webデザイン
プログラミング
公開日: 2017年07月17日
最終更新日: 2019年05月28日
【JSプラグイン】スクロール連動型アニメーション!jQuery不要のJSプラグイン「AOS」!
オンスタ運営
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
デザイナー
デザイン
公開日: 2017年01月16日
最終更新日: 2019年05月28日
デザイナーが成長するには(デザイナーがキャリアアップするための道のり-其の2)
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。