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