無償Adobe XD UIキット:セキュリティを重視したファイル共有アプリのプロトタイプ #AdobeXD
操作しやすく使っていて楽しいUIはユーザーに歓びを提供しますが、アプリを使用したりデータを共有するときに安全だと思えなければ、あなたのデザインは拒否されてしまうでしょう。だからこそ、プロダクト内のセキュリティ機能を今まで以上に重要視し、使い方を含めセキュリティ機能について適切にコミュニケーションすることがUXデザイナーにとって重要です。セキュリティを正しく扱うことができればUXの金脈を探り当てたも同然ですが、一歩間違えればユーザーはすぐに競合アプリやサービスに乗り換えてしまうでしょう。
Vault UIキットは、Adobe XDのための新たな無償UIリソースで、アプリやwebサイト開発者のために機能的なセキュリティ関連(パスワード設定から暗号化されたファイル共有まで)のエレメントを数多く取り揃えています。Valut UIキットはダウンロード提供(英語)されており、Adobe XDのための他のリソースも5つの無償UIキットとアイコン集(英語)から入手できます。
ダウンロードはこちら
https://blogs.adobe.com/creativestation/files/2018/06/xd-1.png
Vault UIキット:安全なログイン、プライベートファイル共有、エンドツーエンドな暗号化機能の実装に役立つエレメント集
Vault UIキットは多様な領域で活躍するサンフランシスコ在住デザイナー、ケレム シュア(英語)(Kerem Suer)氏と、プロダクトデザインにおけるセキュリティ、プライバシー、透明性を推進する非営利団体Simply Secure(英語)のデザインディレクター、エイミー エリオット(Ame Elliott)氏によって作られました。キットには、アプリまたはウェブサイトにセキュリティ要素を組み込むときに役立つ数多くのUIエレメントが含まれています。
- 電話番号を使ったログイン
- タッチ IDを使ったログイン
- 保護された領域でファイルを安全に保管する機能
- 共有中ファイルとフォルダを確認する機能
- ファイルとフォルダのアクティビティ履歴を確認する機能
- エンドツーエンドの暗号技術を活用し、安全にファイルを送信する機能
- バーコード形式の公開鍵を安全にスキャンする機能
- プロファイルカード
- リスト編集モード
アプリやサービスのデザイン制作に取り掛かるとき、セキュリティ要件を悩みの種ではなくチャンスに変える重要なツールがVault UIキット(英語)です。この素晴らしいUXがあれば、ユーザーの満足度を得られるでしょう。またこのキットはAdobe XDの機能をフル活用して作成しています。
- 数回のクリックだけで、アプリ全体にわたるカラー変更ができます
- アセットマネージャーを活用し、アセットの統一感を保ちます
- プロトタイプのナビゲーションバーが実アプリに近い動作をするよう、固定エレメントが使用されています
- アクションシートにはオーバーレイが使用されています
- デザインスペックの公開が可能です
- セキュリティ設定のチェックボックスには、、全面的にリピートグリッドが使用されています
https://blogs.adobe.com/creativestation/files/2018/06/xd-2.png
デザイナー紹介:ケレム シュア
ケレムは14年以上にわたるUIデザインとプロトタイプ制作の経験を持つ、イスタンブール出身のデザイナーです。ケレムはFitbitの創業期にインタラクションデザイナーを務め、その後独立してデザインスタジオを設立しました。Dropbox、Pinterest、Intuit、Omada Health、MyFitnessPal、Zendeskをはじめとする企業のweb、モバイル、デスクトップを跨いだ統一ビジュアルガイドラインの策定に関与しました。ケレムはサンフランシスコに拠点を置いています。
https://blog.adobe.com/media_e9faa744b85a6ae8a8e6a2a97ee713cd325566c5.gif
デザイナー紹介:エイミー エリオット
エイミーは、人間中心の視点からプライバシー、セキュリティ、透明性、倫理性を推進する実務者によるコミュニティを形成する非営利組織、Simply Secureのデザインディレクターです。人間中心のデザインアプローチに加え、ソフトウェア開発者、UXデザイナー、研究者といった複数領域を跨ぎ、多様なチームメンバーとの関係を構築することで、プライバシーにまつわる諸問題に挑んでいます。ドイツのベルリンに拠点を置き、Trust7とともにソフトウェアデザインと情報セキュリティに取り組んでいます。エイミーは、2018年のFast Companyが選出した、ビジネスで最もクリエイティブな人々(英語)の一人に選ばれました。
https://blog.adobe.com/media_bef394413bd999e83599ea87cdd6c83cc0c938ab.gif
その他UIキット及びXDの最新デザインリソースのご紹介
レストランのウェブサイトからファッションEコマースのポータル構築まで、幅広いシーンで役立つ5つのUIキットとアイコン集(英語)を含めたAdobe XD用の無償UIリソースは他にもあります。Vaultの次は、以下UIキットもぜひお試しください。
- E-Commerce UI Kit— Eコマースソリューションのデザインに必要なものすべてと犬猫をテーマにした楽しいUIエレメントを含むキットです。
- Travel Companion UI Kit(英語)— ホテルやフライト、観光ツアーのリスト化からボタンやアイコンまで、トラベル系のアプリやウェブサイトを作成するために必要なものを包括的に揃えています。
- Transportation UI Kit(英語)—ナビゲーション用のシンボルなどのエレメンツを多数収録した60種類以上のカスタマイズ可能な画面を含む「Navigo」と名付けられたこのUIキットは、交通系のアプリやウェブサイトのデザインに役立ちます。
- Apple iOS Design Resources(英語)— 新しいUI素材があればiOSアプリをすばやくデザインできます。
- Google Material Sticker Sheet(英語)— ステータスバー、アプリバー、ボトムツールバー、カード、ドロップダウンメニューなどAndroidアプリをデザインする際に必要な素材の明度が異なるバージョンのシンボルが用意されています。
- Windows UI Kit(英語) — UWP(ユニバーサルWindowsプラットフォーム)アプリのデザインに必要な要素が揃っています。
- Office UI Fabric Design Kit(英語) — OfficeアプリやOffice 365のシームレスデザインを支援します。
- Smartwatch UI Kit(英語) — カスタマイズ可能なコンポーネントが20種類以上、アイコンが30種類以上収められたスマートウォッチ向けの包括的なUIキットです。
- Dashboard UI Kit(英語) — 10種類の画面と100個のカスタマイズ可能なコンポーネントを含み、ダッシュボードの骨格にもなりうる10種類以上の表を備えた、デザイン工程を簡素化するUIキットです。
どこから始めればよいかわからない方のために、ご紹介したユニークなUIキットを活用し、Adobe XDでデザイン、プロトタイピング、共有に取り組めるようすべてのツールとリソースのリストをご用意しました。また、UXに関するインサイトをお届けするAdobe XDニュースレターにぜひご登録ください。
この記事は2018/6/19にポストされたFree Adobe XD UI Kit: Private File Sharing that Prioritizes Securityを翻訳したものです。