Webデザインの画像サイズについて｜リサイズや画像を軽くする方法も

この記事は次のような方に向けて書きました。

この記事を最後まで読んでもらえたら、見る人が魅力を感じるWebサイトを作り上げることができるようになります。

どうぞ最後までご覧になってください。

Webデザインを行う際の画質の重要性

先生

Webサイトのデザインにおいて、画像素材というのはとても大切な要素のうちの一つなんだ。

例えば、商品販売をしているWebサイトで、どんなにどんなに使いやすい構成で作られていても、載せている画像が荒くて綺麗ではないものだったりした場合、それをみているユーザーに魅力的だと感じてもらって購入してもらえるでしょうか。

デザイニャー

複雑な加工をしている画像だったり、シンプルで加工をしていない画像であっても、使っている元画像の品質がよくなかったら、見え方にも大きな影響を及ぼすニャン。

先生

それを逆に言ったら、どんな画像でも、Webサイト上で綺麗に見える画像だったら、ユーザーの目を引くものになるということだね。

Webデザイン制作で画像を扱う際に注意したいこと

先生

Webデザインを制作するときに画像を厚う際に注意してもらいたいことは次の3つだよ。

画像サイズと縦横比

画像サイズが大きすぎたり小さすぎたりすると、画像は粗くなってしまいます。

先生

見にくかったりぼんやりとした印象になってしまうから、適切なサイズに調整しよう。

また、縦横比を揃ってないと、画像が伸びてしまったり綺麗に表示できなかったりする原因になりますので、注意しましょう。

画像を表すタグを記述する

自分でWebサイトを作る場合は、HTMLを記述することになるのですが、その時画像のHTMLの書き方に注意しましょう。

画像を表示するためには、

などといったタグが必要です。

imageタグは、画像がどこにあるのかを指定するもので、altタグは画像の説明文を表すものです。

先生

altタグは、画像が読み込めなかった場合に説明文を表示するために必要なもので、SEO効果もあるんだ。

著作権を確認

フリー素材の写真を使う場合は、その著作権に気をつけないといけません。

デザイニャー

フリー素材でも、作った著作者に著作権があるから、利用規約をしっかりと確認して、規定の範囲の内で利用することが大事なんだニャン。

先生

また、素材集だけでなく、自分の手作りの画像も作った方がオリジナリティのあるWebサイトが作れるよ。

Webデザインの画像拡張子の種類

先生

拡張子というのは、画像や文章のデータといったファイルの種類を識別するためのものなんだ。

末尾には「.（ピリオド）＋英数字」で表すのですが、代表的な買う調子は次の4つです。

JPG（JPEG）

JPGはよく使われるメジャーな拡張子です。

データのサイズが小さくて綺麗な画像を表示できるのが特徴です。

1677万色といった色数を使用できるので、写真やカラフルなイラストに向いています。

PNG

JPGと並んでPNGもメジャーな拡張子です。

先生

JPGは保存を繰り返すと画質が悪くなりますが、PNGでは保存を繰り返しても画質が悪くなることはなく、綺麗な画像を表示することができるんだ。

使える色数は1677万色で、透過や半透明処理もできるので、透明色を使ったイラストに使うことができます。

GIF

GIFは静止画に加えて、アニメーションの設定もすることができる拡張子です。

先生

WebサイトやSNSなどで見かける動くアイコンもGIF形式によって作られているんだ。

色数は256色のみで、色の少ないアイコンやロゴなどに向いていますし、透過処理も可能です。

SVG

SVGは、点・線・塗りという画像の情報を数値化している拡張子です。

拡大縮小、また保存を繰り返しても画質が劣化せず、透過も可能です。

画像の情報を数値化しているので、CSSやJavaScriptでの操作をすることもでき、アニメーションにも対応できます。

Webサイトに使う時に適した画像サイズ

先生

Webサイトに画像を使う時には、画像サイズを意識することが大切なんだ。

ここでは次の2つのことをお話ししていきます。

画像サイズ

画像サイズとは、画像自体そのものの大きさを表していて、「縦横のピクセル(px)✖️横幅のピクセル(px)」で示します。

Webサイトを使用する時に適した画像サイズ

Webサイトを使用するときに適した画像サイズは、1920px✖️1080pxが目安になります。

パソコンの画面サイズは一般的に1920px✖️1080pxなので、このサイズ以下でなければ画像は綺麗に表示されます。

先生

画像サイズは小さすぎると粗くなってしまって画質が劣化してしまうし、画像サイズが大きければ綺麗に表示はされますが、データが重くなってしまうんだ。

画像サイズの変更の仕方

先生

ここでは画像サイズの変更の仕方についてお話ししていくよ。

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

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

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

縦横比を固定するためにはリンクアイコンをクリックして有効にしましょう。

先生

リンクアイコンを有効にしておくことで、横幅を変更すると自動的に高さも調整できるし、またはその逆もできるんだ。

変更した後のサイズに合わせて画像のピクセル数も変更するなら、「再サンプル」にもチェックを入れます。

「OK」をクリックすると、入力した値を基に画像サイズが変更されます。

画像を軽くするには

デザイニャー

どうやら画像が重いようなんで、画像を軽くしたいんだけどニャ。

先生

それなら簡単な方法があるよ。

それは、レイヤーの上に「白いレイヤー」を追加するだけで画像を軽くすることができるというものです。

先生

先生も初めて知った時は驚いたんだよ。

まず設定する前のファイルサイズはこの通りです。

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

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

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

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

デザイニャー

ニャルほど!これはすごいニャン!!

Webデザインの横幅設定

ここでは、実際にWebデザインをするときの横幅サイズについて考えていきましょう。

パソコンとスマートフォンの横幅サイズはそれぞれ次のようなことがポイントになるよ。

パソコンでのサイズはコンテンツ幅がポイントに

サイズを設定しないでWebサイトを作ると、基本的に横幅はautoで表示されて、画面サイズに合わせて横幅いっぱいに表示されます。

しかし、横幅が広すぎる場合、画像サイズによっては横にスクロールすることが必要になったり、文章が横長に間延びしたりして読みづらくなるということにもなります。

なので、Webサイトを作る時には、「より適切な横幅サイズ」に設定することが重要なのです。

先生

パソコンのモニターサイズに対して、Webサイトの「より適切な横幅サイズ」のことを「コンテンツ幅」と言うんだ。

日本の大手企業サイトのサイズを例に考えてみましょう。

日本の大手企業サイトの横幅サイズを調べてみると、950pxから1200pxのサイズがよく使われていることがわかります。

最近ではレスポンシブデザインが多くなってきたので、以前よりも横幅が広くなっている傾向があります。

デザイニャー

この調査の結果から、パソコンのWebサイトの横幅は1000px前後で作るのが適しているということだニャン。

スマートフォンでのサイズはRetinaディスプレイがポイントに

先生

次に、Webデザインをする時のスマートフォンの横幅サイズについてお話ししていくね。

ここでは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 (近似値)

出典：iphone解像度(画面サイズ)早見表

先生

上の表から、スマートフォンのモニターサイズが「375px✖️667px」であるとしたら、「750px✖️1334px」の設定で作られていることがわかるけれど、それは何故だと思う?

ここで、スマートフォンの解像度に注目してみましょう。

最近のスマートフォンの解像度は「Reteinaディスプレイ」になっていて、画素が細かくて、従来の解像度と比べて倍以上の解像度で、高画素密度のディスプレイになっています。

先生：このような事情から、スマートフォンの横幅は、Retinaディスプレイのことを考えて適切なサイズを考える必要があるんだ。

375px (ディスプレイの横幅）✖️2倍（Retinaディスプレイ対応比0＝750px

3倍のRetinaディスプレイだったら、画像が3で割り切れないサイズにしてしまうと、レイアウトが崩れたり薄くぼやけたりする可能性があります。

なので、スマートフォンの横幅は750pxをベースに考えるのが良いでしょう。

Webデザインのサイズで頭に入れておきたい3つの用語

最適なWebデザインのサイズについてはお話ししてきましたが、パソコンとスマートフォンのサイズについては基本となるので、しっかりと押さえておきましょう。

先生

Webデザインのサイズを考えるために、頭に入れておきたい用語は次の3つだよ。

ファーストビュー

先生

ファーストビューというのは、Webサイトを訪れた時に最初に見える範囲のことで、ユーザーがこのページを見続けるか離脱するかを左右する重要なものなんだ。

魅力的なファーストビューにするためには、最適な横幅サイズのことを考える必要があります。

アートボード

先生

アートボードとは、印刷するときや書き出しで出力される範囲のことだよ。

Webデザインにおいて、アートボードはブラウザの幅のことを指して、実際に表示される部分のことです。

Webデザインの適切なサイズはアートボードのサイズとも言い換えることが可能で、「アートボードの横幅を1220pxにする」という言い方をします。

リキッドレイアウト

先生

リキッドレイアウトというのは、常に画像内にデザインのコンテンツが収まるようにできているレイアウトのことを言うんだ。

Webページを表示しているウィンドウを拡大しても縮小しても常にウインドウ内にコンテンツが収まります。

リキッドレイアウトとは反対に、固定幅でコンテンツのサイズが変わらないレイアウトのことをソリッドレイアウトと呼びます。

レイアウト：レスポンシブデザインにおいて、パソコン用の表示がソリッドレイアウトで、スマートフォン用の表示がリキッドレイアウトであることが多いです。

【Webデザイン制作で迷わない】最適な画面サイズとレイアウトの種類この記事は次のような方に向けて書きました。 ・見やすく操作しやすいWebサイトを作りたい ・Webデザインをするときの推...

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

先生

Webデザインをする際に商用利用できる写真素材のサイトや、フリーの画像素材サイトは次の3つだよ。

PIXTA

PIXTAは、アマチュアやプロが撮影した写真を有料で購入できるサイトです。

高画質な写真やイラストだけでなく、動画や効果音、BGMなども揃っています。

基本的にロイヤリティフリーになっていて、素材を一度購入すると、何度でも利用できます。

写真AC

写真ACは、無料の写真素材サイトです。

日本人写真に特化されていることが特徴で、会員登録の必要があります。

無料で利用できて加工も可能で、リンクやクレジットの必要もなく、気軽に使える人気の高いサイトです。

Unsplash

Unsplashは、解像度の高い画像が揃っている海外の無料画像サイトで、高画質で雰囲気のある写真が多く扱われています。

ただ、サイトの全てが英語表記になっていて、英語で検索を行う必要があります。

商用利用や加工が可能でクレジット表記やリンクの必要もなく、会員登録の必要もないので、英語表記をクリアできれば使いやすいサイトです。

Webサイトに入れる画像を作る方法

Webサイト作成には、画像がとても大切で、文字ばかりだとユーザーからすぐに離脱されてしまうこともあります。

先生

Webサイトで会社の特徴や魅力、商品をアピールするためには、それに適した画像を追加すると良いよ。

デザイニャー

画像の作成に慣れてなくても、ツールを利用すれば、簡単にWebサイトにあった画像を作ることができるんだニャン。

Webサイトに一番合う画像を作成するCMS

Webサイトにいちばん合う画像を作成するにはCMSを使うと良いでしょう。

CMSとは、Webサイトの文章、画像、デザインやレイアウトを一つで管理できるシステムのことで、Webサイトをに適した画像を作るためには、MCMSに画像ツールが含まれているものを使うと良いでしょう。

先生

そんな便利なCMSは主に次の3つのものがあるよ。

BiNDup

BiNDupは、250以上と言う豊富に揃えられているテンプレートを使って、テキストや画像を入れるだけでWebサイトができるツールです。

画像サイズを自動調整してくれたり、SEOの基本設定で問題がないかをチェックしてくれます。

また、画像の編集や加工、フィルター機能もついているので、Webサイトに適した画像作成も簡単にできます。

スマートフォンにも対応したレスポンシブデザインになっています。

Wix

Wixは、ドラッグ&ドロップの操作で編集できる海外から来たWebサイト作成ツールです。

ネットショップ向けのテンプレートがあるところが特徴です。

画像を加工してくれるフォトスタジオ機能がついています。

スマートフォンにも対応したレスポンシブデザインになっています。

WordPress

WordPressは、世界中で最も利用されているWebサイト作成ツールです。

無料で使える上に、数千種類とも言われるプラグインを自由に追加できるので、品質の高いWebサイトを作ることができます。

画像作成や独自のデザインにカスタマイズする場合は、基礎的な知識が必要です。

スマートフォンにも対応したレスポンシブデザインになっています。

レスポンシブWebデザインで何ができるの?メリットや作る方法を解説この記事は次のような方へ向けて書いています。 ・レスポンシブWebデザインで何ができるのかを詳しく知りたい ・レスポンシ...

まとめ

先生

この記事では次の31個のことについてお話ししてきたよ。

先生

Webサイトに使う画像サイズについてお話ししてきたよ。

デザイニャー

画像を簡単に軽くできる方法を知った時は、目から鱗だったニャン。

先生

今日ここで学んだことを、実際にWebサイトを作るときに活かしてもらえると嬉しよ。

私たちは頑張るあなたを応援しています。