ウェブサイトを更新しました（ver. 5）

milligraphのウェブサイトを更新しました。今回は、セクション〈project〉で紹介する制作物の図をよりわかりやすく解説するために、その内容と手法を改善しました。

キャプションの内容の充実

これまでのバージョンでも、図に添えるキャプションの文章でおもにデザインの意図について綴ってきましたが、今回内容を大幅に書き足しました。「確かこの時はこういうことを考えてつくってたな」とか、「この手法がこの時うまくいっていたのはどうしてだろう」とか考えながら書き進めていったものです。読む人にとって果たして価値があるのかどうかあやしい文も多々あるかと思いますが、それでもどなたかの役に立てることもあるかもしれないと思い、記しています。

図の部分を強調する動作の改善

前回の〈バージョン４〉で、キャプション文の中にボタンを設けました。たとえば「この部分が○○である」という文字列のボタンが押されると、図の中の「この部分」に該当する部分を視覚的にわかりやすく強調することで、キャプションの説明を補助するためのものです。今回の〈バージョン５〉では、キャプションが画面内にスクロールして来たら、その強調する動作が自動でも発動するように変更しました。その結果アニメーションが格段に増えたので、サイトとして楽しくなったと思います。

キャプションへの操作ボタンの追加

画面が小さいためにキャプションと図が重なり合って内容が見にくい場合への対策として、キャプション、図の全体、図の部分の強調表示、の３者のどれを優先的に見たいのかをユーザーが選べるように、以下の操作ボタンを新たに導入しました。これらのボタンは必要なときにだけ表示されます。

• キャプションの表示と非表示を切り替えるためのボタン
• 図の部分の強調の表示と非表示を手動で切り替えるためのボタン

SVGの導入

図の表現力を上げるためにそのデータ形式にSVG¹を導入しました。図の強調部分の図形としては、前回のバージョンまで円形と四角形しか描けませんでしたが、今回からSVGの機能によってほぼどのような図形でも描けるようになりました。グラフやイラストを用いてデータをわかりやすく伝えることのできる「インフォグラフィックス」にしばらく前から関心を持っていたので、このSVGの導入は今後それを修得するための基礎になっていくと期待しています。