[脱初心者]あしらいの簡単テクをご紹介！！｜ウェブデザイン｜個別指導WEB制作スクールのデザインスクウェア

こんにちは！Webデザイナーのさかなです。
突然ですが、皆さんはいわゆる「プロっぽい洗練されたデザイン」全てに共通しているものがなにかわかりますか？

配色が綺麗なこと？
おしゃれなフォントを使っていること？
レイアウトが綺麗なこと？

もちろんそれらも全て大切です！！
ですが、それ以外にも重要なことがもうひとつあります…

ズバリ！それは、「あしらい」の使い方が上手であることです！！
デザインにおけるあしらいの存在はとても大きく、あしらいを使いこなせてこそ一流のデザイナーだと私は考えています！
そこで本記事では、あしらいについての解説のほかに、現役Webデザイナーである私もよく使うおすすめのあしらいデザインをいくつかご紹介します！

「あしらい」とは

デザイン現場ではよく耳にする「あしらい」という言葉...皆さんはどのくらいご存知でしょうか。
デザインにおける「あしらい」とは、一般的に装飾や情報の整理・強調などデザイン細部のこだわりのことを指します。
主にフレームやフキダシ、ラインなどの装飾、イラストや文字の加工、ストライプ柄やドット柄などの背景テクスチャなどが含まれます。

下記画像をご覧ください。

あしらいを施していない架空バナーを作成してみました。
物足りなさを感じる・いまいちイメージが伝わってこないデザインになっていますね。

この同じ内容のバナーにあしらいを施してみました。

一気に華やかになりましたね...！
目立たせたい文字を強調することで情報が整理され、内容にあった装飾を使用することで、見る人に一目でイメージや情報を伝えることができています。

「ダサいあしらい」と「イケてるあしらい」の違い

上記項目であしらいの大切さはある程度感じていただけたと思います。
ここではより「洗練されたデザイン」に近づくために素人っぽい「ダサいあしらい」と今っぽい「イケてるあしらい」の違いについてご紹介します。

フキダシ

あしらいの中でもよく使用される「フキダシ」ですが、一歩間違えてしまうと一気に素人っぽく見えてしまうため注意が必要です。

フキダシのしっぽは小さめに！

しっぽ(三角の部分)を大きくしすぎるのは、ダサいフキダシの典型です。
控えめにデザインすることで一気に印象が変わります。

余白を意識しよう！

文字を目立たせたいからと言って文字サイズを大きくしすぎると、余白がギチギチになってしまい窮屈な印象に...。
逆に読みづらくなってしまいます。

フキダシの形に気を付けよう！

文章量が多いときなどのフキダシでよくありがちなのが、ダサい形になっていることです。
横長の楕円形のフキダシは形が美しくないだけでなく、中に入れる文章のバランスも非常に取りにくいため、一気にダサく見えてしまいます。
なので、使用は極力避けましょう！

線かベタかどちらかにしよう！

重要な内容を目立たせたいから線と背景色どちらもつけよう！なんて欲張るとかえってコテコテした見にくいデザインになってしまいます。
フキダシを使う際は、基本一色のベタもしくは線のみのシンプルなデザインにすることがおすすめです。

文字装飾

タイトルやキャッチコピーなど文字を目立たせたい場合、イラストやフキダシなどの装飾を使うことが多いですが、文字そのものを加工することも非常におすすめです。
ですが、文字の加工をやりすぎるとかえってダサいあしらいになってしまうため、注意が必要です。

ドロップシャドウは控えめに！

素人っぽいデザインによく見られるのが「ドロップシャドウが濃すぎる」問題です！
暗い色を過剰につけるともさっとしたダサいデザインになってしまいます。
少し明るめの色を控えめにつけることがポイントです。

縁取り文字はワンポイントで使用しよう！

縁だけの中抜き文字は、人気も高く様々なデザインでよく見られます。
適切に扱えば、ヌケ感が出せて一気に垢抜けた印象になるため、私も大好きな加工方法です！
ですが、文章全体を縁取りにしたり、ウエイトの細いテキストに適用してしまうと読みづらくなるだけでなく、効果を活かしきれずイマイチぱっとしない印象になってしまいます。