【動画あり】ウェブサイトを作り込んでいくには、文章と同じように画像も大切な要素のひとつですが、ウェブページで画像を使うために知っておくべき基本的なことを、まずは押さえましょう。
WB-5：サイトに使う画像について知っておくべきこと
◆ ウェブで使う画像はファイルサイズ（寸法ではなく）に注意を！
ネット上にはクリアで綺麗な写真がある反面、全体がぼやけた感じになっているものがあることは、みなさんお気づきだと思います。
この「品質」の違いは、画像のファイルサイズの違いから来るものです。ファイルサイズとは、見た目の大きさのことではなくその画像のデータの大きさのことですので、混乱しないようにお願いします。
◇ ファイルサイズの確認が必要な理由とは？
ウェブページで使用する画像は、手元のパソコンからアップロードすることが多いと思います。
その際には、事前にファイルサイズを確認しましょう。Windowsの場合には、画像を右クリックして「プロパティ」を選択します。そこに表示されている「サイズ」が、ファイルサイズです。
このサイズが大きいほど、画像の品質が良くなりますが、必要以上に品質を良くしてしまうと、見る人のパソコンやスマホに届くために時間がかかりすぎてしまいます。
また、wifiがない環境で見に来た人達にとっては、その分パケットを消費しますので、ファイルサイズの大きな画像をたくさん使っているサイトは、見に来てくれる人思いのサイトになっていない、ということにもなります。
というワケで、ウェブページに使用する画像については、適度なファイルサイズのものを使用することがとても重要なことなのです。
◇ 画像の見た目のサイズ（ピクセル）とファイルサイズとの関係は？
まず、画像の見た目の大きさ（横 × 高さ）は、ピクセル（px）という単位で表示されています。
なぜ一般的な長さ（mm）を使わないかと言うと、１ピクセルの大きさと並びの密度がモニターの仕様によって異なるため、mm を使っても意味をなさないからです。
例として、以前にこのサイトのトップ画像として使っていたものを取り上げてみましょう。
この画像は、1200×500 ピクセルで作成したものですが、ファイルサイズは、80KB 程度しかありません。
この程度のファイルサイズならば、表示速度に悪影響を与えることはありませんが、1200×500 のフルサイズで（またはそれ以上に拡大して）表示するには、さすがに画像の「品質」を落としすぎです。
このように、ウェブページで使う画像では、品質とファイルサイズのバランスを取ることが必要です。特に、ウェブサイトのトップ画像など縦横のピクセル数が大きい場合には、注意です。
札幌Geezerの場合は、ファイルサイズは、
大きくても300KB程度まで
としています。
◇ 画像の品質は、どのように調整するか？
画像を作成・編集するソフトウェアには、品質を調整するための機能が備わっています。作成・編集した画像を保存する際に、設定するようになっているはずです。
・適切な画像の『種類』を選ぶ
ウェブ上で一般に公開する画像の種類としては、JPEG形式、PNG形式、GIF形式の主に3種類があり、それぞれに得手不得手があります。
作成・編集した画像を保存する際に、まずはどの種類の画像ファイルとして保存するかの選択をすることが必要です。
<JPEG>
写真など色数の多い画像に向いています。ファイルサイズを小さく保ちながらも、色の豊かな画像を維持できることが特徴になっています。
<PNG>
色の豊かさよりは、文字やイラスト、グラフなどの線のクリアさが重要な画像向きです。またこの形式では、背景を透過にして保存することが可能ですので、ロゴマークにも向いています。
<GIF>
「GIFアニメ」という言葉は目にしたことがあるかもしれません。複数の画像をひとつのファイルにまとめることができるため、アニメにすることが可能な形式です。ただし色数が256色までとなっているため、写真には不向きです。
・適切な品質で保存する
どこまでファイルサイズを落としても良いかは、自分の目で見てトライ＆エラーを繰り返すしかありません。
左の画像は、画像編集ソフトでの一例ですが、保存する際にファイルサイズを確認しながら設定できるようになっています。
Canva の場合も、作成した画像を自分のパソコンにダウンロードする際に、品質を調整できるようになっています。
札幌Geezerでは、Canva を使っていますが、Canva は、ウェブなどで使用できる画像（写真やイラストなど）の数が豊富で、選んだものをその場で編集できる点が非常に優れています。画像の編集が未経験の方には、Canva をお薦めします。
◇ スマホ写真は、そのままでは使わないこと！
スマホ写真のファイルサイズは、一枚で10MB以上もありますので、これをそのままの状態でウェブサイトに掲載することはお勧めできません。
また、スマホで撮影した写真には位置情報が含まれていますので、これをそのままウェブページに掲載すると、撮影した場所が公開情報になってしまうことにも注意です。スマホには、ファイルサイズを落としたり、位置情報を削除するアプリがありますので、面倒でもそれを使って、一度編集処理をしてから使うようにしましょう。
参考までに、FacebookやTwitterなどのSNSの場合には、自動的にファイルサイズを調整して、位置情報も削除されるようになっています。
◆ 画像をアップロードしたら、まずはやるべきこと
画像をメディアライブラリにアップロードしたら、その画像に関する情報を入力しておきましょう。
管理メニューの「メディア」→「ライブラリ」と進んで画像を表示します。画像のひとつをクリックすると、右側に入力エリアが表示されます。
「代替テキスト」は、目が不自由な人向けのデータです。読み上げ機能を使っている場合に、画像の代わりとして読み上げられるのがこのデータですので、必ず記入しておきましょう。
「タイトル」は、ファイル名から自動的に入力されたものですので、これも画像のタイトルとして適切なものに書き換えておきましょう。
「キャプション」は、画像下に表示されますので、不要であれば記入しなくてもOK。「説明」は、記入しなくても構いませんが、画像検索のことも考慮するのであれば、面倒でも入力しておきましょう。
◆ 画像を拡大して表示しないよう注意しよう
ワードプレスでは、使用するテーマにもよりますが、表示する画像のエリアの大きさ（幅と高さのピクセル数）が最初から指定になっている場合が多々あります。
自分で画像を作成する場合には、その大きさに合わせて作成するので問題にはなりませんが、フリー画像のサイトなどから画像をダウンロードして使用する際には、その画像の大きさが表示エリアよりも小さいと、自動的に画像が拡大されてしまうということは、知っておきましょう。
このような場合には、表示エリアと画像の縦横比も一致していないものです。すると、とおかしな箇所で画像が切られてしまい、サイト上で表示されている画像の品質が極端に悪くなってしまいます。
◆ 編集画面で画像を扱うブロックを知っておこう
画像ファイルに関する基本を押さえたところで、ワードプレスの編集画面で提供されている画像関連のブロックの使い方を、紹介しておきます。どちらもワードプレスらしい、優れものだと思います。
◇ カバーブロック
投稿や固定ページのトップ画像を置く場合に、便利なのが「カバーブロック」です。画像の中に文字をいれることができるなど機能が豊富です。
【動画】 WordPress カバーブロックの使い方（4分40秒）
◇ ギャラリーブロック
「ギャラリーブロック」は、写真などを作品集的にタイル状に並べてくれるブロックです。
メディアライブラリから、表示する画像を選択するだけで、あとは自動で画像を並べてくれる優れものになっています。
表示する画像の各々には、リンクを付しておくことも可能ですから、その画像を使用している投稿へのリンク集のように利用することができます。
タイル状に画像を並べると、スマホ上では見にくくなるのではないかという心配はご無用です。パソコン上は、3列✖2行で表示しているギャラリーも、スマホで上では自動的に2列✖3行に置き換えて表示されます。
余談になりますが、このように表示している画面の大きさによって、配置を自動的に組み替えてくれる仕組みを「レスポンシブ」と呼びます。
現在のワードプレスのテーマは、ほとんどがレスポンシブになっていますので、一昔前のようにスマホ用のサイトを別に制作する必要性はありません。
◆ この講座の要点
- ウェブサイトで使用する画像で美しさだけを追求してしまうと、表示速度が遅くなり、見に来てくれた人のためにならない。
- このため、見た目のきれいさとファイルサイズとのバランスを取ることが肝要で、画像編集・作成用のソフト（またはサービス）の利用が必要。
- スマホで撮影した写真は、そのままでは、ウェブサイトに公開するには不適切。
- ワードプレスに画像ファイルをアップロードした際には、代替テキストの入力を忘れないこと。
- ウェブサイト内で、画像の表示エリアの縦横が規定されている場合には、そこに使用する画像も合わせた大きさにするのが望ましい。
◆ ご質問・ご要望について
疑問に思うことや説明が至らないことがありましたら、遠慮なく下のコメント欄またはお問い合わせフォームからご連絡いただければ幸いです。今後の更新作業の参考にさせていただきます。
◆ 課題
１．自分の言葉でまとめておこう
この講座で、得た学びを自分の言葉にしておきましょう。箇条書きが良いと思いますが、自分のスタイルでOKです。紙のノートでもパソコンやスマホのアプリでも構いませんが、脳内に留めずにその外側に一旦はアウトプットすることが重要です。オススメは紙のノートです。いつでもパラパラと眺めることができ、記憶に残りやすいからです。
２．確かめよう
ウェブで発信する機会がなかった皆さんは、画像ファイルの種類やサイズには、あまり意識がなかったと思います。良い機会ですので、ご自分のパソコンなどに保存されている画像のサイズと種類を確認してみましょう。
また、これから自分が使う画像をどこで入手（あるいは作成）するかを確認しておきましょう。
３．発信しよう
「これは参考になった」あるいは何かの「インスピレーションを得た」ようなことがあれば、同じように感じる方が、あなたの周りにもいるかも知れません。学んだことをあなたの言葉で（←ここが重要）人に伝えようとすることで、それが自分のものになることを体験しましょう。