一番選ばれているHTML5の電子カタログ

つくるを応援するブログ - INSPI

作り方・コツ

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

10204
views

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

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

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

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

makebg_001

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

makebg_002

makebg_004

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

makebg_003

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

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

makebg_006

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

makebg_007

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

makebg_008

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

makebg_009

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

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

makebg_010

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

makebg_011

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

makebg_012

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

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

makebg_013

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

makebg_014

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

makebg_015

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

makebg_016

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

makebg_017

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

makebg_018
makebg_019

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

2. 背景作成のヒント

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

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

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

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

makebg_021

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

makebg_023

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

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

makebg_022

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

まとめると、

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

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

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

makebg_024

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

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


インスピはWebデザインとマーケティングの株式会社ルーラーが運営しています

佐藤勝

佐藤 勝Writer

ライター/編集者/何でも屋。Web、デザイン、映像、アート、観光などの記事執筆や、企業・団体のコンテンツ制作など、色々やらせていただいております。 INSPIでは、生活やビジネスに役立つものづくりの情報から、面白スポットやまちづくりまで、さまざまなテーマの記事をお届けします。
http://lamp-creative.com/

← 記事一覧