MENUCLOSE
twitter ツイッターfeedlyRSS

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

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

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

公開日:2018年08月10日
最終更新日:2022年01月17日
オンスタ運営
デザイン
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を実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
アートディレクターに必見!撮影ディレクションの仕方!(静止画モデル撮影編)
デザイナー
デザイン
公開日: 2017年11月07日
最終更新日: 2017年11月07日
アートディレクターに必見!撮影ディレクションの仕方!(静止画モデル撮影編)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイン制作で、色を選ぶのに困っていませんか?
デザイナー
デザイン
公開日: 2019年03月13日
最終更新日: 2022年01月17日
デザイン制作で、色を選ぶのに困っていませんか?
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【新人デザイナー】初心者向けWebデザイン勉強法
デザイン
公開日: 2021年09月14日
最終更新日: 2021年09月14日
【新人デザイナー】初心者向けWebデザイン勉強法
m.takai

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2018年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーが知っておくべきデザイン業界用語集【DTP】
デザイン
公開日: 2018年12月27日
最終更新日: 2022年01月17日
デザイナーが知っておくべきデザイン業界用語集【DTP】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザインはコンテンツで決まる!
デザイナー
デザイン
公開日: 2018年03月15日
最終更新日: 2018年03月15日
デザインはコンテンツで決まる!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
入社前の時間を有効活用!新人デザイナーに贈る【入社までにやっておくと良い】3つのこと
デザイナー
デザイン
公開日: 2018年02月21日
最終更新日: 2018年02月21日
入社前の時間を有効活用!新人デザイナーに贈る【入社までにやっておくと良い】3つのこと
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2022年01月17日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # Udemy
  • # セール情報
  • # タイムセール
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
Shopify
デザイン
公開日: 2020年05月29日
最終更新日: 2020年05月29日
Shopify (ショッピファイ)とは?サービスの概要から制作フローを知る記事をまとめました。
オンスタ運営
全記事一覧

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

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

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

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