2014年にHTML5が勧告されてはや4年。HTML5は、マークアップ言語としての機能だけでなく、ウェブアプリケーションを作るためのあらゆる最新技術を詰め込んだ次世代技術として登場し、少し前にはブラウザで実現できなかったインターフェースやデザインが、わずか数行のコードで実現できるようになりました。

今回は、そんなHTML5ならではのリッチなUIを実装するための技術を、コードを普段書くことがないというデザイナーの方にも知ってもらいたいので、簡単にまとめてみました。ぜひUIデザインをする際の参考にしてみてください。

見本で紹介するサービスは先日リリースしたCover2になります。

Canvas API

Canvasとは、ブラウザ上で図を描画するためのAPIです。それってPNGやJPEGの画像を貼るのと何が違うの？という感想を抱かれるかもしれませんが、このCanvasはJavaScriptによって座標や高さ・幅を指定し、操作できる図を描画することができる技術です。

例えばグラフなどを想像してください。PNGやJPEGなどの画像でグラフを表示すると、プログラムが出力した結果に合わせて動的に表示内容を変えることはできません。Canvasは出力した結果に基づいてグラフを描いたりすることができます。

またクリック・キー入力などのアクションに合わせて描画をしたり、繰り返し処理によるパラパラアニメーションのような描画も可能です。ただ単に静止画を描画するだけではなく、インタラクティブ（双方向性のある）な図を描画できるのが特徴です。

描画された図は変換してJPEGやPNG形式で保存することも可能です。

Cover2では上の画像の赤枠で囲われた部分が<canvas></canvas>というHTMLタグになっており、右側の操作パネルをいじると、JavaScriptによって内容が描画されるようになっています。またJPEGやPNG形式での保存も出来るようになっています。

Canvasでは線・塗りを用いて、テキスト・矩形・円を描画したり、画像を読み込んで描画することができます。テキストのプロパティに若干物足りなさがあるものの、図を描くための大抵のものが揃っています。

HTML5は、ブラウザ上でゲームを提供するのにも向いています。最近ではFacebookメッセンジャー内でカジュアルゲームが提供されていますが、こういったものも作ることができます。

HTML5には、他にもベクターデータを描画するためのHTML5 SVGや、3Dを描画するためのWebGLがあり、いずれもJavaScriptで操作可能で、インタラクティブなデザインを実現することができる技術です。

ドラッグ&ドロップAPI

今でこそ記事や写真の並べ替えに当たり前に使われるドラッグ＆ドロップの操作ですが、昔はブラウザ上でこれを表現するのはとても困難でした。今はこのドラッグ&ドロップAPIがあることによって、ある程度簡単に実装することができます。ドラッグを開始したタイミング〜ドロップを完了したタイミングまで、様々なタイミングを取得することができるため、そのタイミングに合わせてCSSの内容を切り替えるなどすると、よりわかりやすいUIを提供することが可能です。

地味に苦労したぞドラッグ&ドロップで画像アップ pic.twitter.com/9DYI8A3ePI

— Yoshiki Kojima (@yoshikikoji) June 2, 2018

Cover2では背景画像の指定にドラッグ＆ドロップAPIを用いています。ドラッグをして枠線の中にマウスカーソルが侵入すると、色が変わるように実装しています。こうすることでユーザーは該当のファイルが指定の場所にドラッグされていることを認識することが出来ます。

File API

画像ファイルをアップデートする際に、画面を遷移せずにアップしようとしている画像をプレビューできるようなインターフェースは今では当たり前のように見かけますが、これもFile APIという技術によって実現しています。File APIでは<input type="file">に入力されたファイルの概要を取得することができます。ファイル名や種類、サイズなどを取得することが出来るので、ファイルを選択後に画面にファイル名を表示したり、ファイルの種類を判別して適切なものをアップしようとしているか確認したり、大きすぎるファイルサイズのものを拒否するような表示をすることができます。

Cover2では前段であげた背景画像の指定の際に利用しています。

CSS3（角丸・グラデーション・シャドウ）

こちらも、もはや当たり前にように使われていますが、昔は角丸やドロップシャドウをブラウザ側で表現することができなかったので、全て画像で対応していました。現在はCSSだけで角丸・グラデーション・シャドウの表現ができます。

Cover2では、ボタンやフォント選択のUI、画像のダウンロード後に表示するモーダルなどに細かく角丸やシャドウが指定されています。

角丸やシャドウだけではなくCSSトランジション（切替効果）を使って、動きのあるシェアボタンを表示しています。

複雑なことができるからこそ、細かい気配りの効いたデザインを

HTML5によって実現できる技術は、ユーザーにスクロールをして閲覧・クリックして画面を遷移する以外に、より複雑な操作によって幅広い体験を提供することができます。その際に適切なフィードバックを表現しないと、ユーザーにとってわかりづらい、もしくは不快な思いをさせてしまうことがあります。

例えば画像をドラッグ＆ドロップでアップするようなUIを提供したとき、ドラッグしてきた際にドロップ先に何も変化がないとうまくドラッグできているかわからず、場合によってはドロップに失敗して画面遷移をして画像を表示してしまうことがあります。

ユーザーに「見る」「読む」以上の何かを提供する際は、気配りの効いたUIデザインを。そして気配りを効かせるためには、HTML5の仕様を多く知っていると、よりリッチなUIを提供できるでしょう。