WEBデザインの流行り?写真や文字に図形を重ねるのはなぜなのか?

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

毎日デザインのポイントを解説するインスタアカウントを運営しております。

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

今日のテーマ:図形を重ねる

今のWEBデザインによく見る図形を重ねたデザイン。これは説明不要ぐらい超簡単にできるデザインポイントになります!

しかしなぜ図形を重ねるのかまで説明できる人はなかなかいないかと。今回の記事ではなぜ図形をわざわざ重ねているのかまで解説しています!

最近のWEBデザインでよく見る流行りの図形を解説

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

写真や文字の下にずらした図形を重ねたデザインです!

今回のデザインポイントもとても簡単に作れるモノです!これは今時のWEBデザインで頻繁に見られます。

WEB以外にグラフィックでも使えるのでぜひ覚えておいて欲しいです!

作り方は写真の下に大きくずらした四角形を重ねるだけですのでめちゃくちゃに簡単ですね!もはや説明も不要!

このようにイラレやフォトショップの難しい操作を覚えるよりも基本操作でできる表現を多く知ることの方が大切です。基本操作を使ってできる表現はかなり多いです!

そしてそれらの多くが操作簡単ですのでその表現に気づいているか気づいていないかの違いになります。

今回のデザインポイントのように気づくだけで制作可能な基本操作を使ってできる表現を覚えておきましょう!

 

今回のデザインサンプルでは、黄緑の塗りのある四角形と、ピンクの線だけの四角形が随所に重なっています。

またこれら四角形はデザインからはみ出たり、写真と重なってたり、四角形全体が見える必要は一切ありません!

つまり装飾としての図形の使い方となります。

 

装飾としてカリグラフィーも使っています。こちらは記事がありますので合わせてご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

また左上にはしおり風のデザインポイントも使っています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

過去投稿084のデザインでも装飾として四角形を重ねていました!右下にある不透明度の下がった長方形です。

 

散りばめる図形とも違い、シャドウ的使い方とも違う重なる四角形をぜひ使ってみてください。

不透明度を下げたり、線だけの四角形にするとそこまで目立たずに装飾としての役割を果たしてくれます。

何か物足りないと思ったら超簡単に作れるポイントでした!

 

物足りないならデザイン下に図形を重ねてみよう!

超簡単に作れる今時デザインでした。

 

デザ研
次の章ではなぜ図形を重ねるのか理由を解説しています。

写真や文字に図形を重ねるのはなぜなのか?解説します

サンプルを作ってみました。前章では四角形だけでしたが今回のサンプルでは流体のシェイプも作ってみました。

この章ではなぜ図形を重ねるのかについて書いていきます!

操作方法は簡単で誰でもできるのですが、このなぜが分かっててデザインしているかで差がつきます。

図形を重ねる理由は3つ。

  1. 反復(繰り返し)の要素として
  2. 色を与えることにより意味が強くなる
  3. デザインに奥行きが生まれる

これらが考えられます!

 

例えば同じ色の図形を重ねて配置していく事で、デザイン全体に統一感を生むことができます!

あるいは同じ形の図形を重ねる事でも繰り返しの要素にもなります。

このように繰り返されることで統一感は生まれるわけです。反復での統一感はこちらの記事をどうぞ。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

そしてもう一つの理由である色を与えるについて。

先ほどのサンプルデザインでは流行のグラデーションを使う事で流行の意味合いを強めました。

また下記はカップル向けのLPサイトの一部分になります。

こちらのLPでも図形が重なっていますが、図形に色があることによりカップルの意味合いが強まっています!

 

最後に奥行きが生まれるについてですが、これは重なることにより例えば写真が上、図形が下などの上下関係が生まれます。

重ねることで生まれた上下関係により立体感が生まれデザインがリッチになるということです!

詳しくはこちらの記事で解説しています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

このように図形を重ねることで、、、

繰り返しの要素が強まり、色が加わることにより意味合いが強まり、立体感が生まれる

そんな2つの大きな理由があります!

 

WEBデザインの流行り?写真や文字に図形を重ねるのはなぜなのか?まとめ

いかがでしたでしょうか?操作方法は簡単でもこのように考えてくと奥が深いです。

わざと図形をずらして重ねるデザインはWEBデザインにも、グラフィックデザインにも使えるポイント!

すぐに実践できますのでぜひ試してみてください。

 

ドロップシャドウの代わりに写真と同じ形の図形をずらすポイントはこちらで解説しています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

・物足りないならデザイン下に図形を配置してみよう
・反復の要素が強まり、色が加わることにより意味合いが強まり、立体感が生まれる

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)ほぼ毎日投稿(@designkenkyujo)がシェアした投稿


全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG