抽象化するには手順を具体的に教えたほうがよかったと気づく。具体的にGoogleマップとMapアプリを抽象化しよう。Googleマップとマップアプリを抽象化させると、アプリの戦略が見えてくる。マップアプリの要素Googleマップの要素まとめ最近、学生の方数名にUIデザインを教えている。お互いちょっとした時間を作って1ヶ月だけテスト的におこなっているので負担が少ないようにしている。学生の方たちとは行政&学校のイベントを通して出会った。私がUXデザインの会社をやっているということもあり、UXデザインに関する質問をいくつかしてきてくれた。話を聞いていると、プロダクトをつくったり、UXデザインをしたいのだが、わからない部分が多い。そりゃあ、そうだよね。現役のデザイナーでも難しいと思っているところなので、すぐにはできないだろう。話をよく聞いているとコンセプトやペルソナなどを作ったり、そこで逡巡しているようだ。聞いてみるとUIデザインやプログラムなどのスキルはそこまで持ち合わせていない。最近、仕事の関係で出会った人のなかに、つくった経験はないけどUXデザイナーという肩書の人をたまに見かける。”デザイナー”の領域が広がっていることは喜ばしいことなんだけど、自分は考えてつくる人が好きなので、ある程度つくれるようになってほしいと思って、以下聞いてみた。「”UIデザイン”をトレースからやってみたらどうかな?考えたことを具体的なものにする方法を知っていたほうが得だよ」と伝えたところ、「UIの勉強をするという解決策があるんですね。いうことで教えることになった。実は自分も週1回トレースをしている。対象はアメリカのサービスで気になるもの。社長がやらなくてもいいのでは?という声も聞いたことがあるが、趣味だw30minくらいだし。ねらいはアイデアを実装するときの手数を持っておくことで、お客さんとの打ち合わせが楽になるからだ。このパターンの時はこれにしようという自分のライブラリみたいなものをためている。トレースの効果はいろんなところで語られているので気になる人は検索してほしい。デザイン教育(基礎)についてのメモ少し前(昨年の冬)に、IT・スタートアップ界隈での「デザイン教育」や「デザイナー教育」について考える機会があり、その時に検medium.comトレースの効果をここにもざっくり書くと・ツールに慣れる・HIGやマテリアルデザインのルールに気づく・デザインの4原則に気づく・プロダクトの意図に気づくあたりが挙げられるだろう。トレースを1〜2回やってもらうと、ツールの慣れやガイドラインのルールを意識する、整列を意識するということができるようになってきたようだ。抽象化するには手順を具体的に教えたほうがよかったと気づく。トレースに慣れてくると課題に挑戦したいとなってくる。やってみようとなった。「xxなアプリのトップ画面をデザインしてみて」というお題を出してみたが苦戦したようだ。苦戦の理由を考えると、いろいろ挙げられるのだが、自分としては「プロダクトの意図」をレイアウトに落とし込めてないのだろうと思った。トレースをした時に、具体と抽象を意識していれば、もう少しうまくできたかも?という振り返りだ。いえば、有機体と分子を意識できていない。BLOGDeNAのデザイナー・エンジニアによるブログです。DeNAのUI/UXデザイン設計やフロントエンドのノウハウなどを、余すとdesign.dena.comつまり、近い意味合いをもつパーツを用意できない、または配置できない感じだ。トレースをしてもらっている時に感じたのだが、パーツのピクセルに意識がいっているのだが、コンポーネントの間隔への意識がちょっと弱いかも。いうことで、以下具体的な方法を書いておく。具体的にGoogleマップとMapアプリを抽象化しよう。彼らに伝えそこねたことをここに書いておく。2つの地図アプリを抽象化して比較することで、意図や意味を読み解きやすくなるよ。具体的な方法はトレースをする時にモノトーン化すること。することで、配色を意識することなく画面を見ることができる・どんなパーツがあるのか?・どんなサイズか?・FAB(浮いているボタン)=重要なボタンは何か?・どのエリアにあるのか?が意識できる。こまかいサイズ調整や表現を練習したい時はこの方法だと適さないかもしれないが、製作者の意図にフォーカスするうえでは便利な方法だ。ちなみに、自分の場合はトレースをしたら、その横に画面の狙いをテキストでまとめている。具体を抽象化するというのは、今回のケースでいえばデザイン工程をひとつ前のものに巻き戻すことと言っていいだろう。Googleマップとマップアプリを抽象化させると、アプリの戦略が見えてくる。先ほど、抽象化してアプリの狙いを読み解いてほしいと書いた。今回はGoogleマップとマップアプリを並べてみて、狙いをさぐってみよう。マップアプリの要素まず、マップアプリの要素の少なさに注目してみよう。ボタン・天気情報スマホの銀座一丁目、つまり画面の下にある親指で触りやすいエリアには「場所をさがす」エリアを大きくとってある。右上に地図設定と現在地のボタンがある。補足として天気情報がある。ユーザーにはまず場所をさがすことに注力してもらいたい。アプリのお手本のような方針だ。トレース時には動きも含めてここで確認したり、ガイドラインを参考にする方法を身に着けておいてほしい。Googleマップはマップアプリと比較すると要素が多いのがわかるだろう。大事にしているボタンは地図アプリなので、経路検索を右下のFABにしている。マップアプリとの一番の違いは下にメニューバーがあることだ。周辺スポットやおすすめなどメディア機能だ。抽象化して比較をするとここにGoogleマップの大きな狙いがあるのが読みとける。Mapとしてもかなりのアップグレードになるのでは。Instagram上でダイレクト予約ができるようになったwww.gizmodo.jp地図でお店を探したら、店舗ページや特定メディアにいかなくてもアプリ上ですぐに予約できる機能だ。ユーザーにこんな良いお店があるよ。口コミはこんな感じだよ。いう情報をアプリで伝えることで、予約の利便性をあげる狙いがある。iOSのマップアプリもそれに習って、店舗情報を増やしているように思うが、口コミ情報の多さ=店舗の比較判断情報はGoogleマップのほうが圧倒的だ。Googleマップは場所をさがせるという一番大事な機能の次にお店(場所)に出会う機会を増やすという意図を持っているのでトップ画面の要素がマップアプリよりも多いのだろう。ちなみに、ゼンリンとの提携がなくなったことで地図精度が落ちた。話はまた別軸の話ということで。まとめ結論としては、トレースをする時にも目的と手法があるので狙いをもって取り組んでほしい。制作者の意図を掴むときは、モノトーン化すれば読み解きやすくなる。表現方法を学習したいときは、効果の付け方やレイアウト方法、色などを忠実に再現する方法を試してほしい。先日のフィードバックで抽象化のステップを飛ばすと、言語化や要素の近接化部分に課題があることがわかったのでまとめてみた。具体と抽象をもっと知りたいという人は以下の本を参考にしてほしい。Rootの西村さんがtwで勧めていたので、「確かに良い本だなー」と思い出した。時間があったら読み返そう。具体と抽象amzn.totwitterでもたまにつぶやきます。UXデザイン会社ajtwitter.comデザイナーやエンジニアなど募集中です。アジケ株式会社アジケの採用情報をご案内しています。UXデザイナー、UIデザイナー、エンジニアの求人情報はこちらをご覧下さい。ajike.co.jpダウンロード#学習#UIデザインこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。ありがとうございます。スタッフとコーヒーいただきます。サポートをする「スキ」を押してクリエイターを応援しよう!私もスキ押すので、記事教えてくださいね。デザイン組織や経営に関するnoteを書きます。記事まとめデザイン系の記事を収集してまとめるマガジン。ついた記事などをチェックしています。私もスキ押すので、記事教えてくださいね。