この記事は次のような方に向けて書きました。
・Webデザイン制作で画像を使うときに適したサイズを知りたい
・画像を簡単に軽くする方法を知りたい
・Webデザインをするためのフリー素材を教えてもらいたい
この記事を最後まで読んでもらえたら、見る人が魅力を感じるWebサイトを作り上げることができるようになります。
どうぞ最後までご覧になってください。
Webデザインを行う際の画質の重要性

例えば、商品販売をしているWebサイトで、どんなにどんなに使いやすい構成で作られていても、載せている画像が荒くて綺麗ではないものだったりした場合、それをみているユーザーに魅力的だと感じてもらって購入してもらえるでしょうか。
人は文字による情報よりも、画像や動画などの目でみて判断できる情報の方が記憶に残りやすく、その印象を大きく左右するもののうちの一つが画像です。
Webデザイン制作で画像を扱う際に注意したいこと

・画像サイズと縦横比
・画像を表すタグを記述する
・著作権を確認
画像サイズと縦横比
画像サイズが大きすぎたり小さすぎたりすると、画像は粗くなってしまいます。
また、縦横比を揃ってないと、画像が伸びてしまったり綺麗に表示できなかったりする原因になりますので、注意しましょう。
画像を表すタグを記述する
自分でWebサイトを作る場合は、HTMLを記述することになるのですが、その時画像のHTMLの書き方に注意しましょう。
画像を表示するためには、
・imageタグ
・altタグ
などといったタグが必要です。
imageタグは、画像がどこにあるのかを指定するもので、altタグは画像の説明文を表すものです。
著作権を確認

フリー素材の写真を使う場合は、その著作権に気をつけないといけません。
Webデザインの画像拡張子の種類

末尾には「.(ピリオド)+英数字」で表すのですが、代表的な買う調子は次の4つです。
・JPG(JPEG)
・PNG
・GIF
・SVG
JPG(JPEG)

JPGはよく使われるメジャーな拡張子です。
データのサイズが小さくて綺麗な画像を表示できるのが特徴です。
1677万色といった色数を使用できるので、写真やカラフルなイラストに向いています。
保存を繰り返すたびに画質が悪くなります。また、透過することはできません。
PNG

JPGと並んでPNGもメジャーな拡張子です。
使える色数は1677万色で、透過や半透明処理もできるので、透明色を使ったイラストに使うことができます。
ただし、JPGと比べるとデータサイズが大きいため、データが重くなってしまうという点がデメリットです。
GIF

GIFは静止画に加えて、アニメーションの設定もすることができる拡張子です。
色数は256色のみで、色の少ないアイコンやロゴなどに向いていますし、透過処理も可能です。
色数が少ないので、写真には向いていません。
SVG

SVGは、点・線・塗りという画像の情報を数値化している拡張子です。
拡大縮小、また保存を繰り返しても画質が劣化せず、透過も可能です。
画像の情報を数値化しているので、CSSやJavaScriptでの操作をすることもでき、アニメーションにも対応できます。
ただし、複雑な図形になると、描画などに時間がかかるというデメリットもあります。
Webサイトに使う時に適した画像サイズ

ここでは次の2つのことをお話ししていきます。
・画像サイズ
・Webサイトを使用する時に適した画像サイズ
画像サイズ
画像サイズとは、画像自体そのものの大きさを表していて、「縦横のピクセル(px)✖️横幅のピクセル(px)」で示します。
Webサイトを使用する時に適した画像サイズ
Webサイトを使用するときに適した画像サイズは、1920px✖️1080pxが目安になります。
パソコンの画面サイズは一般的に1920px✖️1080pxなので、このサイズ以下でなければ画像は綺麗に表示されます。
データが重くなるとWebサイト全体の表示が遅くなることで、SEOにも悪影響を与えてしまったり、閲覧する環境によっては表示されないケースもありますので注意が必要です。
画像サイズの変更の仕方

Photoshopを起動したら、「ファイル」から「開く」を選択して編集するファイルを開いて画像を表示します。

「イメージ」から「画像解像度」を選択して「画像解像度」のダイアログボックスを開きます。

画像の幅と高さをピクセル単位で、または印刷する画像のインチかcm単位で入力します。

縦横比を固定するためにはリンクアイコンをクリックして有効にしましょう。
変更した後のサイズに合わせて画像のピクセル数も変更するなら、「再サンプル」にもチェックを入れます。
「OK」をクリックすると、入力した値を基に画像サイズが変更されます。
画像を軽くするには

それは、レイヤーの上に「白いレイヤー」を追加するだけで画像を軽くすることができるというものです。
まず設定する前のファイルサイズはこの通りです。

画像のレイヤーの上に「新規レイヤー」を作ったらそれを「塗りつぶしツール」で白く塗りつぶします。

そして一旦「ファイル」から「書き出し」を経由して、「web用に保存」します。

そして、白く塗りつぶしたレイヤーを削除してから再び「書き出し」から「Web用に保存」します。


すると、181キロバイト軽くなりました。

Webデザインの横幅設定

ここでは、実際にWebデザインをするときの横幅サイズについて考えていきましょう。
パソコンとスマートフォンの横幅サイズはそれぞれ次のようなことがポイントになるよ。
・パソコンでのサイズはコンテンツ幅がポイントに
・スマートフォンでのサイズはRetinaディスプレイがポイントに
パソコンでのサイズはコンテンツ幅がポイントに

サイズを設定しないでWebサイトを作ると、基本的に横幅はautoで表示されて、画面サイズに合わせて横幅いっぱいに表示されます。
しかし、横幅が広すぎる場合、画像サイズによっては横にスクロールすることが必要になったり、文章が横長に間延びしたりして読みづらくなるということにもなります。
なので、Webサイトを作る時には、「より適切な横幅サイズ」に設定することが重要なのです。
日本の大手企業サイトのサイズを例に考えてみましょう。
日本の大手企業サイトの横幅サイズを調べてみると、950pxから1200pxのサイズがよく使われていることがわかります。
最近ではレスポンシブデザインが多くなってきたので、以前よりも横幅が広くなっている傾向があります。
スマートフォンでのサイズはRetinaディスプレイがポイントに

ここではiPhoneの画像解像度を参考にしていきます。
サイズ 端末 ポイント Retina ピクセル 倍率 デバイス アスペクト比 3.5 iPhone iPhone 3G
iPhone 3GS
320×480 1 320×480 1 320×480 2:3 3.5 iPhone 4 iPhone 4S
320×480 2 640×960 1 640×960 2:3 4 iPhone 5 iPhone 5s
iPhone 5c
iPhone SE
320×568 2 640×1136 1 640×1136 9:16 (近似値)
4.7 iPhone 6 iPhone 6s
iPhone 7
iPhone 8
iPhone SE(2世代)
375×667 2 750×1334 1 750×1334 9:16 (近似値)
ここで、スマートフォンの解像度に注目してみましょう。
最近のスマートフォンの解像度は「Reteinaディスプレイ」になっていて、画素が細かくて、従来の解像度と比べて倍以上の解像度で、高画素密度のディスプレイになっています。
先生:このような事情から、スマートフォンの横幅は、Retinaディスプレイのことを考えて適切なサイズを考える必要があるんだ。
375px (ディスプレイの横幅)✖️2倍(Retinaディスプレイ対応比0=750px
3倍のRetinaディスプレイだったら、画像が3で割り切れないサイズにしてしまうと、レイアウトが崩れたり薄くぼやけたりする可能性があります。
なので、スマートフォンの横幅は750pxをベースに考えるのが良いでしょう。
Webデザインのサイズで頭に入れておきたい3つの用語

最適なWebデザインのサイズについてはお話ししてきましたが、パソコンとスマートフォンのサイズについては基本となるので、しっかりと押さえておきましょう。
・ファーストビュー
・アートボード
・リキッドレイアウト
ファーストビュー
魅力的なファーストビューにするためには、最適な横幅サイズのことを考える必要があります。
アートボード
Webデザインにおいて、アートボードはブラウザの幅のことを指して、実際に表示される部分のことです。
Webデザインの適切なサイズはアートボードのサイズとも言い換えることが可能で、「アートボードの横幅を1220pxにする」という言い方をします。
リキッドレイアウト
Webページを表示しているウィンドウを拡大しても縮小しても常にウインドウ内にコンテンツが収まります。
リキッドレイアウトとは反対に、固定幅でコンテンツのサイズが変わらないレイアウトのことをソリッドレイアウトと呼びます。
レイアウト:レスポンシブデザインにおいて、パソコン用の表示がソリッドレイアウトで、スマートフォン用の表示がリキッドレイアウトであることが多いです。

Webデザインをする際に役立つ画像素材をご紹介
PIXTA

PIXTAは、アマチュアやプロが撮影した写真を有料で購入できるサイトです。
高画質な写真やイラストだけでなく、動画や効果音、BGMなども揃っています。
基本的にロイヤリティフリーになっていて、素材を一度購入すると、何度でも利用できます。
写真AC

写真ACは、無料の写真素材サイトです。
日本人写真に特化されていることが特徴で、会員登録の必要があります。
無料で利用できて加工も可能で、リンクやクレジットの必要もなく、気軽に使える人気の高いサイトです。
Unsplash

Unsplashは、解像度の高い画像が揃っている海外の無料画像サイトで、高画質で雰囲気のある写真が多く扱われています。
ただ、サイトの全てが英語表記になっていて、英語で検索を行う必要があります。
商用利用や加工が可能でクレジット表記やリンクの必要もなく、会員登録の必要もないので、英語表記をクリアできれば使いやすいサイトです。
Webサイトに入れる画像を作る方法
Webサイト作成には、画像がとても大切で、文字ばかりだとユーザーからすぐに離脱されてしまうこともあります。
Webサイトに一番合う画像を作成するCMS
Webサイトにいちばん合う画像を作成するにはCMSを使うと良いでしょう。
CMSとは、Webサイトの文章、画像、デザインやレイアウトを一つで管理できるシステムのことで、Webサイトをに適した画像を作るためには、MCMSに画像ツールが含まれているものを使うと良いでしょう。
BiNDup

BiNDupは、250以上と言う豊富に揃えられているテンプレートを使って、テキストや画像を入れるだけでWebサイトができるツールです。
画像サイズを自動調整してくれたり、SEOの基本設定で問題がないかをチェックしてくれます。
また、画像の編集や加工、フィルター機能もついているので、Webサイトに適した画像作成も簡単にできます。
スマートフォンにも対応したレスポンシブデザインになっています。
Wix

Wixは、ドラッグ&ドロップの操作で編集できる海外から来たWebサイト作成ツールです。
ネットショップ向けのテンプレートがあるところが特徴です。
画像を加工してくれるフォトスタジオ機能がついています。
スマートフォンにも対応したレスポンシブデザインになっています。
WordPress

WordPressは、世界中で最も利用されているWebサイト作成ツールです。
無料で使える上に、数千種類とも言われるプラグインを自由に追加できるので、品質の高いWebサイトを作ることができます。
画像作成や独自のデザインにカスタマイズする場合は、基礎的な知識が必要です。
スマートフォンにも対応したレスポンシブデザインになっています。

まとめ

・Webデザインを行う際の画質の重要性
・Webデザイン制作で画像を扱う際に注意したいこと
・画像サイズと縦横比
・画像を表すタグを記述する
・著作権を確認
・Webデザインの画像拡張子の種類
・JPG(JPEG)
・PNG
・GIF
・SVG
・Webサイトに使う時に適した画像サイズ
・画像サイズ
・Webサイトを使用する時に適した画像サイズ
・画像サイズの変更の仕方
・画像を軽くするには
・Webデザインの横幅設定
・パソコンでのサイズはコンテンツ幅がポイントに
・スマートフォンでのサイズはRetinaディスプレイがポイントに
・Webデザインのサイズで頭に入れておきたい3つの用語
・ファーストビュー
・アートボード
・リキッドレイアウト
・Webデザインをする際に役立つ画像素材をご紹介
・PIXTA
・写真AC
・Unsplash
・Webサイトに入れる画像を作る方法
・Webサイトに一番合う画像を作成するCMS
・BiNDup
・Wix
・WordPress
私たちは頑張るあなたを応援しています。