DailyCocoda! #011~#020

#011 お問い合わせ画面

ーペルソナー
・仕事のかたわら、プログラミング学習をはじめた社会人
・気軽に質問をしたい
・プログラミングは全く未経験
・サポート体制がしっかりしているサービスを求めている

ーコンセプトー
わからないことや不具合はすぐに問い合わせられる
プログラミング学習サービス(web)

ーデザインー
学習サービスのお問い合わせ画面ということで、
お問合せフォームでやりとりするより、
チャットの方が気軽で、困ったときにすぐ質問ができるし、
対応が速いというメリットがあると思い、チャット形式にしました。

ほとんどのユーザーがWEBサービスを利用する時は、
パソコンだと思うので、PCとスマホ画面を両方作りました。

チャットについて
・ユーザーが質問する前のあいさつメッセージを自動表示し、
 質問することに対するハードルを下げる。
・サポート側に迅速な対応ができるため、
 質問のカテゴリーボタンを入れた。
・メッセージを入力しているときに、メッセージ欄に
「入力しています」を表示し、ユーザーに安心感を与える。 
メインカラー:誠実で信頼感のある青色

#012 料理アプリのレシピ画面

ーペルソナー
・料理好きで見た目も味もこだわりたい女子大学生
・使う食材と作り方は常に確認したい

ーコンセプトー
料理しながら使える料理アプリ

ーデザインー
004で作った料理アプリからブラッシュアップ。

料理しながら使えるということで、
なるべくスクロールせず、ひとつの画面に抑えたかったが、
材料が多いレシピだと画面に超えてしまうので、
カテゴリー内でスクロールできる感じにしてみた。

料理するときはスマホをスクロールしづらいかなと思って、
「材料」と「作り方」は縦スクロールするより、
材料⇔作り方がスムーズに確認できるよう
横にタブするデザインにしました。

所要時間と使う食材は004の検索画面で
作った機能をそのまま入れたイメージです。
メインカラー:004と同じカラー
(食欲をそそるオレンジと黄色)

 #013  カレンダー画面

ーペルソナー
・20代働く女性
・自律した自分を目指している
・仕事とプライベート両方楽しみたい

ーコンセプトー
「Weekly オンとオフをきちんと。」
月ごとの表示画面で、予定をパッと確認できるカレンダー

ーデザインー
自律した自分を目指す女性向けのカレンダーということで、
「オンとオフをきちんと」というコンセプトを考えました。

・仕事とプライベートを分け、3色を使用
 ◎茶色:仕事
 ◎オレンジ:プライベート
 ◎グレー:その他(リマインドなど)

・月ごとの表示画面は上のバーをタップする形で切り替える
(左右の矢印マークでさらに進める)

・日付の下にその日はどんな予定あるか、色分けで分かりやすく表示

・Weeklyの部分は、今週の予定が詳しく確認できる
 時間/タイトル/場所/チェック

・右側のチェックボタンで終わった予定をチェックし、やり忘れ防止ができる
・表示範囲を超えた部分は縦スクロールするイメージ
・右下のプラスボタンで予定を追加する 
メインカラー:自律している女性を意識し、
甘すぎず、親しみやすい茶色とオレンジ色を使いました。

#014  読書アプリのグラフ画面

ーペルソナー
・積ん読しがちな20代の会社員
・本は好きだが、買ったら満足していまう
・記録することに抵抗がない

ーコンセプトー
「記録するほど楽しい気分になれる読書アプリ」
積ん読しがちな会社員向けの読書アプリということなので、
ターゲットは本が好きだが、本を買ったこと自体に満足してしまう人。
忙しくてなかなか時間を作って本を読もうとしないため、読書記録ができる読書アプリで動機付けをし、継続して読むようにするアプリを作りました。

ーデザインー       
大きな機能は3つを絞り、シンプルで使いやすさを重視。
・ホーム画面(新刊やおすすめ本、口コミなど)
・本を探す(ジャンルごと検索)
・読書記録(読書目標、読書量、読んだ本など)

読書記録においての機能:
①読書目標(動機付け)
今月の目標を自ら設定し、達成していくことができる。
達成率によって、円グラフと励ましのコメントが変わっていく。
②読書量
今月と今年に分け、
読んだ本、読んだページ数、読んだ日が一目で見ることができる。
さらに見るは一昨年から遡ることができる。
③読んだ本/積読本/読みたい
ここで今まで読んだ本や積読本の詳細を見ることができる。

メインカラー:知的で集中力を高める青色
アクセントカラー:青との相性が良い黄緑色

#015  カメラアプリの撮影画面

ーペルソナー
・最近写真撮影にハマり出した大学生
・簡単でおしゃれな写真を撮りたい
・フィルターで色々な調整をしてみたい

ーコンセプトー
「見た景色や食べ物を鮮やかに、簡単に残しておけるカメラアプリ」
初心者から上級者まで、フィルターや調整機能を使いながら、
簡単でおしゃれな写真が撮れるカメラアプリをイメージしました。

ーデザインー  
カメラアプリの機能は末端サイズや手の大きさによって、
画面上部が押しにくいことがではないかと思い、
今回はデザインしているときに意識したことは、
ペルソナは男女を限定せず、どのユーザーにも使いやすいように、
よく使う機能を下部に配置しました。     

メインカラー:基調は撮影に集中するために、白とダークグレー
アクセントカラー:撮影モード切替と機能選択に明るめのラベンダー色

#016  ニュースアプリのカテゴリ選択画面

ーペルソナー
・IT業界の女性新卒社員
・堅苦しいニュース記事は苦手
・毎日少しずつ知識をつけていきたい
・検索しなくても自動で配信してほしい

ーコンセプトー
IT関連記事に特化したニュースアプリ
人工知能がユーザーの好みもとに、適した記事を配信する。

ーデザインー
AIニュースアプリということなので、最初に好みのカテゴリーを選択し、
それらのカテゴリーをもとに記事を自動配信する。

堅苦しさを感じさせず、気軽に読めような雰囲気を意識し、
ユーザーに向けたメッセージ、カテゴリーアイコンやを使用。
また、カテゴリー選択は2列配置ではなく、少し小さめの3列配置にして、
全体を一画面に抑えることによってスクロールする手間をなくした。

登録した時点で選択しなくてもスキップできるボタンを下部に配置。
カテゴリーや配信頻度は設定でいつでも変更できます。

メインカラー:テクノロジーをイメージした紺色と白
アクセントカラー:紺色に馴染む、POP感を出すための明るい紫色

#017  家計簿アプリの支出記入画面

ーペルソナー
・20代後半の夫婦
・子供が生まれてお金の管理をはじめた
・家計簿つけるのに慣れていない

ーコンセプトー
簡単に記録できる家計簿アプリ

ーデザインー
家計簿をつけるのに、めんどくさがるや忘れがちな人のため、
「簡単に記録できること」を意識し、カテゴリ選択から金額入力まで、
一画面で完結するようにデザインしました。

画面配置と上部からの入力順↓

・支出/収入:タップで選択
・カテゴリ:左右スワイプでカテゴリを選択
・よく使う:探す手間を省くすぐ選択できる
・金額入力:大きめで押しやすく、シンプルなデザイン
・レシート写真と詳細メモは入力ボタンの横に配置

記録したあと、家計簿で確認・編集できます。

メインカラー:親しみやすく、疲れを癒してくれるさわやかな緑色
アクセントカラー:全体の統一感を出すため同系色を使用

#018  ECサイトの商品詳細画面


ーペルソナー
・30代前半男性経営者
・ファッション好きで質感や素材にこだわる

ーコンセプトー
ファッションセレクトショップ通販アプリ

ーデザインー
今回のペルソナはファッションにこだわる男性ということなので、
上質感と大人の雰囲気を意識し、シンプルなデザインにしました。

商品詳細画面のファーストビューでは、商品をすぐ購入できるように
お気に入り、カラー選択、サイズ選択、数量を配置。
商品説明、サイズガイド、関連商品などは、下部スクロールで表示する。

また、いつでも購入できるように、上部のメニューバーやカートに入れるボタンは
常に画面に固定しているイメージです。

メインカラー:落ち着いた紺色と白、グレーを基調として使用
アクセントカラー:シンプルさ重視のため、メインカラーと同じ紺色

#019 旅行予約アプリのフライト検索画面

ーペルソナー
・20代女性会社員
・とにかく旅行が好き
・短い休みでも気軽に旅行行きたい

ーコンセプトー
煩雑な手続きがないおしゃれ旅行予約アプリ

ーデザインー
‟気軽な旅行”を重視し、航空券/ホテルのみ、
もしくは両方同時に予約できるデザインにしました。

煩雑な手続きを除くため、ユーザーの情報を事前に登録してもらう。
実際に予約する際の手順として、検索画面で必要な情報を入力(選択)→フライトリストが表示→選択して進む→予約が完成する。

アイコンとイラストを使用することによって、旅行の楽しさと気軽さを強調しています。
キャッチコピーは旅行行きたくなるように、ランダムに変わるイメージです。
メインカラー:空の旅をイメージした爽やかな青色
アクセントカラー:楽しく明るいイメージのオレンジ寄りの黄色

#020 ライブ配信アプリのライブ画面

ーペルソナー
・インテリア好きな主婦
・雑誌やネット記事より番組と配信が好き
・おしゃれなインテリアを参考にしたい

ーコンセプトー
上質な暮らしをテーマにしたライブ配信アプリ

ーデザインー
元々のお題は高校生向けの配信アプリだが、リサーチしているときに10代向けの配信アプリがかなり多いと気づき、大人向けの配信アプリがあまりないと思って、暮らしをテーマにしてデザインしました。

ターゲット層は主にインテリアに興味がある20代後半~50代の主婦や業界関連会社員を設定。10代向けの配信アプリは画面がにぎやかで機能も多いだが、シンプルにして上質なイメージをしました。

ライブ配信アプリのギフト機能を残して、役に立った!や憧れの気持ちなどを含めて、配信者にプレゼントすることができます。貯まったポイントは換金するより日用雑貨やインテリア用品、洋服などと交換するイメージです。

機能としては、配信をに集中したいときはコメントボタンをタップすると表示する/しないイメージ。また、配信者をフォローしたいときはハートボタンでフォローできる。                   
メインカラー:基調としてグレーを白を使用
アクセントカラー:全体的にグレーが多く、少し寂しく感じるので、アクセントにピンクを使用