Webデザインを制作する際に、いまいちデザインがパッとしない時ってありませんか？
そんな時は「あしらい」を追加してデザインにメリハリをつける必要があります。
この記事ではWebデザインのあしらいについて、「考え方」「勉強方法」「あしらいの例」を紹介します。
この記事を読めば、デザインの中で「あしらい」を認識できるようになるので、デザインを見る普段の時間がより一層楽しくなります。
目次
あしらいについて学ぼう
それでは早速、あしらいについて学んでいきましょう。
あしらいとは
まずは、「あしらい」という単語の共通認識を合わせていきましょう。
あしらいとは、デザインの装飾のことです。
Webデザインにおいては、デザインカンプの工程で配色とあしらいの作成を行います。
あしらいはメリハリをつける
あしらいは、デザインを制作する上で非常に大切な役割を担っています。
その役割を確認するために、これから例題を出して説明していきます。
あしらいが無いデザイン
まずは、あしらいが無いデザインを見ていきましょう。
綺麗に整って見えますが、大事な情報がどこなのかわかりにくくメリハリがありません。
このデザインにあしらいを追加して、メリハリをつけていきましょう。
あしらいが有るデザイン
次に、あしらいが有るデザインを見ていきましょう。
キャッチコピーの下線が一番わかりやすいです。
あしらいが追加されたことによって、どこの情報を伝えたいかのメリハリがつきました。
このように、あしらいを追加することによってデザインの印象を大きく変えることができるのです。
あしらいのポイント
ここまでで、あしらいがデザインの印象を大きく変えることが伝わったかと思います。
つまり、あしらいはデザイン4原則の「対比」に必要不可欠な要素なのです。
復習
デザイン４原則の「対比」については、以下の記事で解説しています。
復習が必要な方は、以下の記事も合わせてご覧いただけますと幸いです。
あしらいの効果
次に、あしらいがもたらす効果についてまとめていきましょう。
あしらいを付ける事によって４つの効果を見込むことができます。
- 情報を整理しやすくする
- 大事な情報を伝えやすくする
- 見えにくい情報を見やすくする
- サイトの雰囲気を演出する
ただ、メリハリをつけるだけでなく上記の効果を意識してあしらいをつけていきましょう。
あしらいの考え方
ここまでであしらいについてのイメージを膨らませてきました。
次は、このあしらいの知識を増やすための方法を確認していきましょう。
あしらいはパターン
まず、あしらいはパターンが決まっているということを覚えておきましょう。
- 見出しには見出しのあしらい
- ボタンにはボタンのあしらい
- 大事な情報につけるあしらい
上記の箇所のように、Webサイトの中であしらいが必要な箇所はある程度パターンが決まっています。
なので、あしらいの使い所を覚えるのはとても大切なことです。
あしらいは真似から始める
そして、デザインを制作する中で、あしらいは参考サイトを参考に真似をしていきます。
今制作しているWebサイトに合いそうなあしらいはないか、探して「アレンジ」するのです。
つまり、世界に存在しない全く新しいあしらいを、自分で生み出す必要はないのです。
もちろん、自分で新しいあしらいのアイデアを生み出すことも時にはあります。
ただ、全てのあしらいを自分で０から作る必要はないことを覚えておきましょう。
あしらいは記憶から引き出す
そして、あしらいは記憶の中から引き出せるかが大切です。
今までデザインを見る中で、どれだけ目にしたあしらいを覚えているか。
デザインの中であしらいを作成する際は、
制作してるデザインに合いそうなものを、自分の記憶の中から引き出して制作するのです。
あしらいの勉強法
ここまでのあしらいの考え方を押さえた上で、次にその勉強法について学んでいきましょう。
自分だけのネタ帳を作る
Webデザインに限らず、デザインのあしらいを勉強するときは、 あしらいをまとめたネタ帳を作りましょう。
- 気に入ったあしらいがあるデザインをまとめたブックマークリストを作る
- あしらいをまとめたノートを作成する
- スクリーンショットを収集する
など、あしらいを貯蔵し、デザインを制作する際に必要なあしらいを引き出せるようにしましょう。
おすすめの方法
筆者のおすすめは「あしらいをまとめたノートを作成する」です。
最初は「絵心がないので無理！」と思うかもしれませんが、書いていくうちにうまくなっていきます。
- ラフスケッチを作成する際にも、あしらいも交えて描けるようになる
- 描いている段階で再現のポイントがわかる
など、ブックマークやスクリーンショットにまとめるよりも、手を動かすので記憶がしやすいです。
とは言いつつも、どれか１つだけしか選んではいけないわけではないので、全部やってくおくと良いと思います。
あしらいのネタを収集する
ここまでのあしらいの勉強法を覚えたら、あとは行動を増やすだけです。
- Webサイト
- バナー
- ポスター
- 動画
など、あらゆる媒体からあしらいを収集してください。
あしらいを学ぼうと思って周囲を見渡すので、日々のデザインを見る時間が楽しくなります。
あしらいの例
最後に、ZeroPlusの公式サイトで使われているあしらいをピックアップしていきます。
今日からあしらいを収集される方は、ノートやブックマークのご準備をお願いします。
線を使う
まずは、簡単なあしらいとして、「線」を覚えていきましょう。
下線を引く
ZeroPlusのキービジュアルのキャッチコピーの下線です。 目立たせたいテキストなどに下線を引くだけで、目立つようになります。
線を添える
小見出しの下に線が引かれています。 線を引くときはさりげなさが大事です。
「線 > 伝えたい情報」にならないように、線は添えるだけにしましょう。
アイコンを使う
次は、アイコンを使ったあしらいを見ていきましょう。
アイコンを添える
チェックマークのアイコンが添えられています。
ここでも、さりげなくアイコンを添えておくことで、情報が発見しやすくなるのです。
リンクの横にアイコンを添える
リンクの箇所にアイコンが添えられることもしばしばあります。
デザイン上だと「ただのテキスト」と「リンクのテキスト」が見分けがつきません。
なので、リンクであることに気がついてもらうようなアイコンを添えるのです。
ボタンの横にアイコンを添える
先ほどのリンクのアイコンと同様に、ボタンにもアイコンが添えられることがあります。
ボタンだけではパッとしない際などに、アイコンを添えてみると良いでしょう。
装飾用のテキストを配置する
次は、装飾用のテキストについて確認していきましょう。
テキストを添える
テキストは文章や見出しを作るだけではありません。
テキストはあしらいとして使うこともできます。
ZeroPlusのサイトの例だと、見出しの後ろに不透明度を下げた大きな英語があります。
日本語サイトの場合、英語のテキストはあしらいとして用いることがしばしばあります。
順番を示すあしらい
情報を順番を決めて説明したいときは、順番を表すあしらいを添えてあげましょう。
きちんと順番が示せるので、デザインを見る人が迷わないようになります。
装飾用の画像を配置する
次は装飾用の画像について見ていきましょう。
手書き文字の画像
最近のデザインで多く取り入れられています。
普通にテキストを配置するよりも目に留まりやすく、柔らかな印象を与えることができます。
印象が可愛くなるあしらいなので、サイトの雰囲気と相談して添えましょう。
座布団を敷く
次は座布団を敷くあしらいについて確認していきます。
座布団のあしらい
デザイン用語で「座布団」という単語があります。
座布団とは、テキストなどの情報を、色のついた四角形で囲うあしらいのことです。
テキストの文字が背景色と被って見えにくくなった際に、座布団を用いることで見やすさを改善することができます。
座布団の上に載せたい要素の色と座布団の色の組み合わせに注意して作成しましょう。
影を付ける
最後に影を付けるあしらいを見ていきましょう。
影のあしらい
ボタンなどのクリックできる箇所には影を付けておくことが多いです。
クリックできそうな雰囲気を出すことができるので、ボタンを作った際は薄く影を入れておきましょう。
あしらいを付けてデザインにメリハリをつけよう
ここまでで、Webデザインのあしらいについて、「考え方」「勉強方法」「あしらいの例」を紹介していきました。
- あしらいはデザインにメリハリをつける
- あしらいは真似から始める
- あしらいを収集する癖をつける
この記事で、上記の３つを覚えていただければ大丈夫です。
たくさんデザインを見て、お気に入りのあしらいを見つけていきましょう。
