こんにちは。Pooleチームのデザイナー、コーリーです。
先日デザインをしているときに、“UIデザインとデータの関係”が気になりました。
皆さんは、新しいサービスのUIデザインを作成する際、どんなユーザデータを使用していますか？ 仮想のデータを入力していると、想定外のことが起きたときに対処できなくなるかもしれません。
そこで今回は、UIデザインを作成する際に実際のデータを意識しなければならない理由と、データを使用するために便利なツールをご紹介したいと思います。
目次
“実際のデータ”を意識すべき理由
データの値によってデザインが崩れることは多々あります。
例えば先日、メンバーページのUIデザインが一瞬崩れたのですが、原因はメンバーの1人である「野田クラクションベベー」の名前が長すぎたことでした。
このように、SketchやPhotoshopなどでせっかく綺麗なデザインを作っても、実際のデータと合わないことがあります。ときには、デザインのコストが無駄になってしまうことも。
実際のデータは動的に変わっていくものであり、その値がいつも綺麗だとは限りません。そのため、データがデザインの犠牲となって崩れないように気をつける必要があります。
根本的にUIデザインとは、データを整理し、操作方法を伝えるもの。実際のデータを使用することは、デザインをするときの対策として有効です。
作成したデザインがちゃんと統一されて想定通りに動くかどうかを確認するため、必ず実際のデータを使って作ります。
実際のデータを使わないで綺麗な仮想データを入力すると、リリース後にデザインが崩れたりページが表示されなくなったりすることがあります。
UIデザインを崩しがちなデータ
アプリやサイトの種類によって使うデータは異なりますが、デザインを崩しやすいデータをいくつか紹介します。
ユーザが投稿した画像
デザインのモックアップを作成するとき、綺麗なstock photographyやグラフィックを使うことはありませんか？
しかし、ユーザはプロのフォトグラファーではありませんから、実際に投稿するコンテンツは解像度が低かったり構成が悪かったりと、それほど綺麗なものでないことも多いです。
ですから、ユーザが画像を投稿するサービスやアプリなどの場合は、デザインをするときにその点も含めて考えないといけません。つまり、デザイナーとして、ユーザが微妙な画像をアップロードしてもいい感じに表示しなければならないのです。
もちろん、想定外の画像にも気をつける必要があります。
余白の多い画像が投稿されてもUIは大丈夫か。写真に文言を重ねたとき、文字は読めるのか。サービスやサイトの背景が白であれば、画像に枠を付けた方がいいのか。
さまざまな問題が浮き上がってくると思います。
そんな画像に関するよくある問題はこちらです。
- 暗い画像や白い画像は、周りのUIに対してどう見えるのか？
- 画像上に文字を載せたとき、ちゃんと読めるのか？
- 荒かったり解像度が低かったりする画像はどう見えるのか？
- UIの大事な要素が画像によって見づらくないか？
ユーザの名前
人の名前にも想定外のデータが出てくることはよくあります。冒頭で説明したメンバーページがいい例ですね。
サービス内などのユーザ名であればデザインが崩れないように入力制限をかけられますが、人の名前であれば無理に制限をかけることはできません。
大事なのは、自分の想定外の名前を持つユーザがいることを忘れないことです。
名前データを取り扱う際に気をつける点はこちらです。
- 文字数が多い場合
- 文字数が少ない場合
- 漢字やひらがな、カタカナ、英字それぞれの場合と、それらを混ぜる場合
- 絵文字やその他シンボルを使う場合
- 外国人名の場合
実際のデータでデザインするために
基本的な問題を把握したので、実際にUIデザインをテストする際に使えるデータをご紹介します。
データベースから出力 or サービスのAPI
既にリリースしたものであれば、ユーザのデータは大抵何らかのデータベースに保存されています。データベースならCSV（Excelで見られる）やJSON（テキストエディターで見られる）で、データの出力ができます。
もちろん、ユーザデータには個人情報が含まれている可能性があるので、気をつけないといけません。
直接データベースから出力する以外にも方法はあります。サービスのAPIを使いリクエスト経由で情報を得る方法です。
「Postman」というツールを使えば、パラメーターを指定してリクエストするとJSON形式のデータを得ることができます。JSON形式のデータは読みやすく、デザインに反映しやすいので便利だと思います。
開発能力をお持ちの方であれば、データを直接デザインに繋げることも可能だと思います。
UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由
リー
前回書いたこの記事のように、私は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」は最近見つけた便利なツールです。これを使えばメール情報や位置情報など、さまざまなランダムデータを作成し出力してくれます。
データがない状態をデザインする
いままでデザインのデータ対応について話してきましたが、UIデザインをする際にデザイナーがよく忘れることがもう1つあります。それが“空データ”のことです。
ユーザがアプリやWebサービスを使いはじめる際に、ニュースフィードや通知、メッセージ、フォロワーなどに情報がないことはよくあります。こういった空のデータにもデザインを用意することは重要ですね。
最近では、UIの空状態を回避するために、初めてサービスを使った人向けにいろいろな情報を用意しているものも多いですね。
また、初めてのユーザでなくても、ユーザが一部や全部のデータ削除をしたらどのようなUIにするのか？ 空データだけでなく、中途半端なデータの場合もありますので、このパターンにもデザインを用意しないといけません。
そんなEmpty State（空状況）の参考になるサイトはこちらです。
- Empty States：
- Empty States – Pttrns：
まとめ
デザイナーとして綺麗なものやかっこいいものを作ろうとしたとき、本質を見逃すことがあります。UIデザインの本質は、使いやすさと分かりやすさを作ることです。
実際のデータを意識してデザインを作りましょう。
それでは。
参照
- Designing with Data：
https://medium.com/design-at-depop/designing-with-data-7f6bcd907f0a
- Modern Design Tools Using Real Data：
https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482a
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
