ブログのヘッダーに
「自分のイラスト」や「誰かに描いてもらったイラスト」を使いたいと思ったことはありませんか？
手描きイラストを使うとオリジナルな世界観を表現できますよね。
ただし、ブログヘッダーにはサイズや構図のコツがあります。
意識せずに絵を描いたり依頼したりすると、「絵が切れてしまう」「サイズが合わない」ということもあります。
この記事では
- ヘッダー用イラストの作り方
- デジタル化の方法
- イラストを依頼する場合の注意点
を解説します。
ブログヘッダーの基本サイズを知る
まずはブログヘッダーの画像サイズをチェックしてみましょう！
例：パソコンの場合（この画像は横1600px前後、縦300〜520pxです）
例：スマホの場合（この画像は横900px、横600pxです）
まずは、お使いのブログで画像ヘッダーの縦横サイズを調べてみてくださいね。
ヘッダー画像はPCでは横1600px × 縦900px（パソコン用）、横960px、高さ800px（スマホ用）が推奨サイズだそうです。
このサイズは、SWELL公式サイトで使われているサイズ。
ただ、個人的には、パソコン用の縦幅はもう少し小さく500px前後がおすすめです。
ヘッダー用イラストはパソコンにもスマホにも合うように作るか、パソコン用とスマホ用で別に用意する必要があります。
サイズが大幅に違う画像をヘッダーに使うと絵が見切れたり、バランスが悪く見えることがあります。
イラストを描くときのポイント
大事な要素は中央に
ブログヘッダーは、スマホとパソコンで表示のされ方が変わることがあります。
PCだと、横長のヘッダーエリアに引き伸ばされて表示されます。
スマホだと、いくつか選択肢があります。
・スマホの横幅に合わせて縮尺される
・中央部分が中心に表示される
・スマホ用画像を別に設定する
そのため、ヘッダー用イラストを作るときは
- キャラクター
- タイトル
- 重要な要素
を 中央付近に配置するのがおすすめです。
端に重要な要素を置くと、
スマホ表示のときに 切れてしまう可能性があるからです。
ヘッダーの縦横比を意識して
ブログヘッダー用のイラストを描く場合は、
ヘッダーの縦横比に近い形で描くと使いやすくなります。
例えば、ヘッダーサイズが「1600 × 300px」の場合、縦横比は「16 : 3」になります。
この比率に近い横長の構図でイラストを描くと、そのままきれいに使うことができます。
もし通常の紙（A4など）に描く場合でも、
最初に横長の枠を軽く描いてからイラストを描くと
ヘッダーに合わせやすくなります。
タイトルをどこに入れるか考える
ブログヘッダーには
ブログタイトルやキャッチコピーを入れることが多いです。
タイトルの入れ方には、主に3つの方法があります。
① イラストに手描きでタイトルを書く
イラストの中に、タイトルを直接書く方法です。
手描きの雰囲気が出ますが、後からタイトルを変更できないにくい点があります。
また、デジタルに取り込んだ時に読みにくくなる場合もあります。
② 画像編集で文字を入れる
イラストをパソコンに取り込んだ後、画像編集ソフトで文字を入れる方法です。
例えば
- Canva
- Photoshop
- パソコン上の画像編集ソフト
などでタイトルを追加できます。
イラストを描く時には、後から文字を入れたい場所に余白を開けておくといいでしょう。
③ WordPressテーマ側でホームページ名を表示する
WordPressのテーマによってはサイトタイトルや好きな文字をヘッダーに表示する機能があります。
この場合、ヘッダー画像は背景として使うイメージになります。
文字は画像の真ん中に入ることが多いので、中央部分を開けておくか
少し画像
文字の読みやすさなどを踏まえて、後で画像の色合いなどを調整する可能性があります。
誰かにイラストを描いてもらう場合も、上記のことをふまえて、
最初にヘッダー用の条件を伝えておくことが大切です。
- サイズや比率（パソコン用なのか、スマホ用なのか）
- 重要な要素は中央に配置する
- トリミングされる可能性があること
- 文字入れの有無について
作りたいイメージと合わせて、イラストレーターさんと相談してみてくださいね。
アナログ絵をデジタル化する
紙に描いたイラストをデジタルデータにします。
綺麗に画像を取り込みたい場合は、スキャナーで300dpi（高画質）でスキャンするのがおすすめです。
コンビニプリンターのスキャン機能を使ってもいいでしょう。
手軽に取り込みたい場合は、スマホ撮影でもできます。
その際は、サイズがずれたり、影が入り込まないよう
- 明るい場所で撮る
- 真上から撮る
- 影が入らないようにする
窓際の自然光で撮るときれいに撮影できます。
編集ソフトに合わせて調整する
画像サイズを調整
画像編集ソフトで
- 画像ヘッダーサイズに合わせる
- 余白・不要な部分をトリミング
をします。
ここで重要なのは縦横比を変えないことです。
縦横比を変えると
- イラストが伸びる
- イラストがつぶれる
原因になります。
明るさ、コントラスト、文字の調整
パソコンやスマホの画面上でイラストがみにくい場合は、
画像編集ツールで調整をします。
- 明るさを調整
- コントラストを調整
これだけでもイラストが見やすくなります。
ツールの例
- Canva
- Photoshop
- Procreate
初心者には Canva が扱いやすいです。
画像にタイトルなど文字を入れたい場合はここで入れておきましょう。
イラスト内の色と文字の色を揃えると、統一感が出ます。
WordPressにヘッダーを設定する
WordPressでは、次の場所からヘッダー画像を設定できます。
- 外観＞カスタマイズ＞ヘッダー画像
- テーマによって、設定場所が違うので注意してください
設定したら、パソコンとスマホ、それぞれで綺麗に表示されているかチェックしましょう
アナログイラストでブログを飾ろう！
ブログの第一印象を作るヘッダーに
手描きイラストを取り入れることで
ブログの雰囲気をぐっと個性的にすることができます。