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を実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

デザイナーとカメラ撮影
デザイナー
デザイン
公開日: 2017年06月16日
最終更新日: 2019年05月28日
デザイナーとカメラ撮影
オンスタ運営
なんか物足りない…デザインにひと工夫!簡単テクニック10選
Webデザイン
デザイン
公開日: 2019年01月25日
最終更新日: 2019年05月28日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2019年06月15日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
Webデザイナー、DTPデザイナーが取れる資格まとめ
デザイン
公開日: 2019年03月30日
最終更新日: 2019年06月21日
Webデザイナー、DTPデザイナーが取れる資格まとめ
オンスタ運営
知っておきたい!Photoshopを使ってできることを大公開
Webデザイン
公開日: 2019年06月14日
最終更新日: 2019年06月18日
知っておきたい!Photoshopを使ってできることを大公開
  • # Photoshop
  • # pickup
  • # できること
オンスタ運営
日本語フォントの役割と分類を知って、適切なフォント選びをしよう!
デザイン
公開日: 2017年02月17日
最終更新日: 2019年08月02日
日本語フォントの役割と分類を知って、適切なフォント選びをしよう!
オンスタ運営
【ホームページ制作】~ターゲット設定はしない方がいい!?~
コンサルティング
デザイン
公開日: 2016年12月28日
最終更新日: 2019年05月28日
【ホームページ制作】~ターゲット設定はしない方がいい!?~
オンスタ運営
デザイナーとして向上するための本質を見極めるデザイン
デザイナー
デザイン
公開日: 2016年12月05日
最終更新日: 2019年05月28日
デザイナーとして向上するための本質を見極めるデザイン
オンスタ運営
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)
Webデザイン
オンライン学習
デザイナー
制作
公開日: 2019年11月12日
最終更新日: 2019年11月12日
webデザイン参考まとめ!webデザイン学習に役立つサイト4選(国内外問わず)
  • # webデザイン参考
  • # 国内外問わず
オンスタ運営
よく使われるA4パンフレットの折り加工の種類
デザイン
パンフレット
公開日: 2018年08月02日
最終更新日: 2019年05月28日
よく使われるA4パンフレットの折り加工の種類
オンスタ運営
全記事一覧

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

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

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

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