画像の基礎知識!綺麗なホームページを作成するために!

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
初めてのHP作成の動画高齢者のホームページの作り方よくある質問
 

画像の基礎知識!綺麗なホームページを作成するために!

ルールに従って綺麗な画像を適切ばサイズで使う!

ホームページの出来栄えは画像で決まる

同じ「レイアウト」で、「同じコンテンツ」が書かれているホームページでも、画像が綺麗であるかどうかで、ホームページの印象はずいぶん変わります。

 

「トップバナー」「画像リンク」等は、現在クオリティが高くなってきています。初心者さんであっても、画像を扱うための最低限の知識を身につければ、当初から見やすく、綺麗なホームページを作成する事は可能です。

 

クオリティの高い画像と、これを加工するソフト無料で提供されていますので、画像配布サイトはお気に入りに登録し、ソフトはダウンロードしておきましょう。

 

画像ソフトは、無料で使えるソフトであってもGIMPのように操作が複雑で、使いこなすのが難しいソフトも多いです。なので高性能の画像ソフトを当初から使わない方が良いです。覚えるだけで相当時間がかかり、本末転倒になってしまいます。

 

初心者さんであれば、画像ソフトはJTrim(ジェイトリム)を使ってください。ホームページ作成上とりあえずこのソフトは必要不可欠なので、ダウンロードしておきましょう。

 

それと欲しい画像が検索できるサイト(Pixabay)を紹介しますので、お気に入りに入れておいて下さい。下記URLでは他にもお勧めサイトがありますので、ご活用下さい。

 

当サイトでご紹介している画像加工に必要なソフトと参考サイト

無料画像ソフト JTrim(ジェイトリム)
完全フリー画像サイトのPixabay

 

画像ファイルの3つの種類とルール

ホームページ作成で使用できる画像フォーマット

  • JPEG・・・スマホ、デジカメ等の写真
  • PNG・・・イラスト、ロゴ
  • GIF・・・・イラスト、アニメーションGIF

 

JPEG

フルカラーで1677万色のが使えるため、スマホ、デジカメ等の写真の表示に適した画像形式です。JPEGではファイルの圧縮率の選択で、ファイルサイズを変更する事ができます。

 

圧縮率を小さくし、ファイルサイズを大きくすると画質が鮮明になりますが、あまり大きなサイズの画像を同じページで使い過ぎると、閲覧者さんがページを開くスピードが遅くなり、SEO上不利になります。

 

逆にファイルサイズを小さくするために圧縮率を上げると、ホームページは軽くなりますが、画像は不鮮明になります。

 

ファイルサイズが大きい場合はグーグルの解析ツールであるサーチコンソールで対処できますので、現段階では写真画像はJPEGを使うという事だけ覚えてください。

 

PNG

指定した色に対して透過処理ができることがPNGの特徴です。画像の輪郭など、一部を透明化し、背景の色が見える状態にする事ができます。

 

またPNGは1677万色のフルカラーが使えるうえ、ファイルサイズが小さく、JPEGのように圧縮ノイズが目立たないので、イラストやロゴなどの保存に適しています。

 

ただし写真など輪郭のはっきりしていない画像をPNGにすると、 JPEG形式よりもファイルサイズが極端に大きくなるので注意が必要です。

 

GIF

GIFはデータ容量が非常に小さく、ホームページで閲覧きるように開発された画像フォーマットです。WEB上でよく見かけますが、複数の画像をファイルに入れることで、アニメーションとして動画のように見せている画像がアニメーションGIFです。

 

GIFは使える色数が256色に限られていますので、ファイルのデータ容量が少なくて済みます。色数が少ないので、ホームページ上ではボタン画像などに使われる事が多いです。単色が多いロゴ簡単なイラストに向いているって事です。

 

JPEG PNG GIF

 

jpeg

png-1

png-2

gif-1

写真

イラスト・ロゴ

イラスト・ロゴ

フルカラー [1677万色]

フルカラー [1677万色]

256色

ファイルサイズ大 ファイルサイズ小 ファイルサイズ小

 

写真画像をPNGで表示すると、輪郭部分の色の変わり目の表現で容量を使いますので、極端にファイルサイズが大きくなりますので注意して下さい。

 

ホームページ作成で使ってはいけない画像フォーマット

BMP形式

拡張子が .bmp になっていて、BMPはビットマップと読みます。このフォーマットはWindows標準の画像形式なのですが、上記の3つの形式と比べて、極端にファイルサイズが大きくなっています。そのためホームページで使うには不向きです。

 

重要なalt属性

通常HTMLで画像を表示させる場合下記のようなタグを使います。

<img src="abc.jpg" style="width:120px;" alt="画像の説明" />

 

上記のタグを日本語で要約すると、、、

画像(img=Image)の引用(src=source)はabc.jpgを表示させ、横幅(width)を120pxとし、代替文字列(alt)は「画像の説明」とする。

 

となります。タグを分解すると、、、

  • img src="abc.jpg"
  • img・・・・Image(画像)
    src・・・・source(引用)
     
  • style="width:120px;"
    width・・・(横幅)
  •  
  • alt="画像の説明"
    alt・・・・・(代替文字列)

 

テキストブラウザのように画像を表示しないブラウザや画像表示をOFFにしている閲覧者のために[alt属性]によって画像の代わりとなる代替文字列を記述するルールがあります。

 

画像が見れない状態の閲覧者さんに対して、テキストで画像を説明するのですが、なるべく画像の様子がイメージできるように、詳しく記述する必要があります。

 

かじられた青いリンゴのイラスト

alt="かじられた青いリンゴのイラスト"

  • かじられている
  • 青いリンゴ
  • 写真ではなくイラスト

 

実際のタグの記述
<img src="apple.jpg" alt="かじられた青いリンゴのイラスト" style="width:100px;" align="left">

 

上記では「リンゴ」とだけを書くのではななく、色、状況、状態、alt属性で記述し、実際どのような画像であるかが解るようにしています。

 

このように画像の説明を解りやすく記述すると、グーグルの画像検索でヒットしやすくなります。閲覧者さんがグーグル検索をする際、通常検索窓にテキストを記述するのですが、このときコンテンツによっては[動画]、や[画像]で検索する場合があります。

 

この画像検索で画像がヒットし、クリックして頂いた場合、ホームページに直接飛ぶようになっています。なのでalt属性を正確に記述する事はSEO対策になるわけです。

 

画像の横幅(width)指定についての注意!

ホームページに使う画像で、イラストなどの場合は、取り込み先の画像そのままのサイズで使えることが多いですが、写真の場合は大きさの加工が必要になってきます。

 

写真自体を加工しなくても、タグで、「表示上の大きさ」は調節する事ができます。そのためのタグがstyle="width:160px;"であり、160pxが横幅の大きさになります。

 

しかしタグ(width)で画像を小さくした場合は、表示上の大きさは小さく出来ても、画像のファイルサイズ自体は変更されず、元の容量のままです。

 

なのでデジカメの写真では、特にファイルサイズが大きくなりますので、上記でお伝えしているJTrim(ジェイトリム)で、ファイルサイズを落とす必要があります。

 

スマホなど携帯端末でもデジカメ並みの大きさがありますので加工は必須になるわけです。

 

3216pxの元画像をタグ(width)で320pxに落とした画質

---534KB---
jpeg画像

 

↑↑↑
上下の写真を比べて、さほど画質に影響がない事が解ります。
大きさを5分の1に加工した下記画像はファイルサイズは10分の1以下になっています。
↓↓↓

 

640pxに加工した画像をタグ(width)でさらに320pxに落とした画質

---45.7KB---
jpeg画像

 

320pxの画像をタグ(width)で160pxに落とした画質
9,71KB
jpeg画像

 

特に写真を多く掲載するホームページを作成したい方は、ファイルサイズを考慮する必要があります。画質にあまり影響しない大きさを色々試してみて、実際にホームページが軽く動くか検証したほうが良いです。

 

グーグルはホームページの各ページが開くスピードを監視しているとお考え下さい。それに閲覧者さんもホームページが開くのを、3秒以上待ってくれません。上位表示の理屈は色々ありますが、このような事が積み重なってSEOに影響するわけです。

 

グーグルアナリティクスでは各ページの重さ(ファイルの大きさ)を検証できます。またページスピードインサイトというツールでホームページの速度を計る事ができます。このようなツールはすべて無料で利用することができます。少しづつ覚えていきましょう!

 

ホームページ作成での画像の扱い方の関連ページ

HPの仕組み
ホームページがパソコンのブラウザで表示される原理を解説します。ホームページをアップロードして見れるようにするにはドメインを取得し、レンタルサーバーを契約する必要がありますが、これが直接ホームページが見れる原理に直結しています。
サイト構成と名称
ホームページを作成するのに、トップページにおいて最低限必要な各部の名称と機能は正しく理解しておく必要があります。ホームページの見やすさや使い勝手、SEO対策にも大きく関係する基本的なコンテンツになります。
カラムについて
カラムとはトップページの区割りであり、構成や外観のことを言います。このカラム数はホームページの情報量によって決まり、閲覧者さんのサイトの使い勝手に影響します。後で変更する事は非常に手間がかかるため、サイトの規模を当初から推測し決める必要があります。
リンクについて
リンクという機能があるこらこそホームページが成り立ち、現在ここまで発展したと言っても過言ではありません。またSEOや検索表示のされ方に大きく影響するため、グーグルのガイドラインに沿った正しいリンク付けをする必要があります。
ホームページの階層
ホームページのページ数が多くなってくる場合はカテゴリーごとに記事をまとめます。この場合はフォルダを新たに作成し階層を下げる!という作業が必要になります。またサイト作成後の更新で画像を入れ替える場合、画像専用のフォルダを作成しておくと便利です。

トップページ ソフトの概要 Hp公開の方法 SEO対策基本編 アクセス解析 特典のご案内 購入者メルマガ お問い合せ