Webデザイン背景あしらいアイデアまとめ+選び方のコツ

縦に長くなりがちなWebデザインでは、コンテンツの背景のあしらいはコンテンツの区切りを分かりやすくしたり、ユーザーに飽きずにコンテンツを読んでもらったり、サービスの印象づくりに置いて重要な役割がありますね。

ただ実際にWebサイトのデザインをしていると背景のあしらいをどうするかは個人的に結構迷うポイントだったので、今回はよく見かけるWebサイトの背景のあしらいのアイデアをいくつかまとめてみました。

選び方のポイント！

• コンテンツを邪魔しない

あくまでコンテンツを読んでもらうことが目的なので、あまり派手過ぎたりうるさすぎる背景はNG。

• うるさくなりすぎないように

• サイトの雰囲気やサービス内容にあったデザインにする

サイト全体のテイストやサービス内容とずれた背景を使用してしまうとユーザーを混乱させてしまうので、背景はサイト全体のメインカラーやテイストに合わせたものにしましょう。

背景あしらいアイデアまとめ

• べた塗り

シンプルなので、鮮やかな色を使ってもまとまりやすく、扱いやすいです。

• グラデーション

べた塗よりも柔らかく、おしゃれな印象になります。

若い人をターゲットにしたサイトや、女性向けのサイト等でよく見かけます。

• 写真

写真を背景にすることで、サービスやコンテンツに関連する内容を写真で具体的にも伝えつつ、背景としてコンテンツを目立たせることができます。

ただ、写真は背景として使う場合は情報量が多いので、コンテンツの内容が見づらくならないように工夫する必要があります。画像に若干半透明のマスクをかけるとコンテンツの内容に目がいきやすくなります。

• 方眼

シンプルでコンテンツを邪魔せず、使いやすい背景です。

方眼紙を連想させるので、教育系、事務作業関連のサービスなどでよく使われているのを見ますね。

• ドット

こちらもシンプルで使いやすい背景です。

ランダム感のある配置のドットにすればポップだったり、かわいらしい印象になりますが、グリッド感のある配置のドットにすればシンプルな印象になります。

• ストライプ

斜めストライプだとポップで明るい印象になります。

• イラストのパターン

イラストをランダムにパターンで配置した背景です。

イラストのテイストや配置の仕方で様々な印象が出せそうです。サイトで扱うサービスに関連したモチーフにイラストを使うことでサービスをよりユーザーに印象付けられそうです。

• テクスチャ

布、紙、壁などのテクスチャを背景として使う表現もよく見かけます。

こちらもサイトで扱うサービスに関連したテクスチャを使うことで、サービスの印象づくりができます。

背景あしらいの境界アイデアまとめ

コンテンツ間の境界のデザインについても、よくあるあしらいをまとめてみました。

• 直線

シンプルに直線で仕切るタイプで、一番よく見かけます。

• 斜め線

コンテンツの境界を斜め直線にしたタイプです。

シャープな印象や、かっこいい印象を出したい時に使えそうです。

• カーブ

コンテンツの境界を曲線にしたタイプです。

やわらかい印象、女性的な印象、化粧水や飲料などの液体のイメージを出したい時などに使えそうです。

• 矢印

コンテンツの境界を矢印のような形にしたタイプです。

読み進めていく方向が分かりやすく、シンプルなランディングページなどでよく使われています。

• 余白+イラスト

コンテンツ間を背景で仕切らず、余白を広めにとったり、余白+イラストで仕切ることもできます。

余白が広めになるので、ゆったりとした印象になったり、背景色で仕切るより構図の自由度も高くなりそうです。