[モバイルUIデザイン]デザインは地味な作業の連続でできている

デザイナーの たなか ゆきこ です。

ITの世界にいて当然のように入ってくるカタカナ語。 友人と話す時にうっかり使い「何を言っているの」と言われ、 ちょっと恥ずかしかったので、なるべく日本語で書くことを意識。

今回は、モバイルのUIデザインのコツを書いていきます。 あっ既に「モバイル」「UI」という言葉がカタカナ語だ。

前提

基礎は知っておきましょう。

• iOS Human Interface Guidelines
• Android の Material design

※英語版が先に変更されるので、できれば英語版を読む力があるといい。私は読めないので、日本語版と英語版を見くらべて、翻訳と辞書で頑張ります。翻訳が遅れた場合、日英語版でかなり違ったりする場合もあります。

聞き取り

聞き取り（＝ヒアリング）。 デザイン全般に言えるのですが、皆さんは何を作るのか不明なものを、製作できるでしょうか。

場合によってはお客様のところに、いきなり製作物が出てくることもあるでしょうが、それは「お客様（＝クライアント）のお客様が、本当に求めるもの」だったでしょうか。

目的がない場合、どうなった場合いいのか悪いのか判断できないため、目的不明のとりあえずの成果物が出来上がります。一応、仮定で「こんな人がこういう目的のために使用する」という定義で作っているはずですが、その定義が製作側と依頼側でずれていると、両者とも幸せになれない結果に。

こちらにも話を聞きだす能力、または本気になってもらうコミュ力 が求められます。 その辺りは、ずっと修行。偉そうに書いてますが、全然です。一生修行な予感。

なぜですかという質問

理由を聞きたいための質問。気をつけておかないと、やってしまがちです。 この言葉は「否定されているように聞こえるのでやめてください」と言われた過去があります。

「なぜ」と聞くのは避け、違う方向から攻めましょう。

デザイナー同士などでお互いが「これは否定ではなく純粋に聞いています」という認識があれば、「なぜですか」と聞くのはアリかも。昔デザイン学校やデザインの会社にいたときに、生徒同士・その場にいたデザイナー同士の作品批評で「理由を聞く」というのがあり、「なぜ」質問をして、普通に答えていた。そういった土台がある人は以外とすんなりと受け入れてくれるような気がする。

もっと上手なやり方は、それぞれではないでしょうか。独自に腕を磨く方法しかわからないです。精神と時の部屋で修行したい。

調査

ここに半分以上の時間を持っていかれます。

みなさんがよくイメージする Sketch とか Photoshop とか Illustrator の作業は、『最後』です。

上記が派手で目に見えるため、デザイナーの仕事は上記のみと思われていることが多いですが、

思考時間は、デザイン時間に含まれます。

競合調査

競合アプリがあれば、ダウンロードして使ってみる。何を実現できるのか、ユーザーに何をさせたいと思っているのか、何が実現できるから使うのか　などを確認します。

ユーザー調査

実際にそのサービスを使用するユーザー（＝エンドユーザー）の行動・シーン想定・そのサービスを使う目的などを可視化。

アプリを提供したいお客様（＝クライアント）の目的のみを実現してしまうと、実際に使用するユーザーは別のことを望んでいたということがあります。

ユーザー調査は、お客様との関わり具合で、うまくできたりできなかったりもします。

しかし、ここがわからないと苦しむので、理解してもらう、協力してもらうのを自分が倒れない程度に頑張ろう。

頭の中だけで考えるのをやめよう

頭の中だけでやっていると、時間だけが進んで全く進まないこともあります。

そして当初の目的を忘れがちになります。

わたしは頭ができがそこまで良くないのを自覚しておりますので、書きだします！付箋に！考えているすべての事を！書いていることをまとめていくと、なんとなく目的に必要なモノが見えてくるんじゃないでしょうか。

ワイヤーフレームを書く

UI作成は、まだです。時間をかけ綺麗に作ってしまっては、後で修正があると二度手間になるので、二度手間にならない程度のラフなワイヤーを書きます。

私は、手書きで書きます。 お気に入りは、Project Paper B4 5ミリ方眼。

スマホ用ペーパープロト専用の台紙なんかもあるみたいですし、 自分でオリジナルを作るのもいいと思います。 スマホ用ペーパープロトタイピング・パッド（iPhone5/5s）

ラフから Sketch、 Illustrator の人もいます。これは好み。人それぞれ使いやすい道具が違う。

ワイヤーでプロトタイピングをします。ここで、おかしいなと思ったら、シーン想定に戻ったりします。これを繰り返します。

ちなみに、prott を使わせていただいてます。

Adobeから出た Adobe Experience Design も気になりますが、これはまた別で検証したい。

上記が終わってから、ようやく画面上の配置デザインです

まとめ

モバイルUIデザインとタイトルに書きながら、この時点で絵がない。

タイトルにも書いた通り、地味な作業の連続でできてます。

ただ、その地味な作業が終わった瞬間の達成感や、考え抜いた自分の成長などがご褒美とかではないでしょうか。 長くなりすぎたので、続きで実際の作成のコツを書こうと思います。

あくまで、わたしのコツであり、理想ではこういう手順を取りたい。業務上手順を踏めないこともありますが、最低限やっておきたいことばかりです。もっと良いやり方があるかもしれませんが参考までに。