壮SVG1307183ボタンのタップ、ページのスクロールで開始される「マイクロインタラクション」は、ウェブサイトやアプリを印象的に魅せる効果があります。画像の拡大縮小に強いSVGは、さまざまなデバイス向けのマイクロインタラクションの実装に効果的です。今回は、はじめてマイクロインタラクションやSVGに触れるウェブクリエイターを対象に基礎知識を紹介します。Saffer氏が著書「マイクロインタラクション」の中で定義したものです。「部屋のライトをつける」「SNSでいいねボタンを押す」「ウェブサイトでスクロール時にグラフを表示する」といったことが、マイクロインタラクションの例として挙げられています。マイクロインタラクションの構造マイクロインタラクションは、次の4つの構造に分解できます。終了したらどうするか、条件が変わったらどうするかの定義たとえば、YouTubeの再生ボタンは、ボタンをクリックしたら動画の再生が開始されるものですが、マイクロインタラクションの観点から次のように分解できます。高品質なマイクロインタラクションは、次のような効果を発揮します。取るに足りない瞬間『喜びの瞬間』に変える全体にも細部にも配慮することで、素晴らしいユーザーエクスペリエンスを実現する製品が作り出せる細部は単なる細部にとどまらない。細部こそが製品を作り上げる書籍「マイクロインタラクション」より引用マイクロインタラクションはアニメーションが必須ではありません。アニメーションを効果的に使うと、操作感の向上や印象的なフィードバックに役立ちます。AppleのiOSヒューマンインターフェイスガイドラインやGoogleのマテリアルデザインにおいては、アニメーションに次のような効果があると述べています。それでは、我々ウェブクリエイターがアニメーションを用いたマイクロインタラクションを作成するには、どうすればよいのでしょうか?ウェブのアニメーションで考えるラスター・ベクター画像ウェブのアニメーションで使用する画像は、大きく分けてラスター画像とベクター画像に分けることができます。ラスター画像はドットの集合体で構成される画像で、代表的なフォーマットとしてJPG、PNG、GIFがあります。画像の横幅・縦幅を元のサイズ以上に拡大すると画像がボケます。ベクター画像は頂点・塗り・線の集まりのことで、代表的なフォーマットとしてSVGがあります。画像を横幅・縦幅を元のサイズ以上に拡大してもくっきり表示されます。高解像度化するディスプレイとベクター画像ラスター画像とベクター画像の使い分けをする際に考慮に入れるべきは、高解像度ディスプレイです。次の図に示すように、デスクトップ、スマートフォン共に、デバイスピクセル比(※)が1.0より大きいディスプレイを持つ端末が増えています。デバイスピクセル比とは、画像の1pxをデバイスの何ピクセルを使って表示するかを表した数値。2ドット」の4ドットで表示されます。ラスター画像で高解像度ディスプレイでも画像をくっきり表示させる場合、縦幅・横幅が大きいサイズの画像を用意せざるをえません。ベクター画像の場合は拡大しても画像は荒れないので、1つのベクター画像を用意するだけです。拡大しても劣化しないという特性を活かし、ウェブ媒体のみならず印刷物としても使用できます。写真のような高精細な画像の表現には向きませんが、ディスプレイが高解像度化する時代の流れにおいては、ベクター画像は有効な手段の1つと言えるでしょう。Graphics)は、2次元のグラフィックをXMLで記述するための言語です。SVGでは、次のような表現が可能です。SVGはフラットデザインとも相性がよく、多くのウェブサイトで採用されています。Starbucks(英語版)のロゴや、Googleトレンドの世界地図で使われています。SVGの作成方法SVGファイルを作成するには、大きく3つの手段があります。コードを記述してSVGファイルを作成するコードを直接記述して、SVGを表現する方法です。テキストエディターで画像名.svgというファイルを生成します。コードはHTMLやXMLと同じようにタグを用います。(ここに図形のためのコードを書く)</svg>viewBox属性は、SVGの描画領域の定義に使います。最小のX座標、最小のY座標、幅、高さの4つの値によって矩形の描画領域が定義されます。200"と定義し、半径50の円を描くと、次のような見た目になります。図形の描画コードシンプルな図形を描くためのタグとして、円(<circle>)、四角(<rect>)、多角形(<polygon>)など、シンプルな図形を作成するためのコードがあります。円を描くための<circle>タグを用いて円を描く様子は次のとおりです。r属性で円の半径、fill属性で塗りの色、stroke属性で線の色を変更しながら、図形の見た目を更新しています。自由な曲線の描画コード自由な図形を描くためのコードとして、<path>タグがあります。これは、頂点毎の情報をd属性によって定義することで、自由な曲線を描けるコードです。PhotoshopやIllustratorのペンツールを用いて図形を描画するのと似ています。<path>を用いて、上記の曲線を描くコードは下記です。/></svg>一般的には、多くの<path>を組み合わせてSVGを作成しますが、手動で記述するのは非効率です。ベクター画像作成ソフトから書き出すSVG作成方法の2番目は、ベクター画像作成ソフトから書き出す方法です。次に示すベクター画像作成ソフトでは、コードを使わずに直感的にベクター画像を作成できる上、SVG書き出し機能も備えています。対応OS、値段、操作性の違いがありますので、自分の用途に合うものを選ぶとよいでしょう。XDFigmaSketchIllustratorで作成したベクターデータを、SVGで書き出す様子は次のとおりです。素材サイトから手に入れるSVG作成方法の3番目は、素材サイトからSVGデータを手に入れる方法です。著作権と使用条件には気をつけましょう。DESIGNSVGをHTMLで表示するSVGファイルが作成できたら、SVGファイルをHTMLで表示します。SVGファイルを表示する簡単な方法は、imgタグ(またはobjectタグ)を用いて外部ファイルとして表示する方法です。次に示すのは、imgタグを使ってSVG画像を表示する例です。src="myImage.svg">SVGを表示するもう1つの方法は、SVGコードを直接HTMLコードに貼り付けるインラインSVGという方法です。c20.8-20.8,38.2-33,104.2-83.3C417.7,337.8,500,270.1,500,178C500,42.8,333.3-30.3,250,94.6z"/></svg></body>インラインSVGを使うと、各属性やCSSプロパティよりSVGのグラフィックの形状を変更できます。動画では、fill(塗りの色)、stroke-width(線の太さ)、stroke(線の色)等を変更しています。SVGを表示する横幅と高さを設定するimgタグ、インラインSVG共に、SVGを表示する横幅と高さをwidth属性とheight属性で設定します。前述のviewBox属性は、SVG内のグラフィックの座標を定めるものでした。200"のSVGで半径50(直径100)の円を描き、widthとheightを変更した場合の例です。左側が半径50px(直径100px)の円になっているのに対して、右側は半径25px(直径50px)となっています。SVGで画像の大きさを考える場合には、width・height属性とviewBox属性の関係に注意しましょう。マイクロインタラクションのためにはインラインSVGで表示するSVGのコードをHTMLコード内で直接記述することで、属性(塗り、線、形状等)の書き換えをCSSやJavaScriptで行うことができます。一定時間毎に属性を変化させればアニメーションとなります。よって、マイクロインタラクションをSVGで実現する場合は、インラインSVGで表示するのがオススメです。コードの肥大化を防ぎたいなら外部SVGをダウンロードしてインラインSVG展開インラインSVGはSVGアニメーションに相性がよいですが、HTMLコードが肥大化しがちです。API、XMLHttpRequest等を用いて外部SVGをダウンロードしてインラインSVGとして展開する手法があります。APIを使ったコード例は次の通りです。JavaScript動作している様子は、下記のURLより確認できます。http://jsdo.it/tonkotsuboy/2I7C初めの内はインラインSVGを記述し、慣れてきたらSVGの外部化手法を検討するとよいでしょう。次回はSVGアニメーションについて学びます今回はマイクロインタラクションにはアニメーションが重要な役割を持つこと、多種多様なディスプレイでアニメーションの対応をするには、SVGが適していることを学びました。アニメーションのみならず、画像としてSVGを使用する場合にも役に立つ知識です。MEDIA」では、コーダー・フロントエンドエンジニア・デザイナー別に、SVGアニメーションを用いたマイクロインタラクションの実現方法について紹介します。本記事は、2017年6月15日(木)の勉強会ヒカラボでの発表「SVGアニメーションで始めるマイクロインタラクション」を記事としてまとめたものです。平成29年7月13日に内容をメンテナンスしています。メディアアートを学ぶ。MEDIA、Qiita他)、Twitterで積極的に情報を発信中。Lynda.comやSchooの講師も務める。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。