UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由
実際のデータでデザインするために
基本的な問題を把握したので、実際にUIデザインをテストする際に使えるデータをご紹介します。
データベースから出力 or サービスのAPI
既にリリースしたものであれば、ユーザのデータは大抵何らかのデータベースに保存されています。データベースならCSV（Excelで見られる）やJSON（テキストエディターで見られる）で、データの出力ができます。
もちろん、ユーザデータには個人情報が含まれている可能性があるので、気をつけないといけません。
直接データベースから出力する以外にも方法はあります。サービスのAPIを使いリクエスト経由で情報を得る方法です。
「Postman」というツールを使えば、パラメーターを指定してリクエストするとJSON形式のデータを得ることができます。JSON形式のデータは読みやすく、デザインに反映しやすいので便利だと思います。
開発能力をお持ちの方であれば、データを直接デザインに繋げることも可能だと思います。
前回書いたこの記事のように、私はSketchの大ファンなので、もちろんプラグインを探しました。それが「Sketch Data Populator」です。
Sketch Data Populator
https://github.com/preciousforever/sketch-data-populator
「Sketch Data Populator」を使うとJSONファイルが読み込まれて、データが勝手に入力されるんです。便利ですね。
実際のデータを使えないとき
もちろん実際のユーザデータを使えないこともあると思います。
例えば、まだアプリやウェブサービスがリリースされていない場合や、新機能のUIデザインである場合は、ゼロから始めるしかありません。しかし、都合のいい仮想データを使用してデザインしてしまうと、想定外のことが起きたときにデザインが崩れてしまったり対応できなかったりします。
ですから、以下のような方法で「Real Fake Data（実際のデータに近い、仮想のデータ）」を使う必要があります。
既存サービスを参考にする
どんなに斬新でオリジナルな概念から新しいサービスを作り出しても、すでに同じようなものが存在している可能性は高いです。UIデザインの際には、それがかなり参考になります。実際のユーザが入力するデータの内容や、入力パターンなどがすぐにわかるからです。
また、Postmanを使えば、APIから大量のデータをすぐに見ることができます。
UI Facesを活用する
「UI Faces」は、ユーザが投稿した画像をデザインモックアップ用に使えるツールです。一般人が投稿したものなので、顔が見切れている写真や荒い画像などがあります。デザインをする際にはあまり考えない、現実的な例が多くあります。
また、プログラミングができる方には、ランダムな画像を返すAPIもおすすめです。
- UI Faces API
- $ curl http://uifaces.com/api/v1/random
—
{
“username”: “calebogden”
“image_urls”: {
“epic”: “https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg”,
“bigger”: “https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/73.jpg”,
“normal”: “https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/48.jpg”,
“mini”: “https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/24.jpg”
}
}
UI Namesを活用する
「UI Names」はランダムな名前ジェナレーターツールです。
使い方はすごくシンプルで、性別と国を選択して“spacebar”を押すだけ。その度にランダムな名前が表示されます。日本や中国を選択すると、漢字の名前も表示されます。
Mockarooを活用する
「Mockaroo」は最近見つけた便利なツールです。これを使えばメール情報や位置情報など、さまざまなランダムデータを作成し出力してくれます。
