Daily UI　女子向けSNSアプリを分析からUIデザインしてみた

おはようございます。ダイゼン（@daizennnn）です。

Daily UIとは？
毎日出されるお題に従ってUIデザインを作っていくというチャレンジ企画のこと。
Cocoda!さんが出されているDaily Cocoda!と英語版サイトのDaily UIが有名。

さて、50日間の怒涛のDaily UIチャレンジを終え、今総復習を兼ねて、最初からデザインをやり直しています。

過去の作品は以下から見ることができますが、ひどい！（笑）

ワタシのUIUXデザイン修行｜ダイゼン／メキシコ通訳｜note

反省点については「Daily Cocoda 50日完走してどうなったのか、UIデザインを独学した私的記録。」にすべて書いてありますが、引用すると

毎日こなすことをメインに据えてやっていたので、次のステップとしては一つのプロダクト・サービスと捉えて、ブランド設計・サービス設計・情報設計・体験設計の「設計力」をつけることに焦点を当てて、２周目をしていこうと思っています。プラス上記にも書いたiOSやGoogleの提唱するガイドラインに沿ってデザインへ落とし込んでいきます。

と書いてありました。

とりあえず実績を文字に残そうと思い、2周目も記録していくことにしました。

2周目1日目は「女子向け写真投稿アプリ」

※前回との比較はこちら。
DailyUIを始めた #001 UI勉強記

制作までの手順

今回はターゲットの特徴に合わせて制作。
手順としてはこんな感じ

ターゲットのキーワードを抽出。
↓
文字にしてターゲットを想像する
↓
使用されているシーンを想像
↓
実際にこのターゲットが既存のSNSを使うときの課題は何か？を想像
↓
同時に既存アプリの調査を行う
↓
上記2つを踏まえて、解決策を考える
↓
カラーパレットとデザインシステムをつくる
↓
デザインで具現化（ほぼ１周目と変わらない）
↓
完成

（これだと全然足りません。２周目2日目から改善しています）

1日目は緩くなってしまいましたが、ざっくりこんな手順で制作しました。

以下実際に作った分析シートとデザインシステムです。

２周目1日目の反省点

｜１周目と２周目の比較

大まかなコンセプトとレイアウトは変えていません。

はじめてのUIデザインという本にもこう書いてありました。

UIデザインの場合、広範囲を自由にレイアウトするような場面は少なく、ユーザーの操作性を考えて、論理的に配置することを考えていきます。

考慮した点は
・ガイドラインに沿ったレイアウトか
・情報設計　ユーザーは何を優先的に見たいのか
・課題に対する解決策があるか
・このページからの導線

・ガイドラインに沿ったレイアウトか
タブバーやサーチバーはiOSから出しているものを使用（別にAndroid版も制作しています）

・情報設計　ユーザーは何を優先的に見たいのか
InstagramやTwitterを例にしても、フォロワーやフォロー数が優先的に上位に表示されています。
その後にプロフィール、画像を早く探せるように検索バーをその下に配置しました。

・課題に対する解決策があるか
課題と作品がリンクしていないとUI UXデザインとはいえません。
ワタシの設定した課題が「検索したい」「片手で使いたい」ということだったので、
「検索したい」…検索バーを上部に、タグを画像下に設置。
「片手で使いたい」…アイコンを下部に置いて、サイズも大きめ。
にして、解決策を出した。

・このページからの導線
このページだけで完結するわけではないので、今回作成していない画面に対しても、このページから何ができるのか、ユーザーは何をしたいのか、というのを考えた。

｜２周目での反省点
・実際に存在するかもわからないターゲットを想定して制作するのは危険。存在しそうなターゲットを調査して選定する
・課題が仮説のまま。現実はどうなっているのか、を照らし合わせた上で、仮説検証し、適切な解決策へと持っていく必要あり。
・iOSの「ー」（名前不明）のマージンが狭すぎる。
・写真の角丸とその下のレイヤーの角丸が揃っていない。
・実際に親指を置いてみて、誤操作がないかなどの確認もすべき。

以上こんな感じで考察を進めていきます。

１回目ということで方法を模索しながら進めていますので、こうした方がいい！などアドバイスがあればいただきたいです。