UIデザイナーが具体化と抽象化を練習する方法

最近、学生の方数名にUIデザインを教えている。

お互いちょっとした時間を作って1ヶ月だけテスト的におこなっているので負担が少ないようにしている。
(自分の限界が1ヶ月だったから…じゃないぞw)

教えることになった背景

学生の方たちとは行政&学校のイベントを通して出会った。

私がUXデザインの会社をやっているということもあり、UXデザインに関する質問をいくつかしてきてくれた。

話を聞いていると、プロダクトをつくったり、UXデザインをしたいのだが、わからない部分が多い。とのことだ。

そりゃあ、そうだよね。
現役のデザイナーでも難しいと思っているところなので、すぐにはできないだろう。

で、話をよく聞いているとコンセプトやペルソナなどを作ったり、そこで逡巡しているようだ。

ほほー。

で、もう少し聞いてみるとUIデザインやプログラムなどのスキルはそこまで持ち合わせていない。

なるほど。

最近、仕事の関係で出会った人のなかに、つくった経験はないけどUXデザイナーという肩書の人をたまに見かける。

もちろん、”デザイナー”の領域が広がっていることは喜ばしいことなんだけど、自分は考えてつくる人が好きなので、ある程度つくれるようになってほしいと思って、以下聞いてみた。

「”UIデザイン”をトレースからやってみたらどうかな?考えたことを具体的なものにする方法を知っていたほうが得だよ」と伝えたところ、「UIの勉強をするという解決策があるんですね。やってみたいです」。ということで教えることになった。

トレースを見た感想

実は自分も週1回トレースをしている。
対象はアメリカのサービスで気になるもの。

社長がやらなくてもいいのでは?という声も聞いたことがあるが、趣味だw30minくらいだし。

ねらいはアイデアを実装するときの手数を持っておくことで、お客さんとの打ち合わせが楽になるからだ。

このパターンの時はこれにしようという自分のライブラリみたいなものをためている。

で、トレースの効果はいろんなところで語られているので気になる人は検索してほしい。

トレースの効果をここにもざっくり書くと

・ツールに慣れる
・HIGやマテリアルデザインのルールに気づく
・デザインの4原則に気づく
・プロダクトの意図に気づく

あたりが挙げられるだろう。

で、トレースを1〜2回やってもらうと、ツールの慣れやガイドラインのルールを意識する、整列を意識するということができるようになってきたようだ。

抽象化するには手順を具体的に教えたほうがよかったと気づく。

そして、トレースに慣れてくると課題に挑戦したいとなってくる。じゃあ、やってみようとなった。

で、「xxなアプリのトップ画面をデザインしてみて」というお題を出してみたが苦戦したようだ。

苦戦の理由を考えると、いろいろ挙げられるのだが、自分としては「プロダクトの意図」をレイアウトに落とし込めてないのだろうと思った。

トレースをした時に、具体と抽象を意識していれば、もう少しうまくできたかも?という振り返りだ。

Atomic Design でいえば、有機体と分子を意識できていない。
(言葉が難しいのでコンポーネントと思ってください)

つまり、近い意味合いをもつパーツを用意できない、または配置できない感じだ。

そして、トレースをしてもらっている時に感じたのだが、パーツのピクセルに意識がいっているのだが、コンポーネントの間隔への意識がちょっと弱いかも。とも感じた。

ということで、以下具体的な方法を書いておく。

具体的にGoogleマップとMapアプリを抽象化しよう。

彼らに伝えそこねたことをここに書いておく。

2つの地図アプリを抽象化して比較することで、意図や意味を読み解きやすくなるよ。という話だ。

具体的な方法はトレースをする時にモノトーン化すること

こうすることで、配色を意識することなく画面を見ることができる

・どんなパーツがあるのか?
・どんなサイズか?
・FAB(浮いているボタン)=重要なボタンは何か?
・どのエリアにあるのか?

が意識できる。

こまかいサイズ調整や表現を練習したい時はこの方法だと適さないかもしれないが、製作者の意図にフォーカスするうえでは便利な方法だ。

ちなみに、自分の場合はトレースをしたら、その横に画面の狙いをテキストでまとめている。

具体を抽象化するというのは、今回のケースでいえばデザイン工程をひとつ前のものに巻き戻すことと言っていいだろう。

Googleマップとマップアプリを抽象化させると、アプリの戦略が見えてくる。

先ほど、抽象化してアプリの狙いを読み解いてほしいと書いた。

今回はGoogleマップとマップアプリを並べてみて、狙いをさぐってみよう。

マップアプリの要素

まず、マップアプリの要素の少なさに注目してみよう。

・場所を探すエリア
・地図設定
・現在地ボタン
・天気情報

スマホの銀座一丁目、つまり画面の下にある親指で触りやすいエリアには「場所をさがす」エリアを大きくとってある。
そして、右上に地図設定と現在地のボタンがある。補足として天気情報がある。

潔い。

ユーザーにはまず場所をさがすことに注力してもらいたい。ということだろう。アプリのお手本のような方針だ。

パーツの大きさはiOS標準のアプリなので、Human Interface Guideline そのまま。

トレース時には動きも含めてここで確認したり、ガイドラインを参考にする方法を身に着けておいてほしい

Googleマップの要素

一方、Googleマップはマップアプリと比較すると要素が多いのがわかるだろう。

一番大事にしているボタンは地図アプリなので、経路検索を右下のFABにしている。

そして、マップアプリとの一番の違いは下にメニューバーがあることだ。
しかも、周辺スポットやおすすめなどメディア機能
だ。

そう。抽象化して比較をするとここにGoogleマップの大きな狙いがあるのが読みとける。

近年、Googleマップは予約機能を強化している。

地図でお店を探したら、店舗ページや特定メディアにいかなくてもアプリ上ですぐに予約できる機能だ。

なので、ユーザーにこんな良いお店があるよ。口コミはこんな感じだよ。という情報をアプリで伝えることで、予約の利便性をあげる狙いがある。

iOSのマップアプリもそれに習って、店舗情報を増やしているように思うが、口コミ情報の多さ=店舗の比較判断情報はGoogleマップのほうが圧倒的だ。

だから、Googleマップは場所をさがせるという一番大事な機能の次にお店(場所)に出会う機会を増やすという意図を持っているのでトップ画面の要素がマップアプリよりも多いのだろう。

ちなみに、ゼンリンとの提携がなくなったことで地図精度が落ちた。とかの話はまた別軸の話ということで。

まとめ

結論としては、トレースをする時にも目的と手法があるので狙いをもって取り組んでほしい

制作者の意図を掴むときは、モノトーン化すれば読み解きやすくなる。

一方、表現方法を学習したいときは、効果の付け方やレイアウト方法、色などを忠実に再現する方法を試してほしい。

先日のフィードバックで抽象化のステップを飛ばすと、言語化や要素の近接化部分に課題があることがわかったのでまとめてみた。

具体と抽象をもっと知りたいという人は以下の本を参考にしてほしい。

Rootの西村さんがtwで勧めていたので、「確かに良い本だなー」と思い出した。時間があったら読み返そう。

twitterでもたまにつぶやきます。

デザイナーやエンジニアなど募集中です。



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

ありがとうございます。スタッフとコーヒーいただきます。

よろしければシェアもお願いします。
93

梅本 周作 / ajike

UXデザイン会社ajike/アジケのCEO。USEN MediaのCXOも兼任。 味気ある仕事をしたいと思っています/デザイン組織づくり/二地域居住/レゲエ好き/たまにがんばります😐https://ajike.co.jp/

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
3つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。