ホームページヘッダー画像の作り方【初心者もアプリで簡単作成】
![ホームページヘッダー画像の作り方](https://ts-smartplan.com/wp-content/uploads/2020/07/CCC23ACA-97CC-40FC-9F0A-F9F185653CB5-1024x768.jpeg)
ホームページヘッダー画像の作り方【初心者もアプリで簡単作成】
この記事は、
- ホームページのヘッダー画像の作り方が分からない
- 簡単なヘッダー画像の作り方を教えて
- ヘッダー画像に使えるフリー画像素材サイトも知りたい
といったような、お悩みや質問に答えていきます。
この記事を読むことで、
- ホームページのヘッダー画像の作り方が分かります。
- スマホやiPadでも簡単にヘッダー画像が作れるようになります。
- ヘッダー画像に使えるフリー素材サイトが分かります。
ホームページやブログのヘッダー画像(トップ画像)を作るのは簡単です。
画像はフリー素材を使えば十分です。ヘッダー画像の編集加工やサイズ調整もアプリで簡単に行えます。
注意:デザインに凝ってはいけない?
でも、ヘッダー画像のデザインに凝る必要はありません。なぜなら、どう見せるかよりも、何をどう伝えるかの方が100倍重要だからです。
「は?」と思った場合は、下記の記事を先にチェックしていくことをおすすめします。
➡︎ ホームページのトップ画像デザイン【やってはいけない8選】
【 目次 】
ホームページヘッダー画像作り方
ホームページのヘッダー画像の作り方を以下のパートに分けて説明していきます。
- ホームページヘッダー画像作成前準備
- ホームページヘッダー画像の入手(フリー画像)
- ホームページヘッダー画像の編集加工
注意)iPadを使用した手順や説明になっています。
ホームページヘッダー画像作成前準備
ホームページのヘッダー画像の作り方の説明に入る前に、準備しておくことがあります。ホームページ集客に大きく関わってくる事項です。必ず行ってください。
- ホームページのコンセプトの明確化
- ヘッダーコピーの作成
※ホームページからの集客ができなくて良いという場合は無視して大丈夫です。
ホームページのコンセプトの明確化
ホームページのトップページのヘッダー画像を作る前に、必ずホームページのコンセプト、ターゲット、目的等を明確にしておいてください。
ホームページのヘッダー画像を独立したものと考えないでください。ヘッダー画像はホームページのコンセプトとセットで考えてください。
なぜならば、ホームページの内容とヘッダー画像が合っていないだけで、ホームページはブチっと閉じられてしまうからです(3秒くらいで判断されます)。
よくある間違いが、ヘッダー画像に景色の画像を使うパターンです。
- ITコンサル:南国の海の画像…
- 営業コンサル:きれいな夕陽の画像…
- 健康トレーナー:素敵な夜景の画像…
ホームページは「作品」ではありません。経営、マーケティング、営業の戦略ツールです。ただ綺麗なだけのヘッダー画像は必要ありません(逆効果となります)。
ヘッダーコピーの作成
ヘッダー画像で重要なのは、画像自体より、そのヘッダー画像内に書くヘッダーコピー(キャッチコピー等)です。
なぜならば、画像イメージだけでは読者に何も伝えられないからです。言葉・文章(コピー)で、そのサイト、そのページの続きを読む理由があることを伝えてください。
ヘッダーコピーを全く書いていなかったり、ヘッダーコピーの出来が悪いと、数秒でホームページはブチっと閉じられてしまいます。
逆に、ヘッダーコピーの出来が良いと、あなたのホームページの続きが読みたくなります。成約率(お問い合わせ率など)も良くなります。
ちなみに、画像無し文字(ヘッダーコピー)のみで成果を得ているホームページはたくさんあります。重要度は圧倒的にコピー>画像です。
ホームページヘッダー画像の入手(フリー画像)
ヘッダー画像は、自分で撮影したり、プロに撮影してもらった画像や、自分で書いたイラストやデザインを使用しても構いませんが、世の中には、フリー画像素材(無料・著作権フリー・商用可)が多く公開されています。
以下の記事に、ヘッダー画像に使えるフリー画像素材がダウンロードできるサイトをまとめてあります。ぜひ、活用してください。
➡︎ホームページ等のヘッダー画像に使えるフリー素材【厳選12サイト】
ホームページヘッダー画像の編集加工(アプリ)
ヘッダー画像のサイズの変更が必要となる場合、色合いを変更したい場合、画像にヘッダーコピーの文字を入れたい場合、など、ホームページのヘッダー画像の編集加工が必要となる場合があります。
この記事では、以下のパートに分けて、画像の編集加工方法を説明していきます。
- ヘッダー画像のサイズ変更
- ヘッダー画像の画像調整
- ヘッダー画像の文字入れ
- ヘッダー画像の圧縮
- その他の画像編集加工アプリ
注)この記事では、主にiPadおよびiPhoneアプリで画像加工編集を行うやり方を説明していきます。
ヘッダー画像のサイズ変更
画像のサイズ変更(切り取り・トリミング)は「写真アプリ」(iPhoneやiPadの標準アプリ)で可能です。
1)画像アプリを選択起動
![](https://ts-smartplan.com/wp-content/uploads/2020/07/5BB6F95E-6AEE-4E67-87B0-0517CD0ACA1A.jpeg)
2)対象の画像を選択
![](https://ts-smartplan.com/wp-content/uploads/2020/07/BDCD95A5-6849-4887-AE97-A36782C8222C-1024x421.jpeg)
3)〔編集〕を選択
![](https://ts-smartplan.com/wp-content/uploads/2020/07/0E8485C5-D185-4355-ACB5-3DEF054DA7DB-1024x768.jpeg)
4)下記のマーク(回転や切り取りなど)を選択
![](https://ts-smartplan.com/wp-content/uploads/2020/07/F5EC9A3E-E0DA-4B5F-A4F7-4140DF10DAE3-1024x768.jpeg)
5)下記のマーク(画像サイズの比率)を選択
![](https://ts-smartplan.com/wp-content/uploads/2020/07/D7562A03-2E9C-4F2D-9E5E-C705EFD0E578-1024x768.jpeg)
6)画像の切り取り縦横比率(もしくは「自由」)を選択
![](https://ts-smartplan.com/wp-content/uploads/2020/07/A88E736F-5243-431A-B589-483343799B26-1024x768.jpeg)
7)枠を押さえて伸縮(切り取りたい枠を調整)
![](https://ts-smartplan.com/wp-content/uploads/2020/07/7392F374-7572-41C2-8FDF-A4C9691C664F-1024x768.jpeg)
8)チェックマークを押すと完了(かつ保存)されます。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/CAB1FF16-D8C9-49EB-8CD9-381729465268-1024x768.jpeg)
ヘッダー画像の画像調整
ヘッダー画像の画像調整(色合いや明るさなど)も「写真アプリ」(iPhoneやiPadの標準アプリ)で可能です。
フィルターを活用する場合
1)〜2)
上記と同じです。
3)下記のマーク(フィルターで自動調整)を選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/FE89CF21-5DA0-4662-A166-5DA9AED7078E-1024x768.jpeg)
2)好きなフィルターを選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/5AADE24B-292E-4780-8FC6-4F9510F67B0F-1024x768.jpeg)
手動で調整する場合
1)〜2)
上記と同じです。
3)下記のマーク(手動調整)を選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/FA8F0121-EE70-4D08-857C-54DECD89570E-1024x768.jpeg)
4)様々な調整(色合いや明るさやシャープネスなど)を手動で行います。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/98EC20B4-4006-4853-9D86-721FAFB6581E-1024x768.jpeg)
![](https://ts-smartplan.com/wp-content/uploads/2020/07/ED3F5A01-8D04-4A5B-AFFC-A0EB9543BCE4-1024x768.jpeg)
5)チェックマークを押すと完了(かつ保存)されます。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/8D9A14C7-E94A-4891-B715-25CFF75CCD78-1024x768.jpeg)
オリジナル画像に戻したい場合
右上の〔元に戻す〕>〔オリジナルに戻す〕でいつでも元の画像に戻せます。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/9C7AAB8F-A27E-45D9-BD77-EDEC0D1EE852-1024x768.jpeg)
ヘッダー画像の文字入れ
ヘッダー画像の文字入れも「写真アプリ」で可能ですが、フォント(文字デザイン)の種類が少ないので、ここでは、他のアプリ「Phonto」を使う例を紹介します。
①Phontoを選択起動
インストールしていない場合は、AppStoreからインストールしてください。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/294DE00D-8A10-4492-8664-E8C5C3946D79.jpeg)
2)カメラのマークを選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/B63B6EE6-5473-45E3-A33D-5551415B58AA-1024x768.jpeg)
3)対象の画像を選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/C414B2C1-0C65-479A-A5D2-CFC0C5CC0C55-1024x768.jpeg)
4)お好みでフィルターを選択します(一番左はオリジナルのまま)。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/84ADCF36-8EE3-4399-9032-AEF64AC7EB9A-1024x768.jpeg)
5)画像の適当な箇所をタップします。
6)すると〔文字を追加〕と出るのでタップします。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/83E0E135-FE36-4BF2-8C39-4181F077A88D-1024x768.jpeg)
6)文字を入力します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/4A7D10E0-9FDA-4A21-B912-EEE53FB2DDFE-1024x768.jpeg)
7)〔フォント〕を選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/BF122D86-CF5F-4EC5-95F3-AF914DC229EE-1024x768.jpeg)
8)好きなフォントを選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/68E2C99F-4DFE-4B0E-8828-A970FB74CBF1-1024x768.jpeg)
9)〔サイズ〕を選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/FB485E99-8905-4060-B138-9AF80E3C2893-1024x768.jpeg)
10)文字のサイズを調整します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/B0FFCECB-0F8D-4CCE-B321-2C919D7C4869-1024x768.jpeg)
11)〔スタイル〕を選択します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/6DE969B4-93E2-47B2-BCCB-1B5F32EF5FD0-1024x768.jpeg)
12)〔文字〕を選択し文字色を調整します。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/35E7C025-21A8-47C4-B7DC-8D913010CC2B-1024x768.jpeg)
13)〔ストローク〕を選択すると文字の縁取りが行えます。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/946C1DA2-EBF2-465A-8786-AED2E2F3FBA9-1024x768.jpeg)
14)〔スタイル〕>〔影〕を選択すると文字に影を付けることができます。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/7D71CC04-67F1-46FC-A710-5B7734183B52-1024x768.jpeg)
15)その他の文字加工
その他、文字の角度、文字背景、文字間隔、なども変更・調整できます。また、他の画像を載せたり、図形を入れたりすることも可能です。
16)〔画像を保存〕を選択するとカメラロールに文字入れした画像が保存されます。
![](https://ts-smartplan.com/wp-content/uploads/2020/07/B6D06DDE-AF35-47A4-BBE6-C6E24376E29C-1024x768.jpeg)
ヘッダー画像の圧縮
ホームページに掲載する画像が大きい(高画質でファイルサイズ容量が大きい)と、ホームページを表示する速度が大きく落ちます。
ある程度、画質を落としても、人間の目では劣化を感じません。画質の落とし過ぎは、読者のストレスになるのでNGですが、ホームページに掲載する画像の大きさ(ファイルサイズ容量)を小さくしておきましょう。
画像ファイルサイズの圧縮については、以下の記事で詳しくまとめています。
➡︎iPadやiPhoneで写真画像を圧縮リサイズ縮小【厳選3アプリ!】
その他の画像編集加工アプリ
この記事で紹介した、ヘッダー画像の作り方は、ほんの一例です。画像加工に関するアプリは、山ほど存在します。お好みのアプリを探して使って構いません。
参考までに、私がよく活用しているアプリは、
- 写真(この記事で紹介)
- Phonto(この記事で紹介)
- Canva(WEBサービスもあり)
- Keynote
などです。
他にも、背景を消したり、モザイクをかけたり、キラキラをつけたり、絵画風に変換したり…などなど、数えきれない種類のアプリがあります。
なので、アプリは、何でも良いと思います。自分が使いやすい、お好みの画像編集加工アプリを使えばOKです。
ホームページヘッダー画像の重要性
ホームページでも、ブログでも、ヘッダー画像は非常に重要です。
なぜならば、ほとんどの人は、ファーストビューを見るだけで、そのページを読むかどうか、一瞬で判断するからです。
人間で言えば、第一印象ってやつです。
ファーストビュー:ページを開いてスクロールせずに目に入ってくるエリア
ファーストビューの大部分を占めるのが、ヘッダー画像です。このヘッダー画像の作り方で、読者に好かれるか嫌われるかが、ある程度決まってしまいます。
たとえ、本文がどんなに素晴らしくても、ヘッダー画像で「はぁ?」「違う!」と思われたら、そこで終わりです。ブチっ!とページを閉じられてしまいます。
ヘッダー画像の作り方で、一番重要なのは、読者に何を伝えるかです。
かわいい画像、かっこいい画像、おしゃれな画像……かどうかは、全く重要ではありません。どうでも良いです(センスやデザインやイメージが顧客に強く問われるビジネスは除きます)。
繰り返しますが、一番重要なのは、ヘッダー画像で読者に何を伝えるかです。それを忘れないでください。
ファーストビューの重要性については、以下の記事で詳しく説明しています。
➡︎ファーストビューとは【その重要性と8つの注意点】集客に影響あり!
ホームページヘッダー画像作り方重要ポイントまとめ
最後に、ホームページヘッダー画像の作り方で重要となるポイントを、まとめておきます。
- 事前にホームページのコンセプトを明確に
- 事前にホームページのキャッチコピーを用意
- ホームページの内容に合った画像にする
- ヘッダーコピーは必ず入れる
- フリー画像素材を使うのが効率的
- 画像のファイルサイズを大きくしない
- ファーストビューは超重要
参考
ホームページで集客を行なっていく場合は、ヘッダー画像の他にも、いくつか重要なポイントがあります。それらについて詳しく知りたい方は、以下から学んでみてください。
➡︎パソコン苦手でも、アクセス数を3倍5倍10倍にし、毎月安定的に見込み客を増やし続けていける『【無料】ホームページ集客講座(7つの特典つき)※初心者向け』
関連記事
➡︎ ホームページのトップ画像デザイン【やってはいけない8選】
➡︎ ファーストビューとメインビジュアルとトップ画像の違い【図解】
➡︎ WEBサイトでのキービジュアルとメインビジュアルの違い【図解】