こんにちは。
女性向け個人レッスン専門【パソコン＆デジカメ教室パソカフェ】@兵庫県川西市
わたなべゆうこです。
パソカフェホームページのヘッダー画像は現在3代目。
年末にコレに変えてから、ぐんっとお問い合わせが増えました！
ヘッダー画像って大事なのね。。
この記事では、現在のヘッダー画像にかわるまでの経緯をご紹介しています。
わたしみたいに、ウェブのプロやデザイナーじゃないけど
自分でホームページを作っているかたって多いでしょう。
そういう方の参考になればと思っています。
写真は、自分の好みでなく生徒さんの好みに合わせる
これまでの、パソカフェホームページのヘッダー画像は…。
1代目。なんとなく選んだ、イラストで作成。
2代目。自分の趣味で選んだ、おしゃれ素材集と既存の写真で作成。
しかしアクセス解析をみると、トップページから離脱されてしまう率が高い。
サイト全体の雰囲気や、ヘッダー画像がよくないのかもしれません。
そこで3代目。生徒さんに事前アンケート。
生徒さんのお好きな色合いや明るさ・好みの写真を調べるところからスタートしました。
こちらが、3代目のヘッダーに使うことになった写真。すべて自分で撮影しています。
正司邸のガーデンローズ
春のリースとキャンドル
素敵な紅茶のパッケージ
生徒さんのお好みをお聞きした結果「明るい雰囲気のピンク系」に統一。
くわしい経緯は、前回の記事をご覧ください。
[blogcard url=”https://pc.paso-cafe.com/blog/20180106_wordpress_header-1/”]
生徒さんの好みにあわせるって当たり前のこと。
でも、自分で作ってるとつい自分の好みになりがちです。反省。
ヘッダー画像に使いやすい写真は
「横」向きの写真を撮る
こちらも当たり前なんですけど、「縦」写真より「横」写真のほうがヘッダー画像に使いやすいです。
だって、ヘッダー画像はふつう「横長」ですもんね？
ヘッダー画像に使いやすい「横向き」の写真
わたしはテーブルフォトを撮るとき「縦」で撮る習性があるので
「横」で撮るのは、スタイリングから苦労しました。
ヘッダー画像に使いにくい「縦向き」の写真
これ、テーブルフォトを撮り慣れてる人ほど苦労するポイントだとおもいます。
テーブルフォトは「縦」で撮れって教わりますもんね。
パソカフェでこれまでホームページ作成レッスンを受講されたみなさんも
テーブルフォト系のかたは「縦」写真ばかりで「横」写真がほとんどなく、苦労しておられました。
そろそろホームページを作ろうとお考えの方。
写真は「縦」「横」どちらでも撮るようにしておくといいですよ。
縦写真しかないと、テンプレートを選ぶときもヘッダー画像を作るときも、かなり制限されてしまいます。
「余白」の多い写真を撮る
こちらも当然のことなんですけど、写真は「余白多め」で撮りましょう。
だって、ヘッダーだから文字入れする確率が高いんですよ。
文字入れしやすい「余白の多い」写真
文字入れしにくい「余白の少ない」写真
「このへんに文字を入れよう」って考えて撮ればいちばんよいですが
そこまで考えられなくても、余白多めであればなんとかなります。
「この構図で撮りたい」から、もう一歩遠ざかって撮る
それくらいでちょうどいいんじゃないかな？
撮影した写真を画像加工
ヘッダー画像の縦横比に「トリミング（切り抜き）」
さて、そんな感じで写真が撮れましたら。
このつぎにしなければいけないのが、「トリミング（切り抜き）」です。
写真の縦横比はカメラで「3:2」「4:3」「16:9」などに設定できますが
ヘッダー画像の多くはそれよりも横長なので、トリミングしないとうまく収まらないのです。
縦横比「3:2」の写真
トリミングで指定する縦横比率は、お使いのテンプレートによります。
たとえば、わたしの使っているワードプレスLightningの場合、推奨ヘッダー画像サイズは「1900×600px」。
つまり、縦横比は「19:6」です。
縦横比「19:6」にトリミング（切り抜き）
たまにアメブロなどで、写真をトリミングしないでそのままヘッダー画像に使い
左右が余っておかしなことになっているサイトを見かけます。
トリミングはPhotoScape（フォトスケープ）などのフリーソフトで簡単にできますよ。
こちらの記事でも解説しています。
[blogcard url=”https://pc.paso-cafe.com/photoscape/trimming-1/”]
ヘッダー画像の推奨サイズに「リサイズ（サイズ変更）」
ただ、トリミングするだけだと、デジタル一眼レフなどで撮った写真はサイズが大きいまま。
長辺が4000～5000px以上あるものも。
5180×1638ピクセル（4.9MB）の写真イメージ
1900×600ピクセル（900KB）の写真イメージ
大きなサイズの画像をスライドショーで何枚も使うと、読み込みが遅くなって訪問者に迷惑。
ですから、見た目が同じでも、きちんと推奨サイズにリサイズする必要があります。
リサイズ（サイズ変更）も、PhotoScape（フォトスケープ）などのフリーソフトで簡単にできますよ。
こちらの記事でも解説しています。
[blogcard url=”https://pc.paso-cafe.com/photoscape/trimming-1/”]
「文字入れ」して、1枚目のヘッダー画像は完成
さいごに文字入れして1枚目のヘッダー画像は完成しました。
このときはお正月前でしたので、新年の挨拶を英語で入れています。
まちがった英語を入れるのは恥ずかしいので、英会話教室の「新年の挨拶」例文をコピー貼り付けしました。
文字入れして完成したヘッダー画像
気づけば、人物の写っている写真が1枚もなかった…
さて、問題はあと2枚のヘッダー画像です。
じつは、パソカフェのサイト診断とアドバイスをお願いした永井先生から、こんなコメントをいただいていたのです。
“レッスンの写真” を掲載した方が絶対に良いと思います。
パソコンレッスンなら、机で先生が横について教えていたり、
カメラレッスンなら、撮影している風景を載せたり。具体的に「こんな感じのレッスンなんだ」とイメージが湧くことで、
初回問合せの抵抗がかなり下がると考えます。
永井先生の「サイト診断とアドバイス」レッスンについての記事はこちら↓
[blogcard url=”https://pc.paso-cafe.com/lessons/20180105_lessons2017/#i-10″]
そうなんです。
これまでいろんなセミナーでも「人物の写真は鉄板」「レッスン風景・生徒さんの笑顔を載せて」と聞いていたのに、まだ載せていなくて。
そもそも、自分のプロフィール写真をホームページに載せるのに抵抗があったし
生徒さんの写真を撮らせていただく・ましてや掲載するのに抵抗がありました。
だって、自分だったらそんなのに載せられたくないもん。
お金払ってレッスン受けてるのに、どうしてモデルになってホームページに写真載せられなくちゃならないの？
って私だったら思ってしまう。。
そう。パソカフェのホームページには、人物の写っている写真が1枚もなかったんです。
これはいよいよ、なんとかしなくてはなりません。
でも、生徒さんにご迷惑をかけるわけには。。
さあ、どうする？
きょうはここまで。
続きをまた、読みに来てくださいね。
