ヘッダー画像を設定したいけど設定のやり方がわからない・・・面倒だし設定しなくてもいいかな？
ハイ注目！
確かにヘッダー画像は内部ページにはなくても良いと思いますが、TOPページにはちゃんと「役割」を持つ大事な要素です！
もし「やり方がわからない」という理由だけで設置していないのであればおすすめはしません！デメリットこそないものの、メリットはあります！
【ヘッダー画像設置の役割とメリット】
- ブランディングの役割
- サイトの第一印象を形成
- ナビゲーションなど特定要素の位置の認識
- 注目させたいコンテンツの導入
- 視覚的な魅力を与える
↑上記は考えられるヘッダー画像を設置する役割！
もちろん、画像のクオリティにもよりますが上記5つのメリットを得ることで、サイトをより成長させるキッカケに繋げることができます。
しかし、ヘッダー画像の設定はテーマによって「設定項目がない」場合があるので、その場合は自身で設定する必要があります。
設定はできるけど、「画像サイズ」などで悩んで後回しにしている方も多い。以外と初心者さんにはわかりにくく、「素材選び」・「サイズ決定」・「作成」・「軽量化」とやることも意外と多い。
実際、
なんて方も多いのでは？
この記事では
上記に関する内容についてまとめていきたいと思います！
まだヘッダー画像を設定していない・これから設定したいという方は是非参考にしてみて欲しいと思います。
- 【WordPress】テーマとは？メリット・デメリットも紹介
- 【WordPressの子テーマとは？】役割やそもそも必要か考える
- WordPressテーマ「STORK19」を使った制作事例ページの紹介
- 追加cssどこ？ブロックエディタでcssを利用する方法【WordPress】
- ダントツ！無料なのにおしゃれ！？ワードプレステーマ「Emanon」
【初心者におすすめの記事】
◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい
WordPressヘッダー画像の重要な「役割」と「メリット」とは？
冒頭で先述した通り、ヘッダー画像を設定しなくても問題はありませんが、設定する「役割」と「メリット」はちゃんとあります。
【ヘッダー画像設置の役割とメリット】
- ブランディングの役割
- サイトの第一印象を形成
- ナビゲーションなど特定要素の位置の認識
- 注目させたいコンテンツの導入
- 視覚的な魅力を与える
下記で詳しくまとめていくので、まずは何のために必要なのか？というところを知っていってください。
①ブランディングの役割
WEBサイトは独自のコンテンツや、個性的なデザインを作ることでブランドを持たせることができます。
ヘッダー画像はそのブランドの顔として、
- 伝えたいこと
- ブランドカラーを覚えてもらうこと
などをユーザーに1番印象付けることができるコンテンツといえます。
②にも繋がることですが、印象を強く与えることで「このサイトは自分に合っている」・「デザインがが良い」・「メッセージの共感」など直感的に伝えることで「ファン層」の獲得が期待できます。
②サイトの第一印象を形成
①でも述べた通りユーザーが初めて訪問した際、第一印象を与えるのはTOPページの役割と言えます。
印象とは、「見やすさ」・「雰囲気」のことで、ブランディングにも直結します。
①と②に関してはペルソナを設定し、ターゲットを明確化した上でヘッダー画像を作成すると効果が期待できる効果ですね。
③ナビゲーションなど特定要素の位置の認識
WEBサイトの設計はサイトごとに違っていますが、大まかな配置は今も昔も変わっていないものが多いです。
ヘッダー画像は大きく、ページのトップにあるので、目安として周辺にどんなパーツが配置してあるか、ユーザーはそれをヒントに見ることがあります。（特にPC）
④注目させたいコンテンツの導入
ヘッダー画像の使い方として、画像だけでなくコンテンツやリンクを設置するという使い方があります！
【コンテンツとして導入】
- 1番見てもらいたいコンテンツを抜粋してリンクを貼る
- コンバージョンしたいページにリンク
- メッセージなどのコンテンツを入れる
- ロゴを大きく入れる
1番最初に見るヘッダー画像部分に↑上記を入れ込むことでより目に留まりやすく、伝えたいことを最初に伝えるという役割を持たせることができますね。
スライドショーにして複数リンク設置するケースもありますが、個人的にスライドショーはファンしか見ないと思うので、正直おすすめはしませんね。
⑤視覚的な魅力を与える
最後はシンプルに「魅力的なヘッダー画像は興味を引く」というところ。
オリジナリティのあるヘッダー画像はそれだけで見た方へ好印象を与え、即座にサイトからの離脱率を下げることが期待でき、下のコンテンツに目を通してもらいやすくなります。
WEBサイトというのはいかに見てもらうかが勝負なので、正直予算があるなら専門のデザイナーに依頼してみるのもありだとぼくは思っています。
そこに良いキャッチコピーが加わればマジで最強。
WordPressテーマにヘッダー画像設定があるかチェック
「ヘッダー画像が表示できるのか？」というところを確認する必要があります。
繰り返しになりますが、ヘッダー画像のデザイン反映は、テーマ製作者によって決定されています。そもそもテーマの機能としてヘッダー画像が実装されていないことも実は珍しくありません。
というのも、ブロガーさんには基本的にあまり必要のないものとして認識されていますし、企業サイトになると外注で専門の方に制作してもらうことが一般的。
実装されていて不要の場合、消すのが手間ということもあるので基本的に任意で実装するような形にしていることも珍しくないんですよね。（ケースバイケース）
「カスタムヘッダー」有無の確認方法
もしテーマに実装されている場合、カスタムヘッダーが利用できると思います。
【確認手順】
- ダッシュボードから「外観」を選択
- 「外観」の中に「ヘッダー」項目があるかチェック
↑画像のように「ヘッダー」項目が表示されていれば使用可能。ただし使い方はテーマに依存するので、使い方はテーマの仕様を確認してね。
ヘッダー項目がない場合「カスタムヘッダー」は設定できないので下記3択！
- テーマを変える
- 自身or外注して実装する
- 諦める
です。
【初心者向き】「カスタムヘッダー」を使った画像の設定手順
カスタムヘッダーの設定が確認できた方向けに基本的な設定手順を紹介していきます。
先述した通り、設定があっても仕様はそれぞれのテーマに依存するので使っているテーマ名と設定方法で調べてみてください。
下記ではWordPressの基本テーマでちょっと古いですが「Twenty Seventeen」を例に書いていきますね。
テーマバージョンは古いですが、基本的にはこんな感じなので！
もし実際に触ってみたい方はテーマの追加から「Twenty Seventeen」を検索して一度インストールしてみてください。（無料）
テーマのインストール方法は下記記事の「管理画面からのアップロード方法」項目の「管理画面からのアップロード方法」に簡単に書いてるのでどぞ。
【WordPress】テーマとは？メリット・デメリットも紹介
手順① ダッシュボードから外観を選択
「ダッシュボード > ヘッダー」を選択。
手順② 画像をアップロード
デフォルトの画像が設定されているので「新規画像を追加」から新しく画像を設定します。
試しにぼく「FUSM」サイトのヘッダー画像を追加してみますね。
画像をアップロードして「切り抜いて選択」を押すとリサイズ設定ができます。
手順③ 画像リサイズ
画像の縁にサイズ指定する枠が表示されるので「上下・左右・位置移動」で範囲を指定してください。
範囲指定できたら「画像切り抜き」ボタンを押してリサイズして適用。
サイズの大きい元画像をそのままアップロードする時には便利！
※リサイズはテーマの設定に依存し、中にはアプロードしかできないこともあります。
手順④ 公開ボタンで更新
切り抜き後の画像が適用されてるのを確認したら「公開」ボタンを押してサイトに反映させます。
この時、「公開」ボタンを押さないと加えた編集が破棄されるので注意。
逆に反映さたくない場合はボタンを押さなければOK！
1回試して雰囲気をみたい時なんかにも使えます。
【中級者向き】テーマ独自の機能以外での設定方法
次に使用しているテーマにヘッダー画像を設定する3つの手段をお教えしますが、先に言っておくと、細かいやり方まではここではあえて述べません！
WordPressの「テンプレートファイル」について知らない方はこの部分はスキップしてもOK！
というのも、この記事はおそらくWordPressにそれほど詳しい方は読んでいないと思います。
ぼく自身初心者の方を対象にしているので、今から紹介する方法はコードを触ったりテンプレートファイルを触ったりちょっと難易度高め。
なので手段は紹介しますが、ここで細かく書いてもおそらくよくわからないと思います。
早速ヘッダー画像機能を実装する方法は下記3つ！
【ヘッダー画像を付ける3つの方法】
- テンプレートファイルにhtmlで直書きする
- カスタムヘッダーを設定する
- カスタム投稿で専用フィールドを作る
テンプレートファイルにHTMLで直書きする
HTMLの知識があれば可能なやり方で、WordPressの任意のテンプレートファイルにimgタグを書き込む方法。
特に難しいことはなく、テンプレートファイルに任意のヘッダー画像パスをいれるだけなので、HTMLとCSSの知識があればだれでもできます。
こんなやつですね。
<img alt="" width="" height="" src="/wp-content/images/ファイル名.jpg" カスタムヘッダーを設定する
WordPressの「カスタムヘッダー」は基本的にfunctions.phpで表示できます。
ただ、重要なファイルであるfunctions.phpを編集するデメリットや、出力ファイルであるコードをテンプレートファイル内に記述する必要も。
カスタム投稿で専用フィールドを作る
ちょっと特殊なやり方ですが、投稿ページのように画像をアップできるようにしていくフィールドを作ることができます。
カスタムフィールドの使い方も覚える必要がありますので、より手間がかかると思ってもらえるといいかも。
これから「WordPress」を始める方や、使い方で困っている方必見！
「表示されない」・「CSSが効かない」・「エディタが違う」。
↑こんなつまづきやすいポイントや、よくある疑問など基礎的な部分からCSSの応用まで記事リンクをまとめています。
ヘッダー画像のサイズを決める要因
テーマでカスタムヘッダーが使える場合、推奨サイズが設定されていることが多いです。
設定項目の欄に推奨値が記載されていると思うので、確認してみてください。
それ以外だと、基本的に決める要因は以下を考慮してサイズを決定します。（すべて考慮して取り入れるのではなく、自分のサイトにどれが適切か選ぶイメージ）
ファーストビューを考慮する理由
ファーストビューではユーザーの動作を誘導、または注意を引く必要があります。
この場合、コンテンツや記事の中身を早い段階で見せるのが重要。
しかし縦幅のある画像をヘッダーに設定してしまうと、コンテンツに到達するまでに離脱される可能性があるので、最初に開いた画面の中で必ず見せたい要素を入れる工夫が必要なんですね。
ぼくの場合だと、「FUSM」はブログサイトなのでTOPページのカテゴリーまで画像が見えるように調整。
記事ページはヘッダー画像は設定しませんでした！
読者の多くはそれぞれの記事を検索して来訪してくれることが多いので、タイトルや記事コンテンツまでの距離を短くしようっていう判断です。
上記はぼくの判断ですが、一般的に
これら3つをファーストビューで認識してもらえるよう工夫した方が良いと言われてますね。
ぶっちゃけ、ファーストビューに↑この3つが入るなら画像の高さなんかはあまり気にしなくて良いと思います（笑）
モバイルでの使用を考慮する
ヘッダー画像の設定はPCだけでなく、モバイル版も想定して用意する使用する必要があります！
PCとスマホだと横幅が全然違いますよね？
仮に横幅を広くした画像をPCで作った場合、切り替える設定がされていないとそのままモバイルにも適用されます。
この時、
- 画像サイズの問題
- 画像容量の問題
上記2つの問題が起こる予測ができます！
画像サイズの問題は横幅が広い画像をスマホの画面幅に合わせた場合、サイズが小さくなりすぎて画像がよくわからない可能性が起こる問題。
これを防ぐために、PC用とモバイル用で出し分けたり、トリミングしたように見せるCSS設定などで対策されることが多いです。
画像容量が多いとスマホではPCほど読み込み処理が早くないので、ユーザーを待機させる時間を延長してしまう可能性があります。
よく読み込み遅延処理など言われますが、ファーストビューに表示される画像を遅延させてしまうとレイアウトシフトやシンプルに表示されていない「崩れたサイト」とみなされてしまうケースがあります。
上記の理由からヘッダー画像は極力画像容量を抑えるためモバイルに適した画像を用意して切り替えるのも考えなければいけません。
ブログサイトで使う場合
結論としてブログサイトでヘッダー画像を表示させる場合、縦幅のある画像にするメリットはありません。
もし、「他サイトリンク」や「注目ページ」や「カテゴリーリンク」を設置したいなら、最低限の高さを確保するだけでいいと思います。
ブログサイトのメインは記事ページで、検索やSNSから来訪してくれるユーザーが多く、ファンを持つサイトはそう多くありません。
自己満足のデザインにするのではなく、読みに来てくれたユーザーが読みやすいように考えてあげるのがベストです！！
企業サイトで使う場合
企業サイトの場合はブログサイトとは若干毛色がかわって、記事検索で来訪するユーザーよりも、会社名などを指名検索で来訪するユーザーが多くTOPページに集まりやすくなります。
TOPページには会社の雰囲気や印象を一目でわかるように、ヘッダー画像やスライダー、アニメーションを設置することでユーザーの興味を引いたり、サイトのクオリティで信頼性を示したりすることも大切。
ファーストビューの考慮ももちろん必要ですが、画像が小さすぎたり、逆に大きすぎたりするのも注意が必要。
画像のリサイズ・トリミング方法
ヘッダー画像を設定する前にトリミングが必要になると思います。
画像をリサイズしたりトリミングしたりする方法をいくつか紹介！
- WordPress実装機能を使う
- WEBツールを使う
- デバイス実装ツール
WordPress実装機能を使う
WordPressにはメディアライブラリで画像をリサイズできる機能などが実装されています。上記「Twenty Seventeen」で紹介したやり方ですね！
詳しくは上記「ヘッダー画像設定手順」をご覧ください。
WEBオンラインツールを使う
■【画像加工したい場合】
オンラインツールとして画像加工ツールがいくつか提供されています。
アカウント作成するものだと個人的に「figma」はおすすめ！ただ、デザイン専門ツールなので、より手軽に使いたいなら「My Edit」や「Canva」なんて良いかもしれません。
■【リサイズと容量圧縮の場合】
リサイズや適正容量に圧縮するだけならGoogleから提供されている「Squosh」を使うのが最も簡単かもしれません。
昨今では珍しくない「webp」形式にできるので、大幅な容量軽減ができますし、その際リサイズも一緒に行なうことが可能。ただし1枚ごとに設定。あまりに元画像の画質が悪いと圧縮の際酷く劣化してしまうので要注意ですね。
圧縮画像が多くなるなら「サルワカ」さんから提供されている「PNG・JPEGをWebP画像に一括変換」ツールをおすすめ！リサイズはできないので、先に別ツールで行なって圧縮する場合に使うと便利。
出展元：サルワカ道具箱｜Webブラウザで使える便利なツール集
デバイス実装ツール
アカウント登録とか面倒！！！という方は、デバイスに実装されている「ペイント」などを使用しても良いと思います。
MACだと「プレビュー機能」とか。
トリミングやリサイズくらいの加工なら十二分に活用できると思いますよ！
WordPressで設定するヘッダー画像とサイズについて【まとめ】
WordPressでのヘッダー画像の設定手順と、サイズを決める要因について書いてきました。
【まとめ】
- カスタムヘッダーがある場合、項目内から設定する
- カスタムヘッダーはすべてのテーマに表示されているわけではない
- 表示されていない場合表示させることは可能だが初心者向きではない
- ヘッダー画像の推奨サイズはテーマごとに違う
- ヘッダー画像を決める要因はいくつかある
- 画像の加工は3つの方法で可能
まとめるとこんな感じですね。
基本的なことをまとめましたが、正直WordPress初心者にはわかりにくいかも・・。
もしどうしてもヘッダー画像を設定したいのであればテーマ変更した方が1番楽なのでおすすめ！
ここまで！
おーわりー
コメント