オリジナリティーあふれるデザインを学ぶには、基本のパターンをしっかり覚えるべし！
こんにちは！広告会社でデザイナーをしている、かじゅうです！
この記事では、Webデザインで頻繁に使われる「あしらい・素材」と「デザイン例」をまとめてみました。
web上で見られる素晴らしいデザインは独創性があって凄いものに見えますが、実はよくあるパターンを組み合わせたり少しだけ変えたりしたものがほとんど。
特に広告会社などの組織では毎回新しいものを作り上げる時間やコストがなかったりします。それでも、良いものは作りたい。だからよくあるパターンを活用して、短期間で出来るだけ良いものを仕上げる事が大切です。「よくあるパターン＝先人たちの工夫や成果」なのです。
- webデザインのパターンをあしらい・素材でまとめています
- 普段使わないパターンの発見があるかも
- あしらい・素材から学ぶWebデザインのよくあるパターン
- サンバースト（sunburst）
- ボケ（bokeh）
- バッジ・メダル（Badge・Medal）
- ストライプ（Vertical Stripes）
- レンズフレア(Lense Flare)
- ポリゴン（Polygon）
- ヴィンテージフレーム(Vintage Frame)
- 水彩（WaterColor）
- 雷（Lightning）
- 紙吹雪（Confetti）
- カーテン（Curtain）
- 月桂樹
- 木版（Wood Board）
- カリグラフィー（Calligraphy）
- 水（Water）
- 花（Flower・watercolor）
- 布・サテン（Silk・Satin）
- スプラッシュ（Splash）
- 湯気・煙（Steam・Smoke）
- コミック吹き出し（ComicBalloon）
- あしらい・素材から学ぶWebデザインのよくあるパターン：まとめ
あしらい・素材から学ぶWebデザインのよくあるパターン
サンバースト（sunburst）
(FREETEL史上、最大のチャンス到来！)
良く見るサンバーストのデザインだと思います。サービスの魅力を伝えるためのあしらいとして使われています。彩度と明度がやや異なる赤色を使って主張しすぎないのがポイント。
家飲みベストマッチ対決！キャンペーン
対決感を出すために２色のサンバーストを使っています。色の組み合わせもいいですね。
ボケ（bokeh）
コラーゲン美容ドリンクが進化を遂げて新登場！
ボケ画像を背景前面にあしらってゴージャス、綺麗さなどを演出しています。タイトル部分に背景より少し濃いシャドウを乗せて立体的にしています。
美肌アプリに頼らない素肌にまとうプリズムのヴェール
爽やかでみずみずしい感じのボケ背景。清潔感を出すためには青色が効果的です。
バッジ・メダル（Badge・Medal）
ひらけ、肌。
ゴージャスで女性的なメダルをあしらっています。ゴールドと合う色として、やや濃いパープルを選んでいる所にセンスを感じます。
NURO光がパワーーーーアップ！
ゴールドのメダルに濃いめの文字を置いたデザイン。まとまりが生まれて、信頼あるサービスという事が分かります。さりげなくシャドウも置いているのもポイントです。
ストライプ（Vertical Stripes）
今夜のうちに集中ケア！大人肌に即実感！あなたはどっちのレスキュー？
大胆な太さのストライプ。商品カラーに合わせてストライプを配置して可愛らしさとおしゃれを演出してます。カラーは商品と同色を選ぶのではなく、全体の色相を統一させる様に選ぶのがコツ。
悩みはしっかりカバーして透明美肌
彩度が高いカナリーイエロー単色のストライプ。下部に太い帯の受けを配置している所がセンスがありますね。ティーンの商品だとわかるあしらい感も素敵です。
レンズフレア(Lense Flare)
レンズフレアは、神秘性や希少性を出すためのあしらいとしてよく使われます。
シミになるものか。
派手なフレアを使うと神秘性に加え、威厳や強さ、高級感が生まれます。
ポリゴン（Polygon）
美しいは強い。
ポリゴン背景は女性向けのスポーツ関連サービスやサプリメントなどによく用いられるあしらいです。
女性の“かがやく”を応援！
同じくサプリメントのLPですが、ワンポイントで使っています。
ヴィンテージフレーム(Vintage Frame)
頑張る女性にご褒美を♪
フレームをあしらって素敵な思い出感を演出しています。
関西最大級のウェディングイベント開催！
太くて模様がはっきりしたフレームはガーリー感を演出することが出来ます。
水彩（WaterColor）
果汁グミとろけるふたつの果実
全体に水彩柄をあしらったデザインは、鮮やかで目を引きます。
野菜生活 ゆず&ジンジャー
ラベルにも水彩パターンを取り入れているところがおしゃれです。
雷（Lightning）
大切なのは、内側意識！！
プロテインやトレーニング系のデザインには、雷などの力を象徴するあしらいが使われます。
紙吹雪（Confetti）
目指すは、日本一かわいく楽しい応援隊！
金色の紙吹雪は、お祭り感や楽しさを演出するのに効果的な素材です。
対象者総勢10万名様に現金1000円プレゼント！
フラットカラーの紙吹雪はサンバーストと組み合わせるとキャンペーン感が演出されます。
カーテン（Curtain）
年に一度のファン大感謝祭
キャンペーンや特別なイベントの画像にはカーテン素材が良く使われます。
月桂樹
保険をプロと一緒に 比較して選ぶ！
実績などを月桂樹で囲むことで、信頼や説得力が増します。
飲むほどに実感 あなたを変える レスベラトロールの水
王冠のシルエットと爽やかな色合いの月桂樹は、柔らかいイメージになります。
木版（Wood Board）
暑い時期のイチオシ！シャキシャキきゅうり＆とろとろネバネバ食材
明るい色の木版を背景に使うと、夏らしさと楽しさが出ます。
糖質ゼロ飲むなら低カロリーNo.1
ブルー系の木版素材は、爽やかでみずみずしさが出せます。
カリグラフィー（Calligraphy）
氷温熟成だけの贅沢なひととき
美しさを出すためのカリグラフィーは、フレーム素材として使うと優雅なイメージになります。
水（Water）
爽快ライム！
清涼感を出したいときは、水（スプラッシュ）を合成します。
自水力。水を育むチカラに着目したスキンケア
水の背景を使うと、身体に悪い成分が配合されていない感じがします。
花（Flower・watercolor）
水分、汗に反応して朝から夜まで香り続ける
柔軟剤などの生活用品には花をあしらうのが定番です。
美胸も、至福も、よくばり女神。
女性物下着やインナーウェアに花をあしらうことで、美しさを表現できます。
布・サテン（Silk・Satin）
純度100％の濃密エイジングケア
カーテン素材を背景画像に使うと、大人っぽさが際立ちます。
大切な人の手をやさしくプロテクトする
深いブルーのカーテン素材は、信頼感を演出することが出来ます。
スプラッシュ（Splash）
手を洗う時間をアートに
アート表現をする時には、カラフルなインクのスプラッシュ素材が使われます。
音楽をアイデアでハックしよう！
音楽フェスなどのイベント毎にもスプラッシュ素材が多く使われます。
湯気・煙（Steam・Smoke）
伝えたいのは、驚きの旨さ
温かくておいしい食べ物には、湯気を合成するのが定番です。
コミック吹き出し（ComicBalloon）
対象車種5車種でカー用品5万円分プレゼント！
コミック調の吹き出しは、力強さとポップなイメージになります。
農場からの贈り物
ラフな形の吹き出しは、女性らしさと柔らかさが表現できます。
あしらい・素材から学ぶWebデザインのよくあるパターン：まとめ
Webデザインでよく使われる定番の素材とそのデザインを20種程紹介しました。
こちらの記事では、今回紹介した素材をまとめていますので合わせてご覧いただければと思います。
20種類ほどの素材やあしらいを使いこなせるようになれば、デザインの幅が大きく広がるのではないでしょうか。webデザイン初心者の方は、自分の得意パターンを見つけるのが上達の近道だと思います。webデザイン中級者以降の方でも、なかなか全ての素材を使いこなすのは難しいのでは？この記事を参考に今まで触れてこなかったデザインのパターンを、自分の引き出しに収めて頂ければこの記事の価値があったと思います。
あしらいを勉強するのに役立つ書籍紹介
あたらしい、あしらい。 あしらいに着目したデザインレイアウトの本
今時でおしゃれな「あしらい」を使ったテクニックを紹介しています。紹介している「あしらい」はどれもおしゃれで即デザインに生かせそうなものばかりです。