WEB画像って何？

WEB画像とはどういうものでなのでしょうか？どこで使われ、どのような特徴があり、どんなアプリで作られ、どんな人に必要とされているのでしょうか？ここではWEB画像のきをちしきについて調べたことをシェアしたいと思います。

WEB画像とは

WEB画像とは、インターネット上のWEBサイトやSNSなどで表示される画像の事を指します。例えば、バナー画像　アイキャッチ画像、サイトのロゴ、ボタン、アイコン、背景画像、装飾パーツ、写真、サムネイル、イラストなどがあります。他にもいろいろあります。要するにWEB上で表示されている画像の総称です。

WEB画像制作ツール

Photoshop（フォトショップ）Canva（キャンバ）figma（フィグマ）というツールが有名です。
Canvaが初心者にとっては一番使い易いのではないかと思います。PhotoShopは、慣れるまで大変かもしれませんが、プロがつかむ最もメジャーなツールで機能も豊富です。figmaはカラーカンプやワイヤーフレームを作るときに使い易いのではないかと思います

WEB画像のファイル形式

WEB画像は用途によってファイル形式が違います。ファイル形式はファイルの後ろにつく拡張子で判別します。WEB画像によく使われファイル形式は以下のような物があります。

WEB画像の最適なサイズと解像度

WEB画像を作る際、最初にサイズを決めますが、WEBサイトのどこの部分に使用する画像かによって設定するサイズも変わってきます。使用する箇所にごとに画像サイズの目安をまとめてみたので参考にしてみてください。

ヘッダー画像（ヒーロー画像）

ヘッダー画像（ヒーロー画像）とは、WEBサイトを訪問した際、最初に出てくる大きな画像野ことです。KUSUNOKI DESIGNのポートフォリオならここの部分の事を指します。

推奨サイズは1920ｘ1080ｐｘ位です。目安なので必ずこのサイズではないと行けないというわけではありません。ちなみにワードプレスでは、１９００ｘ６００ｐｘを推奨しているのでこの画像も１９００ｘ６００ｐｘで作っています、

フル幅背景画像

フル幅背景画像とは、WEBサイトの背景に画像を画面いっぱいに表示す事を言います。この画像の推奨サイズは１９２０ｘ１０８０ｐｘ以上が目安となります。

記事内の画像

記事を解りやすくするために、画像をつける場合がありますが、そういうときの画像のサイズの目安は大体８００ｘ６００ｐｘから１２００ｘ６００ｐｘ位が多いようです。

サムネイル画像

サムネイル画像とは、記事一覧やカード型デザインの時に使われる画像の事です。サムネイル親指の詰めという意味で親指の爪位小さい画像という事です。主に記事一覧の横に小さく表示しどのような記事なのかイメージしやすくする役割があります。YouTubeにもサムネイルと言われる画像がありますが、ここでは、次に紹介するOGP画像と呼ばれる物に分類します。

OGP画像

OGP画像とは記事がSNSでシェアされたときに表示される画像の事です。例えば、Xでブログをシャアしよとすると以下のように表示さえますが、その時表示される画像がOGP画像です。

推奨画像サイズは1200X630ｐｘ位です。ワードプレスの場合アイキャッチ画像がそのままＯＧＰ画像として適用されます。

アイコン、ロゴ

２００ｘ２００～５００×５００位になります。ちなみにWordPress、Lightningにて左上にロゴを表示させるときの推奨サイズは、５００X120pxです。

あくまでも目安です！

ヘッダー画像、フル幅背景画像、記事内の画像、サムネイル画像、OGP画像、アイコン、ロゴについてどのくらいの大きさで作ると良いか大体の目安を書いてみました。しかし、アプリによっては、推奨サイズが指定してあるものもあるのでそういう場合はそれに従うのが良いと思います。また、今回提示下サイズは、あくまでも目安なので、きれいに表示されない場合は、調整が必要になります

レスポンシブの場合・・・

レスポンシブに関しては、WordPress、Lightningの場合、デフォルトで自動調整できるようになっているので何もしなくても適切な大きさに変更されます。しかし、そのサイズがあまり良くないあ場合もあります。そのようなときは、初心者の方にとってはちょっと難しいかもしれませんがCSSで調整します。

画像解像度

画像解像度とは、１インチの中にいくつのマスが並んでいるかを表す数値の事を言います。１インチの中に７２個のマスが入っていれば７２ppi（dpi）となります。また１インチの中に３５０ピクセルのマスがあれば350ppi（dpi）となります。WEB画像は７２ppiで制作されます。印刷物は３００～３５０dpiで作られます。このことからわかるように印刷物とＷＥＢ画像は、同じ画像でも設定する解像度が違ってきます。印刷物を作るのに解像度を７２dpにしてしまうと粗い画像になってしまいます。逆にWEB画像を３５０ppiで作ると表示速度が遅くなってしまいます。ですので画像を作る際は、WEB画像と印刷物とで解像度を変えなければなりません。ちなみにdpiとppiは1インチの中にドットがいくつあるかかピクセルがいくつあるかの違いなのでどちら無マスという言葉に言い換えることが出来ます。なので、呼び方が違うだけで意味は同じとと考えていいと思います。

WEB画像制作の依頼先

１．クラウドソーシングサービス

クラウドソーシングサービスとは、仕事を依頼したい人と、仕事を受けたい人をマッチングしてくれるサイトです。フリーランスや副業で仕事を募集している方が多く登録されています。仲介してくもらえる事で、いろいろなトラブルに巻き込まれるリスクが下がり、安心して仕事を依頼することが出来ます。デザイン以外でもいろいろな仕事があります。有名サイトは、ココナラ、クラウドワークス、ランサーズなどがあります。

２．デザイン会社

この方法が一番確実だと思います。プロとしてしっかり経験を積んでいる人が多いので安心感があります。しかし、一方で、フリーランスや、副業でやってい人に比べて、費用が高額である傾向があるので、依頼する仕事の内容によって判断するのが良いのではないかと思います。

３．その他（自分で作る）

意外とWEB画像を作るのは簡単です。YouTubuやブログなどを見ているとWEB画像の作り方や、デザインソフトの使い方を発信している方が多いので、時間がある方は、自分で作ってみるのも良いかもしれません。デザインが苦手という人もいるかもしれませんが、デザインのコツについて発信している方もいるので時間はかかるかもしれませんが勉強してみてはいかがでしょうか？WEB画像を作るツールは、プロ並みの画像を作るには有料のアプリがひつようですが、大量に作る場合、自分で作ることが出来れば、集客にかかる金銭的負担を抑えられるかもしれないので検討してみてはどうでしょうか？

まとめ

WEB画像とは、WEB上で表示されてる画像の総称の事です。具体的に言うと、バナー画像　アイキャッチ画像、サイトのロゴ、ボタン、アイコン、背景画像、装飾パーツ、写真、サムネイル、イラストなどがあります。これらを作るツールとしては、Photoshop（フォトショップ） figma（フィグマ） Canva（キャンバ）などが有名です。これらのツールは、プロが使うようなツールになりますが、お金がかかります。（CanvaとFigmaは無料版もあります）大量に作る場合や、WEB画像を学びたい方にオススメです。WEB画像には、ファイル形式がいくつかあります。よく使用されるファイル形式は、JPEG　PNG　GIF　SVGがあります。画像の種類によって適切なファイル形式を選んで保存します。WEB画像制作を依頼する場合は、クラウドソーシングサービスやSNSでフリーランスのWEBデザイナーに頼むか、デザイン制作会社に依頼したりします。デザイナーの多くは、仕事の依頼を受けるためにSNSで発信している方が多いのでそのような方にお願いすると良いでしょう。但し、デザイナーのレベルはいろいろなので、安いからと言って飛びついてしまうと後悔することもあるのでしっかり調べてから依頼する必要があると思います。