ポートフォリオ

これまでの制作物の中で特に注力したものをまとめています。

Transcript

1. PORT FOLIO はじめまして！水木陽菜です。 経歴 2017年 早稲田大学 商学部 広告研究ゼミ 卒業 在学中　株式会社ナガセ 株式会社ウタゴエ でデザイン業務をアルバイトで担う 　　　　株式会社NKB で都市型マルシェの運営業務も経験 2017年 LINEヤフー株式会社に新卒で入社しUI/UX、webデザイナーを担う 〜現在　副業で雑貨屋で週末に接客もしている 趣味 イラスト制作（青山塾に1年通学経験あり / デザフェスなど参加）、 音楽鑑賞、カフェ巡り、自然に触れること
2. P1 目次 P2 Yahoo! JAPAN アプリとは P3 Yahoo! JAPAN アプリ アシストタブ クイックinfo P4 Yahoo! JAPAN アプリ アシストタブ クイックinfo 各パネル P5 Yahoo! JAPANアプリアシストタブ クイックinfo 歩数計初期設定モーダル P6 時刻表タイマー グロース施策 P7-8 天気画面 リデザイン 全体構成 P9 天気画面 リデザイン 生活アドバイス新規追加 P10-11 その他案件まとめ P12 イラスト制作物
3. P2 Yahoo! JAPAN アプリとは あなたの毎日をもっと便利に Yahoo! JAPANアプリは
 あなたの毎日がより豊かになるよう
 サポートします。 Yahoo!検索 検索 1 提供機能 みんなの話題がわかる「トレンド」 Yahoo!検索の急上昇ワードをランキング化。概要や関連ニュースで「なぜ話題か」もわかる ◦◦市 すべて ニュース 〇〇市 おトク 芸能 スポーツ 話題 ー ンアニメ メール 82 今日 ショッピング 24/18 現在20.5 80 ℃ % 路線情報 明日 雨雲レーダー すべて オークション 宝箱くじ お気にいいr スットくじ ンス N い あなたの毎日に役立つ「アシスト」 今日の天気、予定、電車の発車タイマーなど、あなたの1日に役立つ情報を手軽に確認できる 過去最大予算 遠のく財政健全化 2635 9/28(月) 7:08 難民救済へ 国際NGOの挑戦続く 172 9/28(月) 6:55 あなたの興味にこたえる「フォロー」 スポーツや動物、エンタメや経済など、あなたが選んだテーマの最新情報をまとめて確認できる 新車の人気色 なぜ白と黒に集中 1510 9/28(月) 6:18 天気・路線 忙しい外出前の必要情報はこれひとつで。スマートなお出かけをサポート 衣服の調整 気温で判断する目安は 135 9/28(月) 7:23 球児支える母 最後の夏に願う優勝 954 9/28(月) 7:11 現在地の災害情報 最新情報を素早くお届け。気になるワードはその場で検索、深掘りできる 深夜アニメ 人気作に共通する構造 384 9/28(月) 6:31 最新のニュース 地震・大雨などの災害・防災情報をPUSHで通知。外出先でもその場の情報を知ることができる 明くトル のは
4. Yahoo! JAPANアプリアシストタブ クイックinfo P3 画面の役割 あなたの「今、知りたい、わたしごと」をサポート 旧ver リニューアル後 コンセプト キーワード：信頼性、シンプル、誠実さ、見やすさ 理由 - Yahoo!の信頼性を担保しつつ、小さいパネル内でシンプルな 設計に 課題 過去の通知履歴タブはほぼ利用されていなかった 戦略 日常的に使われるタブを目指し、ユーザーが「今」必要な情報を 届ける「アシスト」というタブを1から制作 担当箇所 コンセプト・提供価値策定、具体の設計議論への参加 各パネルのUI/UX設計 ファイナンスパネルのディレクション ファイナンスの部署へのニーズ調査、負荷対策などのて連携業務、全体進行、 テスト設計含む 時刻表タイマーのグロース施策担当 メンバー：ディレクター1名、全体リードデザイナー1名、 　　　　　パネルのデザイナー1名（自分）、エンジニア5名 全体の設計：2年 各パネルのUI・UX設計：1年 / 開発期間：1年 制作期間・メンバー
5. Yahoo! JAPANアプリアシストタブ クイックinfo 各パネル | 新規立ち上げ P4 工夫した点（狙い：小さなスペースに必要な情報を見やすく載せたい） 必要最低限の情報を、 グレー背景で区切ることで見やすく 天気 9時 12時 15時 時間が進むごとに表示天気の時間帯も 変化をつけた 28 13 ℃ % 28 13 ℃ % 28 13 ℃ % 28 13 ℃ % 現在23.6℃ 18時 NYダウ MM/DD HH:MM 更新 ファイナンス 日経平均 12,345.67 +123.45 (+1.23%) 12,345.67 -123.45 (-1.23%) 洗濯指数 バスタオルも乾きま す ハーフモーダルにすることで、全体を 並べた時に画面に対し1パネル見切させる 横スクロールができるとわかるように 星座を設定する 3位 3.5 物忘れに注意しま しょう 3位 3.5 みずがめ座 占い みずがめ座 占い 時刻表タイマー 次の電車までの時間がわかる タイマー表示には登録が必要です 出発駅と方面を登録する 時刻表タイマー 駅1 駅2 東京メトロ半蔵門線 永田町 普通 ４番線 久喜行 11:34 26:23:54 次は 11:40 押上行 一番目立たせたいカウントダウンの ジャンプ率を上げ視線が行くように 情報量が多かったため 円形のインジケーターで 歩数の進捗をわかりやすく、 かつ達成感を感じやすいよう演出 目標達成でくじ引きができる 計測にはヘルスケア連携が必要です ヘルスケア連携する 歩数計 歩数計 今日 今週 くじ引きまであと3,200歩 / --- 15,000 1,013kcal 歩数計 今日 今週 16,800 15,000 / くじを引く 1,013kcal 右上のトグルタップでパネルを 切り替えられるように デッドスペースを活かす工夫 歩数計 今日 今週 歩数計 今日 今週 82,800 88% /100,00 12,300 達成 /10,000 ユーザーが一目でわかるよう 今日と今週のインジケーターの見せ方に 変化を 週間目標まであと7,200歩 来週も頑張りましょう 結果 学び アシストタブの利用率はYJアプリ全体の10.30%、またそれらの ユーザーの再訪率は81.68%、うちクイックinfoの到達率は62.2% (2026.3.7時点) サイズが小さく限られたスペースの中でいかに情報を見やすく整理す るかを学べた 複数並ぶパネルなのでデザインルールやボタン位置、未登録パネルの 見せ方など揃え、一体感を持って綺麗に見えるよう意識できた
6. Yahoo! JAPANアプリアシストタブ クイックinfo 歩数計初期設定モーダル | 新規立ち上げ P5 工夫した点（狙い：煩雑な印象を軽減させたい） 操作項目の多さの印象を 軽減させるため、イラストを起用 2Stepを完了させて 歩数計を便利に使おう 2Stepを完了させて 歩数計を便利に使おう 2Stepを完了させて 歩数計を便利に使おう 2Stepを完了させて 歩数計を便利に使おう 操作項目が多かったため、 STEPを2つに分け 達成度をわかるように 他の歩数計アプリでのデータを利用するために Step1 1 Step2 2 歩数データを取得するために Yahoo! JAPANとヘルスコネクトを 同期してください Google fitとヘルスコネクトを 同期してください Step1 2 Step2 1 2 Step1 Step2 歩数データを取得するために Google fitとヘルスコネクトを 同期してください 2 Step1 Step2 他の歩数計アプリでのデータを利用するために Yahoo! JAPANとヘルスコネクトを 同期してください 1日の目標歩数を設定してください 3,000 （,000） ,000 （,000） 1日1回くじ引きのチャンス 設定歩数達成で 5,000（35,000） 何のためにこの操作をする必要が あるのか？を明記 設定の手順 ヘルスコネクトアプリを起動し設定してください 1 ヘルスコネクトを使ってみるをタップする 設定の手順 Google fitを起動し設定してください 1 アクティビティの記録をオンにする 情報量の多い操作方法を 簡略化して説明 ヘルスコネクトを起動する ヘルプ 3 Google fitとヘルスコネクトを同期する 2 Yahoo! JAPANにヘルスコネクトへのアクセスを許可する 2 Google fitにヘルスコネクトへのアクセスを許可する Google fitを起動する ヘルプ 設定の手順 Google fitを起動し設定してください 1 2 3 アクティビティの記録をオンにする Google fitにヘルスコネクトへのアクセスを許可する Google fitとヘルスコネクトを同期する ヘルプ Step1を完了させてください 設定の手順 ヘルスコネクトアプリを起動し設定してください 1 2 ヘルスコネクトを使ってみるをタップする Yahoo! JAPANにヘルスコネクトへのアクセスを許可する ヘルスコネクトと連携済み ヘルプ ,000 （,000） ,000 （,000） （）内は月曜日〜日曜日の週間目標です 設定する 閉じる ボタンで「今やるべきこと」を 表現 パネル・歩数計初期設定モーダル 設計過程 要件をヒアリング 情報の優先度・ 取捨選別を検討 手書きでラフに起こし、 企画に相談 figmaで大まかに 制作→レビュー Components など整え清書 開発とのやり取り テスト設計書 作成しテスト リリース 担当範囲・使用ツール 担当範囲：情報設計、UIデザイン、実装指示、他部署と連携 使用ツール：figma、illustrator 学び 煩雑で手数の多い過程をどのように簡略化して見せユーザーに負担に 思われないようにするかの検討が学びになった
7. 時刻表タイマー グロース施策 | 新規立ち上げ後の施策 P6 課題と仮説 行った内容・結果 設定画面以前の入り口でパネルを登録し利用し たいと思われていないことが窺える 利用イメージ・メリットが伝わっていないのでは 試算：13万ub 積み上げ結果：約15万ub 115%達成 1 クイックinfo未登録の場合、マイ時刻表のデータを クイックinfoパネルに表示させる Yahoo! JAPAN ID 自動連携 内容 結果 乗換案内アプリ クイックinfo パネル 時刻表タイマー 駅1 駅2 小田急小田原線 代々木上原 普通 ４番線 新宿行 11:34 26:23:54 次は 11:40 新宿行 時刻表タイマーを設定したいと思わせる施策を 打つことが必要 機能の旨みを伝える「こんな便利な機能だったんだ！ それだったら使ってみようかな」 受動的に動きを見せて機能の旨みを 体感してもらう 2 アシストタブを開く直前の位置情報を取れるので、 その最寄り駅の情報を自動で掲出する →ユーザーのニーズに沿った駅を出すことが狙い ユーザーの位置情報から自動設定 案件承認通過 開発開始待ち 結果 内容 パネル・歩数計初期設定モーダル 設計過程 数値分析をする 課題の仮説立て 仮説に対する解決策を 松竹梅案で作成 PMに課題の仮説 と案をプレゼン 承認を経て開発 見積もり、依頼 開発とのやり取り テスト設計書 作成しテスト リリース 担当箇所 学び 課題分析、グロース案策定、実施(開発ディレ)、数値結果まとめ 数値を見てどこで離脱しているかを分析することや仮説立ての学びを得た
8. 天気画面 リデザイン 全体構成 | 既存改修 旧ver P7 P7 依頼内容 天気画面のUIが時代に対し古くなってきたので、リデザインして欲しい 　全体の印象がガラッと変わるようなデザインにして欲しい 　使い心地と新しい体験が欲しい 旧ver リニューアル後 課題 天気画面のUIが10年ほど変わっておらず一部古く見える部分があった 情報量が多く煩雑に見えるため情報整理を今一度する必要があった 機能的すぎて、心を動かすような仕掛けが少なかった 制作期間・メンバー メンバー：ディレクター1名、リードデザイナー1名（自分） 　　　　　エンジニア3名 制作期間：2ヶ月 担当範囲・使用ツール 担当範囲：情報設計、UIデザイン、実装指示 使用ツール：figma、illustrator
9. 天気画面 リデザイン 全体構成 | 既存改修 P8 工夫した点（狙い：シンプルで使い心地の良いデザインにしたい） 天気 雨雲レーダー 天気 雨雲レーダー 天気 雨雲レーダー 天気 雨雲レーダー 背景の色の部分を多く取り、朝/夕で色が変化するように設計 時間や天気に応じて背景が変化し、その時々のデザインを楽しむ ことができるように 現在地 ◦◦区 今日 10.1℃ 晴れ 時々 くもり 現在 [+1] [+1] % 0 4 5 6 7 6:15 時刻 天気 0% 0% 0% 50% 降水 日の出 0mm 0mm 0mm 0.2mm 気温 …前日 60% 60% 60% 湿度 風 8 70% 0.5mm 9 80% 0.6mm 10 80% 1.0mm 現在地 横浜市保土ヶ谷区 木更津市 今日 26 ℃ 晴れ 時々 くもり 現在 [+1] [+1] % 0 5 6 7 6:15 0% 0% 0% 50% 日の出 0mm 0mm 0mm 0.2mm …前日 60% 60% 60% 8 70% 0.5mm 9 80% 0.6mm 10 80% 1.0mm 天気 …前日 風 千代田区 今日 21 ℃ 晴れ 時々 くもり 現在 [+1] [+1] % 0 5 6 7 6:15 0% 0% 0% 50% 日の出 0mm 0mm 0mm 0.2mm 60% 60% 60% 8 70% 0.5mm 9 80% 0.6mm 10 80% 1.0mm 現在地 千代田区 今日 24.8℃ 晴れ 時々 くもり 現在 [+1] [+1] % 0 5 6 7 6:15 天気 0% 0% 0% 50% 日の出 0mm 0mm 0mm 0.2mm …前日 60% 60% 60% 風 8 70% 0.5mm 9 80% 0.6mm 10 80% 1.0mm 11 80% 1.0mm 明日 週間天気 3m 3m 3m 3m 3m ? 15℃ 16℃ 16℃ 9℃ 12/1（火） 16℃ 地域設定 76% 78% 17℃ 18℃ 信頼度A~C 3m 14℃ 0％ 地域検索 明日 5:00発表 82% 86% 18℃ 晴れ 9℃ 3m 19℃ 天気 80% 降水 1.0mm 3m 風 11時刻明日 4 60% 湿度 19 気温 ℃ 週間天気 3m 3m 3m 3m 3m ? 15℃ 23℃ 16℃ 15℃ 8/1（火） 16℃ 76% 78% 17℃ 18℃ 南アルプス市 地域検索 信頼度A~C 3m 27 30 ℃ 17 ％ ℃ 11:00発表 82% 86% 明日 18℃ 晴れ 3m 19℃ 地域設定 現在地 1.0mm 3m 週間天気 3m 3m 3m 3m 3m ? 11時刻明日 4 80% 降水 60% 湿度 19 気温 ℃ 15℃ 23℃ 16℃ 15℃ 8/1（火） 16℃ 地域設定 76% 78% 17℃ 18℃ 信頼度A~C 3m 27 30 ℃ 17 ％ ℃ 地域検索 明日 11:00発表 82% 86% 18℃ 晴れ 3m 19℃ 1.0mm 3m 週間天気 3m 3m 3m 3m 3m ? 11時刻明日 4 80% 降水 60% 湿度 19 気温 ℃ 15℃ 23℃ 16℃ 15℃ 8/1（火） 16℃ 地域設定 76% 78% 17℃ 18℃ 信頼度A~C 3m 27 30 ℃ 17 ％ ℃ 地域検索 明日 11:00発表 82% 86% 18℃ 晴れ 3m 19℃ 3m 60% 19℃ 「雨雲レーダー」はじヘッダー右上に表示され簡単にアクセスで き、リアルタイムで雨雲の様子を確認できるように 「週間天気」が上部に移動し、気になる曜日の天気がすぐに見られ るように 3 (木) A 19 (金) A 31~34 20~24 予報は変わりにくいでしょう 5 (土) B 6 (日) C 7 (月) B 8 (火) A 9 (水) A 10 (木) A 11 (金) B 12 (土) C 13 (日) C 14 (月) C 15 (火) C 16 (水) C 17 (木) C 14℃ 30℃ 13℃ 12℃ 11℃ 12℃ 13℃ 10℃ 10℃ 11℃ 11℃ 12℃ 10℃ 10℃ 10℃ 21℃ 9℃ 9℃ 8℃ 8℃ 9℃ 9℃ 7℃ 7℃ 8℃ 7℃ 9℃ 8℃ 7℃ 8℃ 50% 40% 10% 20% 20% 40% 50% 70% 20% 20% 40% 0% 0% 0% 0% 3 (木) A 19 (金) A 31~34 20~24 予報は変わりにくいでしょう 5 (土) B 6 (日) C 7 (月) B 8 (火) A 9 (水) A 10 (木) A 11 (金) B 12 (土) C 13 (日) C 14 (月) C 15 (火) C 16 (水) C 17 (木) C 14℃ 30℃ 13℃ 12℃ 11℃ 12℃ 13℃ 10℃ 10℃ 11℃ 11℃ 12℃ 10℃ 10℃ 10℃ 21℃ 9℃ 9℃ 8℃ 8℃ 9℃ 9℃ 7℃ 7℃ 8℃ 7℃ 9℃ 8℃ 7℃ 8℃ 50% 40% 10% 20% 20% 40% 50% 70% 20% 20% 40% 0% 0% 0% 0% 3 (木) A 19 (金) A 31~34 20~24 予報は変わりにくいでしょう 5 (土) B 6 (日) C 7 (月) B 8 (火) A 9 (水) A 10 (木) A 11 (金) B 12 (土) C 13 (日) C 14 (月) C 15 (火) C 16 (水) C 17 (木) C 14℃ 30℃ 13℃ 12℃ 11℃ 12℃ 13℃ 10℃ 10℃ 11℃ 11℃ 12℃ 10℃ 10℃ 10℃ 21℃ 9℃ 9℃ 8℃ 8℃ 9℃ 9℃ 7℃ 7℃ 8℃ 7℃ 9℃ 8℃ 7℃ 8℃ 50% 40% 10% 20% 20% 40% 50% 70% 20% 20% 40% 0% 0% 0% 0% 3 (木) A 19 (金) A 31~34 20~24 予報は変わりにくいでしょう 5 (土) B 6 (日) C 7 (月) B 8 (火) A 9 (水) A 10 (木) A 11 (金) B 12 (土) C 13 (日) C 14 (月) C 15 (火) C 16 (水) C 17 (木) C 14℃ 30℃ 13℃ 12℃ 11℃ 12℃ 13℃ 10℃ 10℃ 11℃ 11℃ 12℃ 10℃ 10℃ 10℃ 21℃ 9℃ 9℃ 8℃ 8℃ 9℃ 9℃ 7℃ 7℃ 8℃ 7℃ 9℃ 8℃ 7℃ 8℃ 50% 40% 10% 20% 20% 40% 50% 70% 20% 20% 40% 0% 0% 0% 0% 画面中央の矢印ボタンをタップすると当日から明日までの1時間 ごとの風の情報が表示されるように パネル・歩数計初期設定モーダル 設計過程 今日の服装どうする？ 12月1日 長袖１枚で快適に過ごせます ジャケット等羽織るもの があると安心 セーターや厚手のコートがお すすめ 今日は洗濯日和？ 12月1日 薄手のものなら乾きます 部屋干しか乾燥機にしま しょう 外干しは厳しそう 生活アドバイスをもっと見る 雨雲レーダー 18:00 まもなく雨がます 今日の服装どうする？ 12月1日 長袖１枚で快適に過ごせます ジャケット等羽織るもの があると安心 セーターや厚手のコートがお すすめ 今日は洗濯日和？ 12月1日 薄手のものなら乾きます 部屋干しか乾燥機にしま しょう 外干しは厳しそう 生活アドバイスをもっと見る 今日の服装どうする？ 12月1日 長袖１枚で快適に過ごせます ジャケット等羽織るもの があると安心 セーターや厚手のコートがお すすめ 今日は洗濯日和？ 12月1日 薄手のものなら乾きます 部屋干しか乾燥機にしま しょう 外干しは厳しそう 生活アドバイスをもっと見る 今日の服装どうする？ 12月1日 長袖１枚で快適に過ごせます ジャケット等羽織るもの があると安心 セーターや厚手のコートがお すすめ 今日は洗濯日和？ 12月1日 薄手のものなら乾きます 部屋干しか乾燥機にしま しょう 外干しは厳しそう 生活アドバイスをもっと見る 要件をヒアリング 情報の優先度・ 取捨選別を検討 手書きでラフに起こし、 企画に相談 figmaで大まかに 制作→レビュー 雨を設定する Components など整え清書 開発とのやり取り テスト設計書 作成しテスト リリース 学び の天気を見る 背景色をガラッと変えることで全体の印象を変えるというシンプルだが大胆な設計変更により印象が大きく変わることを学んだ 報報 水
10. 天気画面 リデザイン 生活アドバイス | 新規立ち上げ 生活アドバイス 工夫した点（狙い：わかりやすく楽しく）P9 依頼内容 生活アドバイスという画面を作って欲しい 各項目についてのアドバイスをわかりやすく確認できるようにしてほしい 設計過程 今日の服装どうする？ 12月1日 通気性のいい服で暑さ対策を 半袖にシャツなど重ねて調節を 長袖の羽織ものが活躍する一日 厚手のジャケットなど上着があると安 心 厚手のコートでしっかり防寒を 今日は洗濯日和？ 絶好の洗濯日和 厚手のものも乾きます 薄手のものなら乾きます 外干しは厳しそう 生乾きに注意。乾燥機が◎ 12月1日 コンテンツとして楽しめるよう イラストのバリエーションを多数制作 指数の程度をグラデーションのドットでビジュアライズ figmaで大まかに 制作→レビュー 要件をヒアリング 制作期間・メンバー 情報の優先度・ 取捨選別を検討 Components など整え清書 手書きでラフに起こし、 企画に相談 開発とのやり取り リリース 今日は傘を持っていく？ 傘はいりません 折り畳み傘があれば安心 傘を持って出かけよう 傘が必要です 絶対傘を忘れずに 12月1日 今日の紫外線は？ 12月1日 日中は屋内が◎。外出は朝夕に サングラスで目の保護も 日傘があると快適に過ごせます 日焼け止めを利用しよう 安心して過ごせます メンバー：ディレクター1名、リードデザイナー1名（自分） 　　　　　エンジニア3名 制作期間：2ヶ月 今日は乾燥してる？ 12月1日 ひどく乾燥！たっぷり入念な保湿を 乾燥注意！保湿をしっかり リップやクリームを持ち歩こう お肌にやさしい一日になりそう お肌しっとり過ごしやすい一日 担当範囲・使用ツール 担当範囲：情報設計、UIデザイン、実装指示 使用ツール：figma、illustrator 今日は風邪をひきやすい？ 12月1日 警戒！風邪予防を万全に 加湿を心がけた方がよさそう 手洗い・うがいをしっかり 危険度小。体力つけてね 風邪の心配は少なそう ユーザーをグラフィカルにどう楽しませるか？という視点を学べた 学び 今日のアイスは？ 12月1日 冷たいアイスをいくらでも食べたい！ 冷たくさっぱりしたシャーベットが◎ 暑い日にはさっぱりとシャーベットを あま〜いアイスクリームがうまい 体が冷えないように要注意
11. その他案件まとめ P10 副業 チラシ作成
12. その他案件まとめ P11 本業&副業 バナー モーダル
13. イラスト制作まとめ P12