漫画のコマ割りを参考にしたメリハリあるデザインレイアウトを紹介！

こんにちは、読むだけでデザインを学べる！デザイン研究所です！

フォローするだけでデザインを学べるTwitterアカウントと
毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります！

今日のテーマ：漫画風のコマ割りレイアウト

漫画のコマ割りを参考にしたレイアウトの紹介です。このレイアウトを採用すればメリハリがありつつも、整列させるそんな良いとこ取りのデザインとなります。

写真が複数枚ある場合はぜひ検討してみて欲しいレイアウト！ブログ記事では詳しく解説しています。

写真が複数あるなら漫画のコマ割り風レイアウトを検討してみては？

こちらが今回のデザインサンプルです。

背景が漫画のコマ割りのようなレイアウトになっています！

マンガのコマ割りは大小が不揃いで横長だったり縦長だったりしますよね。あれを写真素材がたくさんある場合のレイアウトに応用するんです。

すると物語性を感じる緩急あるレイアウトが完成します！

これはポスターやチラシ、または動画制作にも応用展開できるマンガのテクニック。

例えば映画のポスターなどイメージしやすいかと思います。様々な場面をコマ割りで配置する感じです。

また動画制作の場合はコマが動いて出てくる感じで活用できます！

過去投稿103「複数枚写真で作るグリッドレイアウト」では整列した写真配置

過去投稿116「ランダム配置に統一感だすには」ではランダムの写真配置を紹介しました！

そして今回はその中間ともいえる整列させつつ緩急つけた写真配置になります！

今回のデザインサンプルでは写真に白縁をつけること、そして写真の上に青を重ねることで統一感を出しています。

また全面に沢山の写真を配置すると文字はかなり読みにくくなりますが、

濃い塗りを描画モードを変更して全体に加えると可読性は上がります。

また今回は文字の下に白枠を配置してさらに可読性を上げています！

写真が複数あるのなら、、、

漫画風のコマ割りレイアウトを使ってみよう！

デザ研

次章ではどのような配置にしていくかを解説していきます！

漫画のコマ割り風レイアウトならメリハリのあるデザインに！

前章ではたくさんの写真を使った漫画のコマ割り風レイアウトでしたが、、、

今回のデザインサンプルでは3枚の写真を使って漫画のコマ割り風を作ってみました！

斜めの図形に写真を入れることでより漫画風をイメージしやすくなったかと思います。

漫画のコマ割り風レイアウトを作る時に使えるポイントとして

強弱をつけることができる
目線を考えて作ることができる

この2点が挙げられます。

強弱をつけることができる

前章も今回のデザインサンプルも、写真によって大きさを変えていますが、これは強弱をつけているということです。

すべて同じサイズの写真にしても良いのですが、それだと統一感はでるものの退屈な印象を与えかねません。

デザ研

漫画もそうで、すべて同じコマであると退屈かと思います！

そのため今回のように大きい小さいを意識してあげることで緩急あるレイアウトを作ることができます！

目線を考えて作ることができる

人の目線は上から下に流れ、左から右に流れますが、、、

この章のデザインサンプルでは上から朝、昼、夜と時間軸に沿って配置されています。

漫画の読み進め方がそうである通り、この漫画のコマ割り風レイアウトを採用する時は目線も使えるととても良いかと。

目線の動きに合わせて、時間軸に沿った配置をする！

例えばツアーの紹介や、ストーリーを意識したレイアウトなんかも目線と時間軸を考慮すると完成度が上がります！

漫画のコマ割り風レイアウトは強弱と時間軸を意識してみよう！

参考になれば嬉しいです！

なおクリッピングマスクの操作方法が分からない方はこちらの記事をご覧ください。

コマ割りを作っている方法とは？▼
図形をペンツールで作って、その図形に写真をクリッピングマスクしています。

もっとマンガのコマ割り風のポイントを使ったデザインが見たい方！

この記事で解説したマンガのコマ割り風のデザインをもっと見たい方は、、、

デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ！

デザ研

クリックするとマンガのコマ割り風を使ったデザイン”だけ”が表示されます！