こんにちは、読むだけでデザインを学べる！デザイン研究所です！
フォローするだけでデザインを学べるTwitterアカウントと
毎日デザインのポイントを解説するインスタアカウントを運営しております。
こちらのブログはインスタ投稿をより深く解説した記事になります！
綺麗に整列させるレイアウトでグリッドを使うことがあります。このグリッドはイラレにもフォトショにもある機能！
ただ整列させるだけではなくそこから強弱をつけたりずらしたりするポイントも解説しているのでぜひ最後までご覧ください！
レイアウトに関してのまとめ記事を作りました。具体的なレイアウトのデザイン例が豊富です。ぜひご覧ください！
デザインにおけるレイアウトのポイントを知ることで圧倒的に作りやすくなります。今回の記事ではそんなレイアウトに関してのデザインポイントを紹介！どんなデザインにもレイアウトは存在します。そんなレイアウトのよくある[…]
グリッドレイアウトで複数のデザイン要素を整列させる！
こちらが今回のデザインサンプルです。
多くの写真素材をグリッドレイアウトでデザインしています。
写真素材が多くある場合のレイアウトで便利なのがこのグリッドレイアウト。
グリッドは日本語にすると格子状。これを使えば綺麗に整列しつつ多くの要素を配置することが可能です！
今回は全て同じサイズの正方形で配置しましたが、グリッドに沿って強弱をつけたサイズにすると整いつつもメリハリ生まれます。あるいはポイントであえてグリッドからずらすとかもテクニックですね。(次章で解説しています)
デザインサンプルでは撮影者の違うフリー素材の写zz真を使っているので写真自体に統一感がありません。
ですので統一感を出すために同じ正方形を使うことと、最後にトーンを揃えるべく外枠の青色を全体に少しだけ入れています。
ちなみにおすすめのフリー素材サイトはこちらの記事をご覧ください。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今回の記事ではインスタライブで頻繁に聞かれた勉強方法に関しての質問をまとめ[…]
グリッドは写真の配置だけでなく全体のレイアウトに使えるデザインポイントです。文章などもグリッドに沿った配置にすることで整います！
グリッドの注意点としてはやや単調なつまらないレイアウトになりがちということですね。
そこで配置の大きさの強弱をつけることやあえてポイントから外すなどの選択肢が生まれるわけですね。
またコンセプトやターゲットに合わせて雰囲気を変えましょう！
写真も角丸を帯びる写真にしたり、写真1枚1枚に枠をつけたりすることでポップになりますし、写真の配列に余白をつけるとゆとりあるデザインになったりします！
グリッドレイアウトは綺麗に整列しつつ多くの要素を配置することが可能！
要素が多い場合はぜひこのグリッドレイアウトの検討をしてみてください。
整列に関してはこちらの記事も参考になりますので合わせてご覧ください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
グリッドレイアウトを使った応用デザインを紹介！
上のデザインサンプルでは全章で使ったグリッドレイアウトの均等配置の他に2つ使っています！
しかしこの3つのどれもがグリッドレイアウトを基準としています。
基準としてそこから大小をつけたりずらしたりしているということですね。
イラレにもフォトショにもグリッド機能があります。このグリッドを表示することによって整列したレイアウトを作ることが可能です。
またフォトショップもイラレも環境設定>ガイド・グリッドで調節することができます。
このように自分のイメージするグリッドを表示し、それに合わせて作っていくことが可能です。
イラレではcmd(ctrl)＋¥、フォトショではcmd(ctrl)＋＠で表示・非表示が可能です。
グリッドを基に強弱をつけたレイアウトデザイン
わかりますでしょうか？前章では同じ正方形で写真がトリミングされていますが、このサンプルでは大きい画像、長い画像と強弱のあるレイアウトになっております。
横3×縦5の正方形で作ったレイアウトは崩していないため強弱をつけても整列できています！
このように自分で決めたグリッドの中で大小を変えることにより、強弱のメリハリがありつつも整列したデザインを作ることができます！
グリッドを基にずらしたレイアウトデザイン
こちらのサンプルではグリッドを基に整列したあとに、あえてずらしています。
以前のレイアウトよりも開放感があり、窮屈な印象にもなりません！
あくまでもグリッドを基にずらしているため、雑多な印象にはなりません。
同じ図形をずらすというポイントはこちらの記事で解説しております。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
まとめますと、、、
グリッドを基に強弱をつけたりずらしたりすることもできる！
そうすることであくまでも整列を意識した状態で伝えたいイメージに沿わせることができます。
ちなみに整列のようなデザインにおける基本の理論を学びたい方は、、、
デザイナーズブックが必読ですのでぜひ買ってみてください！自分はこれでめっちゃ変わりました。
またはこちらの本でも分かりやすく解説してあります。どちらも本当におすすめです！
もっとグリッドレイアウトのポイントを使ったデザインが見たい方！
この記事で解説したグリッドレイアウトのデザインをもっと見たい方は、、、
デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ！
グリッドレイアウトで作る整列したデザインまとめ
いかがでしたでしょうか？グリッドを使ったレイアウトについてご紹介しました。
ただ闇雲にグリッドに沿ったレイアウトを採用するのではなく、
伝えたいイメージに合わせて強弱をつけたりずらしたりできると良いですね。
また今回のサンプルでは写真の配置が中心になってしまいましたが、グリッドはデザインレイアウト全般に使えるポイントになります！
要素が多い場合などぜひグリッドを使ってみてください。
ちなみにレイアウトについてのデザイン参考書も読んだことがありますが、、、
今回のようなデザインのレイアウトについてもっと書籍で学びたいのなら「伝わるデザインの基本」がおすすめです！
特に初心者の方にオススメします。ベストセラーだけに他の書籍と比べてかなり分かりやすいのです。
もし初心者を脱出しているのであればレイアウトに関してはこの「レイアウト・デザインの教科書」がオススメです！
こちらの記事はWEBデザインまとめ記事にも含まれています！WEBで使える32種類のテクニックをまとめました！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインには色々なテクニックが散りばめられて[…]
・グリッドを基に強弱をつけたり、ずらしたり。
この投稿をInstagramで見る
全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。