ホームページでは、イメージを喚起させたりコンテンツをわかりやすくするために画像が多用されます。ですが、サイト運営経験がなく画像の表示方法がわからないという方もおられるのではないでしょうか？
この記事では、ホームページに必要不可欠な画像の貼り方・アップロードの仕方について解説します。
この記事を読んだらわかること
・ホームページに使用する画像のタグ
・ホームページに画像を貼り付ける方法（アップロードの方法）
・画像を貼り付ける際の注意点
・無料で使える画像サイト
・有料で使える画像サイト
ホームページは、制作して終わりではなく、公開後の集客が必要になります。
我々はSEOに強いサイト設計とコンテンツ作りを強みに、公開後も検索エンジンから集客し続けるホームページをご提案できますので、集客にお困りの方はお気軽にご相談ください！
ホームページに使用する画像のデータ形式
ホームページに使う画像のデータ形式はいくつか種類があります。ここで解説する画像の種類は以下の3つです。
- jpg（jpeg）
- gif
- png
それでは各画像の種類を見ていきましょう。
jpg（jpeg）
jpg（jpeg）とは、「Joint Photographic Experts Group」の略です。次のような特徴を持ちます。
- 1,677万色のフルカラーを表現することができる
- 繊細な色彩表現に向き、写真やグラデーションなどもきれいに再現できる
- 画像サイズを変更すると元に戻すことができない
- くり返しの保存に不向き（可能だが画質が下がる）
写真に適したデータ形式になります。
gif
gifは「Graphics Interchange Format」の略で「ジフ」と読み、次のような特徴を持ちます。
- 音声なしの簡易的なアニメーション表現に最適な保存形式（静止画像には不適）
- ファイルの容量が軽い
- 背景は透過処理ができるほか、切り抜き処理等も可能でアイコンなどにも向く
- 使用できるのが最大256色のみなので繊細・複雑な色彩表現ができない
png
pngとは「Portable Network Graphics」の略で、「ピング（ピン）」と読みます。フルカラー表現ができる一方で、 透明・不透明・半透明という3つの透過処理ができます。
主な特徴は下記の通りです。
- 圧縮ノイズが見られる場合があるため、シンプルなマークやイラスト表現に最適
- 色数はgifと同じ256色のpng-8とフルカラーが使えるpng-24の2種類がある
- 高圧縮に強く、圧縮後にも復元が可能
- 同じ画像処理をしてもjpegと比べてかなり容量が大きくなってしまう
ちなみにスマホやマックなどで保存される拡張子は「png」です。
ホームページに画像を貼り付ける方法（アップロードの方法）
ホームページに画像としてアップできるデータ形式を学んだところで、いよいよここからはホームページに画像を表示させる具体的な方法を解説していきます。
画像の用意
ホームページに画像を貼りたい場合には、まず使用したい画像を用意するところから始めます。サイト管理者が自ら撮影した画像や画像サイトからダウンロードした画像を使うのが一般的です。
画像をサーバーにアップロード
画像を用意したら、あらかじめ契約したサーバーに画像をアップロードする必要があります。サーバーによってアップロード方法が異なるので、今回はエックスサーバーを用いて説明していきます。
まず、FTPユーザー名とFTPパスワードを使用してファイルマネージャーにログインをお試しください。
ファイルマネージャーにログインしたら、画面上の「アップロード」ボタンを押し、アップロードしたい画像を選んだら、表示されている領域にドロップします。選んだ画像ファイルに間違いがなければ「アップロード」ボタンをクリックしましょう。
該当箇所にHTMLタグを追加する
上述した2つの作業を終えたら、最後にHTMLタグをWebページ上の該当する箇所に追加します。
画像を貼り付けるためには「<img>」と呼ばれるタグを記述します。
記述方法は、下記の通りです。
「<img src=”画像のある場所（./フォルダ名/ファイル名）” width=”画像の幅” height=”画像の高さ” alt=”画像の説明” border=”外枠あり・なし” >」
上記コードを表示させたい箇所に追加してください。コードがうまく反映されればホームページ上に反映されます。
少しコードに関して補足していきます。
img src
Webサイトは全て「タグ」と文字列で構成されるHTMLというコードで記載され、そこからコンピューターが情報を読み取り、Web上に表示しています。
「img src」とは、「これは画像だよ」と知らせるタグであり、同時に画像がある場所を指定するものでもあります。画像はサーバーに保管されているので、タグを読み込んだPCが指定された場所からデータを取り出してくるというわけです。なお、img srcは「イメージソース」と読みます。
参考：ホームページ制作に欠かせないサーバーとは？オススメサーバーも紹介
alt
altは「オルト」と読み、画像を表すコードの中でも、検索エンジンに対して、画像の説明をするためのタグです。通常はaltの後に「＝」をつけ、その後に通常の文字列で画像の説明を記入します。
通常このタグはユーザーの目には触れませんが、Webサイトの読み込みが遅く、画像が表示される前に代わりのテキストとして表示されます。
また、このタグがあることにより、検索エンジンにどんな画像が載っているかを知らせることが可能となります。コンテンツのキーワードにマッチしているかどうかなどの判断材料にもなるため、SEO効果にも大きな影響を及ぼします。
ZERO式ホームページ制作はこちら
width/height
widthは「ウィス（ウィズ・ウィトゥス等）」と読み、heightは「ハイト」と読みます。それぞれwidthは画像の幅を、heightは画像の高さを表します。幅や高さは、px（ピクセル）や％などの数値で指定します。
画像を貼り付ける際のポイント
次に、ホームページに画像を貼る際のポイントを6つご紹介します。
- 用途に合わせて適切な画像を使用する
- 引用を用いる
- 見栄えを整える
- 画像の表示時間を早める
権利問題をはじめ、ユーザーやGoogleからのユーザビリティに関する評価につながる重要なポイントです。
用途に合わせて適切な画像を使用する
ホームページで使用する画像は何でも良いわけではなく、先述した画像の種類をうまく使い分けることが大切です。
画質の美しさを追求したい場合には迷わずjpeg、動きをつけてアニメーション化したい画像ならgifを使います。
また、容量は大きくなってはしまうものの、簡単に完全に元の写真等を復元でき、なおかつ劣化しにくいpngは、上述した以外のケースで統一的に使用すると良いでしょう。
引用を用いる
他のサイトで使用されている画像を自サイトに載せる場合は、引用を用いましょう。画像を引用する際には以下の点を厳守しましょう。
- その画像が引用であることと出どころを明示している
- 画像の変更やモザイク加工等の処理はしない
- 自社のオリジナルコンテンツがメインのページで使用すること
- 引用画像が該当するWebページに必要不可欠であること
- 利用規約を一読しておく
- 可能であればサイトの管理人に使用許可を得る
画像の横幅・縦幅は統一すると見栄えがいい
ブログなどでは、あるテーマについて解説する際に連続的に画像を使用する場合がありますが、このような場合には横幅や縦幅を統一することで見映えが非常に良くなります。
CSSを使用すれば、横幅や縦幅を自動調節してはくれるものの、場合によっては画像が変にリサイズされてしまう可能性も否めません。トリミングが必要な場合は、あらかじめphotoshop・XD・PowerPointなどのツールを使って適切な大きさにしましょう。
画像の表示時間
画像ファイルの容量が大きいと表示には時間がかかります。表示に時間がかかれば、その分、ユーザーに離脱されてしまうリスクが高まります。
ユーザビリティを下げないためにも、画像サイズはなるべく小さく収めておくことが、表示速度を速めるための第一の対策と言えるでしょう。
画像がうまく表示されない場合の対処方法
手順通りにホームページに貼り付けたはずなのに、画像が思った通り表示されないトラブルが起こる場合があります。画像がうまく表示されない理由はさまざまですが、次のような原因が隠れているケースが目立ちますので覚えておきましょう。
- スペルや半角全角などタグの設定が間違っている
- 画像ファイルが破損している
- そもそも画像ファイルがサーバーにない
- サーバーが混み合っている
- セキュリティソフトが邪魔している
- ホームページに対応していない拡張子を用いてる
画像が荒れている場合はどうする？
ホームページの画像が荒れている原因は解像度の低さにより起こるトラブルです。画像の解像度は1インチあたりの画素数で決まり、この数が多いほど画像が鮮明になります。
粒子が細かい画像ほどきれいにはなりますが、かと言ってあまり大きい数字になると今度は表示速度が遅くなるため、適切な画像サイズを用いましょう。
無料で使える画像サイト
ここでは、サイト運営者の方などから人気の無料で使える画像サイトを3つご紹介します！
パクたそ
パクたそは、ユニークな画像を豊富に取り揃えた無料素材サイトです。画像の豊富さや面白さに加え、ダウンロード方法が簡単なため、幅広いサイト運営者から人気があります。
会員登録しなくても、欲しい画像を開いてサイズを選びダウンロードボタンを押せばOKなので、料金だけでなく手間もかかりません。多少クセのある画像が多く、探している雰囲気の素材がいつでも見つかるとは限らないのがデメリットです。
写真AC
写真ACはホームページやブログ等でよく使うプレーンな風景画像などを多く揃えた無料画像サイトです。写真ACの特徴は無料サイトながら多くの中から希望の画像を探せる豊富なラインナップです。
一方で、会員登録が必要な点と、1日に10点しかダウンロードできないというデメリットもあります。また、ダウンロードする際に、さまざまなアンケートに答えてからでないと進めない画像が多い点も同様にデメリットと言えるでしょう。
Unsplash
Unsplashは海外サイトならではのハイセンスな画像が見つかる無料サイトで、ハイグレードな画像を取得したいサイト管理者にはうってつけです。
登録も料金もなしで素敵な画像を入手できるのが特徴的なサイトですが、点数がさほど豊富でないことや、クレジット記載を求められる点、さらに画像検索は英語しか使用できないデメリットがあります。
有料で使える画像サイト
ライバルサイトとは一線を画す上質な画像を使って、自サイトのグレードを上げたいという方も少なくありません。
そのような方は有料の画像サイトに登録するのもお勧めです。ここでは、使える画像を豊富に揃えた人気の有料画像サイトを3つご紹介します！
Adobestock
Adobestockは、写真はもちろん、ビデオ・イラスト・テンプレートなど幅広い素材をロイヤリティー不要で購入できるサイトです。
月間か年間かで選べるサブスクリプションと、欲しい時に欲しいだけスポット購入できるクレジットの2種類の料金制度があって便利です。PhotoshopやIllustratorといったAdobe製品との連携が非常にやりやすいため、こうしたツールを使ってデザインを自社で行う会社などには特にお勧めです。
Pixta
Pixtaは写真のクオリティの高さに定評があるロイヤリティーフリーの有料画像サイトです。Pixtaは日本人モデルを多用した高品質な画像が豊富で国内サイトとの親和性が高いほか、プロやそれに近い技術を持った方が写真を販売できる場であるという特徴があります。
料金制度は、1点からでも素材を購入できるサイズごとの価格設定がある一方、月間10〜750点までの画像を利用できるといった制限つきの定額制料金もあります。月に10点までのダウンロードなら月額6,380円（年間更新の場合）です。
Shutterstock
Shutterstockは、3億点以上もの写真やイラストを提供しているフォトストックサービスです。海外サイト特有のスケール感のある写真や国内サイトではなかなか見られないハイセンスな画像を取得できます。
高級感やおしゃれな雰囲気を前面に出したいホームページでは、かなり有用性のあるサイトですが、日本人モデルを使用した画像があまりないのはデメリットと言えるでしょう。法人なら年間契約がお勧めで、月に画像750点までで料金は月額25,000円です。
まとめ：画像の貼り付け方がわからなければプロに相談
ホームページやブログにとって、画像はユーザーの目を楽しませたり情報に説得力を持たせるための大切なアイテムです。
また、SEO対策としてもサイトの内容に適した画像を適宜貼っていくことが求められます。画像の貼り方は覚えてしまえば自分で行うことはできますが、用途に応じた画像の種類やサイズを選んで適切に貼り付けることが難しいと感じる場面もあるでしょう。
画像を貼る段階で困ったことがあれば、そこで立ち止まっているよりもWeb制作会社などの専門家に相談されることをお勧めします！
この記事のまとめ
・引用方法には注意が必要
・画像がうまく表示されない場合には理由を突きとめて適切に処置する
・画像をダウンロードできるサイトには無料・有料サイトがありそれぞれに特徴がある
ホームページは、制作して終わりではなく、公開後の集客が必要になります。
我々はSEOに強いサイト設計とコンテンツ作りを強みに、公開後も検索エンジンから集客し続けるホームページをご提案できますので、集客にお困りの方はお気軽にご相談ください！
