スポンサーリンク

Webデザイナーさんが実務でよく使う画像フォーマットについてまとめてみた

Web業界での働き方
この記事は約5分で読めます。

Web業界に入社して、今まで特に意識していなかった画像フォーマットについて、実務で意識するようになったので記事にまとめてみようと思いました。
まだまだ見習いですが、Web系職種を志す方の参考になりましたら幸いです。

筆者
筆者

・Webデザイナーとして働いている
・Web系職種ってどんな業務をしているんだろう
・画像についての知識を知っておきたい
そういった方向けに書いています。

ちなみに、筆者はこんな仕事してます。

サービスデザイナーという職種を紹介。知名度低いですが意外と幅広くやってるんです。
Webデザイナー・Webディレクターという職種はよく耳にしますよね。そして現在、○○デザイナー・○○ディレクターと派生が多く存在しています。この記事では、筆者が就職した職種「サービスデザイナー」について解説していきたいと思います。筆者デザイナーの役割をもっと知りたいWeb系職種ってどんなのがあるんだろうそういった方向けに書いています。就職や転職をお考えの方は、というアプリで自分の就職活動における市...
スポンサーリンク

画像フォーマットって?

日々日常のWeb上で画像を扱っているときに、ファイルの後ろに「.png」といったような文字列があると思います。
これを「拡張子」と呼び、かっこよく「フォーマット」と呼ぶ人もいます。
この「フォーマット」を用いることで、画像データの表示・圧縮ができます。

ただ、どのフォーマットを選べばいいのか迷ってしまいますし、それぞれのフォーマットには特徴があります。
適切なフォーマットを選ばなければ、画質の劣化やデータ復元不可という事象に陥ったりしてしまいます

Webデザイナーさん等の作業する側はデータ復元可否を気にしますが、Webディレクターさん等の管理する側は画像の容量を気にする傾向があります。

実務で自分がWebデザイナーに依頼するときにお願いしてること【インハウス編】
Web業界に入社して、自社サービスのシステムやWebサイトの画像をデザイナーさんにお願いするケースも増えてきたので、意識していることをまとめてみました。筆者・デザイナーの役割をもっと知りたい・Webデザイナーってどんな仕事をしているんだろうそういった方向けに書いています。ちなみに、筆者はこんな仕事してます。Webデザイナーの立ち位置会社によって異なり、ベンチャー小規模の会社だとディレクターも兼ねて...

現場でよく使う画像フォーマット

様々な画像フォーマットがありますが、主に使うのは下記です。
その他は使うシーンは少ないです。

JPG .jpg .jpeg .JPG .JPEG
PNG .png
SVG .svg .svgz
WebP .webp

それぞれの特徴は下記になります。

  • JPG
  • 写真に使用されることの多いフォーマットです。
    ただし、JPGは非可逆圧縮です。(圧縮すると圧縮前のデータが消えてしまう)
    一度圧縮してしまうと元には戻せず、サイズを変えたりするだけで画質が劣化していきます

  • PNG
  • PNGは背景の透過ができるのがメリットです。
    イラストやアイコンに使用されることが多いです。
    JPGと異なり、PNGは可逆圧縮です。(データを後で完全に復元可能。圧縮しても画質が劣化しない)
    何度も画像を加工する場合はPNG形式で作業しましょう。
    しかし、データを復元することができるということは復元のデータを裏で持っていることになります。
    そのため、画像によっては容量が大きくなってしまう懸念があります。
    この容量が大きくなってしまう点がWebディレクターさんに好まれなかったりします

  • SVG
  • 色数の少ないイラストやロゴマークに使用されることが多いです。
    ほとんどの場合、ロゴ=SVGといっても過言ではありません
    また、容量を小さく、画像を拡大しても劣化せず表示できるのでWebディレクターさんに好まれます
    ただし、色数が多い画像の場合は逆に容量が大きくなってしまいます。

  • WebP
  • Google社が開発したWebに対応している画像フォーマットです。
    画像の容量が小さく、Web上でのページ表示速度を速くできるというメリットがあります。
    JPGやPNGと比べて25〜35%程度小さくなると言われています。
    私も実務でやってみましたが、150kb→35kbと大幅削減できました。
    画像の容量が小さくなると、Web上でのページ表示速度も速くなるので、SEO対策としても有効です。

    WebPに注目が集まっている

    GoogleのSEO対策として、「Web Vitals」という指標があります。
    その中で重要な要素が「Web上でのページ表示速度」です。
    Webディレクターさんは、SEO対策としてWeb上でのページ表示速度を改善したいため、画像の容量が小さいWebPに注目しています。

    Webサイトの改善にUXが必須に。SEO勉強会参加の記録。
    先日、SEOに関する社内勉強会に参加したので、そのメモを記録します。昨日は、SEOの社内勉強会でした🙂Core Web Vitalsが2021年5月からランキングの要因になるって知りました😂バナー等の画像が最も着手しやすい改善で、適切なサイズでの配置(HTML/CSSでの調整×)、ファイル形式、読込の順番などあり、担当業務の仕事が盛り上がりそうです😭UX改善の需要が増える✨— ふらんぶ🌿@UXデザ...

    さいごに

    筆者は、職業訓練校卒で、「職業訓練校体験記」を書いています。
    より詳細に、職業訓練校の雰囲気がつかめるのではないかと思います!

    職業訓練校ではWebデザインを勉強しており、そのときの知識が今でも活きています。

    職業訓練校ってどんなところなんだろうと思っている方、ぜひご一読ください!

    職業訓練校体験記(Monthly版)のスタートはこちら

    職業訓練校を無事1カ月乗り切ったので、その感想と成長まとめ
    通学までの経緯筆者は、コロナウイルスによる緊急事態宣言発令時より転職活動を開始。その2か月後に退職し、無職となる。ハローワークに、WEB系に関する仕事をしたいので、職業訓練に通いたいと相談。倍率5倍の選考を合格し、職業訓練校に通学している。筆者職業訓練校ってどんな環境なんだろう?職業訓練校でどんな勉強をしているんだろう?そういった方向けに書いています。まずは乗り切った感1カ月は長いようで短く感じま...

    職業訓練校体験記(Weekly版)はこちら

    職業訓練校体験記(WEBデザイナーコース) 1週目
    通学までの経緯筆者は、コロナウイルスによる緊急事態宣言発令時より無謀にも転職活動を開始。選考状況の連絡すらなく、転職活動は沈黙。転職活動開始の2か月後に退職し、無職となる。事前に、「WEB系に関する仕事をしたいので、職業訓練に通いたい」とハローワークに相談していた。コロナウイルスによる影響で倍率過多の選考を合格し、職業訓練校に通学。※ハローワークに行くと、「あの倍率が高い訓練校でしょ?よく受かった...
    筆者
    筆者
    未経験からでもWeb業界に行けました!

    筆者の就職活動の体験記はこちら

    実務未経験のWeb業界就職活動で書類選考を通過するには?
    実務未経験での就職活動って不安ですよね。第二新卒でなければ、転職活動は「即戦力」が求められるといいます。20代男子の筆者の経験をもとに書いていきます。筆者実務未経験で、Webデザイナーを目指したい!実務未経験で、Web業界に就職できるのか?そういった方向けに書いています。就職や転職をお考えの方は、というアプリで自分の就職活動における市場価値を無料で診断できて便利です。簡単登録で、あなたの年収査定が...
    実務未経験のWeb業界就職活動はハード!?体験者が語る活動記録。
    実務未経験での就職活動って不安ですよね。第二新卒でなければ、転職活動は「即戦力」が求められるといいます。20代男子の筆者の経験をもとに書いていきます。筆者実務未経験で、Webデザイナーを目指したい!実務未経験で、Web業界に就職できるのか?そういった方向けに書いています。就職や転職をお考えの方は、というアプリで自分の就職活動における市場価値を無料で診断できて便利です。簡単登録で、あなたの年収査定が...
    実務未経験Webデザイナーの正社員就職難易度は高い?
    この記事をご覧になっている方は、Webデザイナーを目指して転職活動中ではないでしょうか?筆者の経験をもとに、実務未経験Webデザイナーの正社員入社の難易度について記事を書きます。筆者筆者自身も実務未経験でWebデザイナーを目指して転職活動をやっていました。就職や転職をお考えの方は、というアプリで自分の就職活動における市場価値を無料で診断できて便利です。簡単登録で、あなたの年収査定ができます。自分は...
    Webデザインを学びたい初心者向けの情報が満載!!

    ・職業訓練校に興味をもっている
    ・Webデザインの勉強方法に悩んでいる
    ・スクールに通うべきか独学か悩んでいる

    そういった方向けに、学習ロードマップと実名公開での職業訓練校レビューおよび後悔しない職業訓練校生活のノウハウを書いています。

    ブログの応援よろしくお願いいたします!!
    ブログ運営者 兼 筆者
    ふらんぶ@パラレルワーカー

    More

    本業は「サービスデザイナー」で、副業は「Webデザイナー」として、パラレルキャリアを実践し、自分の生き方を追求中

    職業訓練校卒(Webデザイン) ▶東証プライム上場のWeb系IT企業勤務▶私生活に影響の出ないスモール副業活動

    本ブログは、未経験でのWeb系職種志望者に向けて、勉強方法(おもに職業訓練校)や就職に役立つ情報を自分の体験談をふまえてわかりやすく発信
    最近は、副業の幅を広げるためにWebデザインとWebマーケティングの勉強を継続しており、その学習記録をメインに執筆中

    「居そうで居ないWeb系職業訓練校の身近な先輩サポーター」として、職業訓練校(Webデザイン)での体験や実務未経験でのWeb系企業への就職の実績をもとに、Web系職種志望者向けのサービスを提供
    有料記事公開中

    Follow Me
    スポンサーリンク
    シェアする
    Follow Me
    スポンサーリンク

    コメント

    スポンサーリンク
    タイトルとURLをコピーしました