シンプルなデザインの作り方は線を使え!18種類のパターンを解説!

シンプルなデザインを作るときに線を使うという選択肢は絶対に覚えておきたいポイントです。

今回の記事ではそんな線に関してのデザインポイントを18種類紹介!

塗りのない線を使うこと、そしてその使い方を知ることでデザインの幅はグッと広がるはず。

線を使いこなすことは初心者脱出の1つの方法でもあります。ぜひ参考にしてみてください。

 

目次

線を使ったシンプルなデザイン11種類まとめました!

デザイン研究所のブログではたくさんのデザインポイントを1つずつ紹介しています。

そんな中で線を使ったシンプルなデザインに関した厳選記事を紹介していきますね。

線を使えばシンプルに制作できます。ではどのように線を使えばいいのか?18種類で解説しています!

ちなみに毎日デザインのポイントを解説するインスタアカウントを運営しておりますのでそちらのフォローもよろしくお願いします!

 

そもそもイラレとフォトショで線の作り方が分からないよ!って方はこちらの記事にて線の作り方を解説しています。

まずはこちらの記事をご覧ください。

関連記事

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

 

線を使ったシンプルなデザインの作り方1:強調の三本線

これはかなり多用します。三本線でシンプルに強調できるポイントの紹介です。

タイトルにも使えますし、文中でもワンポイントとして使えます!

注意点としては、細い線の方がすっきりシンプルにまとまることが多いです。

初心者の線は太かったり、大きかったりして野暮たくなっている人がいます。

あくまでもワンポイントなので小さく細い線で配置してあげるのがポイントです!

関連記事

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

 

線を使ったシンプルなデザインの作り方2:中抜き文字

線だけというのは文字に対しても使うことができます!

タイトルによく見られる中抜き文字。これはつまり外側の線だけの文字ですね!

文字の大きさや色ではなくこの中抜き文字にすることでシンプルに目立たせることができます。

なぜなら目立つとは他と違うということだからです。

もちろん全ての文字が中抜き文字だと目立たないですが(笑)一部を中抜き文字にしてあげることで線であっても目立つということですね!

関連記事

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

 

線を使ったシンプルなデザインの作り方3:吹き出し

線を使って余白を活用した吹き出しを作ってみましょう

線で作ることによってデザインの邪魔をしないかなりシンプルな吹き出しを作ることができます!

プロはこの線で図形を作ることが初心者と比べて多いです!

初心者の方はそもそも線を使うという発想にならない場合が多い

線だけで塗りがないので吹き出しもシンプルにまとまるわけですね!

関連記事

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

 

線を使ったシンプルなデザインの作り方4:文字を線として捉える

こちらのデザインポイントは直接的な線ではないのですが、線に見立てて文字を配置するということです。

線のように英字を羅列することがおすすめです!

装飾としての線に見立てた英字ですね。これら英字はタイトルなどに関連する英字だと良いですね!

また英字の中の一部分だけ変更するなど遊び心も持たせやすいです。

 

デザ研
あくまでもデザインの邪魔をせずに配置がポイントです!

 

関連記事

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

 

線を使ったシンプルなデザインの作り方5:正方形で文字を囲む

これも覚えておくと良いポイントです。

一文字ずつ正方形で囲ったデザイン。

こられ正方形は塗りありの図形でも良いのですが、線だけで作ることもできます。

線だけで作った正方形の方がシンプルにまとまります!

タイトルによく使われるデザインですね。このように塗りのある図形と線だけの図形を組み合わせるとバランス良いです!

線だけであまりにもシンプルすぎるなというときは塗りのある図形をMIXしてみてください。

関連記事

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

 

線を使ったシンプルなデザインの作り方6:繰り返してリズムを生む

線を使うことで繰り返しの要素を作りデザインにリズムを生むことができます!

デザイン中に繰り返しの要素を作ることができるとテンポよく読んでもらうことができるわけです。

このデザインでは写真と写真の間に線を加えることで繰り返しの要素となっています。

また各文章の上と下に星マークが配置されていますがこれを線にすることも可能ですね!

 

デザ研
繰り返しの要素に線を使う理由はシンプルに反復できるからですね。

 

関連記事

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

 

線を使ったシンプルなデザインの作り方7:水平に区切らない

区切るというのを線だと捉えたポイントの紹介です!

レイアウトを考えるときに水平線で区切ることが多いかと思います。しかしそれ以外にも選択肢があると良いですね!

水平に区切らないレイアウトを採用することで柔らかな印象やポップな印象を与えることができます。

区切り線は水平の直線だとは限らない!

プロと初心者を分けるものの1つとしてアイデアの数があります。こんなアイデアも増やしていきましょう!

 

デザ研
そのデザインに沿ったアイデアが引き出せるように!

 

関連記事

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

 

線を使ったシンプルなデザインの作り方8:様々な線のパターンを知る

そもそも線を使う選択肢が初心者にない!というのは前述しました。

それを認識できたら次はどのように線を使っていくかが問題です!

下記ではプロのよく使う線デザインを集めてみました。

このように線といってもいろいろなパターンが考えられるのです。

そしてそのどれもが線であるためシンプルにまとまるわけです!

 

デザ研
初心者脱出のためにも線を使っていきましょう!

 

関連記事

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

 

線を使ったシンプルなデザインの作り方9:斜め線

線は線でも斜めの線です!

この斜め線を加えることでデザインに動きをもたすことができます!

デザインサンプルをよーく見ると斜めになっている短い線が文字に重なっています。

このように文字に繋げる斜め線やデザイン全体に動きを加える斜め線などが考えられます!

 

デザ研
個別記事では斜め線以外にも動きを加えるポイントを紹介しています。

 

関連記事

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

 

線で作るシンプルなデザインの作り方10:区切り線

グループを区切る線の紹介です。文章というのはグループ構造になっています。

そんな文章のグループ構造を線で区切ることにより伝わりやすくなります!

先ほど繰り返しについては6で解説したと思います!

つまりこの線があることによって、

  1. 読む人にリズムを与えている(反復)
  2. 読む人に文章の構造を理解させてる(近接)

ということになります!

関連記事

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

 

線で作るシンプルなデザインの作り方11:飾り罫

飾り罫というものを知っていますか?

装飾された線のことを飾り罫と呼びます!

この飾り罫を使うことで女性的なデザインであったり、高級感あるデザインを作ることができます!

タイトルデザインや装飾としても使える飾り罫は素材サイトからDLすることがおすすめです。(個別記事にて解説)

関連記事

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

 

線で作るシンプルなデザインの作り方12:フレームデザイン

線を全体に重ねるフレームデザインの紹介です。

アートボードサイズより一回り小さいフレームを使うことが多いです!

これらは最初からではなく最後に必要であれば加えるという工程がおすすめです!

また上のデザインのようにコーヒーカップの一部を切り抜いて重ねるなどのワンポイントも作れます。

関連記事

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

 

線で作るシンプルなデザインの作り方13:ゴーストボタン

ゴーストボタンとは塗りがなく線だけのボタンになります。

線だけの図形を使うことでシンプルになり、デザインの邪魔をしません!

塗りの図形だけを使うとデザイン自体が重くなりがちです。

しかし線の図形をミックスしてあげることでバランスの良いデザインになります!

関連記事

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

 

線で作るシンプルなデザインの作り方14:境界線と影

線は線でも文字に対しての境界線を使ったポップなデザインの紹介です。

境界線と影を使うことでかなりポップなデザインを作ることができます!

境界線をかけた文字、その文字をコピーしてずらして影にします。

そうすることでポップなタイトルデザインの完成!自分自身もよく使ってしまう線の使い方です!

関連記事

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

 

線で作るシンプルなデザインの作り方15:ストライプ

使いやすいストライプ柄の紹介です!

ストライプが使いやすいのは斜めだからです!

図形や文字は縦と横の軸であることが多いですがそこに斜めの模様が入るとメリハリがつきます。

上のデザインでは文字の影にストライプが入っています。

その他にも図形にストライプを入れたり、全体にストライプ柄を入れたりなど。とても使いやすいです!

関連記事

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

 

線で作るシンプルなデザインの作り方16:文字を線で繋ぐ

ロゴでも使われる線のテクニックの紹介です!

文字を線で繋ぐことにより意味を与えます!

細い線で繋ぐ場合、太い線で繋ぐ場合、その両方を個別記事では解説しています。

これらはロゴでも頻繁に使われるテクニックで、線の図形を重ねるだけなので難易度も低いです!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ:線で繋いだ文字ロゴデザインにも使える文字と文字をつなげる[…]

 

線で作るシンプルなデザインの作り方17:2本線で作るワンポイント

たった2本の線で作るワンポイントの紹介です!

文章の左右に斜め線を加えることによりフキダシに代わるデザインとなります!

上の画像のように線だけで作れる吹き出しデザインは多くあります!

左右に二本線だけでなくこのようにたくさんの選択肢があるとデザインの幅も広がりますね。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ:2本線ワンポイント超簡単操作でフキダシに代わる表現は可能[…]

 

線で作るシンプルなデザインの作り方18:塗り+細い線

塗り+細い線で統一する、ポップなデザインの紹介です!

WEBデザインでもチラシでもこれを意識すると統一感がUPします!

ポイントは全体を塗り+細い線で統一することですね!これが一部分になってしまうとかなり浮いてしまいます。

またどうしてもポップなデザインになってしまいがちなので使いどころは注意です!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ:塗り+細い線塗り+線を文字や図形、イラストに使うデザイン[…]

 

シンプルなデザインの作り方は線を使え!18種類のパターンを解説!まとめ

いかがでしたでしょうか?線を使うことはシンプルなデザインにぴったりです。

線はデザインのイメージを崩すことなく使えることができます。

また18種類の中でワンポイントで使うような線、ボタンや枠として機能する線、伝わりやすくするための線、強調のための線、装飾のための線などなど

たくさんの線の使い方があったと思います!

これらは実際に使ってみることで身になるので使いやすい線をぜひ使ってみてください!

 

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

関連記事

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

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

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

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

CTR IMG