4/28(Sun)
ーー目次ーー
１、「UIデザイン」とは？
２、UIデザインの引き出し
３、「UIデザイン」をさらに学んでみよう！
４、スクーなら動画でわかりやすく学べる！
ウェブデザイナーとして２、３年経験したけど、感覚だけではなく、ちゃんと設計してデザインしたいという人も多いのでは？
ひとつのサービスだけに関わり続けたり、複数関わっていてもお仕事の幅が狭くなったり、いざ新しいものを手掛けようとしても、つい同じような表現をしてしまったりしている...ということもあります。
そんな時は、“ある架空のテーマに沿ったUIを考える”という課題に取り組むことで、これまでとは違った思考と表現の方法が身につける授業がオススメ。UIデザイン上での表現の引き出し（アイデアソース）を広げることができるかも！？
そもそ「UI」って何の略なんでしたっけ？
ユーザーインターフェイス（User Interface）の略語ですね。Webサイトなどのデザインやフォントなど、ユーザーの目に触れる部分のことを指します。そして「UIデザイン」は、Webサイトやアプリの利用者が、快適に使いやすく設計することです。
たとえば、文字が見にくい、写真が多くてごちゃついている、申し込みボタンが見つからないなど、UIデザインによってユーザーの満足度は大きく変わりますよね。
UIデザインの腕を磨きたいなら、実際にやってみることが上達の近道。授業を見ながら一緒に学んでいきましょう！
山本 健人 株式会社カウンターワークス 取締役CDO
1985年生まれ。青山学院大学中退。学生時代よりフリーランスのデザイナーとして活動を開始し、数多くのスタートアップや事業立ち上げに関わる。2013年にスタートアップや事業立ち上げに特化した制作会社THE CLIPを創業、2015年にカウンターワークス取締役CDO就任、2016年にTHE CLIPをオープンエイトに売却し、現在に至る。Twitter:@kentymmt
大杉 洸揮 株式会社alma リードデザイナー
株式会社almaリードデザイナー。神戸大学在学中に、UIUXデザインを学習しデザイナーになれるサービス「Cocoda!」を、創業メンバー唯一のデザイナーとして立ち上げ。Cocoda!のUI・UXデザインを担当しながら、UIの学習コンテンツ開発も担う。その他スタートアップのデザイン支援も積極的に実施中。書道は師範代。
大杉先生：お題の解説なんですが、お題の形式が架空のアプリを作ってということに対して、ユーザーが自分だったらこう考えるなというものをデザインとして作って提出していくという流れなんですけれども、今回がEギフトアプリのUIをデザインするという感じになっています。
具体的には、Eギフトアプリを作るにあたって、誰が使うサービスなんだろうというところから始まって、誰がどういうシーンで使っていくのか。じゃあ、具体的に使う時にはどういうステップで体験を作っていくのか。最後にそれを全部デザインに落とし込んでいったらどうなるのかを実際にデザインしてもらうっていう形になっていますね。作ってもらったものを提出していただいて、こちらでピックアップして健人さんにフィードバックしていただくという流れになっています。
aohwiiiiiさんの作品
山本先生：平均して、皆さんどれくらい時間かけてるとかあるんですか？
大杉先生：これぐらいの、まるっとサービスを作るとかやったら、短くて3時間とかで。もっともっと、時間かけると1週間考えるって作るとかもいらっしゃいますね。
山本先生：ぱっと見の印象だと、結構ビジュアルはある程度出来てるのかなぁ、という印象は受けましたね。いわゆるUIのよく使われているみたいなセオリーとか、大きいメインビジュアルがあって、カード形式でというのができてるかなぁと思います。どっちかっていうと、ギフトサービス、カタログギフトみたいなサービスなのかなぁ。受け手がコースから自分のが選べる。その辺はなかなか面白い着眼点なのかなぁと思いました。
受講生代表：修正して炊いたものがこちらですね。提出いただいたものが左側、修正していただいたものが右側になります。
山本先生：全然大したことやってないんですけど（笑）。良かったなと思ったのは、ちゃんと次に何があるようだということを示している。ちょっとだけ見せたりとか、ウェブでもここでカルーセルみたいにあるというのは、あれ全然見られないんですよね一応入れとかなきゃいけないからみたいに入れておかれるけど、スマートフォンで行ったらハンバーガーメニューみたいな。会社の事情で入れるみたいな。その辺は気が利いてるなと思いました。ひとつ気になったのが、メッセージの部分で２つあって、この感じのUIだとこっちもコメントしてこっちもコメントして次もコメントして…みたいな感じになっちゃうかもしれないなあと、ちょっと意地悪な指摘なんだけれども思いました。
ギフトサービスって色んな文脈があるので難しいと思うんですけれども、この場合は会社の表彰とか、誕生月祝いとかで使う場合が多いということだったので、ひとりで決めて送るっていうよりは、友達みんなとか、会社の同僚みんなから選んで送る場合があったのかなと、その場合はメッセージを先にみんなで書いて、最後に決済をすると言う方が自然なのかなと思いました。
大杉先生：その流れはたしかにそうかもしれないですね。お金払ってからギフトとメッセージを払うというよりかは全部揃ってから決済していくという流れですね。
山本先生：ちょっと細かいんですが、修正した点で言うと本当にシンプルに、この辺のナビゲーション上と下のタブのナビゲーション、これをアップルのインターフェースガイドラインの通りに直したぐらいです。あとはこれをこっちに移したとかぐらいなんで、全体のUIの設計としてはよくできていると思います。
基本的にどのアプリでもあるだろうな、みたいなパーツに関しては1回ガイドライン通りに作った方が、もっと実際のコンテンツ自体に集中できるのかなーと思うので、その辺は素直に従って良いところは従った方がいいというところはあるのかなと思います。
大杉先生：ガイドラインは、アップルがiOSのスマホアプリはこういう風なアプリでデザインしてくれというものを定義したもので。
山本先生：そうですね、あのまま取ってきてもいいぐらいで。デザインキットみたいなものですね。ダウンロードできるので、色んなXDだったりSkitchだったり、それにダウンロードしてみていただいたりすればいいかなと。
大杉先生：結構自分でUIを作ってしまいがちなところがあるんですけれども、こういうもう定義された、色んな人が見たことがあるというUIを使うことで、ここを押したらこうなるなという、直感的なUIが作れるので、その辺りはやった方がいいかもですね。
山本先生：アイコンとかってみんなどこで探してるんですかね？ 俺はFont Awesomeで毎回使ってます。便利です。
大杉先生：僕はマテリアルアイコン派です。
山本先生：半分思考停止（笑）なんですけど、便利なんですよね。便利なものは使いましょうということで。
受講生代表：こういうパターンを作るときにつまずきやすいところ、迷われたんじゃないかというところってありますか？
大杉先生：僕が気になったのは、このトップページ10代・20代・30代という風に分けちゃうみたいなところが斬新な感じですね。いつ送るのか、ありがとうの日とか結婚の日とかそういうシーンとかあると思うんですけれども、ここが結構ミソになってそうな感じですね。
山本先生：この先に何十代まであるのかってのも気になりますね。
大杉先生：何を送るのかを絞り込むためにアシスト的な感じでジャンル切り替えを置いてあげるのはオススメですね。
受講生代表：今アイコン何使ってるかという質問に対して色々コメントが来ていますね。
コメント：「iOS UIキット配布サイト」
「Font Awesome」
「1度ガイドライン通りに作ってからデザインし直す」
「先生のやつには『すべて見る』が足されていますね、もっとあるのがわかる」
山本先生：アイコンだけだとなかなかわからないですね。だからその辺だけはちょっと大袈裟な方が、そっちに行ってくれる率とかは上がりやすいっていうのはあります。
大杉先生：ひとつ指摘していただいていたメッセージのとこの『次に書けちゃうんじゃない？』みたいなやつは、基本的にメッセージは一つのカードにまとめておくものだけど、複数書けちゃうみたいな問題みたいな感じでしたっけ。
山本先生：多分カードを選ぶところとエリアを別にしたらいいのかなぁという気がします。
受講生代表：その他にここの部分、ポチポチポチっていうところは消されてますね。
山本先生：ああ、消しちゃいましたね。
受講生代表：これはどういう意図があるんですか？
山本先生：消しちゃいましたね。無いよりはあった方がいいと思います（笑）
大杉先生：画像は複数あるということがわかるようにするためのUIなので、ここに画像の切り切れ端が見えていて、続きがあることがわかるのでシンプルにしてしまってもいいかもしれないですね。
修正ポイントの総評
山本先生：そうですねー、つまんない話なんですけど、ガイドラインはすごい大事なので、なるべく読むというか辞書的に使ってもらえばいいんで、読み切ったから偉い！というわけではなく僕も作るたびに見直すんで、辞書みたいな感じで読んでいただければと思います。
それもiOSやAndroid、Facebookアプリとか、また違うかなと、そういうことも意識しながらというのが大事かなと思います。あとはエラーとか、考えるのも面倒くさいんですけれども、実際の業務では意識しないとなので、エラーになると画面がガチャッとなっちゃうと困っちゃうんで、そこも意識していけるといいかなと思います。
あと、使えるもんは使う。Font Awesomeもマテリアルアイコンも使えるものは使う、それでいいかなと思います。具体的に、UIとかビジュアル鍛錬をしたいとなったらデイリーUIとかの方がとっつきやすいかなと思います。こういうのは思考の訓練みたいなのかなと思います。
受講生代表：アイデアは変なもので良いと最後に書いてありますけれども（笑）
山本先生：おもしろアイデアとか作ったりしますよね。45分でお題を作りきるっていうのを定期的にやってるんですけれども、変なやつを作ってやってます。飲み友を探せるアプリとかやってますね。
受講生代表：変なものを作るのも思考のトレーニングとしていいんですかね。
山本先生：そうですねー、まぁ楽しんで作ろうっていうところですね（笑）
受講生代表：それでは、課題に対しての、デザイナーの解説ということで、山本先生もこのテーマで作成していただいたということでご紹介します。
山本先生：これ怒られるかどうかギリギリだと悩んだんですけど、キフティというちょっと聞き憶えがあるような気もするんですけれども、架空のサービスなんで（笑）
この辺は普通のギフトアプリで、商品選んで、支払いはアップルペイだけで、「ありがとう
」みたいな感じで閉じました、と。ここからが肝なんですけれども、緑のメッセージングアプリをみなさん使ってると思うんですけども、ギフトを受け取れるぞとメッセージが来る。「うわ、マジダイエット中でソフトクリームなんか食いたくないわ」っていうこともあると思うんです。でも、受け取らないわけにいかないと思うんです。
そこで、ユニセフとか奨学金の学生基金とかアフリカの水をきれいにするとか選べるわけなんですよ。「いったん、ユニセフにしておこ、スマン！」ってなるんですが、贈った側は（相手が）何を選んだか分からない。変えられてもちょっと「…ごめんね。ダイエット中だったね」みたいになるじゃないですか。だから余計なことはわざわざ伝える必要がないという感じで、ありがとうと言う言葉は伝えるけど、そこで終了すると。肝の機能が他社のサービスで、からあげくんとかめっちゃ貰った時にそのURLを入れて押すと寄付に変えられるみたいな機能があったらいいんじゃないかなーと思いました。
大杉先生：いいですね、結構おもしろいですよね。
山本先生：実際（ギフト）使えなくて終わっちゃった経験とかあったので。それを寄付するっていうのはそこで善意というか良いことという俺の点数稼ぎなのかもしれないんですけど、商品あったのに（期限切れで）無くなっちゃって「あれ？」みたいな、誰が得したんだっけ？ってなった時にちょっとだけ違和感があるなと思ったんで。ちょうど２週間前くらいにエミレーツ航空のマイルが12000円位ありますって来たんだけれども、乗らねーよみたいな（笑）何か変えられるのかなと調べたんだけど、何も変えられなくて。最後にエミレーツ財団に寄付するというのがあって、それいいじゃん！と思ってパクリました。
大杉先生：僕もおもしろいなと思ったのは、このお題ってギフトを送りたいなってなって、送って相手に届くまでを体験として切り取ってやってると思うんですけれども、そうじゃなくてもらった後にどう感じるか？とか、そのもらった後にどういう風にギフトを使っていけるのかっていうところを切り取っているのが面白いなぁと。寄付というアイデアを繋げたのがおもしろいんですが、どういうステップで考えていったみたいなのはあったりしますか？
山本先生：アイディアは何でもいいっていうか、実際に実現度がめちゃめちゃ難易度が高いものでもいいし、そんなこと作ったって１円も儲からないみたいなものでも別に良くて、自由にこんなのあったら面白いんじゃないかなぐらいの感じで考えたりすると、それで自分のモチベーションも、作る時に上がるそういう感じでいい案出そうという風に考えなくてもいいかなという風に思いました。
大杉先生：もっとラフにアイデアを出していってということですね。
山本先生：ひとつボツ案であったんですけれども、街中とかで車のサービスエリアとかにある1000円ガチャみたいなWiiが当たる！みたいな、でも実際はこういうのが入っている…あれを勝手に人に送り付けるみたいなアプリいいんじゃないかと思ったけど、あまりにもくだらなさすぎて今回はやめました、そのくらいのノリでもいいんじゃないかなーっていう。
大杉先生：アイデアをひたすら出すということですね。
表現の引き出しを増やす
コメント：「普段先生はどうやって表現の引き出しを増やしてますか？」
山本先生：難しいですよね、表現っていうのはどういうあれなのかな、デザインビジュアルデザインみたいなことなんすかね？
受講生代表：ビジュアルデザインとアイデアと、どちらもだとそれぞれどういう引き出しからですか？
山本先生：引き出しはUIとかだとまとめサービスみたいなのがたくさん有るんで、日常的にチェックしてます。あとは色んなところで言ってるんですけれども、普通に新聞を結構読んでます、２紙か３紙読んでます。
受講生代表：どんなところに注目しているんですか？
山本先生：全体的な世の中を流れみたいなのがわかるんで。それをデザイナーだったらデザインの知識だけあればいいというわけではもちろんないんで、それを、エンジニアでもディレクターでもいいし、ちょっとうっとおしい上司でもいいんですけれども、共通言語みたいなものが持てる接点が多い方奴ほど優秀になりやすいんじゃないかなみたいなところはありますね。あとは、煮詰まったら散歩するって感じですね、散歩。デザインとかに限らず、色んなものを見たり聞いたりするのはいいかなーと思います。
大杉先生：アイディアとかは自分ひとりだけで考えないことを大事にしています。アイディアを出して、色んな人に当ててみて、他の人からアイディアをもらう、引き出しを他のメンバーからもらったり。グラフィック面だとUI作りますとなったら似たサービスの機能をひたすら30分くらいさわりまくって引き出しを増やす、とかありますね。
山本先生：アプリランキングを上から50個ぐらいブワーっと全部ダウンロードして、上から順番に見ていったりとかもありますね。特定のテーマで画像（封筒とか）検索して、一番最後まで見たりもします。いいアイディアないかなーって（笑）
