見出し画像

【3.5ヶ月目】 UIデザイン基本型をアウトプットしながら学ぶ/ 成長記録 No.3

akihiro

UIデザインを志したのは、今年2021年9月のこと。

そこからFigmaの使い方を覚えた1ヶ月目。トレースやりつつ、途中でサービスをゼロからデザインするチャレンジをした2ヶ月〜2.5ヶ月目。そして、早 1ヶ月が経とうとしています。気い抜いても抜かなくても、11月・12月ってなんでこんな時間経過の早さエグいんでしょうね。毎年ビビりたおしてます。

もっと手を動かしたい。考える時間がほしい。うまくなりたい。

最近の気持ちとしては、純粋にそればっかり思うようになりました。1ヶ月前、未経験ながらに大きめの課題を思い切ってトライする→言語化することで最終目標を把握できたのは、僕自身の大きな収穫だったし、資産になっていると思っています。まだまだなのは、痛いくらいに分かっているのだけども。

今回のnoteでは、ここ直近で完成させた「仮想の音声SNSアプリ」の作成をDaily UI形式（Day3〜Day6）でデザインしながら、フィードバックから学んだこと、気づきを得たことをまとめて言語化し、シェアします。

※学び始めた初期から着手している続きの内容です。Day1〜Day2はこちらにまとめています ↓

Daily UI （音声SNS） / 完成形

プロトタイプを作成したものと、登録〜投稿〜設定画面までの動画も載せています。

Twitterライクな仕上がりでオリジナルな要素はあまりありませんが、型を身につける といった目的としては、非常に学びの多い課題でした。

以下では、画面ごとに作成していくなかで学んだことなどを、簡単にまとめていきたいと思います。自分自身の振り返りのために書いてるニュアンスやや強めですが、UI 学ぼうとしている方がいたら「ふむふむ、ふーーん」という感じて軽く眺めてみてください〜

Day3： 「投稿入力」UIをデザイン

単純に1画面を作成ではなく、FAB（アクションボタン）から別画面が立ち上がり、コンテンツをユーザーがアウトプットして投稿するまでの、一連の流れをFigmaで作成。

Day6まであるDaily UIの課題をしたのですが、実はここが最も苦戦しました…… というのも、ユーザー目線に立って違和感なく投稿の流れを作るのって、意外と考えることが多い（っていうかむずい） ってことに、デザインしながら気づいたからです。意識に浮上してこない「ふつう」を作るのって、奥が深いなと感じました。

「キャンセル」「戻る」 ナビゲーション は超重要

特に、ユーザーが投稿途中に「あれ、やっぱり投稿の内容変更したいがな」「もういちど録音したいがなー」と思ったとき。僕の初期に作成したものでは、一つ前の動作に戻ることができず、混乱させる設計になっていました。

FBしてもらう初期のデザインは、再生を示すUIが動画っぽくて、押したらどのような挙動を見せるのかが直感的にもわかりにくいものでした。指摘をもらって修正をする途中のUI画面。
<BONO カイさんからのフィードバック>

②「キャンセル」を押したら全部消去されるのか？
フロー的には
1.音声撮る
2.投稿画面
という順番で進んでいるけど、それとナビの整合性が取れてないように見える

③コントラストが弱くて文字が読めない　：
背景に黒or白を薄くorグラデで引くなどして、どんな時でも文字が読めるようにコントラストを保持した方が良い

④この2つのUIが何を表現しているのかパッとわからない

⑤音声に見えず、動画に見える
※Stand.fmを意識しているのであれば、あれは「音声ブログ」みたいなもの。サムネイルになる。
このUIだと想起するのはTwitterだと思うので普通の人は画像や動画だと思ってしまいそう

↑ BONOで今回のフィードバックをもらったものを動画化していただきましたのでぜひ（※メンバーにならないと見れないっぽいので、興味ある方はぜひ勢いでジョインするの検討してみてください 笑）

画像は画像として見せて、音声の再生であるということが直感的にわかるオブジェクトに変更しました。かなりスッキリできたように思います。

Day4： 「投稿の検索」UIをデザイン

引き続きTwitterをベースとしたUI。構造への工夫は制限されるため、どういった内容が出る想定なのかは丁寧に意識しました。

リサーチ対象はTwitter、OS標準のアプリストアを中心にして、タップしたときにどういったデザイン、文章でのガイドがあるのかを収集。加えて、新しい項目を学ぶ際にはMaterial Design にも目を通すようにしました。すべてにおいて守るべき必要はないですが、オーソドックスな正解として立ち返ることができるのは本当にありがたい… Thanks Google 🌏

Material Design > Bottom navigation > Specs より引用

どちらのを採用すべき？ 👉 目的で決める！

実はvoicyっぽいものも候補として作成しており、採用する（もしくはしない）判断をどうすればいいか悩んでおりました。。。

これもBONOのカイさん に質問投げたところ、とても納得いく回答をいただけました。まとめると見栄えやカッコよさではなくて、ユーザーが求めている情報の探し方（目的）にマッチしているか という観点で検討すべき！と指摘いただきました。はああああ…っ….  ってなりました（笑）

「すぐ情報が見える」「カテゴリーに分けてくれている」など、形（デザイン）を帯びることは、すなわち何かを選んで、何かを捨てる行為。常に「目的」に沿った自然な流れを実現することを意識しないといけないんだと、学びになりました。

Day5： 「通知」UIをデザイン

「通知だけやしすぐ終わるやろ」と思っていたんですが、色とパターンを考え出すと全然すぐ終わりませんでした（笑）

リサーチ対象はFacebook、Twitter、Instagram、TikTokの通知です。この単元での学習目的の大テーマは「List UI」とはどういった構成のものなのか、配置はどういった規則性に基づいたものなのかを理解することでした。ここでもMaterial Designは驚異的な厳密性で回答してくれてます。

こう見るとよく分かりますが、8,16,24,72といった8の倍数で基本的なスタイリングが定義されていることに気づきます。この時から倍数スタイリングは意識しています。
Day5は基本的に褒めてもらえたっちゃ！わーい✨

オリジナルのTwitterの仕様だと「人」「言葉（ツイート）」が価値として扱われて、それに紐付いた検索表示なっているので現在の形だと思うんですが、音声メインのSNSだとちょっと変わってくるよなあ とも思いながらここらへんは作成しています。

  • 検索フィード一覧から、すぐに「音声」が聴ける仕様なのか

  • そもそも、どういった意図があって押せるようにしているのか

今回は基本UIトレーニングという名目での練習ですが、実務ではその一つひとつの理由を考えていく必要がある、というポイントを学べました。

Day6： 「設定画面」UIをデザイン

設定画面はボトムナビゲーションから見るのではなく、表示の設定アイコンを押すとすりあがってくるインタラクションで見せる設計。

最後のお題は設定画面。リストの見せ方はiOSの設定画面を主な参考にして作成しました。

指摘なしかと思いきや、コントラストの弱さなど自分で気づけず。フィードバックをもらうのって本当に大切です。

  • リストデザインのパターンについての補足

  • 見せたいリストとその背景のコントラストでハッキリ見やすく

  • dividerの線が強く感じるので情報量を抑えるためにも少し薄く

といったアドバイスをもらって修正を加えました。

Daily UI の課題を終えて


これでDaily UI 音声SNSの巻が完成しました！いやあーー、まとめるのって時間かかりますね（笑）。でも文章化して振り返ってみることで、自分の成長を感じることができました。Day1を作っていたころの9月の自分と比較しても、TTP（徹底的にパクる）というスタンスが（もちろんいい意味で）しっかり身についてきた印象があるし、前よりも色々な面での不安はなくなってきているように感じます。自分の積み上げをしっかり見てもらうことで、徐々にやっているデザイン制作自体が楽しくなってきています。

ではでは。次回は年末年始にやったことや、ポートフォリオにして見てもらえる水準のアウトプットにじっくりとトライしてみようと思っています。

いいぞ、もっとやれ。俺。

ほな。







この記事が気に入ったらサポートをしてみませんか？