こんにちは、読むだけでデザインを学べる！デザイン研究所です！
デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。
WEBデザインには色々なテクニックが散りばめられています。
今回の記事ではそんなWEBデザインをおしゃれにするテクを32種類紹介！
32種類を4つのカテゴリーに分けてみました。
- 文字
- 図形
- 背景・レイアウト
- 配色
それぞれのカテゴリーに分類したWEBデザインのテクニックを解説します！独学の参考になるはずです。
- 1 おしゃれなWEBデザインを作る文字の参考テク8つ！
- 2 おしゃれなWEBデザインは図形から？12種類の参考テクを紹介！
- 2.1 おしゃれなWEBデザインの図形1：角丸
- 2.2 おしゃれなWEBデザインの図形2：ゴーストボタン
- 2.3 おしゃれなWEBデザインの図形3：ピクトグラム
- 2.4 おしゃれなWEBデザインの図形4：1つの角だけ丸く
- 2.5 おしゃれなWEBデザインの図形5：余白枠
- 2.6 おしゃれなWEBデザインの図形6：繰り返し
- 2.7 おしゃれなWEBデザインの図形7：全体の繰り返し
- 2.8 おしゃれなWEBデザインの図形8：重ねる
- 2.9 おしゃれなWEBデザインの図形9：ドロップシャドウ
- 2.10 おしゃれなWEBデザインの図形10：同じ図形をずらす
- 2.11 おしゃれなWEBデザインの図形11：塗り＋線
- 2.12 おしゃれなWEBデザインの図形12：2本線
- 3 おしゃれなWEBデザインの背景やレイアウト！参考テクを5種類紹介。
- 4 おしゃれなWEBデザインの配色を7種類紹介！
- 5 WEBデザイン独学の参考になるおしゃれなテクニックを32種類紹介します！
おしゃれなWEBデザインを作る文字の参考テク8つ！
WEBサイトの文字の配置や装飾をまとめました。ただ配置するだけじゃなくてポイントを意識してデザインすることで完成度が上がるはずです。
知るだけですぐに使えるテクニックもあるのでぜひご覧ください！
ちなみにタイトルデザインのまとめ記事はこちら
タイトルは文章の中で最も重要な要素であることは間違い無いです。今回の記事ではそんなタイトルに関してのデザインポイントを27種類紹介！27種類も知ればおしゃれなタイトルデザインを作ることは十分可能です。個別記事[…]
おしゃれなWEBデザインの文字①：左揃え
WEBデザインも左揃えである文章が多いですね。これは単純に左揃えの方が読みやすいからです！
人間の読み方を考えると左揃えが基本となります。詳しくはブログ記事にて！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります！ […]
おしゃれなWEBデザインの文字②：色・太さ・大きさを変更
めちゃくちゃ多いですね！0を加えるだけのすぐに使えるテクニックです。
特に見出しの番号などに使われていることが多いですね！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの文字③：小さな英語を配置
おしゃれなWEBデザインに多いです！例えば見出しは日本語でその近くに小さな英語を配置するなど！
見たことありますよね？小さな英語を配置することで得られるメリットを個別記事では解説しています。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：小さな英語配置誰でもおしゃれにデザインを作れるポイントの[…]
おしゃれなWEBデザインの文字④：広めのカーニング
例えばWEBデザインのメインビジュアルの部分だけカーニングを広めることなどできます！
カーニングが広いことで落ち着いたデザインや高級感を感じさせることができるのでそのようなデザインにおすすめですね。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの文字⑤：左右を揃える
タイトルや見出し、その下の文章の左右を全て揃えるテクニックの紹介です！
最近のWEBデザインで時々見る形です！作り方も簡単なのでぜひやってみて欲しいですね。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの文字⑥：引用符
吹き出しではなく引用符を使ったデザインの紹介です！WEBデザインではお客様の声やユーザーの声なんかに使われているのを見ますね！
吹き出しよりスタイリッシュになりますのでそのようなデザインにおすすめです！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの文字⑦：境界線と影でポップに
ポップなWEBデザインにおすすめの境界線と影で作るタイトル、見出しの表現です！
作り方もとても簡単なのでぜひ記事をご覧ください。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの文字⑧：Q&Aデザイン
WEBデザインでよくあるFAQのデザインですね。QとAの項目があるFAQですがあることを意識するとメリハリのあるデザインに！
気にするべき点はどれも簡単なものなのでぜひ記事をご覧ください。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインは図形から？12種類の参考テクを紹介！
WEBデザインの図形と言えばボタンですね！ボタンに使えるデザイン、そしてそれ以外に使えるテクニックを解説しています。
シンプルな場合が多い図形ですが、その中でも一手間加えるだけで完成度がグッと上がります！
ちなみに図形デザインのまとめ記事はこちら
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今回の記事では図形についてのまとめ記事を紹介！図形のデザインで[…]
おしゃれなWEBデザインの図形1：角丸
最近のWEBデザインの図形は丸みを帯びたものが多いです！丸みを帯びることで優しいあたたかい雰囲気になりますね。
ボタンにも使えますし、それ以外の図形にも使えるテクニック！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの図形2：ゴーストボタン
線だけのゴーストボタンの紹介です！背景が透けているのでデザインの邪魔をせず配置できます。
ただし塗りがある図形に比べてクリックされにくいというのもあるのでそこは注意です！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの図形3：ピクトグラム
これもWEBデザインでよくありますね！アイコン(ピクトグラム)を活用しましょう。
MENUに配置することもいいし、コンテンツの中でもいいし、記事ではおすすめの素材サイトも紹介しています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの図形4：1つの角だけ丸く
1つの角だけ丸い図形の紹介です！このような図形に写真を入れたりすることが多いです。
上のデザインサンプルでは右上のみ丸くなっているかと思います！ブログ記事ではやり方も解説しています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの図形5：余白枠
背景と同じ色の図形を重ねることで余白枠を作ることができます！その上に文字を配置してもGOOD！
この余白枠という考え方があるとデザインするものが1つ増えますのでチェックしといてください。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります！今日のテーマ：余白枠[…]
おしゃれなWEBデザインの図形6：繰り返し
図形を繰り返すことで反復(くりかえし)を作ることができます。
この反復というのはかなり重要な要素の1つなのでブログ記事でぜひ抑えておきましょう！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの図形7：全体の繰り返し
こちらは全体に対して反復させるテクニックです！1つ前に紹介したのは特定の範囲内での反復。
WEBデザインでいうと1つ前に紹介したのは1つのコンテンツの中での反復であり、今回の反復はWEBサイト全体での反復です！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：モチーフ反復デザインの重要要素である反復(繰り返し)。こ[…]
おしゃれなWEBデザインの図形8：重ねる
これはかなりよく使われています。写真や文字に図形を重ねるテクニックです！
なぜプロのデザインはわざと重ねているのか？それは重ねることで上下関係が生まれ、奥行きがでるんです。リッチになります！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの図形9：ドロップシャドウ
ドロップシャドウはうまくやればおしゃれなデザインとなります！ただやっぱりダサいドロップシャドウというものもありまして、、、
個別記事ではダサくならないドロップシャドウの作り方を解説しているのでぜひご覧ください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。 今日のテーマ：ドロップシャドウ一周回って流行している[…]
おしゃれなWEBデザインの図形10：同じ図形をずらす
これはWEBデザインのボタンに使われることの多いテクニックです！コピーしてずらすですね。
コピーしてずらした図形に対して色を変える、グラデーション、模様など様々に紹介しています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの図形11：塗り＋線
こちらは中級編です！初心者の方は塗りだけか線だけかの図形を使うのが1番良いです！
このテクニックは塗りと線の両方使うということです。ただ扱いが少し難しいため中級編としています。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：塗り＋細い線塗り＋線を文字や図形、イラストに使うデザイン[…]
おしゃれなWEBデザインの図形12：2本線
2本線で吹き出しのように作るテクニックです！これはWEBデザインの見出しなどに使われます。
2本の線だけでシンプルに作れるので抑えておきましょう！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：2本線ワンポイント超簡単操作でフキダシに代わる表現は可能[…]
おしゃれなWEBデザインの背景やレイアウト！参考テクを5種類紹介。
全体の背景は白や単色の多いWEBデザインですが、メインビジュアルや途中のコンテンツなどで使える背景のテクニックをメインに解説しています。
もちろん全体の背景にも使えるテクも紹介しているので独学の参考にぜひ！
ちなみに背景デザインのまとめ記事はこちら
背景のデザインに迷わないためのまとめ記事を作りました。ずばりデザインの背景には基本的には3種類のパターンで構成されます！この3種類のパターンにてそれぞれ自分の引き出しを増やせば迷うことはかなり少なくなると思います。[…]
おしゃれなWEBデザインの背景①：ベタ塗り半透明
WEBデザインでも使いますねえこれ！写真の上に半透明のベタ塗りを重ねてその上に文字を配置することが多いです。
半透明のベタ塗りは黒がとても多いですね。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの背景②：クリッピングマスク
写真の比率が違っていてもクリッピングマスクを使えば同じサイズの写真とすることができます！
また角を丸くしたり、特殊な形の図形に写真を入れたりなど応用もできますね。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：クリッピングマスククリッピングマスクの基本的なやり方と、[…]
おしゃれなWEBデザインの背景③：指定範囲の中ではみ出す
これまたクリッピングマスクのテクニックです！クリッピングマスクは写真と図形に対してだけではありません。
例えば図形からはみ出している文字もクリッピングマスクすることで図形の範囲内ではみ出すことができます！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの背景④：イラストを散らす
ポップで賑やかなWEBサイトにはもってこいのデザインです！それがイラストを散らして背景をつくること。
ブログ記事ではイラストを散らすときのコツなども解説しています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの背景⑤：グリッドレイアウト
グリッドレイアウトを使うと全体が整った綺麗なデザインとなります！
WEBデザインでも採用れることの多いレイアウトですね！ただグリッドにも複数の種類があります、それを個別記事では解説しています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなWEBデザインの配色を7種類紹介！
最後にバナーで使える配色デザインを4種類紹介します！デザイン範囲が少ないためにシンプルに仕上げることが多いですね。
ちなみに配色デザインのまとめ記事はこちら
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。デザインを作る上で色について迷うこと多いですよね。。。今回の記[…]
おしゃれなバナーの配色デザイン①：無彩色＋1色
無彩色とは白黒グレーのこと。それらの色＋1色でWEBデザインを作るテクニックです！
＋1色であるために簡単にシンプルに作ることができます。白黒グレーを使い分けれれば＋1色でも作ることができます。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：無彩色＋１色悩まれる人の多い配色についてかなりオススメの配[…]
おしゃれなバナーの配色デザイン②：無彩色＋2色
簡単かつ1つ前の＋1色よりも配色の幅がかなりあります。WEBサイトも普通に＋2色でも作れます！
配色の組み合わせのコツや、デザイン例を用意しているのでぜひ記事をご覧下さい。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。 今日のテーマ：無彩色＋2色初心者脱出のための配色知識[…]
おしゃれなバナーの配色デザイン③：グラデーションカラー
WEBデザインでグレデーションもよく見ますよね。ただしグラデは間違えるとダサくなってしまいます。。。
しかしコツさえ抑えればプロのようなグラデになるのでぜひ参考にしてみてください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなバナーの配色デザイン④：グレー
WEBデザインでもかなり使いやすいグレーの配色です！グレーがなぜ最強かといいますとどんな色にも合うんです。
そのためどのデザインでも使うことができる。その意味で最強ということです！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなバナーの配色デザイン⑤：白から少しずらす
白から少しずらした色を使うことで伝えたいイメージを与えれることがあります。
よく使うのが少し温かみのある暖色系を使うことですね！上のデザインサンプルでもそうなっています。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：白を少しずらした色背景の色を白から少しずらした色にしてみま[…]
おしゃれなバナーの配色デザイン⑥：イラスト
イラストを使ったWEBデザインでよく使う配色のテクニックです！
それがイラストの配色とサイトの配色を揃えるということ。そうすることで時短にもなりますし統一感もでます！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
おしゃれなバナーの配色デザイン⑦：多色
多くの色を使うことも場合によってはありますがそのときに意識した方がいい配色テクニックを解説しています。
カラフルなデザインもここが分かっているだけで初心者ぽくならないのでぜひ記事をご覧ください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
WEBデザイン独学の参考になるおしゃれなテクニックを32種類紹介します！
いかがでしたでしょうか？おしゃれなWEBデザインを作る際に参考になるであろうテクニックをカテゴリー別に紹介してみました。
デザイン研究所ではギャラリーサイトも運営しております！
そんなギャラリーサイトのカテゴリーにWEBデザインがありますので、他のプロが作ったWEBデザインをチェックしてみましょう。
デザイン初心者の方へ向けた独学方法のまとめ記事もあるのでぜひこちらもご覧ください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。今回の記事ではインスタライブで頻繁に聞かれた勉強方法に関しての質問をまとめ[…]