Webサイトやブログの背景画像、簡単作成のコツ

こんにちは。今回は、Webサイトやブログなどの背景画像を簡単に作成できる無料ツールをご紹介します。あわせて、サイトにマッチした背景を選んだり考えたりする上で参考になるヒントもご紹介したいと思います。

1. 背景画像ジェネレーター

Webサイトの背景を作成するのに便利な無料ツールがWeb上でたくさん公開されています。まずはその一部と使い方をご紹介したいと思います。

・さまざまなパターン背景が作成できる
「BgPatterns」

モチーフの形を選んで、明るさや配色、角度などを設定してダウンロードボタンをクリックすると、正方形のパターン背景画像がダウンロードできます。

こうしたパターン画像はWebページの背景として並べた時に、絵柄がきちんとつながって表示されるようにデザインする必要があるのですが、それを一から作るのはなかなか手間のかかる作業です。こうしたツールでパターン画像を手軽に作成できるのはありがたいですね。

パターン作成中も画面いっぱいに画像を並べて表示してくれるので、仕上がりを確認しながら作業ができ、とても便利です。

・グラデーション背景を作成できる「Gradient Image Maker」

色とグラデーションタイプ指定するだけで、背景用のグラデーション画像を生成してくれます。

設定をいじると、このような4色のグラデーションも可能です。

制作するページの基本サイズにあわせてサイズの数値を入力すると、うまくはまるサイズの画像がダウンロードできます。

ページ全体でグラデーションする背景を作成できました。こちらも色々試してみたいツールですね。

・ストライプ背景が作れる「stripedbackgrounds」

5本のカラーバーの色を好きな色に変えて、オリジナルのストライプ背景が作成できます。
真ん中の「Randomize!」ボタンをクリックすると、ランダムに5つの色を選んでくれます。

ダウンロードする画像のサイズをプルダウンメニューで指定し、右の「Download」ボタンで画像を入手できます。

さまざまなサイズでストライプ画像を作成できるのが、このツールの利点といえるでしょう。

・斜めのストライプも作れる「Stripe Generator 2.0」

こちらのツールは、ストライプの角度や影、背景などをカスタマイズできます。

ストライプの幅や間隔、背景色や影の強さなどを細かく設定。背景をグラデーションにすることも可能です。

ダウンロードした画像はこんなに小さなサイズ。ファイルが軽くてページ読み込みが早いというメリットもありますね。

・タータンチェック柄が作成できる「TARTAN MAKER」

3種類の帯の太さと色を設定すると、タータンチェック柄が作成できます。
縦横か斜めのどちらかのパターンを選んでダウンロード。

操作は簡単ですが、さまざまなバリエーションの背景を作ることができます。ページだけでなく、ボタンやバナーなどの背景としても活用できそうですね。

2. 背景作成のヒント

このように、Web上の無料ツールを使って、さまざまな背景を作ることができるわけですが、選択肢がありすぎると、「どんな背景にすれば、作りたいWebサイトやブログにマッチするだろう？」といった悩みにも直面することでしょう。

そうした時に、ある程度デザインのセオリーを押さえておくと、比較的容易に選択肢を絞り込んでいくことができそうです。

例えば、先ほど紹介した「BgPatterns」で作成したこちらの背景。

この背景にそのままテキストを乗せてみると…

このように、かなり読みづらくなってしまいます。もし、テキストを直接背景に重ねて表示させるのであれば、パターンやテクスチャのような絵柄を避けるか、あるいはコントラストを落として絵柄の印象を弱めるといった調整をするのが良いでしょう。
これを、単色のグラデーション背景に変えてみると、視認性はより良くなります。

シンプルな組み合わせですが、やはりユーザーにとってはこちらの方が読みやすいですね。

かといって、先ほどのパターン背景が全く使えないということではありません。
テキスト部分のブロックを白色の背景に指定すると、背景のテクスチャを活かしながら、文字もはっきりと表示させることができます。

こうしたデザインは、ブログサービスのテンプレートなどでも見ることができますね。

まとめると、

・背景にテキストを直接重ねる場合は、テキストが読みやすくなるような背景に。
・パターンを使う場合はコントラストや明るさを調整する。
・ブログのテンプレートなどで、テキストが入るエリアの背景が単色であれば、むしろパターンを使うと効果的になる場合も。

他にも、背景の色を単色やグラデーションにするなら、商品やブランド、コーポレートカラーと一致させるなど、色選びのヒントも身近なところにたくさんあるはずです。ぜひ、さまざまな組み合わせを試してみていただければと思います！

ところで、最近では、Webサイトのトップページで背景をぼかした写真を大きく使ったデザインが流行していますね。

こちらの実例は、私たち「ebook5」英語版サイトのトップページ。イメージ画像としてはとても印象的ですね。

なぜこのような背景画像が流行になっているのか？Webデザイン上の利点は何なのか？ といった点について、回を改めて取り上げたいと思います。今後も当ブログをチェックいただけますと幸いです！