Web無料相談会2018冬
Web無料相談会2018冬
2015.07.17

UIデザインを作成するとき、“実際のデータ”を意識しなければならない理由

リー

こんにちは。Pooleチームのデザイナー、コーリーです。
先日デザインをしているときに、“UIデザインとデータの関係”が気になりました。

皆さんは、新しいサービスのUIデザインを作成する際、どんなユーザデータを使用していますか? 仮想のデータを入力していると、想定外のことが起きたときに対処できなくなるかもしれません。

そこで今回は、UIデザインを作成する際に実際のデータを意識しなければならない理由と、データを使用するために便利なツールをご紹介したいと思います。

“実際のデータ”を意識すべき理由

データの値によってデザインが崩れることは多々あります。
例えば先日、メンバーページのUIデザインが一瞬崩れたのですが、原因はメンバーの1人である「野田クラクションベベー」の名前が長すぎたことでした。

このように、SketchやPhotoshopなどでせっかく綺麗なデザインを作っても、実際のデータと合わないことがあります。ときには、デザインのコストが無駄になってしまうことも。
実際のデータは動的に変わっていくものであり、その値がいつも綺麗だとは限りません。そのため、データがデザインの犠牲となって崩れないように気をつける必要があります。
根本的にUIデザインとは、データを整理し、操作方法を伝えるもの。実際のデータを使用することは、デザインをするときの対策として有効です。

作成したデザインがちゃんと統一されて想定通りに動くかどうかを確認するため、必ず実際のデータを使って作ります。
実際のデータを使わないで綺麗な仮想データを入力すると、リリース後にデザインが崩れたりページが表示されなくなったりすることがあります。

UIデザインを崩しがちなデータ

アプリやサイトの種類によって使うデータは異なりますが、デザインを崩しやすいデータをいくつか紹介します。

ユーザが投稿した画像

デザインのモックアップを作成するとき、綺麗なstock photographyやグラフィックを使うことはありませんか?
しかし、ユーザはプロのフォトグラファーではありませんから、実際に投稿するコンテンツは解像度が低かったり構成が悪かったりと、それほど綺麗なものでないことも多いです。

ですから、ユーザが画像を投稿するサービスやアプリなどの場合は、デザインをするときにその点も含めて考えないといけません。つまり、デザイナーとして、ユーザが微妙な画像をアップロードしてもいい感じに表示しなければならないのです。
もちろん、想定外の画像にも気をつける必要があります。
余白の多い画像が投稿されてもUIは大丈夫か。写真に文言を重ねたとき、文字は読めるのか。サービスやサイトの背景が白であれば、画像に枠を付けた方がいいのか。
さまざまな問題が浮き上がってくると思います。

そんな画像に関するよくある問題はこちらです。

  • 暗い画像や白い画像は、周りのUIに対してどう見えるのか?
  • 画像上に文字を載せたとき、ちゃんと読めるのか?
  • 荒かったり解像度が低かったりする画像はどう見えるのか?
  • UIの大事な要素が画像によって見づらくないか?

ユーザの名前

人の名前にも想定外のデータが出てくることはよくあります。冒頭で説明したメンバーページがいい例ですね。
サービス内などのユーザ名であればデザインが崩れないように入力制限をかけられますが、人の名前であれば無理に制限をかけることはできません
大事なのは、自分の想定外の名前を持つユーザがいることを忘れないことです。

名前データを取り扱う際に気をつける点はこちらです。

  • 文字数が多い場合
  • 文字数が少ない場合
  • 漢字やひらがな、カタカナ、英字それぞれの場合と、それらを混ぜる場合
  • 絵文字やその他シンボルを使う場合
  • 外国人名の場合