4,731views新年明けましておめでとうございます。デザイナーの大路です。2017年はウィルスタイルに仲間入りしたり、たくさん新しいことが始まったすばらしい年でした。2018年も健康第一、日々楽しく過ごせる年にしたいと思います。いつもご愛顧頂いているお客様、ブログをご覧の方、皆さまにとってすてきな1年となりますように。WEBや紙媒体など制作するツール・用途によって使用する画像の種類が異なります。画像について記事にまとめたいと思います。※UIについてはよろしければ過去のブログ記事をご覧ください。.svgJPEG・PNG・GIFといった「ラスター画像」はピクセルと呼ばれる小さな四角を並べて描画するので、拡大すると画質がガタガタに荒くなってしまうことがあります。PC・スマートフォンどのデバイスにも対応する、レスポンシブデザインにはSVGファイルが有効に活用できます。SVGは画像ファイルであるうえに、テキストエディタで編集可能な数式や文字を用いたデータファイルでもあり、WEB上でアニメーションシステムが設定できます。そんな優れたファイルですが、デメリットもあります。色をたくさん使う写真には不向きで、複雑なものはPNGやGIFよりもファイルサイズが大きくなってしまうこともあるので、特性を活かせる使い方を選ぶのが好ましいです。文章の内容を、ひと目で直感的にわかりやすく伝えるために必須な「アイコン」画像をSVGで作成します。Illustratorソフトを使用して簡単に作成できます。新規ファイル作成で、適当なカンバスサイズを設定します。パスツールなどで作りたいグラフィックを作成します。書式のアウトラインを作成の手順でも作成できます。「別名で保存」から保存する際、オプションのファイル形式「SVG」を選択し保存すれば完了です。Illustrtorで作成したSVGファイルは、Photoshopデータ上にドロップするだけでリンクできるのでとても便利です。デザインデータ上でカラー変更などの編集もできます。画像ファイルのテキストデータを見てみるとこんな感じです。企業様の特徴をさりげなくちょっとしたアニメーションで動きのある演出ができます。弊社で制作した主な実績サイトをご紹介します。]様http://www.azumancb.co.jp/TOPページのメインイメージにアニメーションを採用しました。]様https://www.lignyte.co.jp/主力商品であるフェノールの化学式をローディングのアニメーションとして採用しました。]様https://www.afe.jp/トムソン木型という木型作成を実施されている会社様のサイトでは道具である木槌に動きをつけています。どのアニメーションもさりげないポイントですが、お客様やサイトをご覧になった方からご好評を頂いています。SVGファイルをHTMLで表示する方法IMGタグHTMLのIMGタグにSVGファイルを直接指定します。height="35">SVGタグHTML内に直接SVGタグでベクターパスを指定して描画します。"/></svg>CSSのbackground-imageCSSで背景画像として指定します。background-size:100%;"></div>参考:QiitaさいごにWEBデザインに関わって知ったSVGですが、今回は初級の内容をご紹介しました。画像にはたくさんの種類の拡張子が存在するので、ご存知無い方は一つひとつの特徴を調べてみてはいかがでしょうか。興味をもって頂けるきっかけとなれば幸いです。menuWorksBlogInformation。