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

今時デザインは四角形を重ねよ

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

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

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

 

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

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

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

 

ちなみにこちらの記事はおしゃれなデザインを作る34のテクニックを解説したまとめ記事にも含まれています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事ではそんなデザインをおしゃれにするテクニ[…]

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

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

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

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

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

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

文字と四角形、写真と四角形が重なっています

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

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

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

基本操作を使ってできる表現は多い

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

 

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

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

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

 

装飾としてカリグラフィーを使ったデザイン

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

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

左上にしおり風のデザインポイントを使用

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

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

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

装飾として四角形を重ねたデザイン

 

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

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

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

 

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

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

 

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

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

流行の図形を重ねるデザイン

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

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

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

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

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

これらが考えられます!

 

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

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

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

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

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

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

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

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

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

 

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

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

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

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

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

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

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

 

もっと図形を重ねるのポイントを使ったデザインが見たい方!

この記事で解説した図形を重ねるのデザインをもっと見たい方は、、、

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

もっと図形を重ねるのポイントを使ったデザインが見たい方!

 

デザ研
クリックすると図形を重ねるを使ったデザイン”だけ”が表示されます!

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

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

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

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

 

こちらの記事はWEBデザインまとめ記事にも含まれています!WEBで使える32種類のテクニックをまとめました!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインには色々なテクニックが散りばめられて[…]

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

 

 

この投稿をInstagramで見る

 

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


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

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

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

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

CTR IMG