この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
今日も元気に個人商店を営んでいる40代「ヨフカシ（@yofukashi-kirin）」です。
私は、デザイン分野に関心がありますが、絵心はまったくありません。
デッサン、イラスト、風景画など「絵を描く」のが、おそろしくヘタクソで、学生時代の美術の成績は本当にひどいものでした。
こんな話をすると、当ブログのデザインは別の人が手掛けているのではないか？と疑われるかもしれませんが、デザインも記事もブログ運営は「100％ヨフカシの作業」によるものです。
デザインは苦手だけど好きなことなので、あの手この手で理想に近づける工夫をすることに情熱を燃やしています。
今回の題材である「オリジナル背景」も無料素材を活用した手法です。
どなたでも実現できる方法なので、ぜひお試しください。
- 殺風景なブログの背景をオシャレにしたい
- ブランドロゴで装飾したい
- 絵心ないけどオリジナルデザインに挑戦したい
目次の項目をクリックして移動できます
Webサイトの背景をデザインする方法について解説していきます。
背景デザインは、大まかに2種類の設定タイプがあります。
- リピートなし（1枚の画像で全面をカバーするタイプ）
- リピートあり（1枚の画像を繰り返し並べるタイプ）
どちらのタイプにも、それぞれ「メリット / デメリット」があります。
さらにWebサイトが、スマートフォン、タブレット、パソコンなど、デバイスによって異なる画面サイズで表示されることを想定して、デザインを調整する必要があります。
背景デザインも、表示される面積が一定ではなく変化することを前提に考えましょう。
まず「リピートなし」タイプを紹介します。
「リピートなし」タイプは、1つの画像素材で全面をカバーする設定方法です。
画像1枚タイプはインパクトの強いデザインにできるのがメリットです。
しかし採用する際には、気を付けたいポイントがあります。
「リピートなし」タイプの背景画像は、デバイスによって表示領域が変動します。
Webページは、スマホの小さい画面から、パソコンの大きなモニターまで、あらゆるサイズの画面に表示されます。
自分のパソコン画面では望み通りの表示になっていても、読者の画面でも同じように表示されているとは限りません。
どの部分が表示されるかもわかりません。
対策として、風景写真など面積の広い画像を使うのが望ましいです。
狙い通りのデザインにするのは、むずかしい
面積の広い画像というのは「画像サイズ」にも影響があります。
画像のサイズとは、ピクセル（px）という単位で計測される縦や横の長さのことです。
大きいパソコンモニターに対応することを考えると、横幅が1000px以上は必須になってくるでしょう。
さらに高画質でキレイに表示したいなどの場合、横幅が2000px～5000pxの画像を使うことになるかもしれません。
すると、画像データの容量も比例して大きくなるので、Webサイトに掲載するデータとしてはデメリットになります。
- インパクトの強いデザインにできる
- 思い通りの表示にならない
- 画像データが重くなる
「リピートあり」タイプは、1つの画像が複製（コピー）されて背景に隙間なく並んで表示されるタイプです。
タイルやレンガを並べて作る感覚で法則性のあるパターン模様ができあがります。
背景としてどの部分を切り取られても成立するのがメリットです。
デバイスごとにデザインの調整をする必要はありません。
デザインの良し悪しのポイントは、素材となる画像の出来栄えです。
素材の繰り返しによる「くどい」「うるさい」という印象になりやすいので、素材画像のデザインに注意が必要です。
メインとなるコンテンツを邪魔しないような控えめなデザインを心掛けるのが大事なポイントです。
あくまで「背景」は脇役です。
さりげなくアピールするぐらいのバランスを狙いましょう。
- パターン模様だから、どこを切り取られても成立する
- デバイスの表示領域を気にする必要がない
- 繰り返し表示されるので「くどい」「うるさい」印象になりやすい
- 素材画像の工夫が必要
今回解説するのは「リピートあり」タイプの方だよ
素材となる画像は、リピートされることを考慮してデザインします。
下にサンプルとして素材画像を作ってみました。
このサンプル画像の作成手順を紹介します。
- Canva（無料版）で作成
- 使用したデザインは「ロゴ」
- 画像のサイズは「500px」四方の正方形
- 「ライオンの画像」は商用利用可能な無料のアイコン素材「icooon-mono」を利用
作成の流れは、こんな感じです。
- サイズを決める
- デザインを作る
- 完成したデザインをダウンロードする
画像引用元：Canva
Canvaはブラウザで画像の作成や編集ができるサービス。
豊富な素材とテンプレートを組み合わせて自由にデザインできる。
会員登録をすれば無料で使える。
Gmailアドレスも登録に使えます！
有料版の「CanvaPro」は、機能や素材の制限がなくなります。
Canvaは、まずデザインの土台となるサイズを設定します。
サイズは、名刺やポスターなど定型以外に、Web用アイキャッチやSNS投稿用のサイズなど、たくさんの種類のテンプレートが用意されています。（任意のサイズ設定が出来るカスタム機能もあります）
今回は「ロゴ」というテンプレートを選びました。
サイズは「縦も横も500px」の正方形です。
繰り返し表示になってもキレイに整うので正方形を選びましょう。
Canveの無料版では途中のサイズ変更ができません。
（有料版では変更できるようになります）
デザインを雰囲気良く仕上げるコツは「構図」「素材」「色」の3つのポイントです。
それぞれの要素が絡んでくるので、バランスを取りながら作るといいでしょう。
どのポイントから取り掛かるのがいいか？という順番は特にありません。
素材画像として、どんなデザインにするか？大まかな構図を考えましょう。
分割なし
シンプルなデザインにするなら分割せず素材をポンと乗せるだけでもいいでしょう。
- メリット：インパクトが強い
- デメリット：単調な印象になる
分割する
複雑で凝ったデザインにしたいなら、より細かい分割のレイアウトにしましょう。
- メリット：オシャレなデザイン
- デメリット：細かすぎるとゴチャゴチャしてしまう
この場合、素材が小さくなってしまうので、ロゴや文字の印象が弱くなる可能性もあります。
もし素材が小さくてもいいのであれば、①の画像サイズを決める時に「250pxの正方形」に設定してあげるなどの工夫でも対応できます。
またゴチャゴチャした雰囲気になるので、好みが分かれるでしょう。
絵心がない人には、一番の難関ポイントですが「素材を活用する」という工夫で対処できます。
Canvaの機能やネットから素材を入手できます。
- Canvaに用意されているイラスト素材
- ネットからダウンロードできる商用利用可能なイラスト素材
などを「それっぽく配置」する方法でOKです。
「それっぽく配置」とは、法則性のあるパターンの図柄になることを考慮して、整えて配置することです。
配置のアイディアに困ったら…
- 余白を広くしてみる（素材を小さくする）
- 向きを変える（斜めにしてみる）
などの工夫をしてみましょう
また文字（テキスト）を素材として活用できます。
社名や店名を文字素材にしてアピールするのも使い方のひとつです。
- Canvaならオシャレなフォントが使える
- Canvaなら色の変更、サイズの変更も自由にできる
ブログタイトルやハンドルネームをアピールして覚えてもらいましょう！
ブログ全体の雰囲気に合わせて調整していきます。
色の調整は、感覚によるものなので解説がむずかしいですがCanvaで使えるテクニックがあります。
Canvaで使えるテクニックとは「透過処理」です。
Canvaでは「透過率を調整できる機能」が備わっています。
イラストや文字（テキスト）など、あらゆる素材を透けさせることができます。
本来の目的は「透けさせる」ことですが、私は色を薄くする目的で使うこともあります。
ブログデザインにおいてメインカラーを設定している人は、そのメインカラーを基準とした濃淡違いの色合いを取り入れると、統一感のあるデザインを保つことができます。
同系色でまとめるとデザインが整うよ
背景素材が出来上がったら、Canvaからダウンロードします。
これで「素材作成」は終わりです。
ブログに背景として設定してください。
使用しているWordPressテーマによって背景の設定方法が異なります。
それぞれ利用しているテーマの設定方法を確認してください。
「ブログの背景なんて必要ない」という考えもあると思います。
今回の「オリジナル画像を背景にする」という内容は、「もっとブログ活動が楽しくなるといいな！」という想いから記事を作りました。
そして「ブログを楽しむ目的」以外に「ブランドイメージをアップする目的」にも活用できるのではないか？と思っています。
会社やお店に「ロゴマーク」があるようにブログにも「ロゴ」を作ってみませんか？という提案です。
ただ自分で作ると「理想通りにできない」と悩む方もいるでしょう。
そんな人は、デザインができる人に依頼する方法もあります。
最近のポピュラーな方法として「ココナラ」を利用する方法があります。
ココナラは、得意な方にインターネット上で依頼できるシステムです。
金額や仕上がりの雰囲気など自分の条件に合う方を探して依頼します。
ココナラのサイト内で「ロゴ作成」と検索して探してみてください。
私の個人的なオススメになりますが、素敵なロゴを作成するクリエイター「白井にゃも」さん（@nyamo3blog）を紹介します。
素敵なロゴデザインは、私が語るより実際に見ていただく方が早いので、まずはこちらのTwitter投稿をご覧ください。
実際にブログのロゴとして、にゃもさんが手掛けた作品です。
全体は優しく可愛らしい雰囲気でありながら、ブログ名が印象に残る「ロゴ」になっています。
ただ文字を並べるだけでなく、絵の一部として文字もデザインされています。
シンプルな構成の中に、ブログのテーマを表現する「ワンポイントアイテム」が施されている点も、わかりやすく、記憶に残る理由になっていると思います。
にゃもさんのロゴは見ただけで気持ちがワクワクするような「楽しいロゴ」ばかりです。
にゃもさんは、デザインをはじめたい方の手助けとなる情報を発信するブログ「デザはじ」も運営されています。
『「スキル・コスト・センス」ゼロからはじめる』というコンセプトで、デザインに挑戦したい方を応援しています。
また「デザはじ」のコンセプトには「デザインのはじっこ」という意味も含まれています。
デザインのプロや、プロを目指す「ど真ん中」ではなく「はじからデザインをかじる」というユニークな発想も素敵です。
最後に当ブログで使用しているWordPressテーマ「SANGO」の背景を設定する方法を紹介します。
SANGOのデフォルト設定では、本文が表示されるメインエリアは「白色」です。
背景は「白色」を避けた方がいいです。
「色付きのベース」に「白色の素材」を並べてデザインしました。
- WordPressメニュー「外観」から「カスタマイズ」を開く
- サイトの基本設定
- 背景画像
- 使う画像を選ぶ（メディアライブラリを利用する）
- 公開ボタンを忘れずに押す
WordPress管理画面のメニュー「外観」から「カスタマイズ」を開く
カスタマイズ画面のメニュー「サイトの基本設定」を開く
「サイトの基本設定」から「背景画像」を開く」
背景に設定する画像を選びます。
WordPressのメディアライブラリを利用します。（新規アップロード / アップロード済の画像）
背景画像を選んだら「公開」ボタンを押して設定は完了
今回はブログの背景デザインについて解説しました。
最近のWebサイトは、スマホで閲覧されることも多く、そもそも背景が表示されないこともあります。
「ページの背景なんて、だれも気にかけていないし、何の効果もない」という考え方が基本でしょう。。
しかしデザインに興味のある人ならは、気が付いてくれる人もいるかもしれません。
それが他のサイトとの差別化になる可能性もあります。
それにデザインを楽しむことでブログ運営が楽しくなるなら、なにより意味のあることです。
Canvaの操作の練習にもなるので、ぜひ挑戦してみてください。
作成ツール
Canvaでブランドを構築して、魅力的なロゴを数分でデザインしましょう。今すぐ開始！
アイコン素材
デザイン作成を依頼する
ココナラのクリエイターに依頼する
WordPressテーマ
