ボタンのタップ、ページのスクロールで開始される「マイクロインタラクション」は、ウェブサイトやアプリを印象的に魅せる効果があります。画像の拡大縮小に強いSVGは、さまざまなデバイス向けのマイクロインタラクションの実装に効果的です。今回は、初めてマイクロインタラクションやSVGに触れるウェブクリエイターを対象に基礎知識を紹介します。
マイクロインタラクションとは
「マイクロインタラクション」とは、ある目的を果たすために一つの作業を行うインタラクションのことで、Dan Saffer氏が著書「マイクロインタラクション」の中で定義したものです。「部屋のライトをつける」「SNSでいいねボタンを押す」「ウェブサイトでスクロール時にグラフを表示する」といったことが、マイクロインタラクションの例として挙げられています。
マイクロインタラクションの構造
マイクロインタラクションは、次の4つの構造に分解できます。
- トリガー : マイクロインタラクションの開始
- ルール : マイクロインタラクションで何が起こるのかの定義
- フィードバック : 何が起こっているのか？を視覚的、聴覚的に示す
- ループとモード : 終了したらどうするか、条件が変わったらどうするかの定義
例えば、YouTubeの再生ボタンは、ボタンをクリックしたら動画の再生が開始されるものですが、マイクロインタラクションの観点から次のように分解できます。
マイクロインタラクションの効果
高品質なマイクロインタラクションは、次のような効果を発揮します。
- 一見取るに足りない瞬間『喜びの瞬間』に変える
- 全体にも細部にも配慮することで、素晴らしいユーザーエクスペリエンスを実現する製品が作り出せる
- 細部は単なる細部にとどまらない。細部こそが製品を作り上げる
書籍「マイクロインタラクション」より引用
マイクロインタラクションはアニメーションが必須ではありません。しかし、アニメーションを効果的に使うと、操作感の向上や印象的なフィードバックに役立ちます。
AppleのiOSヒューマンインターフェイスガイドラインやGoogleのマテリアルデザインにおいては、アニメーションに次のような効果があると述べています。
それでは、我々ウェブクリエイターがアニメーションを用いたマイクロインタラクションを作成するには、どうすればよいのでしょうか？
ウェブのアニメーションで考えるラスター・ベクター画像
ウェブのアニメーションで使用する画像は、大きく分けてラスター画像とベクター画像に分けることができます。ラスター画像はドットの集合体で構成される画像で、代表的なフォーマットとしてJPG、PNG、GIFがあります。画像の横幅・縦幅を元のサイズ以上に拡大すると画像がボケます。一方、ベクター画像は頂点・塗り・線の集まりのことで、代表的なフォーマットとしてSVGがあります。画像を横幅・縦幅を元のサイズ以上に拡大してもくっきり表示されます。
高解像度化するディスプレイとベクター画像
ラスター画像とベクター画像の使い分けをする際に考慮に入れるべきは、高解像度ディスプレイです。次の図に示すように、デスクトップ、スマートフォン共に、デバイスピクセル比（※）が1.0より大きいディスプレイを持つ端末が増えています。
※ デバイスピクセル比とは、画像の1pxをデバイスの何ピクセルを使って表示するかを表した数値。デバイスピクセルが2のRetinaディスプレイでは、「1ピクセル × 1ピクセル」の画像をディスプレイでは「2ドット × 2ドット」の4ドットで表示されます。
ラスター画像で高解像度ディスプレイでも画像をくっきり表示させる場合、縦幅・横幅が大きいサイズの画像を用意せざるをえません。
ベクター画像の場合は拡大しても画像は荒れないので、1つのベクター画像を用意するだけです。また、拡大しても劣化しないという特性を活かし、ウェブ媒体のみならず印刷物としても使用できます。
写真のような高精細な画像の表現には向きませんが、ディスプレイが高解像度化する時代の流れにおいては、ベクター画像は有効な手段の一つと言えるでしょう。
ウェブコンテンツでベクター画像を取り扱えるのがSVG
SVG （Scalable Vector Graphics）は、2次元のグラフィックをXMLで記述するための言語です。
SVGでは、次のような表現が可能です。
SVGはフラットデザインとも相性がよく、多くのウェブサイトで採用されています。例えば、Starbucks（英語版）のロゴや、Googleトレンドの世界地図で使われています。
SVGは、IE 11を含む主要ブラウザーで基本機能が対応しています(参考「Can I Use （SVG）」)。
次のページから、SVGの作成と表示方法について紹介します。
