ソフトウェアエンジニアが CIID の IDP コース（17~19週目）に参加して学んだことをゆるりと共有します。今回（6/22~7/10）は GUI（Graphical User Interface）で、3週間に渡る長丁場の授業でした。アウトプットはアプリかつ一人プロジェクトだったので、なんとかコードを書いて実際に動くものを作るために頑張りました。
15週目の記事もあるので良かったら読んでみてください。(16週目はポートフォリオウィークで記事書いてません）
Day 71: 30 ideas
早速、初日に3週間に渡る今回の授業の課題が発表されました。その内容は、「インタラクティブなモバイルアプリを使って、自分が興味のあるストリーをデザインする」でした。今回は、コンセプトなどは評価外で、なるべく製品に近い Hi-Fi なプロトタイプに持っていくことがアウトプットになります。
この日はほとんど授業と課題の説明でした。宿題として、「自分の興味がある事を30個考えてストーリーにする」という課題が出されていました。僕は、個人的にマップ（地図）のインタラクションを作ってみたいと思っていたので、僕の希望から逆算してストーリーを考えていました。（本当は良くないと思いますが。）
30個のストーリーから、僕は今回の授業で「葛飾北斎」に絞ることにしました。日本の芸術を説明しながら、葛飾北斎を説明して、富嶽三十六景をマップのインタラクションを使って表現するつもりです。僕が考えたストーリーを下記に示します。
1. Japan was closed and separated from the other countries for 300 years. That's why Japan developed very unique painting style.
2. The most famous painting style is Ukiyoe, which is the woodblock print. The background to the spread of this art form among the general public is its mass production and its ability to lower prices.
3. Hokusai Katsushika was a famous Ukiyoe painter. He was born in Tokyo at 1730.
4. Thirty-six Views of Mount Fuji is a series of landscape prints. He was 73 years old when he completed the series.
5. After He died at 1849, His paintings were sold and taken to oversea. The wave, his most famous painting, is not in Japan but in New York. That's unfortunate. However, He became the most famous Japanese painter in the world because of that.
6. In 1999, Life magazine ranked him 86th on its list of the 100 most important people of the last 1,000 years, the only Japanese person to do so.Day 72: Create basic flow
この日は、自分のストーリーをアプリの画面に落とし込む日でした。とりあえず、完成度は低くても良いので一連のフローを作ることを求められました。更に、UI な基本的なテクニックを教わりました。授業で簡単な基本は教わりましたが、主に自分で調べながら UI を作っていくのがメインです。その参考にしたサイトを共有しようと思います。
Basics
Design pattern
Color palette
Typography
上記のサイトを参考にしながら、とりあえず僕は一連のフローを作りました。そのこの時点のアウトプットを下記に示します。
Day 73 ~ 75: Create interactions
この3日間は、前章で用意したフローにインタラクションを追加したり、UI の完成度をあげる日でした。考えたストーリーをモックでだいたい表現できるところまで持っていくことがゴールです。その時に、講師からもらったフィードバックを共有しようと思います。
Curiosity & Practice & Copying
最初から一つの UI に絞らないで色々な可能性を試してみて比較するのが良いと教わりました。日本にいた時は、UI を模索するという作業をしたことがなく、似ているようなサービスから UI を拝借して来て、それを実装するという開発をしていました。なので、今回の授業で UI を比較したり、改善したりということは、僕にとってとても新鮮でした。しかし、比較できるように細かく修正していくというイテレーションスタイルは Git に似ている概念なので僕はとてもやりやすかったです。
更に、細かく比較してデザインしていくのは、誰かにレビューをしてもらう時に有用だなと思いました。実際に講師とのレビューの時間でも「これはこっちの方が良いと思う。なぜなら〇〇だから。」などのようにレビューがシャープになるのを感じていました。
また、ゼロから自分で作る必要はないとも教わりました。既存のサービスやデザインパターンを組み合わせて、必要最低限の変更を自分のデザインに加えていくだけで十分だと教わりました。なので、僕のマップのインタラクションと UI は Airbnb の民泊探しのインタラクションと UI をそのまま採用しています。また、その他の UI も Google の Material design を参考にして作ってます。この段階のモックを下記に示します。この3日間で7イテレーションしてます。
Focus on Hi-Fi
この授業ではワイヤフレームを作らないで、いきなり実際の写真やコンテンツをいれて UI のデザインをすることを勧められました。なぜなら最初の段階から Hi-Fi を意識することで、改善のイテレーションを早めることができると説明されました。確かに自分でデザインしてる時もビジュアル化することで、どんどん次の改善ポイントが明らかにすることができました。その改善ポイントをメモしておいて、次のイテレーションで一つ改善するというように UI のデザインを行っていました。
また、Hi-Fi のプロトタイプにすることで、誰かからフィードバックをもらいやすかったと思います。実際にクラスメイトに見せてレビューを頼んだ時も Hi-Fi で作っているので、レビューのフィードバックが具体的かつアプリ自体の手応えがあるかも判別しやすいなと感じました。早く製品に近いフィードバックを得られるという点で、Hi-Fi を意識するのは有効と感じました。特に、今回のようにソフトウェアで完結するようなサービスは、ハードウェアとは違ってプロトタイプツールが揃っているので、Hi-Fi を意識して作った方が良いのだろうと感じました。
Day 76: Try Framer
この週からは Framer と Origami を使って、より Hi-Fi なプロトタイプの作成を始めました。この日に両方のツールの簡単な説明を受けて、それぞれが自分の好きな方でプロトタイプを作ることになっていました。僕はせっかくなので両方使ってみました。この日は、Framer を使ったので Framer の使用感を共有しようと思います。ちなみに、僕は両方初心者です。
Easy to basic interactions
授業を受けたのが6月29日ですが、6月に Framer のウェブができてそれを使いました。（なんというタイミング！）リンクを下記に示します。
簡単に特徴を説明すると、「フレーム」という概念が加わった Figma です。「フレーム」とはインタラクションの起点になるパーツです。このフレームに自分の思うようなインタラクションを付加してインタラクションを作って行きます。ここでデザインすると言うより、Figma と sketch のインポートをデフォルトでサポートしているので、自分の好きな方でデザインして、Framer でインタラクションを足すという使い方だと思います。
僕にとってはそんなに学習コスト高くなかったです。基本的なインタラクションだけなら、Figma の延長線上で使いこなせると思います。僕の勉強教材を下記に示します。
ただ、細かいインタラクション（マイクロインタラクション）を作るとなると、だいぶ様相が変わります。Framer の最大の特徴はコードが書けることです。Framer 内では TypeScript, jQuery, React が動きます。これらを使って独自のコンポーネントを実装して、マイクロインタラクションを実現して行きます。僕はこの日はコードは書きませんでしたが、Framer が用意しているデフォルトのインタラクション以外は基本的に React を書くことが必要になります。
僕の Framer に対する感想はエンジニア以外に使いこなすのは難しいかなと思いました。基本的なインタラクションだけで良いなら Framer で良いと思いますが、そうすると Figma や sketch でも頑張ればできるので無理やり使う必要はないと感じました。
Day 77: Try Origami
この日は、Origami を使ったので Origami の使用感を共有しようと思います。結論から言うと僕は Framer を使おうと思いました。
Difficult but so powerful
本当に偶然ですが、Origami も授業の先週に Origami Beta がリリースされていて、それを使いました。（なんというタイミング！）リンクを下記に示します。
簡単に特徴を説明すると、「アートボード」と「パッチ」という概念を組みわせてインタラクションを実現して行きます。「アートボード」は Figma や sketch で使う「アートボード」と同じです。「パッチ」は細かいインタラクションの欠片のことです。一つのアートボードに対して複数のパッチを付与するように組みわせて行きます。Facebook が買収しているデザインツールで開発体制とコミュニティーは強固だと思います。Framer と同様に、Origami でデザインすることはなく、Figma や sketch からインポートして来ます。Figma のインポートには Figma のプラグインが必要です。そのプラグインを下記に示します。（sketchのインポート方法は、僕が Figma だったので分かりません。。。）
使ってみた感想としては、非常に学習コストが高いです。感覚としては Figma 使ってたのに Photoshop 使うぐらいメンタルモデルが違います。何が難しいかと言うと、パッチの量が異常にあります。それぞれに対して「どういう時にどういう風にどれと組みわせて使うのか」を理解するのが、とても大変です。前日の Framer は基本的なインタラクションだけなら、2時間ぐらいでだいたい全10ページのインタラクションができました。しかし、Origami は5時間ほどかけて3ページの基本的なインタラクションを作るに留まりました。それぞれのパッチを勉強するのが大変です。下記に僕の勉強教材を示します。それに加えて「Origami」という名前に思わぬ弊害がありました。パッチを調べようとして、ググっても日本の「折り紙」しか出てきません。。。
個人的な感想は、わざわざ Origami は勉強しないで、TypeScript, jQuery, React も分かるので Framer でマイクロインタラクションの実装をしようと思いました。一方で、エンジニアではない方には Origami を勧めると思います。前述の通り Origami は既にマイクロインタラクションをパッチとして準備してくれています。非エンジニアが Framer のために TypeScript, jQuery, React を勉強するのは、コスパ悪いと思います。しかも、Framer が用意してくれているデフォルトのインタラクション以上の事をしようとすると尚更時間がかかります。しかし、Origami は GUI 上で全て完結しています。しかも、他のデザインツールのようにちゃんと勉強すれば、エンジニア顔負けのプロトタイプが作れると思います。ちなみに、今週の講師はプログラミングができないのであれば、Origami を勉強することを勧めていました。
Day 78 ~ 79: Deep Framer
この2日間は、Framer をコードを書きながら使ってみました。デザイナーやっているというよりも、エンジニアやってるという実感が強かった日でした。この章は、エンジニアリングの話が多いので興味ない人は飛ばしてしまって大丈夫です。
Aim at real implementation
Framer 上では Framer が用意しているコンポーネントと React を使ってインタラクションを実装できます。下記の記事は Framer でコンポーネントを実装する際に、とても参考になったので共有します。
記事にも書いてある通り、ゼロからコンポーネントを実装するのではなくて、Figma や sketch でデザインを作ることを前提にするのが良いと思います。つまり、インタラクションを拡張するようなオーバーライドを自作するように設計した方が良いと思います。ただ、3個以上のコンポーネントを同時に連携させるとなると、オーバーライドでは厳しいかなと思います。その場合はおとなしくコンポーネントを作ることを勧めます。下記が僕が Framer 上での実装のためにリファレンスしたサイトです。
最初は「Framer のためだけにコード書くのはイケてないなぁ」と思っていましたが、逆に Framer で書いたコードは全て本番環境で実装可能であることが分かりました。Framer チームは Framer 内で使われているコンポーネントを公開しています。これをうまく転用して、Framer のコードと React のコードを無駄のないように書こうと意識して Framer のコードを書いていました。
最後に僕がこの授業中に試して作ったインタラクションを共有しておきます。整理されてないですが、こんな感じで使えそうなインタラクションを考えて、コードとしてまとめて行きました。
Day 80~ 81: Usability testing
この2日間は、前日までに作ったプロトタイプを生徒間で見せあってレビューする日でした。やっぱり実際に使ってるところを観察すると、必要ない機能やページが分かるし、作り込むべきインタラクションが分かって面白かったです。この章では、少し僕の作ったプロトタイプについて踏み込んで、ユーザビリティテストの結果を共有しようと思います。
Test & Incorporate
僕のユーザビリティテストの結果は大きく2つに分けられました。1つ目「ストーリーがわかりにくい」ということ。2つ目は「ビジュアルのヒエラルキーが弱い」ということです。まずは一点目からどうのように対応したか説明しようと思います。
僕のこの時点のプロトタイプは、基本的に「Next」の順番に沿ってページを見て行けば一連のストーリーが伝わるような設計でした。それで、なんとなくでハンバーガーメニューを用意して、どこページヘでも読みに戻れるようにデザインしていました。
しかし、このデザインが悪く作用しました。実際にユーザビリティテストをしてみると「Next」のボタンはそんなに使われずに、すぐにハンバーガーメニューを開いて自分の好きなところに行くという使われ方をしました。そうなると、最後に「ストーリーがよく分からなかった」や「結局葛飾北斎のことが分からなかった」や「単語の意味が分からなかった」などのフィードバックに繋がりました。僕は「Next」の順番に沿って浮世絵や江戸時代の説明をしていたので、ここの設計を見直す必要があるなと思いました。そして、下記の動画のように画面を変更しました。
基本的なストーリーは、画像と短い文章を使って最初のトップ画面で説明して、興味があったら自分の好きなコンテンツを深ぼるというように変更しました。そして、大量のコンテンツを流し見されないように、コンテンツをスクロールに応じてフェードインさせて視線の誘導をするようなインタラクションを作りました。このインタラクションは Framer を使って試作して、それをそのまま本番でも使いまわしました。
2点目は、各画面のファーストビューについてのレビューでした。下記にBefore、After の画像を載せます。
「画面の最初のテキストが目立っていない」というフィードバックと「要素間のスペースが狭いので、要素がどちらのタイトルに所属してるのかわかりにくい」というフィードバックをもらいまいした。こちらのフィードバックはテクニカルかつ具体的なので基本的にフィードバックをもらったとおりに対応しました。1つ目のフィードバックには、ファーストビューにテキスト以外が入り込まないようにして、フォントサイズをあげて対応しました。2つ目のフィードバックには基本のマージンサイズを 24px から 48px にして対応しました。
結局、細かい修正も合わせてこの3週間で15つのバージョンの UI を Figma で作り、4つのバージョンのインタラクションを Framer で作っていました。最終盤の Figma と Framer リンクを下記に示して起きます。
Day 82 ~ 84: Implementation
この3日間は、前日までに準備したデザインを実際に実装してみることにしました。基本的にこの授業はデザインまでで良いのですが、Framer で作ったインタラクションをどう実装するのかに興味があって、僕の最終の成果物は実物のアプリにしようと思いました。エンジニアリングに興味がなかったら読み飛ばして大丈夫です！
Use only framer-motion
Framer 上で React を使って実装できているので、Framer で使われているライブラリーをローカルにインストールできれば理論上は同じ挙動をするはずと思い。Framer 環境をローカルに作ることに1日を費やしました。しかし、なかなかうまく行かないので、ライブラリーをしっかり読み込むと、 npm install framerはローカルでは思い通りに動かないという記述を見つけました。（正確に言うと書いてあったのではなくてコードを読んだのですが。）
上記のリンク先に、Quick start の箇所にがっつり npm install framer って書いてあるのに、どうやらこのライブラリーは Framer 外では production ready ではないようです。それに気づくまでに1日かかって、Framer ライブラリーを使えないことにかなり落胆してました。「もしかして、全部フロムスクラッチで作る必要があるのか。。。？」と。
しかし、ライブラリーをよくよく読んでみると、Framer ライブラリーのメインの機能は下記の framer-motion から来ていることに気づきました。
Framer でのコードから多少の変更が必要ですが、概ね framer-motion をつかってインタラクションの実装することに成功しました。ただ、物足りない点としては、 framer ライブラリーの方では Page, Stack, useNavigationというコンポーネントと hooks が用意されています。これらを使えると更に簡単に横スクロールやモーダルのインタラクションが作れるようになります。なので、早く framer の方もオープンソースになって誰でも使えるようになることを祈っています！
最後に結局できなかったことなのですが、面白い機械学習のモデルを見つけていました。
このモデルは、画像を処理して葛飾北斎風に変換してくるモデルです。最後の10時間ぐらいは React と Webcamera を使ってこの機械学習のモデルに処理を渡すという実装を試みてました。結果的にうまく行かなかったですが、惜しいところまで行ったと信じています。このように JS を使った画像のフィルターは面白いと思うので、時間があったらもっと深ぼって見たいと思いました。
最後に僕が作ったアプリの Github を共有して起きます。（突貫で作ったのでバグだらけです。笑）
Day 85: Presentation
この日はプロジェクトの発表の日でした。僕は「Hokusai」というアプリを作りました。動画も作ったのですが、発表の5分前に徹夜明けでとったので顔も声も眠そうです。先に謝っておきます。ごめんなさい。
作ったアプリのリンク先も共有します。本当にバグだらけで恥ずかしいですが、3日間で作ったことを考慮して優しい気持ちで見てください。デザインはスマホ用にしか用意してないので、スマホで見てください。
久々に、自分の好きなものを好きなように作れたので楽しかったです。更に、じっくり UI やインタラクションを考えながらデザインをしたことがなかったので、上手にできたかは別としてとても勉強になりました。改めてガッツリ3週間 UI とインタラクションについて考えていたので、他のアプリやサイトの UI とインタラクションに興味を持つようになりました。本当はもっと講師にレビューをしてほしかったですが、自分で自分の問題点を探しながらデザイン改善を回して、実装までできたので3週間とても濃密でした。ある程度、実装する基礎は分かったので、今後もどんどん新しい UI とインタラクションに挑戦してみようと思いました。