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

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

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

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

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

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

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

画像サイズと縦横比

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

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

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

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

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

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

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

著作権を確認

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

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

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

JPG（JPEG）

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

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

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

PNG

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

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

GIF

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

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

SVG

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

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

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

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

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

画像サイズ

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

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

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

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

画像サイズの変更の仕方

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

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

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

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

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

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

画像を軽くするには

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

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

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

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

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

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

Webデザインの横幅設定

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

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

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

サイズを設定しないで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 (近似値)

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

 

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

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

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

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

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

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

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

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

ファーストビュー

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

アートボード

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

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

リキッドレイアウト

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

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

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

【Webデザイン制作で迷わない】最適な画面サイズとレイアウトの種類この記事は次のような方に向けて書きました。 ・見やすく操作しやすいWebサイトを作りたい ・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デザインで何ができるのかを詳しく知りたい ・レスポンシ...

まとめ

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