dailyUIの進捗報告。プロトタイプ作るのはとっても大事。(#005〜#010)

サトゥー

こんにちは、サトゥーと申します。

現在東京大学理科I類を休学し、ベンチャー企業でデザイナーとしてインターンさせていただいております。

 

前回初めてdailyUIというものをスタートしたよ〜という記事を書きました。それが#010まで終了したので、またここまでの記録をブログに振り返りとしてまとめておこうと思っております。

前回の記事はこちら

dailyUIをはじめたよ(#001〜#005)

 

dailyUI 006 User Profile

ユーザープロフィール画面です。この辺りからインスタのハッシュタグの使い方を心得た。

プロフィール画像があまりかっこよくない人どうするか問題

リサーチした感じだと、プロフィール画面でかっこいいやつはだいたいかっこいい写真を使っていて、写真を全画面にするみたいな「写真のかっこよさに依存したデザイン」になってしまっていたので。そういうことはないように意識して作成しました。

こういうやつとかね。

これはこれでとてもかっこいいのだけど、色々な写真がらみの問題が起きてきそうなので、今回はこういうアプローチは取らないことにしました。プロフィール画像ってこちら側から直接手をくわえられないところだし。

 

あんまりtwitterと変わらない感じになってしまったけど、結局こんな感じが一番使いやすいのかなぁ、とも思ってしまいます。

反省点
  • どんな要素がプロフィール画面にあるのかを検討したい(ここはアプリによって大きく変わってくるよね)
  • 画面遷移をみたい(ここは次回以降時間に余裕があるときにモックアップを作成することで解決)

 

dailyUI 007 Settings

設定画面ですね。ここで初めてadobe XDを使ったのですが、色々とびっくりしました。

adobe XDを用いてプロトタイプを作成

架空のアプリの設定画面ということで、時間も余ったのでadobe XDを使用してプロトタイプまで作成してみました。

特に意識したこと
  • 「設定メニュー」→「アカウント設定」→「各項目入力画面」と、ユーザーの流れを意識して画面をもれなく作成した。
  • 画面遷移を作成し、ユーザーの流れを視覚的に理解できるものを作成した。(XD楽しい!)
反省点
  • 他の設定メニューボタンを押したらどうなるのか、画面を作っておきたかった。

 

 

dailyUI 008 404 Page

個人的に相当苦戦したやつ。なかなかこういう見た目が超重要なページを作るのは慣れていませんね。。ギミックも入れたかった。

スマホであまり404pageをみた記憶がないので、pcで作成しました。画像の加工にかなーり時間がかかりました。

リサーチした感じだと、良い感じの404ページのデザインの方向性としては、

  • 404という数字で遊ぶ
  • 404がユーザーにとって不要な情報と考えて出さない

の2つがありましたが、後者を1時間ちょいで作るのはなかなか無理があるので、前者にすることに。

 

コンセプトとしては、『虫眼鏡で探したんだけど見つからなかった』→『虫眼鏡で404という数字が見つかった』という感じに。この画像を作成するためにPhotoshopを使用しました。

 

before/afterはこんな感じです。なかなか良い画像が見つからず、満足いくものができなかった…

反省点
  • 画像の配色とか日本っぽくない
  • 画像に時間かかりすぎてレイアウトも若干雑になってる。

 

サトゥー

こういうバチバチのクリエイティブ系は苦手だなぁ。。。

 

個人的に面白い404ページ→https://www.platinumgames.co.jp/404/

 

dailyUI 009 Music Player

音楽再生アプリです。これは王道のUIを外さないように強く意識しました。

 

View this post on Instagram

 

DailyUI 009 “Music Player” 架空の音楽再生アプリを作成しました。黒を基調にしつつ、アートワークの色が生かせるような配色にしています。機能的になにか独自性のあるものを付けたかったですが、そこまで余裕がなかった。 #dailyui #dailyui009 #uidesign #ui #ux #uxdesign #uidesigner #design #app #appdesign #sketch #webdesign #graphicdesign #digitaldesign #uitrends #musicplayer #music #instaui #デザイン #デザイナー #クリエイティブ #アプリ #アプリデザイン #dailyinspiration #designinspiration #dailyuichallenge #音楽 #ミュージック #カラスは真っ白 #crcklcks

サトゥーさん(@9satoooh)がシェアした投稿 –

流石に動くのを作り切る時間はなかったので、静止画ですが、そこそこ頑張って作成しました。

既存の投稿をみてみると、アートワークにかなり影響されるのではないか…と、見た目は良いけどアプリとしての設計が不安になるようなものが多かったので、そういう現象に陥らないように注意しました。あくまで作っているのはユーザーが使用するアプリですから。

とはいえ、アートワークが綺麗なものの方が良い感じのアプリに見えるので、今回はカラスは真っ白さんとCRCK/LCKSさんのアルバムのアートワークを使ってみました。黄色と赤が印象的でかっこいい。

特に意識したこと
  • アートワークにあまり依存しないような画面にする(例えば文字の可読性など)
  • とはいえ、アートワークを生かした画面にはするように、背景色にうっすらアートワークの色と黒のグラデーションをかけたり。細かいところを工夫したつもり。
  • アートワークの色をフル活用した配色は良い感じにできたつもり。
  • フォントは日本語が太ゴシックで、英語はDINです。パキッとしたかっこよさを出しつつも、汎用性を失わない程度に、というか。
反省点
  • 普通すぎ!!
  • アイコン部分についてはもうちょっと洗練されたものにできそう(選定の方法をしっかり練っておく)

 

dailyUI 010 Social Share

これまでのdailyUIとは少し雰囲気が変わって、シェアボタンを作るというものでした。UIというよりも、かなりUXを意識した設計が求められていると感じたため、アニメーションを用いてユーザーの実際の体験がしっかりわかるように配慮しています。

 

View this post on Instagram

 

DailyUI 010 “Social Share” 架空の音楽再生アプリのシェアボタンのアニメーションを作成しました。ちょっと全体的に陳腐な感じが勿体無いけど、初めてにしては上出来でしょう。Protopieというツールを使用して作成しました。 #dailyui #dailyui010 #uidesign #ui #ux #uxdesign #uidesigner #design #app #appdesign #sketch #webdesign #graphicdesign #digitaldesign #uitrends #musicplayer #music #instaui #デザイン #デザイナー #クリエイティブ #アプリ #アプリデザイン #dailyinspiration #designinspiration #dailyuichallenge #音楽 #ミュージック #カラスは真っ白 #protopie

サトゥーさん(@9satoooh)がシェアした投稿 –

シェアボタン周りのユーザーの動きを簡単に画面に起こしました。

具体的には、

  1. ユーザーがシェアボタンを押す
  2. シェアする媒体(twitter)を選択する
  3. twitterが開く

までの流れを簡単に動画にして作成しました。

動画作成にProtopieを使用

動画作成にはProtopieというアプリを使用しました。今回初めて使用しましたが、簡単で非常に使いやすかったです。

こちらの参考リンクにProtopieの基本的な使い方が載っています。公式も日本語のリファレンス出してくれているので、特に使用に関して悩むことはないかと。

参考:【Protopieのススメ】UIデザイナーのためのインタラクションモックアップツール

こんな感じの作業風景。sketchからファイルをインポートして使えるのが便利です。svgに対応してないのがかなりしんどいけど。

値段も99ドル買いきりなので、1週間のトライアル使ってみて、良さげだったら買ってみても良いかもなぁ、と思っています。

 

できた動画がこんなやつ。

 

特に意識したこと
  • サイズと場所については、あくまでメインコンテンツを邪魔しないように。
  • 「シェア」というアクションは、「コンテンツを楽しむ」→「あー満足」→「シェアしよ〜」という流れであることから、視線の流れを考えてなるべく画面右下に配置。
  • シェアは多くのwebアプリにとって非常に重要な機能であるから、心地よいアニメーションの工夫が必要だと思う。

アニメーションの工夫については、昨日すごくわかりやすい記事を読んだんですね。

世界一わかりやすい「イージング」と、その応用

これから勉強していく分野なので、こういった情報も参考にしながら作成しています。ユーザーのタップから生じるアニメーションは基本的にイーズアウトを採用しています。

反省点
  • シャッフル、リピート、シェアが同列に並んでいるが、機能的にはシェアだけ大きく属性が違う。この見せ方はやめるべきだった。
  • うーん、なんかちょっと陳腐な感じが残ってしまった。。。これはどうやったら改善するだろうか。

 

全体を通して

全体的な気づきを最後にまとめておきます。

まとめ
  • UIデザインをする上では、ユーザーの流れ(UX)をデザインしてあげることを前提にしてないとやばいというのを強く実感。
  • 画面遷移と、簡単に遷移の様子がわかるプロトタイプまで作成できると非常に強いし、わかりやすい
  • 画像など、変化しうる要素に対して悪く作用するようなUIはよろしくない。強度が高いUIを作成する必要がある。

 

次は#015まで完了したらまた記事にまとめます。それではまた。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)