実際に使われることをイメージしてデザインする｜#DailyCocoda! Day1

こんにちは、ふのです！

デザインと言語化のスキルを高めるため、『Daily Cocoda!』に挑戦します！デザイナーになるぞ、という強い気持ち🦖

初日の今日は、プロフィール画面がテーマでした。Cocoda!では題材となるテーマと以下のような前提条件を与えられます。

20代前半女性というターゲットユーザーを深堀りしてみました。

・あまり外出はしないが日常では良くスマホで写真を撮る
・たまに旅行へ行くので、綺麗な写真もSNSへUPしたい
・映えを意識するよりも気軽に写真投稿を楽しみたい

また、今回は以下の想定で画面を作ってみます。

・ほかユーザーのプロフィール画面を作る（マイページではない）
・ユーザーが多そうなiPhone7/8想定で作る

実際に作成したものがこちらです！！

では具体的に何を考えデザインしたのか、書いていきます。

1.投稿写真

このお題の1番の課題は、日常で撮った映えを意識していない普通の写真をいかにおしゃれに見せるかです。何気なく撮った写真が色鮮やかなものばかりではありません。おしゃれに見せるためにデザインでどう解決するか考えました。

投稿写真には、実際に私が日常で撮ったものを使用しました。フリーの素材では必要以上に綺麗であるために、コンセプトにある日常とかけ離れてしまいます。

実際にどんな写真が投稿されるかわからないので、それを想定し、テイストも色も全く違う写真を選んでいます。

2.ヘッダー写真

投稿した中でユーザーが最も気に入っている写真をヘッダー写真として登録できるイメージです。

正方形で大きく表示していますが、投稿時のトリミングをそのままの形で載せられるようにしています。違う形に表示される時にもう一度トリミングさせるのはユーザーにとって手間であると考えたためです。

結果として、ヘッダー写真が画面の多くを締めることになり、より自分らしさをダイレクトに伝えられるものになったのではないかと思います。

3.タブバー

画面にはありませんが、タブバーについても検討しています。InstagramやTwitterなどではプロフィールページでもタブバーが表示されます。

ただ、タブバーを入れると画面の下にアイコンが複数並ぶので目線が散ってしまうと考えました。ポートフォリオのように写真とその人の情報だけに集中してほしいため、階層の下がったこのページでは非表示としました。

4.全体の雰囲気

写真が中心になるページなので雰囲気を出すため以下を意識しました。

・色や文字情報を極力少なくする
・フォローするボタンなど、アイコンを用いてシンプルにする

ターゲットはスマホネイティブと想定しています。様々なアプリを使いこなしているため、アイコン表示だけでも何を示しているのか理解できると考えました。

角を丸くし、ピンク系の色にすることでPOPで可愛い雰囲気も出せたと思います。

では、改めて作ったものを見てください！

5.終えての感想

タイトルにも書きましたが、「実際に使われることをイメージしてデザインする」ということができていませんでした。ネットにある高画質の素材がユーザーにとっての当たり前ではないことを痛感しました。

また、今回初めてFigmaを使いました。60分ほどで作るつもりが操作に苦戦し、5時間ほどもかけてしまいました。操作については今後も手を動かしながら慣れていきます。

ユーザーの投稿前の行動やペルソナを設定してからいろんなことを想定し、楽しくデザインできました。

🙏Thanks
ツールの使い方、ユーザーの体験をしっかり想定してからデザインをするなど、ふうとに色々と教わりながら作成しました！

では！🦖