あしらいとは？デザインに使う装飾の種類と足し方

「なんか物足りない」「シンプルというより、手抜きに見える」。バナーや資料を作っていて、そう感じたことはありませんか？

そこで足りていないのがあしらいです。文字と写真を置いただけの状態から、もう一歩仕上げるための小さな装飾のこと。プロが作ったバナーとの差は、たいていここで開きます。
このレッスンでは、あしらいの意味と種類を整理して、「どこに何を足すか」を自分で決められるところまで持っていきます。足しすぎて散らかったときの戻し方も書きますね。

あしらいとは、デザインを仕上げる小さな装飾のこと

あしらいは、主役ではない装飾要素をまとめて呼ぶ現場の言葉です。線、図形、背景の模様、アイコン、写真のフチ。「情報そのもの」である文字と写真を除いた、画面に置くもの全部があしらいに当たります。

語源は「あしらう」、つまり添える・配置するという日本語です。だから「あしらわれたデザイン」は、装飾を添えて仕上げてあるデザインという意味になります。人を軽く扱うほうの「あしらう」とは別の使い方なので、批判の言葉ではありません。

デザイナー同士だと「ここ、あしらい足しておいて」「あしらいが強すぎない？」のように会話に出てきます。英語のdecorationに近い言葉ですが、現場では日本語のまま使います。

あしらいの役割は4つしかない

種類から覚えようとすると数が多くて疲れます。先に役割から入ると、選ぶのが一気に速くなりますよ◎

役割	やること	よく使うあしらい
目立たせる	主役のまわりに差を作る	囲み枠・マーカー・下線・帯
区切る	情報のグループを分ける	罫線・背景の色分け
つなぐ	読む順番を作る	矢印・番号・点線
雰囲気を出す	トンマナを伝える	紙の質感・ドット・手描きの線

4つ目の「トンマナ」は、見た目の方向性という意味です。かわいい・かっこいい・落ち着いた、といった全体の空気を指します。

身近な例で見ると分かりやすいですよ。YouTubeのサムネイルの右下にある、再生時間の黒い小さな帯。あれが「目立たせる」あしらいです。逆に無印良品のパッケージは、線も帯もほとんど使わず、文字と余白だけで作ってあります。あしらいを足さない判断も、選択肢の1つです。

逆に言うと、この4つのどれにも当てはまらない装飾は足さなくていいということです。「空いているから置いた」あしらいは、必ず後で邪魔になります。

あしらいの引き出しを増やす

ここからは実際の形です。全部覚える必要はありません。自分の手癖として3〜4個持っておいて、案件ごとに入れ替えるくらいがちょうどいいです。

線と枠

いちばん失敗が少ないグループです。細い罫線、二重線、点線、角丸の囲み枠、片側だけの縦線。
コツは太さを1〜2種類に絞ること。1pxの罫線と4pxの下線が混ざっているだけで散らかって見えます。囲み枠を使うなら、角丸の数値も画面内で統一します。

図形と帯

丸、三角、斜めの帯、吹き出し、リボン。文字の下に色の帯を敷くだけで、主役がはっきりします。
斜めの帯は動きが出る反面、角度が2種類混ざると崩れます。角度は画面内で1つだけと決めてください。

文字まわり

マーカー風の下線、袋文字、影、英語の小さな添え文字、番号のバッジ。日本語の見出しの下に小さく英語を置く手は定番です。
ただし装飾する文字は1画面に1か所。見出しも小見出しも装飾すると、どちらが上位か分からなくなります。

背景と写真まわり

背景は、ドット、ストライプ、紙やノイズの質感、ゆるいグラデーション。写真まわりは、角丸、丸く切り抜く、フチをぼかす、四角いフレームで囲む。
背景の模様は主役の文字に重ならない濃さまで薄くします。目安は、目を細めて見たときに模様が消えるくらい💡

足す順番を決めておく

あしらいで失敗するのは、思いついた順に足すからです。順番を固定すると崩れません。

この順番なら、あしらいを足したのに読みにくくなる状態を避けられます。先に整えて、最後に飾る。4原則と同じ考え方です。

やりがちな失敗と直し方

余白が寂しくて埋めてしまう

空いている場所に丸や線を置くと、情報のグループが読めなくなります。余白は余りではなく、分けるための道具だからです。
直し方は、置いたあしらいを消して、代わりに主役を大きくする。空白が気になるのは、たいてい主役が小さいときです。

あしらいごとに色を増やす

線は青、帯はオレンジ、アイコンは緑。こうなると、どれが大事か伝わりません。
直し方は、あしらいの色を主役の色か無彩色のどちらかに寄せる。色数は増やさず、濃さだけで差をつけると落ち着きます。

形の粒度がそろっていない

角丸の枠と、直角のフレームと、手描きの丸が同じ画面に並ぶと、それだけで素人っぽく見えます。原因は、あしらい単体ではなく組み合わせです。
直し方は、角丸なら全部角丸、直線なら全部直線に寄せる。線の太さと角丸の数値をメモしておくと、次からぶれません。

ミニ実践：バナー1枚にあしらいを1つ足す

10分ほどでできます。使う道具は無料のCanvaでもパワーポイントでも構いません。

1. 自分が前に作ったバナーを1枚開いて、複製する。片方はBefore用に触らない
2. 複製したほうで、主役の文字を1つ決めて声に出す
3. 4つの役割から1つ選ぶ。迷ったら「目立たせる」でいい
4. 選んだ役割のあしらいを1種類だけ足す。帯を敷く、下線を引く、囲む、のどれか
5. 2枚を並べて縮小表示にして、3歩離れて見る。主役が先に目に入るほうが正解
6. 効いていなければ、あしらいの形ではなく大きさと余白を変えて、もう一度見る

Before/Afterを並べて残しておくと、次に迷ったとき自分の見本になります。1枚につき1種類しか足さないのが、この練習のいちばん大事なところです。

よくある質問

デザインの「あしらい」とは何ですか？

主役ではない装飾要素の総称です。線、枠、図形、帯、背景の模様、アイコン、写真のフチなどが当てはまります。情報を伝える文字と写真を助ける係だと考えてください。役割は、目立たせる・区切る・つなぐ・雰囲気を出すの4つです。

「あしらわれたデザイン」はどういう意味ですか？

装飾を添えて仕上げてあるデザイン、という意味です。「あしらう＝添える・配置する」から来ています。人を軽く扱うほうの「あしらう」と同じ字ですが、デザインの現場では別の意味で使います。「あしらいが効いている」と言われたら、褒め言葉です。

あしらいはいくつまで使っていいですか？

バナー1枚なら2種類までにしておくと安全です。線と帯、あるいは背景の質感と下線。3種類目を足したくなったときは、あしらいが足りないのではなく、主役の大きさか余白が足りていません。まずそちらを見直してください。

あしらいの引き出しはどうやって増やしますか？

「これいいな」と思ったバナーを見つけたら、文字と写真を隠して、残ったものだけをスクリーンショットで集めます。そうすると装飾だけが残るので、形と役割をセットで覚えられます。集めた形を自分の作品で1回使う。この繰り返しがいちばん早いです。

次に学ぶこと

あしらいは、主役を助けるための小さな装飾です。役割を4つに絞って、1画面に2種類まで。足す順番は、主役を決める → 役割を選ぶ → 1種類足して離れて見る。

次のレッスンはシズル感です。同じ「見た目の作り込み」でも、こちらは写真そのものをおいしそうに見せる話。食品や飲料のバナーを作るなら、あしらいより先に効きます。

ほかの章に進みたいときはデザイン基礎コースの目次から選んでくださいね。