モバイル向けプロトタイプ作成ツール Justinmind

SVG ファイルフォーマとは古くから 20 年以上も使用されていますが、幅広いブラウザーサポートが必要となった今、再び注目を浴びています。SVG ファイルが注目を集めている理由として、画像の劣化なく、どのサイズにでも対応し、モバイルアプリケーションやウェブサイトなどにも簡単に実装するところにあります。また、ファイルサイズの小ささも UX デザイナーの間で人気を集めています。

この SVG ファイルをインタラクティブなワイヤーフレーム作成ツール Justinmind と使用することで作業効率を大幅に向上することができます。

SVG ファイル

SVG とは、Scalable Vector Graphic ファイルの略になります。SVG ファイルは、 XML ベースのテキストフォーマットを使用し、画像の表示方法を説明しています。

SVG ファイルは、インターネット上でベクターベースのグラフィック定義として使用されます。これらのファイルは拡大、サイズ変更が行われた場合にも、ベクトルを保持するため、オリジナルの画質を失うことはありません。この特徴が、UX デザイナーにとってとても重宝しています。

ファイルは、サイズ調整が可能なため、よくアイコン、ライングラフィック、ロゴなどに使用されます。SVG ファイルは、ウェブサイトやモバイルアプリケーションで複数回使用する画像に最適です。

また、SVG アニメーションも可能です。

SVG ファイルをインタラクティブワイヤフレームやプロトタイプに使用することにより、様々な利点があります：

SVG イメージは、

どのテキストエディター上でも編集することができます。
検索、インデックス化、スクリプト化、圧縮することができます
スケーラブルであり、画質が劣化しません。
拡大することができます。
オープンスタンダードになります。

なぜ、SVG ファイルなのでしょう？

SVG ファイルがスケーラブルであることは、多くの UX デザイナーの間でとても好評です。この背景には、ブラウザーサポートの拡大やレスポンシブウェブデザインがあります。SVG ファイルであれば、どのデバイス上でも、画質を損なうことなく、表示することができます。

また、SVG ファイルサイズは小さいため、インタラクティブなワイヤーフレーム上で画像を読み込む際の時間を削減することもできます。

さらには、UX デザイナーは、SVG ファイルを編集することができます。ウェブサイト上の複数の場所に対して SVG ファイルの目的を再設定することができます。これにより、SVG ファイルをアニメーション化することができます。

インタラクティブワイヤーフレーム上での SVG ファイル活用法

SVG ファイルは、ウェブサイトやモバイルアプリの UX デザインを大幅に向上することができます。SVG ファイルは、詳細であり、編集することができ、その使用を広げています。小さいサイズのアニメーションに対しても SVG は、ピクセル化することがありません。

SVG ファイル
1. SVG ファイルをインタラクティブワイヤフレームやプロトタイプに使用することにより、様々な利点があります：
なぜ、SVG ファイルなのでしょう？
インタラクティブワイヤーフレーム上での SVG ファイル活用法

3 つの Justinmind 上での SVG ファイル活用法

3 つの Justinmind 上での SVG ファイル活用法

背景画像としての活用

Justinmind では、SVG ファイルを hi-fi プロトタイプへ追加することができます。SVG ファイルをインポートし、ベクターファイルを他のインポートしたファイルと同様に扱うことができます。

SVG は、インタラクティブなワイヤフレームに完全に統合でき、エディターで遠隔ファイルが修正された際も自動的に更新されます。それだけでなく、SVG を背景画像と使用することにより、どのスクリーンサイズに対しても、画質を失うことなく表示することができます。

SVG ファイルをインポートするには、イメージウィジェットをキャンバス上にドラッグし、そのウィジェットをダブルクリックしファイルを検索するだけです。

Justinmind のスケッチ統合での SVG ファイル活用

Justinmind 上での Sketch デザインの表示方法をウェブ、モバイル、またはタブレットプロトタイプなどから選択することができます。また、SVG ファイルへの変更を Justinmind 上で行うことができます。

インタラクティブワイヤーフレーム上で SVG ベクターファイルのカスタマイズ

Justinmind のインタラクティブなプロトタイプ上で SVG ファイルのプロパティをカスタマイズすることができます。追加された個人設定に対して SVG ファイルの色を変更することができます。イメージウィジェットをキャンバスに追加するだけです。SVG ファイルをアップロードした後、プロパティタブまでマウスダウンし色を変更することができます。Change Style イベントと共に、タップ、スワイプ、またはクリックでベクターのスタイルを変更できます。