インラインSVGの管理にSketchを使用するときのポイント

Publish2016/04/21(木)

インラインSVGの管理にSketchを使用するときのポイント

今日は久しぶりに作る側の人向けになるインラインSVGの管理方法について思うところを書きます。
今回の前提としては、タイトルにもあるようにインラインSVGの管理手段として、Sketchを使用することを前提としています。

なぜインラインSVGなのか

まず今回の前提はインラインSVGを使用することが前提なわけですが、なぜインラインSVGかというと、インラインSVGがすでに使用しても全く問題ない段階に入ってきていることと、使用するメリットが大きいということが理由です。
下の画像はCan I Useのスクリーンショットですが、見てわかるようにインラインSVGは現在ほぼ全てのブラウザで使用して問題ない状況です。
IE8はサポートも終了して死んでいるので、カウントしないとして考えれば、使わない理由がないと思うわけです。
CanIUseのスクショ
そこで改めて、使用するメリットとデメリットを書いておきます。
これ以外にもあるかとは思いますが、僕個人の考えではこれかなというところを抜粋した感じです。

インラインSVGを使用するメリット

SVGを使用する一番大きなポイントは、インラインSVGを使用することで、iPhone等での画像の処理の問題を解消できることがあります。
ご存知のように、iPhone等の画面解像度の大きな画面では、通常サイズの画像をそのまま使うとボケて見えてしまいます。
対応方法はいろいろありますが、SVGはベクターデータなので画像がぼやけて見えることはありません。
これはSCGであればどれでもそうなので、インラインSVG特有のメリットということではありませんが、おそらくこれを読んでいる人がSVGを導入しようとしている理由の一つにはなっていると思います。
インラインSVGである必要については、個人的にはHTTPリクエストを減らすことができるという点がポイントになります。
インラインSVGはHTML内に直接コードを埋め込む形になるので、他の形式の画像のようにHTTPリクエストが発生しません。
HTTPリクエストが発生しないということは、導入することでサイトをより早く表示できるようになるわけですし、利用者のデータ転送量を無駄に消費することもないわけです。

インラインSVGを使用するデメリット

使用するデメリットとしては、コードの管理を含めて管理が面倒くさいということがあります。
単純なインラインSVGであればたいしてコード量もないのでそこまで負担ではないですが、少しでも複雑になると途端にコード量が多くなるので、以外と面倒です。
あとはこのコードをお客さんに触って管理してもらうというのもかなり難しいので、手離れしづらいという点もあります。

なぜSketchで管理するのか。

そこで管理のめんどくささを軽減させるのがSketchというわけです。
Sketchでは、SVGファイルを書き出すオプションがありますが、ファイルを書き出してエディタで確認すると、Sketchで作成された状態をイメージできる形でコードが記載されているので、管理をする時に便利になってきます。
あと、ファイル自体を変更して対応する必要がある場合などでは、出力されるコード自体が複雑になるので、一旦書き出したファイルのコードのみを管理しておく方法では汎用性が低くなります。
ファイルが変更されることを想定している場合は、やはり見た目で管理できるツールで管理しておく方が何かと都合がいいと思います。
今回は僕がSketchが好きなのでSketchでって書いてますが、別にIllustratorでも同じように管理ができるのであればそれはそれでいいとは思います。

Sketchで書き出される際のルールの確認と注意点

では実際のファイルを参考にルールとポイントと注意点を書きます。
今回使用するのは、僕のサイトのロゴです。
今回説明しやすいように作り変えたので実際のとは少し違いますが、Sketchではこんな感じで作成するイメージです。
Sketch
一応説明しておくと、それぞれのオブジェクトに固有の名前付けをしています。
そして、それらのオブジェクトを要素別にグループ化し、「fu-logo」というファイル名で出力する設定にしています。
サイズは縦横250pxで作成しています。
このファイルを書き出してエディタで見るとこんな感じになります。
書き出されたSVG
画像だと少しわかりづらいですが、サイズや各オブジェクトに付けた名前が適用されていることがわかります。
fill要素にはきちんと設定した色のコードも書いてあるのでわかりやすいですね。
実際にインラインSVGとして使用する場合は、xml宣言を消したり、titleやdescを入力したり、設定していないのに割り振られる「Page-1」とかのidを変更したりする必要はあります。
この基本形がわかっていると、ファイル変更時に行う一連の流れが体感でわかるようになるので便利です。

おまけ

これだけだとあまり魅力を感じないと思うので、少しおまけを書いておきます。

インラインSVGをcssでごにょごにょするための下準備

インラインSVGを使用するときに気になるポイントとして、せっかくコードで要素が管理できるから、それぞれの要素をcssでごにょごにょしたいなと思いますよね。もちろんそれは可能で、各要素にクラスを適用してcssで色や大きさをコントロールすることができるようになります。
例えば背景色を変える場合は、「background-color」ではなく「fill」で指定するとか、少しお作法はありますができることはできます。
svgにクラスをつけてやれば、メディアクエリで画像のサイズを変更することもできるので、自由度がかなり高い形で対応することもできるわけです。
わかりやすいようにサンプルを作ってみました。
こんな感じでsvgにクラスを追加してcssでsvgをコントロールできます。

See the Pen ONEXeN by deroter (@deroter) on CodePen.

こうなってくれるとすごくうれしい

ただし、それをするためにはSketchにもう一つ進化してもらう必要があるわけです。
というか、この記事はその問題点を解決できる人がいたら教えてほしいということが主目的で書いている節はあります。
それは、各レイヤーの要素に書き出す際にクラスをSketch側で設定できるようにしたいという点です。
idであれば設定した形で出力されるので、一応そのままの状態でもcssでごにょごにょすることもできるわけですが、できればこの辺をもっと自由にコントロールできるようになってくれるとうれしいなと思うわけです。
それとtitleやdescも書き出し後に手動で書き換えるのは面倒なので、書き出しオプションに用意しておいてくれたりすると最高です。
ということで、まだ現状完全にSketchだけで管理するというのはちょっと難しいわけですが、それでもただのコードで管理するよりかは見た目での管理もできるので、デザイナーさんと協力する場合などには使える方法かと思います。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期で更新しています。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

ふにろぐとは?

でぐち

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにす株式会社

ふにす株式会社は大阪の高槻にある「Webを起点に会社の成長を応援するパートナー」をモットーに、Webにまつわるいろいろな問題を解決する、サポートをする会社です。
ホームページでお問い合わせを増やしたい、もっとたくさんの人に見てもらいたいなど、ホームページ/Webサイトを活用したい方向けの活動を行っています。
また、ホームページの作成や、外部パートナーとしての運用サポートなど、幅広くWebにまつわる諸々のことをおこなっております。

ブログ内検索

サービス

ふにすWeb相談所

ホームページの運用お得情報

ホームページ/Webサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Webサイトの運用に関する情報

お問い合わせ

ホームページを成功させたいとお考えの方はお気軽にご相談ください。
ご相談は、下記の中からお好きなものを選んでいただければ大丈夫です。

  • メールで問い合わせる
  • チャットワークで問い合わせる
  • Facebookで問い合わせる
  • Twitterで問い合わせる

LINE@でも相談を受け付けています。
QRコードから友達登録を行って、メッセージを送ってください。

LINE@

最新記事

カテゴリ別記事一覧

月別記事一覧