こんにちは、編集長のカワウソです！
「ホームぺージに画像を入れる方法が分からない……」と悩んでいませんか？
そこで今回は初心者の方向けに、ホームページ画像の作り方や入れ方を分かりやすく解説します。
カワウソ
この記事は次のような人におすすめ！
- はじめてホームぺージを作る人
- ホームページの画像を作りたい人
- ホームページに画像を入れたい人
- 画像サイズ（容量や大きさ）の注意点を知りたい人
この記事を読めば、ホームぺージの画像をきれいに見せることができ、自社の魅力をアピールするのに役立ちます。
なおこの記事では、「画像の作り方」から解説しています。「画像の入れ方だけ知りたい」という方は、以下のリンクをクリックしてください。
それではどうぞ！
目次
ホームぺージの画像を作る方法
ホームページの画像は、専門知識がなくても簡単に作れます。
以下、3つの手順で解説します。
手順1：画像素材を用意する
まず、画像素材を用意しましょう。
画像素材は以下の3つの方法で用意できます。
- 自社で用意（写真撮影／イラストを描く）
- プロに依頼（フォトグラファー／デザイナー）
- 画像素材サイトを利用（無料／有料）
「自社で用意」「プロに依頼」
「自社で用意」もしくは「プロに依頼」なら、オリジナルの素材を用意できます。
企業の商品やサービスに関するものは、オリジナルの素材が理想的。ユーザーに商品やサービスの特徴が伝わりやすくなります。
自社で画像素材を用意できない場合は、プロに依頼しましょう。
写真なら「フォトグラファー」、イラストなら「デザイナー」に発注します。
「画像素材サイトを利用」
「画像素材サイトを利用」は、すでに用意された写真やイラストを活用する方法です。
ホームぺージを作るうえで、単に補足的なイメージとして画像を使うときもあるでしょう。そのときに素材サイトは役立ちます。
無料の画像素材サイトでも高品質な写真やイラストがダウンロードできますよ。有料であればさらに自社にマッチする画像素材が選べるため、予算に応じて使い分けてください。
無料の画像素材サイトは、以下の記事で詳しく解説しています。
【2023年版】企業ホームぺージに使える無料素材サイト20選
手順2：画像編集ソフトを用意する
画像素材のなかには、そのままの状態でホームぺージに活用できるものもあるでしょう。
一方、サイズの調整や文字の挿入が必要な場合は、「画像編集ソフト」を用意します。
画像編集ソフトと一口に言っても、種類はさまざま。ここでは代表的な画像編集ソフトを3つ紹介します。
Adobe Photoshop & Illustrator
▲出典：Adobe（アドビ）
| レベル | 中級者～上級者向け |
| 費用（法人プラン） |
|
| おすすめの人 | 予算があって、自社の制作レベルをあげていきたい人 |
『Photoshop（フォトショップ）』と『Illustrator（イラストレーター）』は、Adobe（アドビ）社が提供している有料の画像編集ソフト。
個人法人問わず、多くのWeb制作現場で利用されています。
『Photoshop』は主に「写真」の編集に使用。背景をぼかしたり、写真に写っている人物を消したりと、さまざまな編集ができます。
一方、『Illustrator』は主に「イラスト」の編集に使用。ロゴやアイコンなどホームぺージのイラストはもちろん、パンフレットなどの印刷用データも作れます。
プランがいくつか用意されているので、詳細はAdobe公式サイトで確認ください。
個人プランは契約者のみ利用できるプランです。契約者が退職した場合、他のユーザーは利用できません。その点、法人プランならユーザーを切り替えられます。
Canva
▲出典：Canva
| レベル | 初級者～中級者向け |
| 費用（法人プラン） |
|
| おすすめの人 | とりあえず画像を編集したい人 |
『Canva（キャンバ）』は、全世界190ヶ国、月間アクティブユーザー数6,000万人以上の大人気ツール。
Web上で画像編集ができるツールなので、パソコンにソフトをインストールする必要がありません。
海外製のツールであるものの、日本語に対応しているので迷わず使えます。
無料プランも用意されており、「とりあえず画像を編集してみたい」というときにおすすめです。
カワウソ
ペイント
| レベル | 初心者向け |
| 費用（法人プラン） | 無料 |
| おすすめの人 | 予算がなく、かんたんな画像編集で事足りる人 |
『ペイント』は、WindowsOSのパソコンに標準搭載されている画像編集ソフト。
Windowsの「スタートメニュー」 →「Windows アクセサリ」から起動できます。
無料の『ペイント』でも、サイズ変更や文字の挿入程度の画像編集はできます。
ただ、一度配置した文字や図形などは動かせません。複数の文字や図形を入れる場合など、あとから各パーツを微調整できないところは、使いにくさを感じます。
手順3：画像を編集する
それでは『Canva（キャンバ）』を使って、トップぺージの「メインビジュアル」を作ってみましょう。
ホームページにアクセスしたときに、最初に表示される領域の中の大きな画像。
画面右上にある「デザインを作成 > カスタマイズ」をクリックします。
画像サイズを入力して「新しいデザインを作成」をクリックすると、別タブで編集画面が開きます。
※今回は幅1920px、高さ600pxで設定しました。
ここでは無料素材を利用します。
画面左側の「素材」をクリックしたあと、希望の写真を選択します。
写真を選択して、サイズを調整しましょう。
画面左側の「テキスト」をクリックし、フォントを選びます。
次に、キャッチコピーを入力しましょう。
画面上部の「A」のアイコンから、文字の色を変えます。
次に、画面上部の「エフェクト」から背景色を付けます。「丸み」「スプレッド」など任意に調整してください。
編集が完了したら、画面右上の「共有 > ダウンロード」をクリックします。
今回はファイルの種類を「JPG」でダウンロードします。
※画像ファイルの種類については、のちほど詳しく解説します。
『Canva』の無料プランは、画像ダウンロード時にサイズを指定できません。有料プランに切り替えると制限が解除されます。
完成です。
メインビジュアル作成のポイント
トップページの「メインビジュアル」を作成するときは、ターゲットに刺さるキャッチコピーを入れましょう。
ユーザーがホームページを訪問したとき、最初に目にするのはメインビジュアルを含む「ファーストビュー」です。
ユーザーは、ファーストビューで自分が求めている情報があるかを判断します。
「求めている情報がない」とユーザーに判断されると、ホームぺージから離脱されてしまうでしょう。
メインビジュアルのキャッチコピーについては、以下の記事で詳しく解説しています。
トップページとは？ホームぺージ作りで意識すべきポイント
ホームページ画像作成時の注意点3つ
画像の作り方が分かったら、次は注意点を知っておきましょう。
注意点は以下の3つです。
それぞれ解説します。
用途にあった種類（拡張子）を選ぶ
ホームページに掲載する画像はいくつか種類があります。画像の種類を見分けるには、ファイル名の後ろに付いている「拡張子」をチェックしましょう。
ホームぺージの画像はほとんど、「.jpg」「.gif」「.png」の3種類が使用されています。
では、この3つの画像ファイル形式からどれを選べばいいのでしょうか。
結論、写真なら「.jpg」、アニメーションなら「.gif」、イラストなら「.png」がおすすめ。背景透過の画像を作る場合は「.png」を利用しましょう。
次に詳しく解説します。
JPEG（ジェイペグ）
拡張子は「.jpg」。フルカラー約1670万色に対応しており、写真をきれいに見せるのに適しています。
高画質にも関わらず、画像のサイズ（容量）が小さいのがメリット。ただし「非可逆圧縮」のため、上書き保存するたびに画像が劣化するので注意が必要です。
GIF（ジフ）
拡張子は「.gif」。色数は256色まで対応しており、ロゴやアイコンなど、色数の少ないシンプルなイラストに用いられます。
また、「背景透過」や「アニメーション」に対応。とくにアニメーションは、JPEGやPNGでは作れないため、GIFならではの特徴と言えます。
また「可逆圧縮」のため、保存を繰り返しても画像は劣化しません。
PNG（ピング）
拡張子は「.png」。JPEGと同じフルカラー約1670万色まで扱えます。
さらに「背景透過」にも対応しています。まさにJPEGとGIFのいいとこ取り。また「可逆圧縮」のため、保存を繰り返しても写真は劣化しません。
ただし、JPEGより画像のサイズ（容量）が大きくなるため、使い分けるようにしましょう。
表示サイズ（幅×高さ）にあわせる
基本的に画像は、実際にホームぺージで表示する「幅」や「高さ」と、同じサイズで作りましょう。
表示サイズより小さい画像だと、粗く表示されるため、ホームぺージの見た目が悪くなります。
反対に、表示サイズより大きい画像だと、容量が大きいため、ページの読み込み速度が遅くなってしまいます。ユーザーがホームページから離脱する原因になるでしょう。
詳しくは、あとの「画像ファイルの容量を圧縮する」で解説します。
高解像度ディスプレイの対応方法
近年、『Apple』製品の『Retinaディスプレイ』をはじめ、さまざまなデバイスに「高解像度ディスプレイ」が採用されています。
高解像度でハイコントラストな色彩表現が可能な、『Apple』のオリジナルディスプレイ。
ホームぺージの画像にこだわりがあり、高解像度ディスプレイでもきれいに表示させたい場合、ひと工夫が必要です。
高解像度ディスプレイは解像度が高いため、通常のサイズ（幅×高さ）では、画像がぼやけることがあります。
高解像度ディスプレイの対応には、画像を表示サイズ（幅×高さ）の2倍の大きさで作成するのが一般的。ただし、htmlタグ内のwidth（幅）とheight（高さ）は、表示サイズのままにします。
※htmlタグによる画像の挿入方法は、あとの「手順2：htmlタグを挿入する」で解説します。
画像ファイルの容量を圧縮する
画像ファイルの容量が大きいときは、圧縮しましょう。
容量が大きい画像ファイルは、ページの読み込み速度が遅くなり、ユーザーが離脱する原因となります。
画像のファイル容量は、以下の方法で確認可能。
「画像を右クリック > プロパティ > サイズ」
Adobe系の画像編集ソフトであれば、ファイルの保存時に容量を指定できます。
すでに完成した画像の容量を減らしたいときは、圧縮ツールがおすすめ。以下、代表的な圧縮ツールを2つ紹介します。
iLoveIMG
▲出典：iLoveIMG
無料で使える圧縮ツール『iLoveIMG』なら、画像の圧縮作業がWeb上で完結します。
- 「画像選択」をクリック
- 画像を選んで「画像の圧縮」をクリック
- 「圧縮された画像をダウンロード」をクリック
これだけで圧縮できます。※127KBから93KBに容量が小さくなりました。
Squoosh
▲出典：Squoosh
『Squoosh（スクワッシュ）』は、Google Chrome Labsが開発している画像圧縮サービス。画面分割（左右）により、圧縮する前と後を見比べながら作業できます。
リアルタイムで圧縮後の容量がわかるため、ギリギリまで追い込みたいときに便利です。
英語表記のツールであるものの、簡単なのでぜひ使ってみてください。
ホームぺージに画像を入れる方法
画像が完成したら、いよいよホームページに入れてみましょう。
ホームぺージの作り方によって、画像を入れる方法は異なります。ここでは代表的な「HTML」と「WordPress」の2つの作り方に対して、それぞれ画像を入れる方法を解説します。
ホームぺージの作り方の種類は、以下の記事で解説しています。
【初心者向け】会社ホームページの作り方を基礎から解説
HTMLとWordPressを比較して詳しく知りたい方は、以下の記事をご覧ください。
静的サイトと動的サイトの違い！メリットとデメリットを解説
HTMLで作ったホームぺージ
HTMLで作ったホームぺージに画像を入れる手順は、以下のとおりです。
ここでは『エックスサーバー』のFTP機能である、「ファイルマネージャ」を例に解説します。ご自身が使いやすいFTPソフトをご利用ください。
※FTPソフト含め、HTMLでホームページを作る手順は、以下の記事で詳しく解説しています。
【はじめてのHTML 】 ホームぺージの作り方・公開までの手順を解説
手順1：画像をアップロードする
公開サーバーに、画像のアップロード先のフォルダがあるか確認します。なければ作りましょう。
公開サーバーの画像フォルダに、画像をアップロードします。
手順2：htmlタグを挿入する
ホームページに画像を表示するためには、表示させたいページのhtmlファイルに、「imgタグ」を挿入します。
<img src="画像のURL" alt"画像の代替テキスト" width="幅" height="高さ”>
画像のURL
HTMLファイルから見て、画像フォルダがどこにあるかで指定方法が異なります。
- 同じ階層に画像フォルダがある場合
「images/〇〇〇.jpg」 - 1つ上の階層に画像フォルダがある場合
「../images/〇〇〇.jpg」 - 2つ上の階層に画像フォルダがある場合
「../../images/〇〇〇.jpg」
※これらは「相対パス」と呼ばれる記述方法です。「絶対パス」と「相対パス」との違いは、便宜上割愛します。
画像の代替テキスト
画像の代替テキストを記載しておくと、ブラウザが画像データを取得できなかった場合に、代わりにテキストが表示されます。
SEO（検索エンジン最適化）では推奨されており、とくに「画像検索」で有効です。
「SEOって何？」という方は、以下の記事をご覧ください。
SEO対策とは？ホームページ初心者が制作時に意識すべきポイント6つ
widthとheight
width（ワイズ）は「幅」、height（ハイト）は「高さ」。
widthとheightには、それぞれ「px（ピクセル）」または「％（パーセント）」の数値を指定します。
ホームページによっては「width」のみを指定する場合も。その場合、「height」は「width」にあわせて自動で決まります。
手順3：htmlファイルをアップロードする
編集したhtmlファイルを公開サーバーにアップロードします。
※『エックスサーバー』の「ファイルマネージャ」では、ファイルを「更新」すると反映されます。
アップロードが完了したら、画像が上手く挿入されているか、ホームぺージを確認してください。
WordPressで作ったホームぺージ
ここではWordPressで作ったホームぺージに、画像を入れる方法を解説します。
「ブロックエディタ」を使えば、簡単に画像を入れられます。
文章や画像などのコンテンツをブロック単位で組み合わせることで、HTMLやCSSの知識がなくても編集ができる機能。
※WordPressでホームページを作る手順は、以下の記事で詳しく解説しています。
WordPressを使ったホームページの作り方！7つの手順で解説
手順1：画像ブロックを挿入してアップロードする
まず画面の左上にある「＋」をクリックしましょう。
ブロック一覧が表示されますので、その中の「画像」を選択してください。
画像ブロックが追加されたら「アップロード」をクリックし、任意の画像をアップロードします。
完了です。
手順2：代替テキストを入力して画像サイズを調整する
画像のサイズを調整したり、代替テキスト（alt）を入力するには、画面右上の「設定（アイコン）」をクリックします。
代替テキストは、「Alt テキスト (代替テキスト) 」の欄に入力します。
「画像サイズ」では、プルダウンメニューから以下を選択できます。
- サムネイル
- 中
- 大
- フルサイズ
また、「画像の寸法」では任意のサイズを数値（px）で指定できます。
ページにあうように調整してください。
手順3：ページを公開する
画像の設定が完了したら、画面右上の「公開」ボタンをクリックします。
これでWordPressの画像挿入は終了です。
プレビューで画像がうまく表示されているかを確認してください。
ホームぺージの画像で守るべきルール
ホームページに画像を入れるとき、とくに注意したいのが著作権です。
他人の画像を勝手に使うと、著作権侵害で訴えられる可能性があります。
トラブルにならないためにも、必要最低限の知識を身に付けましょう。
ここでは利用シーンとして一番多く想定される、以下の2つについて解説します。
画像素材サイトを利用する場合
画像素材サイトは、利用規約で定められた範囲内で利用しましょう。
フリーの画像素材サイトでも、高品質な画像はダウンロードできます。
ただ、フリーの画像素材サイトだからといって、自由に使ってよいわけではありません。
フリーというのはあくまでも「無料」という意味。著作権は素材サイトもしくは画像提供者が保持したままである場合が多いです。
画像素材サイト利用時の主なチェックポイントは以下のとおりです。
- 商用利用可能か
- 改変（編集）可能か
- クレジット表記が必要か
これら以外にも、画像素材サイトごとに細かくルールが定められています。
事前に利用規約を確認してください。
第三者のホームぺージ画像を使う場合
第三者のホームページ画像が必要なときは、「引用」を用いれば利用できる場合もあります。
著作権法で定められたルールは、文化庁のホームページで公開されています。
『他人の著作物を自分の著作物の中に取り込む場合，すなわち引用を行う場合，一般的には，以下の事項に注意しなければなりません。
引用：文化庁 著作物が自由に使える場合 (注5)引用における注意事項
（1）他人の著作物を引用する必然性があること。
（2）かぎ括弧をつけるなど，自分の著作物と引用部分とが区別されていること。
（3）自分の著作物と引用する著作物との主従関係が明確であること（自分の著作物が主体）。
（4）出所の明示がなされていること。（第48条）
（参照：最判昭和55年3月28日 ｢パロディー事件｣）』
ここでとくに注目したいのが、（1）の「必然性」。分かりやすく言うと、「引用する目的が正当かどうか」ということです。
「おしゃれな画像だから引用した」といった理由では、必然性は認められません。第三者の画像を引用せずとも、自分で用意できるためです。
たとえば、外部の「調査結果」や「研究結果」などのグラフデータ（画像）をもとに、自社の考えを発表する場合は、必然性が認められるケースが多いです。
調査結果や研究結果などは、専門分野の機関が発表するデータだからこそ信頼性があります。つまり、「引用しなければいけない理由」が存在します。
とはいえ、トラブルになる可能性がゼロとは言い切れないため、何かあった際は真摯に対応しましょう。
画像がうまく表示されないときの対処法
手順どおりに画像を挿入しても、うまく表示されないこともあります。
そこでよくある問題の対処法を解説しておきます。
同じ問題が発生した方は、参考に解決してください。
画像自体表示されない
ホームぺージに画像を入れたにも関わらず、表示されないのには、以下の理由が考えられます。
- タグの記述を間違えている
- 画像ファイルが壊れている
- 画像ファイルがアップロードされていない
- サーバーが混み合っている
- セキュリティソフトが邪魔している
それぞれの原因を詳しく見ていきましょう。
タグの記述を間違えている
HTMLで作ったホームぺージだと、「imgタグ」を挿入して画像を表示させます。
HTMLタグは1字でも間違っていると表示されません。「画像URLは正しいか」「半角で入力できているか」など、チェックしましょう。
画像ファイルが壊れている
画像ファイルが壊れている可能性もあります。
ホームぺージ（公開サーバー）側ではなく、パソコン（ローカル）側で開いて問題がないか確認してください。
パソコン（ローカル）側で画像が正しく表示されない場合は、ファイル自体が壊れているかもしれません。
画像を作り直しましょう。
画像ファイルがアップロードされていない
アップロードが正常に完了していないと、ホームページに画像が表示されません。
もう一度アップロードして、画像が表示されるか確認しましょう。
サーバーが混みあっている
ホームぺージに画像を適切に入れても、サーバーが混み合っていると表示されないときがあります。
この場合は、検索窓の左にある丸矢印の「更新」ボタンやキーボード上の「F5」キーを押して、Webページを再度読み込んでください。
セキュリティソフトが邪魔している
セキュリティソフトが画像の表示を邪魔している可能性があります。
セキュリティソフト側の機能を一時停止して再確認してください。
ただし、セキュリティリスクを抱えるため、事前に問題がないか確認してから実施するようにしましょう。
画像が伸びたり縮んだりする
画像が伸びたり縮んだりする原因は、画像自体の幅×高さの比率と、設定の幅×高さの比率があっていないためです。
「width（幅）」や「height（高さ）」を適当に指定してしまうと、画像が歪む問題が発生します。
正しい比率を認識したうえで画像を作ったり、設定したりして、あわせましょう。
古い画像が表示されてしまう
ホームページで画像を更新したのに、古い画像が表示されるときは「キャッシュ」を疑ってください。
ブラウザやサーバーなどが、アクセスしたWebページを一時的に保存しておく仕組み。
ブラウザにホームぺージのキャッシュが残っていると、更新しても新しい画像が表示されないときがあります。
キャッシュの削除はブラウザにより異なります。お使いのブラウザでキャッシュクリア方法を確認して、お試しください。
すぐに新しい画像を表示させたい場合
「古い画像を見られては困る」「すぐに新しい画像を表示させたい」という場合は、「パラメータ」を利用する方法があります。
画像のURLの後ろに「?」と「任意の文字列」を入れます。
<img src="画像のURL?date=20220517" alt="画像の代替テキスト" width="幅" height="高さ">
文字列は任意のもので構いません。ただ、新しい画像を表示させるためには、更新ごとにパラメータを変えましょう。
「更新日付を付加する」というルールを作れば運用しやすいです。
HTMLで作ったホームページの場合は、HTMLファイルの「imgタグ」にパラメータを付与します。
WordPressで作ったホームぺージの場合は、投稿ページの画像ブロックを「HTMLとして編集」で、「imgタグ」を表示させてパラメータを付与します。
まとめ
この記事では、ホームぺージ画像の作り方や入れ方を解説しました。
- ホームぺージの画像を作るには、まず「素材」を用意する
- ホームぺージの画像を作るときは、「3つの注意点」を意識する
- ホームぺージに画像を入れる方法は「HTML」と「WordPress」で異なる
- 「素材サイト」を利用するときは、定められた利用範囲を守る
- 第三者のホームぺージの画像を使う場合は、正しい解釈で「引用」を用いる
文章だけでなく、画像があるホームぺージのほうがユーザーの理解度は高まります。
この記事を参考に、ホームぺージに画像を入れてみましょう。
それでは素敵なホームぺージの完成を願っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、17万社の導入実績があります。
6月9日12時まで利用料金最大30%OFFキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2023年5月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
