こんにちは！
新卒デザイナー研修物語の第2話を担当するのは、最近日本酒にハマっている小谷です。

気になる第1話はこちらから

今回はUI設計の研修についてです。

研修の内容について

課題内容に入る前に、UIとは一体何なのかを説明します。
UIとはUser Interfaceの略称で、ユーザーとプロダクトやサービスとの接点（インターフェース）のことです。インターフェースとは主にパソコンやスマートフォンなどのデバイスを指します。
UI設計は、ユーザーがプロダクトやサービスをスムーズに使えるように設計する、重要な作業です。

今回の研修で取り組んだ課題は、ワイヤーフレームとUI設計書の2つ。それぞれの課題を説明します。

その1　ワイヤーフレーム

ワイヤーフレームとは、レイアウトや機能が伝わるラフスケッチのことです。
ラフスケッチとは言っても、クライアントや他のプロジェクトメンバーに伝わりやすいものでなければなりません。私がワイヤーフレームを作成したのは、学生時代に一度だけだったため、初めて知ることが多くあり驚きの連続でした。作業を進める中で一番難しいと思ったのは、ワイヤーフレームとデザインとの境目です。分かりやすく丁寧に作りたいという思いが強すぎた結果、所々でワイヤーフレームの域を出てしまっていました。

こちらは同期のメンバーが制作したものです。

私は伝わりやすいワイヤーフレームでとても良いと思ったのですが、先輩のレビューを聞いて驚きました。

「ここまでデザインされていると、クライアントにデザインのイメージまで伝わってしまい、
次のフェーズのデザイン提案がしづらくなる」

その視点はなかったので、かなり衝撃的でした。
デザインとの境目はいったいどこにあるのか。私はこう考えました。

・ワイヤーフレームとは、アプリの機能や全体像をクライアントに伝えるためのもの
・デザインとは、実際にアプリになった時にユーザーに画面全体の情報を伝えるためのもの

以下の2つのワイヤーフレームを参考に、具体的にお話しします。

どちらのワイヤーフレームにも、赤い矢印が指す部分に画像が配置されていますが、左側のようにプロフィール画像と他の画像を差別化すると、より伝わりやすくなります。私は右側のようなものを作成していたのですが、左側のような表現方法もあるのかと驚きました。

青い矢印の部分は、右側の方にはアイコンがあってより良い表現のように見えます。しかし、左側のようにアイコンがなくても、遷移先を文字で記載すれば丸と組み合わせるだけで十分だと気付きました。実際にアプリになった際は、遷移先を理解しやすくするためアイコンが必要ですが、ワイヤーフレームの段階ではアイコンを配置する必要はありません。アイコンを作成する手間も省けます。

この2つのことに気付いた時はすごく納得したのですが、ワイヤーフレームを作成する回数を重ねないと難しいことだと思いました。また、プロジェクトによって作成方法や作り込みの度合いは異なると聞いたので、臨機応変に対応する力が必要だと感じました。

その2　UI設計書

UI設計書とは、画面の表示内容や挙動などを記載した資料のことです。プロジェクトメンバーだけではなく、クライアントとも共有するものなので丁寧に記載する必要があります。

私は今までUI設計書の存在を知らなかったので、かなり苦戦しました。参考資料のUI設計書を見ながら制作を進めていたのですが、なかなか思うように進みませんでした。

制作を進める上で難しいと感じたのは、情報をいかに読みやすくまとめるかということ。
設計書には、遷移先のページ名・遷移時の挙動・ボタンを押下した時の状態変化・状態変化の条件など盛り込む情報が多く、どうすれば伝わりやすくなるのかすごく悩みました。

情報のまとめ方に頭を悩ませていましたが、参考資料を読んでいてあることに気付きました。
それは、文章が短いことです。
「タップをしたら再読み込みをする」は「押下で再読み込み」のように、最小限の言葉で表現されていました。そういった表現方法を知らなかったため、大きな学びを得られました。しかし、文章を短くしようにも適切な表現が分からず、再び頭を悩ませることに……。過去のUI設計書やほかの人の成果物を参考に、よい表現を模索しながら制作を進め、なんとか完成できました！

最後に

UI設計の研修を通して、私には伝える力がまだまだ足りないなと感じました。無意識のうちに「このように表現すれば伝わるだろう」という慢心があり、丁寧かつ確実に相手に伝えるための表現方法を模索せずにいました。伝わりやすく簡潔な表現を模索することで、結果的にデザインの質を上げられるのだと思います。デザインを制作する際に限らず、文章を書く際も「どうすれば相手に伝わるのか」を常に考えることを心掛けたいです。

最後まで読んでくださりありがとうございました。

次回は第3話「アイコン作成」です。こちらをご覧ください。