初心者必見!図形のデザインは塗りだけと線だけをミックスして使う!

ミニマルスタイル透けのゴースト

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

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

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

 

今日のテーマ:ゴーストボタン

デザインにおけるゴーストの紹介!ゴーストとはつまり線だけということです!これはボタンだけでなくデザイン全般で使える重要なポイント。

図形に関してのレベルが深まるかと思います!線だけの図形を使う、そして塗りだけ、線だけの図形をミックスする!初心者の方も必見です!

 

ボタンデザインのまとめ記事を作りました。こちらの記事も含まれています。ぜひご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインやバナーでよく使うボタンのデザイン。[…]

シンプルでミニマルを重視するなら線だけの図形デザインを使おう!

シンプルでミニマルを重視するなら線だけの図形デザインを使おう!

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

線を使ったボタン風のデザインを右下に配置しています!

背景透けてる線だけのボタン

ゴーストボタンというWEBサイトで使われるタンを知っていますか?これ海外のサイトでよく使われている塗りの無い線だけのボタンです。

このボタンを使うことで背景を透かせるのでデザインがかなりシンプルになります。

WEBサイトだけでなくWEBバナーでも使えますし、チラシやパンフレットのノウハウに応用もできます。

今回のデザインサンプルでは丸のゴーストボタンでしたが通常は四角が多いです。

まずはWEBから解説しますと、通常のボタンは塗りがありますよね?そのボタンの塗りを無しにして線だけのボタンにします。めちゃくちゃ簡単ですね!

塗りを無しにして線だけのボタンにする

ただ塗りありのボタンに比べて視覚的に劣るので

例えばWEBサイトではボタンの中では優先順位の低い上に戻るのボタンなどで使われたりします!

なので視覚的に認識できることを取るか、シンプルな雰囲気を取るかの天秤になるかと思います!

 

ミニマルスタイルを重視するなら、、、

線だけのゴーストボタンを使ってみよう!

 

デザ研
次章ではWEBデザインではないゴーストの紹介です!

 

 

初心者必見!塗りの図形と線の図形をミックスするデザインはバランスが良い

塗りの図形と線の図形

チラシやパンフレットにはボタンはありませんが、図形を使うことは多いかと思います。

ただ塗りありの図形ばかりだとデザインはうるさくなります。

コツとしては、、、

塗りありの図形と線だけの図形をデザインの中で混ぜてあげることです。そうするとかなりバランス良くなります!

この塗りありの図形と線だけの図形を混ぜることはWEBデザインも同じように言えます!

 

塗り+線の図形はいつ使えばいい?

ちなみに塗りもあって、線もある図形はいつ使えばいいのか?前述したように

基本的には塗りだけの図形か線だけの図形を使うことが簡単です。

特に初心者の方は線も塗りもある図形は使わないでいいと思います!

ただポップなデザインや可愛いデザイン、エモいデザインなどには塗りもあって線もあるデザインは使えます!

またその際の線は白黒であるとまとまりやすいことも覚えておくと良いかと。

こちらの記事では塗り+細い線でデザインを統一する中級デザインを紹介しています!

関連記事

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

 

線は白黒であるとまとまりやすい

実は前章のデザインサンプルも右下の丸は線だけですが、タイトルの高校時代の文字を囲っている四角は塗りだけになっています!

塗りと線をMIXさせたデザイン

このように塗りだけと、線だけがMIXされています。

 

他にも、、、

旗のマークが線だけの旗と塗りだけの旗を交互にミックス

こちらのデザインは旗のマークが線だけの旗と塗りだけの旗を交互にミックスしています。

 

右上が塗りありの図形、右下に線だけの図形

こちらのデザインも右上が塗りありの図形、右下によく見ると線だけの図形があります!

 

どうしても初心者は塗りだけの選択肢になりがちなので、、、

線だけの図形、そして塗りだけと線だけの図形をミックスする!

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

 

イラレの塗りと線を反転させるショートカットキーは?▼
イラレはshift + Xを押すと塗りと線が反転して便利です!

 

もっとゴーストボタンのポイントを使ったデザインが見たい方!

この記事で解説したゴーストボタンのデザインをもっと見たい方は、、、

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

もっとゴーストボタンのポイントを使ったデザインが見たい方!

 

デザ研
クリックするとゴーストボタンを使ったデザイン”だけ”が表示されます!

初心者必見!図形のデザインは塗りだけと線だけをミックスして使う!まとめ

いかがでしたでしょうか?初心者の方は塗りだけの図形を使う場合が多く、意図せず重たくなってるデザインをよくみます。

そんな時に使えるのが線の図形。そもそも線の図形を使うという選択肢と線の図形をミックスするという選択肢があればあなたのデザインの幅はかなり広がるはず。

デザインで頻出する図形デザインの基本を抑えた記事でした!

 

ちなみに多くのデザイン参考書を読んだことがありますが、

今回の記事のようなNGデザインとOKデザインの比較を書籍で学びたいのなら「やってはいけないデザイン」がおすすめです!

created by Rinker
¥1,980(2021/09/26 15:14:27時点 楽天市場調べ-詳細)

 

こちらの記事ではノンデザイナー向けのまとめ記事にも含まれています!

ノンデザイナーだけでなく初心者デザイナーの方にも役立つ内容となっています!

関連記事

デザイナーではない、つまりノンデザイナーの方でも知るだけで今すぐ使えるデザインポイントというのは存在します。今回の記事ではそんな知れば今すぐ使えるデザインのポイントを紹介!ノンデザイナーの方もブログのアイキャッチ画像[…]

 

こちらの記事はクールなデザインまとめ記事にも含まれています!

関連記事

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

 

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

関連記事

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

・ミニマルスタイルを重視するなら線だけのボタンを使ってみよう!
・塗りの図形と線の図形をミックスするとバランス良い

 

 

この投稿をInstagramで見る

 

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


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

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

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

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

CTR IMG