こんにちは、読むだけでデザインを学べる！デザイン研究所です！
デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。
WEBデザインやバナーでよく使うボタンのデザイン。ボタンの機能はなくともチラシのデザインなどでも使われていると思います！
今回の記事ではそんなボタンについての記事を8種類＋注意点を紹介！
ボタンのデザインはスタイルと装飾の2つのカテゴリーに分けて考えることができます！
【保存版】ボタンのデザインまとめ pic.twitter.com/v5xBvYXuXG
— デザイン研究所 (デザ研) (@designkenkyujo) January 5, 2021
WEBやバナーで使えるクリックボタン！デザインのスタイルを4種類紹介！
ボタンデザインの1カテゴリーであるスタイルを4種類紹介します！
- 線図形あるいは塗り図形で作る基本パターン
- 角の丸いボタン
- 塗り＋細い線を使ったポップなボタン
- 長方形以外の形をしたボタン
クリックボタンのデザインスタイル①：塗りと線の両方を使う
初心者におすすめなのが、塗りだけの図形か、線だけの図形を使うこと！
特に線の図形を使うという選択肢がない人が多いので要チェックです。
また塗りだけの図形と線だけの図形を同じデザインの中で両方使ってあげるとバランス良いです！
詳しくはブログ記事にて。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
クリックボタンのデザインスタイル②：角を丸くする
四角ではなく角を丸くすることが考えられます！これはかなりよく使うボタンのデザインですね。
角を丸くすることで雰囲気も柔らかくなり、やさしくなりますね。
個別記事では角を丸くする方法を解説しています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
クリックボタンのデザインスタイル③：塗り＋細い線
塗り＋細い線でボタンを作るとポップでおしゃれなボタンになります！
細い線というのがポイントです！太い線ですとかなり初心者ぽいボタンデザインになるので注意です！
塗り＋細い線でボタンを作るときは、ボタン以外のデザインも塗り＋細い線で統一されていることが多いです。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：塗り＋細い線塗り＋線を文字や図形、イラストに使うデザイン[…]
クリックボタンのデザインスタイル④：長方形以外の形を使う
正円のボタンはもちろんですが、その他にも長方形以外のボタンを時々見かけます！
例えばギザギザの丸でできたボタンや流体シェイプを使ったボタンなど。
配置するデザインのイメージに合わせて四角以外のボタンの形状を考えられると良いですね。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
WEBやバナーで使えるクリックボタン！デザインの装飾を4種類紹介！
ボタンデザインの1カテゴリーである装飾を4種類紹介します！
- 単色はもちろんグラデーションのボタン
- コピーしてずらしたボタン
- ドロップシャドウをかけたボタン
- 一手間加えたボタン
クリックボタンの装飾デザイン①：グラデーションを使う
ボタンの色の話ですが単色の他にはグラデーションが考えられます！
グラデーションはうまくやればダサくなりません。近年のWEBサイトでもグラデーションのボタンはちょくちょく見ます！
うまーくグラデーションをボタンにも取り入れていきましょう。取り入れ方は個別記事をご覧ください。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
クリックボタンの装飾デザイン②：ずらして装飾する
ボタンのコピーを作り、少しずらして下に配置する装飾です！
ずらしたコピーのボタンには違う色やグラデ、斜線や水玉など様々に考えることができます。
自分自身かなり使うテクニックになります。ボタン以外にも文字や他図形にも使うことができます！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
クリックボタンの装飾デザイン③：ドロップシャドウ
ボタンにドロップシャドウを加える装飾です！
ただしドロップシャドウにも初心者ぽいドロップシャドウとプロっぽいドロップシャドウがあります。
個別記事を見て初心者ぽいドロップシャドウにならないように注意。ドロップシャドウは近年のトレンドでもありますね！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。 今日のテーマ：ドロップシャドウ一周回って流行している[…]
クリックボタンの装飾デザイン④：一手間加える
一手間加えることでリッチなボタンデザインになったりします。
例えばボタンに図形を加えることでぷにぷにとなったり、立体的になったり、豪華になったり。
一手間加えることになりますが、その一手間で他との差別化にもなりますので試したいところです！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
【注意点】クリックボタンのデザインの中にある図形は小さくしよう！
ボタンの中に三角や矢印などを使うことも多いですが、、、
初心者のデザインではボタンの中の三角形や矢印が大きいのです。
こちらの記事ではボタン以外でも小さくするべき図形について解説しています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
WEBやバナーで使える！クリックボタンのデザイン８種類をまとめました！
いかがでしたでしょうか？ボタンデザインはWEBデザインでは必須ですよね。ただバナーやチラシにも見受けられるデザインです！
今回紹介したスタイルと装飾の2カテゴリーのデザインをそれぞれ知ることで幅は広がるはず！
ぜひすぐに実践してみてください。
デザイン初心者の方へ向けた独学方法のまとめ記事もあるのでぜひこちらもご覧ください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今回の記事ではインスタライブで頻繁に聞かれた勉強方法に関しての質問をまとめ[…]