枠のデザインを16種類紹介!シンプルやおしゃれ、かわいいフレームまとめました!

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

デザイン特化のメディアでは国内最大級のTwitterインスタグラムを運営しています。

 

今回のテーマは枠!色んなデザインに枠は使われいてるかと思います。

今回の記事ではそんな枠についての記事を16種類紹介!

確実に枠に対してのデザインの幅を広げてくれるかと思います。最後には注意点も書いてますのでぜひ最後まで記事をご覧ください!

 

基本形以外の枠のデザインを5種類紹介!

枠の種類を解説していきます!枠の基本として長方形、楕円形、三角形などがありますが、その他にも色々と種類が存在します!

基本形以外の5種類の枠を見ていきましょう。

  1. フレームデザイン
  2. 切り取り枠
  3. ぶっとい外枠
  4. 流体シェイプ
  5. その他の枠

枠の種類①:シンプルなフレームデザイン

大きな線だけの枠を使うフレームデザインの紹介です!

上のサンプルデザインでは上が隠れていますが、全面に配置するパターンもよくあります。

このような形ですね!細い線だったり太い線だったり。

このような枠は最後に必要であれば加えるという形が良いと思います!

関連記事

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

枠の種類②:おしゃれでかわいい切り取り枠

ハサミで切り取ったようなギザギザの枠の紹介です!雑誌のデザインなどでも見られます。

これの作り方は簡単でペンツールでクリックするだけで完成します!

このような使い方は切り抜きで使うこともできます!

おしゃれで簡単なのでチャレンジしてみましょう。

関連記事

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

枠の種類③:おしゃれに決めるぶっとい外枠

かなり太い外枠で外側を塗りつぶす方法です!結果的に余白が多めになるので落ち着いたデザインになります。

上のサンプルはその中でとてもポップに装飾している例ですが!

額縁のイメージですね。スタイリッシュなデザインにもぴったりです!

WEBのデザインなどにも使われています。

関連記事

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

枠の種類④:かわいい流体シェイプ

柔らかい優しい印象を与える流体シェイプの枠を紹介します!

実はこれ作り方もとても簡単なんです。曲線ペンツールというツールを使います!

デザイン研究所でもよく使っている枠になります。

グラデーションをかけたりするとさらに今っぽくなりますね。

作り方はブログ記事にて!

関連記事

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

 

枠の種類⑤:その他の枠デザイン

基本の枠である長方形、楕円形、三角形、そしてこれまで紹介していきた4つの枠以外にも様々な枠があります。

上の画像では流体シェイプに近い枠ですが、他にもギザギザの丸を使った枠など考えられます!

ギザギザの枠を使ってその上に文字を配置することもあれば、写真を中にいれる場合もあります!

関連記事

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

 

枠のデザイン!配置の仕方を8種類紹介します!

どのような枠の種類があるか分かったところで、今度は枠をどのように配置するのかそんなパターンを8種類紹介します!

  1. 横幅いっぱいの帯として
  2. 左上のワンポイントとして
  3. 飛び出した丸として
  4. 写真に差し込んで
  5. しおり風のデザインとして
  6. 余白枠として
  7. 枠線と図形を同じいろにして
  8. 線の一部を隠して

枠をどのように配置するか①:横幅いっぱいの帯として

これはバナーの下部などにもよく使われる横幅いっぱいの帯のように作る枠ですね。

この帯を使うことによって背景に依存することなく文字などを配置することが可能です!

中途半端ではなく横幅いっぱいに配置することでコンテンツを明確に区分することができます。

ただし少し間違った使い方をすると途端に初心者ぽくなってしまうのでそこは要注意です!

関連記事

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

 

枠をどのように配置するか②:左上のワンポイントとして

目線の始まりである左上に図形を配置することはかなり多いです!

チラシや動画のサムネイルでもよく見ることができます。

左上に基本図形である長方形や楕円形、三角形から他にも様々な図形を配置することが考えられます。

かなり使いやすいので是非参考にしてみてください!

関連記事

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

枠をどのように配置するか③:飛び出した丸として

丸を飛び出した枠の紹介です!楕円形を普通に配置するのではなく、はみ出させるのがポイントですね!

丸というのは直線ではないため整列させるのが難しい図形でもあります。はみ出すことによって配置も容易になります。

枠を使うことの利点の1つに独立するというのがあります。

背景がごちゃごちゃでも枠を使うことによって可読性もUPし、デザインもしやすくなりますね!

関連記事

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

枠をどのように配置するか④:おしゃれな写真に差し込んで

枠を写真の一部に差し込むデザインの紹介です!

差し込む部分だけ写真から切り抜くことでこのような表現が可能です。一部だけの切り抜きなのでそこまで難しくありません!

ただ枠を配置するのではなく、このように写真に差し込む形で配置することによってワンポイントにもなりますね。

写真の構図も壊さずにシンプルに配置することができます!

関連記事

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

 

枠をどのように配置するか⑤:しおり風のデザインとして

枠を上から飛び出すのですが、その枠の中をしおり風にデザインするテクニックの紹介です!

これには様々なデザインが考えられます。しおりの中をどのようにデザインできるかで完成度が変わってきます。

線を加えたり、文字を変形させたり、シルエットを配置したりなど。

枠を使うだけでなく、このように枠の中までこだわることができることで初心者を脱していきます!

関連記事

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

 

枠をどのように配置するか⑥:余白枠でシンプルに

背景と同じ色の枠を使うことで、余白枠を作ります!

シンプルでスタイリッシュなデザインにもってこいです。

写真の場合の余白枠では白色を使うことが多いです。この白色や背景色で作る枠を余白と捉えるのです!

関連記事

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

 

枠をどのように配置するか⑦:枠線と図形を同じ色にして

枠線を加えて、その枠線と同じ色の図形を重ねることで合体させた使い方です!

上のデザインでは枠線と台形の色を同じにすることにより特徴あるレイアウトになっています。

枠線から同じ色の長方形を配置したり、楕円形を配置したり、枠ではなく文字でも可能です。

同じ色を使うことで統一感もだすことができますね!

関連記事

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

 

枠をどのように配置するか⑧:線図形の一部を隠して

線図形の一部を隠した枠のデザインを紹介します!

線の一部を背景色と同じ色の図形を重ねることで隠します。そんな隠した部分に文字などを配置することが多いです!

上のデザインでも線図形の上部が隠れているかと思います。

枠の中に文字を入れるのではなく、隠した部分に文字を入れるデザインですね。

背景が写真の場合なども可能な方法をブログ記事では解説しています!

関連記事

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

 

枠の装飾デザインを3種類紹介!

最後に枠の装飾を3種類紹介します!

  1. 半透明にする
  2. 1つの角だけ丸くする
  3. 飾り罫を加える

枠の装飾①:半透明にする

上のデザインでは中央に配置した枠が透けています。

これは単純に不透明度を下げているだけです!不透明度を下げることによって背景が見えます。

背景が見えることによって背景写真などを感じさせつつ文字を見えやすくすることが可能です!

ブログ記事では不透明度のショートカットキーなども紹介しています。

関連記事

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

 

枠の装飾②:1つの角だけ丸くする

角の丸い枠ももちろんですが、上のデザインのような1つの角だけ丸い枠を使うこともできます!

このような枠の中に写真を入れることも多いです。WEBデザインなどでも使うことのできる装飾です。

角を丸くすることで自然にやわらかい雰囲気をだすことができますね!

関連記事

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

 

枠の装飾③:飾り罫を加える

飾り罫というのは装飾された線のことです。この飾り罫を枠に加えることも時々ありますね!

上のデザインではよく見ると白い外枠の左右に飾り罫を加えています。

またこちらのデザインでも中央に楕円形の枠を配置するだけでなく

その周辺に飾り罫を配置することでゴージャス感を増しています!

関連記事

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

 

枠のデザインを16種類紹介!シンプルやおしゃれ、かわいいフレームまとめました!

いかがでしたでしょうか?枠の種類と枠の配置方法、そして枠の装飾についてまとめていきました。

ただ1つ枠の使い方で注意点があるとすれば、枠の使いすぎに注意ですね!ワクワクしすぎてごちゃごちゃしてしまえばマイナス効果となります。

枠を使いすぎない!

そのため枠は最初から配置するのではなく、必要であればあとから配置するという手順が望ましいです。

ぜひ参考にしてみてください!

 

デザイン初心者の方へ向けた独学方法のまとめ記事もあるのでぜひこちらもご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今回の記事ではインスタライブで頻繁に聞かれた勉強方法に関しての質問をまとめ[…]

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

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

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

CTR IMG