Design PORTFOLIO Yusui Hoshino

Transcript

1. 1 星野結水 日本デザイナー学院　グラフィ ックデザイン科 （25卒） mail: mazisu99@gmail.com PORTFOLIO PORTFOLIO
2. 2 強み Strong Point 星野 結水 H O S H I N O Y U S U I 大学3年の10月からアプリの実装よりも見栄えにこだわりたいと考え、 デザイナーを目指す。 UI/UXデザインを独学で習得し、 複数のハッカソン、 インターンに参加してきた。 現在は専門学校でグラフィックの基礎を学ぶ。 論理思考力 理由を持った デザインが得意 やり切る力 PC知識 0から 大学首席 チーム経験 複数ハッカソンに デザイナーとして参加 Desgin Philosophy 遊び心を加えるデザイン 機能性だけのデザインは操作パネルにしかならず、人にとって負担になる。 それらに遊び心や情動を捉えたデザインを加えることで、 初めて人をポジティブにする存在になると考えている。
3. 3 新潟県立燕中等教育学校 会津大学 コンピュータ理工学部 ・学科 2019 全期 学部1年の成績2位/約250名 2020 全期 学部2年の成績1位/約250名 2021 全期 手芸同好会部サーク ル部長 （3Dモデリ ング、 ゲーム制作サーク ル） 10月 JPHACKS 01月 TOHOKU GROWTH Accelerator Growth Course （ビジネスプログラ ム） 2022 02月 Open Hack U 2021 Online Vol.3 02月 100 Program 1期 03月 Yumemi Spring Design Internship 2022 06月 株式会社Codephilia 共同創業 08月 100 Program 2期　優秀モバイ ルアプリ賞 日本デザイナー学院 2年制グラフィックデザイン学科 2023 09月 前期末試験 奨励賞 （2位/40） 09月 AKATSUKI、 アオタケプロジェクト参加チーム所属 （IT分野での人材育成プロジェクト） 2024 全期 日本デザイ ナー学院　在学準特待生 02月 後期末試験 奨励賞 （2位/40） 02月 デザインを担当したアプリ 『mooo』 がApp Storeにて公開 10月 デザインを担当したアプリ 『琥珀日記』 が公開 2025 03月 卒業制作 奨励賞 （2位/40） 学内 インターン プログラム ハッカソン 自主制作 ものづく りが好きだが、 才能はない気がする。 コンピューター使えば何かできるかも ？ アプリデザインを頼まれて 200画面を制作。 やっぱデザインするの好きだ。 デザイナーを目指してもいいのか？ 独学続けたらデザインインターン行けた！ デザイナーになるために人生使おう 大学院でコンピュータではなく、 専門でデザインを学びたい。
4. 4 幅広いサブスキル ゲーム JavaScript Unity p5.js 写真撮影 ・編集 LrC Id Ai Figma デッサン イラスト Ps ウェブサイト STUDIO Framer 3D PV Blender Other Skills モーション PV Ae Pr
5. 5 目次 01 UI/UX 01 mooo （カップル向け音声共有アプリ） - -------------------------------------08 02 DAWN Version.2 （旅行記共有アプリ） ----------------------------------- 18 03 両思いチェッカー （身近な人とのマッチングアプリ） --------------------28 02 GRAPHIC 01 身の回りのモノで作った時間を刻むアプリ Timo-----------------------38 02 OAC学生広告クリエイティブアワード- -------------------------------------42 03 はちみつ販売店 Sol Honeyロゴ、サイト---------------------------------46 04 すぎのこ幼稚園ロゴ、サイト制作-------------------------------------------52 05 文庫本 『人間標本』ブックカバーリデザイン------------------------------56 06 アプリ mooo開発秘話 （冊子） ------------------------------------------------58 07 観光立国表明ポスター- ---------------------------------------------------------60 08 自作フォント 「Coron Font」 --------------------------------------------------- 61 9 ノーコードポートフォリオサイト----------------------------------------------62 10 蚊症記録スライド----------------------------------------------------------------63 11 『あの枝の葉』PV制作- ---------------------------------------------------------64 12 他作品- ------------------------------------------------------------------------------65
6. 01 UI/UX 6
7. Column （ UI/UX分 析 ） （ UIの知識 ） （ エンジニアとの協力 Tips ） 7
8. 8 タイ トル 星野結水 好きな人の 好きな声を もっと身近に 8 01 UI/UX 　 種別 自主制作 他メンバー Androidエンジニア2名 iOSエンジニア3名 デザイナー3名 担当 UI/UXデザイン、 リードデザイナー 期間 5ヶ月 （2023.9 - 2024.2） 関連 アオタケプロジェクト AKATSUKIプロジェクト カップル向け音声共有アプリ mooo
9. リード デザイナー 9 開発は担当せず、 他のデザイナーへタスク の割り振り、 フィードバックを行った。 これまでにない体験を作ろうという思い で、MVP公開を最優先とした。 体験自体が差別化ポイントなので MVP用 のデザインもこだわった。 体験自体が差別化ポイントなので MVP用 のデザインもこだわった。 MVPとして公開し、 同時にSNS、 note、 各 メディアPR活動を行った。 開発 3ヶ月 制作の流れ App Storeで 公開中 2024 バレンタイン アイデア、 要件定義決定 1ヶ月 UI/UXデザイン 1ヶ月
10. Step 1 Step 1 「おはよう」を レコードで録音 Step 4 Step 4 レコードを再生して 恋人のレコードを聞く Step 2 Step 2 スワイプで恋人に レコードを送る Step 3 Step 3 恋人のレコードが届くと 左上に見える moooは恋人と おはようの音声を送り合えるアプリ 10
11. Point 1 Point 1 過去のレコードも聞ける Point 2 Point 2 かわいい設定画面 動きがわかる PV （担当外） 11
12. 12 機能決定から仮説検証 必要な情報を必要なタイミングで共有できる お互いで話し合う機会がある 必要な情報 （不満，言いたいこと，愛情，感情，etc,,,） 3 恋愛系の機能のアイデア出し 2 理想の恋人像とは？ 1 「恋愛から結婚までを支援するアプリ」 を作りたい 部分的に位置情報を共有する 他のカップルのデートプランを閲覧 ・ 作成できる 相手の不満をAIに相談する 記念日を管理する機能 信頼パスポート機能 スタンプを送り合う機能 好きなメディア共有機能 嫌いを共有する 今の位置情報 を送る 相手の1日の移動ログが毎朝送られてく る スマホ越しに指でいちゃつける機能 パートナーと違うUI 運命の赤い糸をゆらゆらさせる 恋愛条約メモ SNS監視ビューアー お互いの取説を作る 将来の計画を少しずつ作っていくのをサポート 毎日お互いにミッションをこなす 相手の環境音で作るオーディオスペクトラム お互いに自分クイズを作って出し合う メンバーがユーザーになれるから 若いメンバーで構成されていることを強みにするために世代による価値観の違 いが大きい恋愛分野で、 自分たちがユーザーになれるアプリを作る必要があっ た。 ブルーオーシャンを狙えるから 恋愛分野において、 マッチングのサービス、 結婚のサービスは多いが、 その間を埋め るサービスは少ないと発見した。 持っている愛情が相手に伝わる 愛情→お互いがお互いを思いやれてたところからく るもの
13. 13 4 アプリ概要 5 Lineで音声を送り合う仮説検証 キャッチコピー 好きな人の好きな声をもっと身近に ニーズ 毎日恋人から 「おはよう」 を聞きたい。 たわいないことでも話す機会を作 りたい。 ターゲット 大学生の同棲していないカップル 差別化 • 気軽に続けられるように通話ではなく音声を送り合う方式。 • 音声以外の機能を排除することで、 音声を送りあう体験に集中で きる点。 アプリ名 ：mooo morningからモーという音を考えた。 • 「もー、 mooo入れなきゃ」 のように広告的としても使いやすい。 • oを３つの小文字にすることで、 モーショングラフィックスにも活 用しやすい。 １週間LINEで毎朝 「おはよう」 を音声で録音して送りあう実験に若者の５組のカップ ルに協力いただいた。 Q.恋人をどの程度身近に感じたか？ Q.利用してみてどう感じたか？ 8割以上のカップルが 「電話している時のような感覚」以上と回答 おはようの音声を録音して 送り合えるアプリ 実際に会っている感覚 電話している感覚 どちらでもない 2 1 4 1 1 お互いを応援し合えたこと で1日頑張ろうと思えた 音声を聴くのが楽しみで 毎朝待っていた！ 声色や音声でしか分からない 感情が伝わるのが嬉しい 何回も聞けるので通話でき ない時でも寂しくなかった
14. 14 フィードバックを繰り返し受けた UI制作 3 ワイヤーフレーム 1 音声はレコードに込めて表現 2 雰囲気 「清々しい朝のさりげないおしゃれさ」 ムードボードをメンバーそれぞれが制作し、 雰囲気の方向性を決定した。 カセットレコーダー レコード 絵文字 ICレコーダー カード レコードを採用した理由 レトロなおしゃれさがある 投げる、割る、回るなどのアニメーションがしやすい ノイズを加えたり、カバーに写真を組み込むなどの 表現が可能
15. 15 4 初期案 UI メンバーから 「全体的に雰囲気が大人っぽすぎる、 朝 よりも夕方に見える」 とフィードバックをもらった。 5 最終版 UI
16. 16 直感的なデザイン 現実の物を活用するスキュモーフィズムというスタイルを活用し、レト ロな機会を触っているようなワクワクを感じさせるようにした。 朝、昼、夕、夜で変化する画面 様々なアプリ、素材を使用 今回はGUI的な見栄えというよりはゲームに近いオブジェクトを作りたかったため、 様々なツールを利用した。 面白い UXライティング アカウント作成などの面倒な手続きをプラスの体験に変えるのは面白 さや親近感だと考え、 友人のようなライティングを心がけた。 moooのこと前から 気になってた？ キミ の名前は？ 愛のこもったおはようを 恋人に送ってあげて！ After Effects Blender 毎日開きたくなる世界観のあるUI 利用規約を読むのが 趣味だったよね？ 会ったことあるっけ？　 カフェだっけ？　 それとも君の心の中？ SND （UXサウンドキット） Midjourney （画像生成AI）
17. 17 カップル向け音声共有アプリ mooo - 1/5 ロゴ 最近の海外アプリにはスマホ表示の強みを生かした複雑なロゴが多くみられる。moooは世界観 にこだわりを持つアプリなため、 ゲームのように写真の素材をロゴに使用した。朝の世界をレコー ドで切り抜くことで、アプリへの入り口を表現している。
18. 18 タイ トル 星野結水 02 UI/UX 旅行の一連の流れを共有する DAWN 種別 自主制作 メンバー エンジニア5名、 ビジネス1名 担当 リサーチ、 アイデア、 UI/UXデザイン、 PV制作 期間 1ヶ月 (2021.12) 関連 TOHOKU GROWTH Accelerator Growth Course （ビジネスプログラム）
19. 19 制作の流れ ビジネス担当のメンバーとアイデアを毎日 出し合い、アプリアイデアを決定した。 Figmaでプロトタイプも制作し、インタ ビュー時にプロダクトをイメージしやすい ようにした。 初めてリーンキャンバスやバリュープロポ ジションキャンバスなどを使いながらアイ デア出しを行った。 1 週間 2 週間 アイデア制作 UI 制作 エンジニアの都合により、開発延期。 開発延期 1 週間 リサーチ
20. 20 アイデア 2023年に日本のオンライン予約の売上がコロナ前を上回る • コロナで打撃を受けた観光産業が 盛んな地域の力になりたい • コロナ収束後に伸びるであろう分野に 取り組みたい 大半の旅行予約はオンライン予約で行われる 2 観光産業に挑戦したい 3 観光系スタートアップを 100社調査 4 メンバーとアイデア作り 1 市場調査 τʔλϧ ΦϯϥΠϯ 64#                     ཱྀߦʹ͸ߦ͔ͳ͍ʗࣗ෼Ͱ༧໿͠ͳ͍ ͦͷଞ ަ௨ػؔʹి࿩ɾ ̛̖̭ ަ௨ػؔͷνέοτൢച૭ޱͰ༧໿ߪೖ ަ௨ػؔϗʔϜϖʔδ͔Βωοτ༧໿ ཱྀߦձࣾʹి࿩ɾ ̛̖̭ ॓ധࢪઃʹి࿩ɾ ̛̖̭ ཱྀߦձࣾͷళฮʹग़޲͍ͯ༧໿͢Δ ཱྀߦձࣾϗʔϜϖʔδ͔Βωοτ༧໿౳ ॓ധࢪઃϗʔϜϖʔδ͔Βωοτ༧໿ ωοτઐ໳ͷཱྀߦ༧໿αΠτ 国内宿泊旅行の予約によく使う方法 （複数回答） 日本総旅行予約額 （公財）日本交通公社 _旅行年報 2020 p108 (%) フォーカスライト社 Japan Total Gross Booking (US$B), 2018-2024
21. 21 ソリューション Instagramは断片的にしか 情報共有を行えない • 1地点についての投稿に特化している • 位置情報 ・ URLを複数共有できない • 知識 ・ 小話を共有しづらい ブログは現代の情報発信 ・閲覧の形に 適していない • スマホで投稿 ・ 閲覧しづらい • 投稿までに心理的障壁が高い • 旅行好き同士で繋がったり、 情報交換しづらい 既存SNSの 問題 アプリ アイデア どんな機能がある ？ 旅行の 1 連の流れを「旅行記」としてまとめるア プリ。 画像、動画を含められるブログのようでありなが ら、スマホに最適化された UI で、旅行記を入力し やすい。 ターゲット 年齢 ： 20代 性別 ： 女性 SNS ： Twitter、Instagram 月に少なくとも１回は旅行に行く旅行マニア 問題 2 問題 1
22. 22 利用フロー 執筆者情報から SNSに飛べる 目次、概要を見る タイムラインから 旅行記を選ぶ 本をめく るように読み進める 旅行記閲覧 旅行の 1連の流れを 「旅行記」として本のように楽しめる
23. 23 「新規」から 旅行記を作成 概要を記入 1ページごとに執筆 旅行記を公開 一連の流れを体験できる Figma Prototype 記事作成 スマホでも簡単に入力できる UIスマホでも簡単に入力できる UI
24. 24 ビジネス 手間が多い 断片的に保存 ストーリーとして保存 DAWN ブログ Twitter 手間が少ない DAWN 観光系企業 クリエイター ユーザー 閲覧ユーザー 広告を掲載できる権利 ¥ ¥ ページ数制限などの制限を解除 有料プランを販売できる権利 ¥ 広告表示 サービス利用 旅行プラン 販売 ¥ Instagram 一連の旅行体験を保存でき 投稿する手間もブログより少ない ユーザーが旅行プランを販売し 収益化を行える マネタイズ 競合サービス
25. 25 プロトタイプを利用したインタビュー 旅行で回った順番をみれる と自分が旅行に行く際の参 考になる 自分が観光した中で起きた アクシデントや共有しておき たい情報を気軽に書けるの は面白い ブログほど自由すぎず情報 量に制約がないので、書き たいことが書けそう 自分がどんな旅行に行った のか記録としても使える ! ? 学生の旅行マニア 7名
26. 26 制作物 エンジニアに伝わりやすいデザインシステムと UIデザイン 画面を利用場面、UIスタックごとにメモ付きで配置したり、プロトタイプ画面を別で作ることで エンジニアに伝わりやすいファイルになることを心がけた。 Figmaの設計手法をまとめた 空オブジェクトを組み合わせてマージンを構成する手法 を、note記事にまとめてから制作に望んだ。 空オブジェクト note記事
27. 27 1分間 PV After Effectsを用い、 4日間で1分間のPVを制作した。 内容は既存手法の問題点からDAWNの提案 までを含めた。
28. 28 タイ トル 星野結水 種別 ハッカソン制作作品 （Hack U 2022 vol.3） 他メンバー エンジニア5名、 ビジネス1名 担当 アイデア出し、 機能選定、 UI/UXデザイ ン、 発表資料制作 期間 2週間 / 2021.12 03 UI/UX 28 • 恋愛に奥手な中高生がターゲット • 身近な人同士のマッチング • 秘密をバレずに使える 奥手でも生きやすい 優しい恋愛文化を作る！
29. 29 4 日間 UI 制作 Hack Uにてエンジニアがアプリを開発し た。 10 日間 ハッカソン インターネット異性紹介事業法律に触れる 可能性があるため、手続きの複雑さやリス クの大きさから開発を断念した。 開発中止 アイデアをメンバーそれぞれ持ち寄り、主 要機能を決定した。その後、恋愛につい てディスカッションを行い、用件定義を 行った。 ハッカソン用なので、実装に時間がかかり すぎないデザインを心がけた。 3 日間 アイデア制作 制作フロー
30. 30 課題とソリューション 告白が失敗するのが怖い 失敗すると今までの関係性を失うことになる お互いに一番好きな相手でないと付き合えない 知り合いの相手との恋愛は、 失敗した場合にその後の関係性が気ま ずくなるリスクが大きい。 片思いは気づかれず、両思いの時のみに通知が来る ノーリスクで知れる 可能性がある全ての人と恋愛のチャンスを作れる もっと気軽に恋愛をしていい文化を作る 身近に好きな人がいるが 告白できない 身近な人との恋愛を後押しする マッチングアプリ 恋愛に奥手な ピュアな草食系中高生 周りから恋愛の話が聞こえてく るが、 本人は恋人を作ったことがない。 好きな人はいる が、 自分に自信がなくアクションを起こせない。 周りの人からは、 「魅力を知れば好まれ るのに、 積極性が足りない」 と思われている。 理由 1 価値１ 価値２ 理由 2 ターゲット 問題 ソリューション
31. 31 自分と相手の好意の合計で両思いを判定 1. 好きな相手を５段階の好き度で登録 2. 相手との好き度の合計が６以上の場合のときマッチング Aくん 好き度１　 「Bちゃんが、 もし自分のことを大好き （5点）だったら 好きになれる気がする」 好き度 0 （未登録） 「Aちゃんが自分のことをめっちゃ好き （５点）でも 好きになれる気がしないな ...」 好き度 3　 好き度 5　 好き 度 0　 好き度５　 「Cちゃんが、もし 1点だけでも自分のことを 好きでいてくれるなら付き合いたい。 それくらい大好き」 合計好き度 3 合計好き度 5 合計好き度 6 マッチング Bちゃん Cちゃん Dちゃん Aくん
32. 32 利用フロー 好き？好き ！ 片思いを秘密にできる TwitterのIDから相手を指定できるため、 相手とアプリについて話す必要がない 好きな相手がいることは知られない Twitterアカウントを持っている人が表示されるのであっ て、 両思いチェッカーを利用しているかは関係ない。 Twitterでのフォロー、 フォロワーから相手を選択 好き度を 5段階で入力 Twitterでログイン後に 「＋」をタップ 一覧に追加 好き度の合計が 6以上 でマッチング 恋をしてからマッチングまで
33. 33 別れたい ... 破局フロー 好きな相手の秘密を守る 登録→解除を繰り返して、 好きな相手を総 当たりで見つける行為を防止できる。 別れをポップに表現 気軽な恋愛には、 気軽に別れられる前提も必要だと考 え、 ジョークや煽りを入れてポップに表現した。 破局理由を選択し Twitterで報告 悲しい気持ちに なりながら確認 名言に励まされる。 一ヶ月利用不可になる 右上アイコンをタップ ハートが割れる アニメーション再生
34. 34 制作物 Atomic Desginを活用したデザインシステム Atomic Desginの考えを活用することにより、 コンポネントの親子関係を管理しやすくなった。 付箋で説明を充実させたデザイン 付箋を自作し、 修正指示、 機能指示などのカテゴリごとに色分けし た。
35. 35 チームメンバー向け Figmaの取説 初めてFigmaを利用するエンジニアメンバーもいたたため、 基本的な操作や数値の読み取り方などをnote記事でまとめて共有した。 発表スライド、動画 最終発表のスライドと利フローを説明する動画を含めた。 スライド | Figmaで素材を制作 動画 | After Effectstと Figmaのプロトタイプ機能を利 用
36. 02 GRAPHIC 36
38. 38 卒業制作 身の回りのモノで作った 時間を刻むアプリTimo 身の回りのモノを組み合わせて10種類の数字のフォントを 制作し、 それらを活用した時計、 タイマー、 ストップウォッチ のウェブアプリを開発し、 公開した。 専門学校卒業制作 2ヶ月 (2024/2) Illustrator, Photoshop, HTML/CSS, JavaScript, GitHub 奨励賞 2位 /40名 01
39. 39 課題　 既存のウェブのストップウォッチ、タイマーアプリのデザインは 複雑すぎるものや無機質で面白みのないものが多い。 解決策　 子供が身の回りのモノを組み合わせることで 数字や文字を形作って遊ぶようなアナログな表現を取り入れる。 ターゲット　TARGET 理系の男子大学生のような機能性を重視する方に対して 機能性以外の価値を考えるきっかけを作る。 Time+Objectで Timo （タイモ）と名付けた。 ロゴの 「i」はモノが時間を刻む砂時計の砂のように 落ちていく様子を表現している。 コンセプト ロゴ
40. 40 �� ペッ トボトル PLASTIC BOTTLES �� コード CORDS �� ガムテープ DUCT TAPE �� 鏡 MIRROR �� レコード RECORDS �� 枝 BRANCHES �� アルミ缶 ALUMINUM CANS �� キーボード KEYBOARDS �� 本 BOOKS �� 葉 LEAVES モノから作った 10種類の数字フォント 子供の頃に触って形を作った体験を思い出させるように、 身の回りにあるモノを選んだ。
41. 41 ラフ 時計、タイマー、ストップウォッチ Clock Stopwatch Timer 背景色、 フォントサイズを自由に設定し、 好みの設定を探求する楽しみがある。 https:// yusuihoshino.github.io/ timo/clock
42. 42 OAC学生広告クリエイティブアワード 全日本空輸株式会社、 株式会社森沢ポスター OACクリエイティブアワードは実際の企業が中心となり、 課題の提供と賞を決定する学生向けコンペティション。授 業内ではラフ制作を５回繰り返した。 全日本空輸株式会社 若い世代の方々に 「ANAで働きたい」と感じていただき行動を 起こしていただける様な広告。パイロットや客室乗務員以外の 職種に焦点を当て制作をする。 専門学校課題、外部コンペ 1ヶ月 (2024/9) Illustrator, Photoshop, Lightroom, CLIP STUDIO PAINT 株式会社モリサワ モリサワでは新たな学生向けフォント製品 「Morisawa Fontsス タンダードプラン 学生価格」 （990円）を発売。より多くの学生 さんに、モリサワのフォント選びの楽しさが伝わるような広告を 制作する。 02 課題文 一部変更 ・省略
43. 43 ୈ Ұ ҹ ৅ ͸ ϑ Ỽ ϯ τ ͔ Β ʮ.PS J TBXB
    'POU Tελϯμʔυϓϥϯ
    ֶੜՁ ֨ ʯ ͳΒ    Ҏ্ͷϑΥϯτ͕࢖͍์ ୊ モリサワフォント ① 第一印象はフォントから 就活生が会社に見せる第一印象は、履歴書の顔写 真よりも文字のフォントである。この気づきからお 化粧をするようにフォントを整える学生を描いた。 初回ラフ
44. 44 初回ラフ 全日本空輸行き会社 ① 上を向く仕事。 キャッチコピーベースで制作した作業員の人たちの 視点と心持ちをポジティブに表現した。 ্ Λ ޲ ͘ ࢓ ࣄ Ố ύΠϩοτɾ$ "͚ͩ͡Όͳ͍ ɺۭΛݟ कΔ஥ ؒΛืू ɻ
45. 45 初回ラフ モリサワフォント ② フライトを支える仕事 地上で業務をする作業をキーボードで、それが航 空を支える姿をキーボードの 「A」と 「N」を飛行機 が行き来しすることで ANAの航空を支えているこ とを表現している。 ύΠϩοτɾ$" ͚ͩ͡Όͳ͍ɺۭΛࢧ͑Δ஥ؒΛืूɻ ϑϥΠ τΛࢧ͑Δ࢓ࣄ
46. 03 はちみつ販売店 Sol Honey ロゴ、 サイト制作 専門学校課題 4週間 (2023/6) Illustrator, Photoshop, Figma 生徒間投票１位 /15名 はちみつ販売店の設定を考え、店舗ロゴ、 ウェブサイトのデザインを制作した。 46
47. 47 名前の由来 地球における太陽 (Sol)のように、人に 栄養を与える食品を作り続けたいという 理念から 社員数 4０代の夫婦＋従業員２名 商品 Sol Honeyという名前の中価格帯のはちみつ。 自然に近い製法で作られており、健康促進、 美容効果が期待できる。 販売形式 本店販売 （田舎） ：3割 EC ：5割 スーパー ：2割 差別化 農薬や果糖による質の悪いはちみつではない。 ターゲット 3 0 - 4 0 代 の 健 康 、 美 容 志 向 の 女 性 。　 （ネットを使える世代。老いを意識してきた。 無農薬などに興味がある。 ） ブランド Sol Honeyとは 自然に近いはちみつ販売 30-40代女性がターゲット 自然に近い製法のはちみつ作り Sol Honey
48. 48 Sol Honey Sol Honey CMY: 50/30/100 Logo ブランドを要素で表現 ブランド名と商品に関わりのある要素と して太陽、葉、蜜を配置した。女性らし い曲線を用い、カラーは蜂蜜と自然をど ちらも感じられる黄緑とした。デザインを 一定の複雑さに保つことで、 中価格帯の商 品に適したデザインとなっている。
49. 49 自然に近い製法で作られた蜂蜜を販売する Sol Honey 線幅やエレメントにおしゃれな遊び心があるフォント 蜂蜜 （黄）と自然 （緑）の中間色 30 -40代、女性、健康志向の人が好きなおしゃれさ。 シンボルマーク ロゴの雰囲気 カラー ロゴタイプ 線の幅の緩急がロゴと異なる Sol Honey ミニマルすぎる Sol Honey Sol Honey Oriya MN ポップすぎ Sol Honey Sol Honey Sol Honey シンプル 単色 暗い 日常 遊び心 未来的 女性的 複雑 カラフル 明るい 高級 厳粛 伝統的 男性的 ロゴの利用場所 店舗の看板 ECサイト はちみつの瓶やパッケージ 太陽 自然 蜂蜜 蜂の巣 自然 蜂蜜
50. 50 こだわりを伝えるサイト Sol Honeyの蜂蜜生産のこだわりを伝え、販売に 繋げることを目的にウェブサイトをデザインした。 問題点や生産方法について視覚的に説明すること で、Sol Honeyの長所をアピールしている。雰囲気 は自然や優しを表現しつつも、子供っぽさ、高級感 には寄らないようにした。 ウェブサイトの アニメーション動画 Website
51. 51 ホーム 商品 実店舗 こだわり お問い合わせ ページ構成
52. 52 04 「木のマーク」で伝わる すぎのこ幼稚園ロゴ 実際にある幼稚園のロゴデザインを制作した。 専門学校課題 2週間 (2023/11) Illustrator, Photoshop 幼稚園職員投票 1位 /30名、生徒間投票 2位 /15名
53. 53 大人が子供を 抱える様子 教育 ・保育目標 「すすんで考え」 「すなおで、明るく」 「たくましく」 葉の形 葉の数 モチーフが 分かりやすい形 優しさを感じる 有機要素 落ち着いた 複数色 単色で構成 ヒアリングからロゴに必要な要素を決定 ３枚の葉に理念と見守りの心を込める 関心が強かった既存ロゴ 園児でも分かりやすい形 落ち着いた自然を感じられる複数の 色 単色で構成 杉の木や木、自然、みどり おだやか、やわらかい、やさしい 洗練された 保育だけではなく教育も ロゴを見た時に 感じて欲しい印象 言語化 ヒアリング内容１ ヒアリング内容 2 ロゴに 必要な要素 制作の流れ
56. 56 専門学校課題 １ヶ月 (2024/1) Illustrator, Photoshop, InDesign, Figma 狂気を花で表現する 文庫本カバーリデザイン 『人間標本』湊かなえ 『人間標本』 は複数の子供が標本となって見つかり、 その謎が解かれるサスペンスである。 オリジナルデザイン 05
57. 57 表紙の花は四角に切られており、 本来の形を無理やり、 加害者の美的感覚によって 変化させられた暴力性、 異常性を表現している。 背景は写真の雰囲気を崩さない綺 麗目な表現にすることで、 より花の無惨さをより印象付けている。 裏表紙には切られた花びらを配置し、 花が四角に切られたことをより強調し、 切り 落とされた体のようにも見えるグロテスクさも表現している。 帯はテキストは縦横比や行間を狭め異常さを表現した。
58. 58 06 専門学校課題 １ヶ月 (2024/1) Illustrator, Photoshop, InDesign, Figma アプリmooo 開発秘話冊子 デザイナーとして参加していたアプリ moooの裏話をまとめた 12ページの冊 子を制作した。BRUTUS、 Casa、 ブレー ンのようなシンプルなものを目指し、 ペー ジごとのレイアウトが同じにならないよう に意識した。
59. 59 8 9 初期メンバー３人への 裏話インタビュー 役職：UI・UX デザイナー 所属：日本デザイナー学院1年 History 会津大学を卒業後、 専門学校に入学。 Figma を利用した UI/UX デザイン を独学で学び、複数のハッカソン、 インターンに参加。専門に進んでか らはグラフィック全般を学ぶ。 役職：iOS エンジニア・PdM 所属：慶應義塾大学環境情報学部 History インターンなどでの PDM 経験や， ビジコンやアクセラレーションなど の出場 / 小規模の資金調達経験・古 着の物々交換事業運営経験などを活 かせると考えてます 役職：Android エンジニア、BizDev 所属：会津大学情報学部 History 大学 1 年の頃からビジネスコンテ ストやハッカソン、起業家のプログ ラムなどに参加し、複数の受賞経験 がある。2023 年 6 月に起業し、現 在も事業開発を行っている。 谷川 直弥 星野 結水 桑田 翔平 I N I T I A L M E M B E R S Q1. 谷川さん、桑田さんの関係は？ 桑 田　 サ イ バ ー エ ー ジ ェ ン ト の CA tech dojo と い う Android アプリ開発のインターンで知り合いました。イン ターン後に、他のインターン生も誘って学生エンジニアコ ミュニティの SANDBOX を発足したんです。そこで一緒に 運営をやっていくうちに谷川とは意気投合しました。 星野　SANDBOX には私も途中から谷川に誘われて参加し ていて、現在も週一回の定例をしていますね。 谷川　誰でも参加できる LT もやっているので、これを見て いる人、ぜひ参加して欲しいですね。 Q2. なぜアプリ開発をしようと思った？ 谷川　今年自分が卒業だったので、最後に一度プロダクト 作りの挑戦をしたいと思ったのがきっかけです。これまで 複数のプロダクトを作ってきましたが、学生生活の集大成 を作ろうという覚悟を持って臨んでいました。 桑田　その中でも自分たちの持ちうるリソース、技術の中 で何が得意分野なのかを考えて狙うべき方向性や分野を決 めました。あとは単純に toC アプリをお互い作りたいとい う思いが強かったのだと思います。 Q3. 星野さんを誘ったきっかけは？ 桑田　途中から星野を誘うことになったのですが、正直に 言いうと、僕は星野がメンバーになることは反対してまし た。ただ、デザイン力と情報学部で培われたエンジニアと のコミュニュケーション能力を谷川から勧めらて信頼して お願いしました。現在は自分たちではカバーしきれない部 分を持っていて、本当に誘ってよかったと思っています。 谷川　これまで星野とは様々なハッカソン、コンテストに ともに参加してきてものづくり、プロジェクトをやる大変 さを一緒に体験してきたので、自分の意見を 1 番ぶつけや す胃という点で相性が良いので、ぜひ誘いたいと思いまし た。特に今回は世界観が大事なプロダクトだったので、思 想をプロダクトに反映させるのが上手い星野の力が必要で した。 星野　私自身は単純に面白いデザインができそうという思 いももちろんありましたが、これまで様々な経験に誘って くれた谷川の力になりたいという思いが一番強かったです。 実際、谷川がいなければデザイナーになっていません。結 果的にはこれまでで一番好きなプロダクトを自分で作れて、 幸せな体験をさせてもらっているので感謝しかありません。 お互いの印象は？ 谷川　桑田は全てをそつなくこなして、自分のやりたいこ とと、実現可能性の折り合いの付け方が上手いと思います。 また、メンバーの気持ちを考えながら、同時にプロジェク トを前に強く進められる推進力があると思います。星野は 思想を持っていて、自分で思考しつつ、それをプロダクト に落とし込むのが上手いと思っています。あとは結構、そ の世界観がユニークで素敵、ピュアな印象です。 桑田　谷川は本当になんでもできますし、海外、若者系の アプリや事業に対する知識がとても広いと思います。星野 はこれまでにないデザインを作りたいという理想が似てい るのでアイデア、デザインともに本当に望んだものを作っ てくれる優秀なデザイナーです。２人とも大好きなので、 この事業でメシ食いましょう。 星野　二人とも共通して、ビジネスの能力がずば抜けてい るのでとても心強いです。チーム活動では二人とも、とて もいい空気を作り出してくれます。意見を発言する時に喧 嘩ではなく、ちゃんとディベート的になるので、なんでも 話しやすいです。特に谷川は若者の感覚をチューニングさ せるのがうまいと思います。私が勝手に思っていたバイア スを大体解消してくれるのは谷川です。桑田はいい意味で 思い切りがいいので、行き詰まった時にとても助かってい ます。そういう意味で空気を作るのがとても人だと感じて います。 Q4. 大変だったことは？ 谷川　2 人の提案する世界観は理解できる一方で、 ユーザー が使うところがおざなりになりがちなので、そこを現実的 なところに着地させることですかね。二人が賛同するのは 良いですが、そこをただの共感で終わらせず、深掘って言 語化をして、共通認識を作ることを意識しています。 桑田　このチームは建設的な会話できるのと、ある程度立 ち上げ経験が各メンバーにあったので、スムーズに進んで きたと思います。どちらかというと副業的な立ち位置で進 めることから、コミット量落ちてしまう時があったところ ですかね。開発も少しそこで遅れてしまったり申し訳ない です。 星野　今回のアプリが世界観重視の新しい体験というとこ ろを目指していたので、参考にする要素がないところが楽 しい部分でもあり、大変な部分でもありました。あとは個 人的に課題とポートフォリオ作りと並行していたので、単 純な忙しさがこれまでで一番だったかもしれません。 4 5 最終盤の画面デザイン 朝の画面 昼の画面 夕方の画面 夜の画面 01. 若者をターゲットにし た背景と色味 Description 実は mooo は今のデザインの前の 案がありました。 形はほぼ同じですが、 コントラストが強く、全体的に赤色の ものです。ただ、メンバーに相談した 際に、恋人と言うより年齢層重めの内 容だと言う指摘があったため修正した のが現在のデザインになります。その 後は現在のデザインのようにコントラ スをとして静かで清々しい感じの色味 に落ち着かせました。 ちなみに画像は Midjorney という 画像生成 AI で作っています。画像生 成を触ったのは今回が初めての経験で した。今回のようにプロトタイプ時に は試行錯誤が必要なので、多少融通が 聞かなくても画像生成はとても便利で した。また、私自身はイラストがあま り得意ではないので、非常に助かりま した。利用料は約 1000 円程度なので、 イラストが全く欠けない人でもデザイ ンの素材を作れるという点はとても可 能性を感じました。 02. 時間の流れを表現する 画面 Description mooo では下にあるように朝、昼、 夕、夜の 4 パターンの画面が用意され ています。この時間によって背景を変 える機能は必須機能ではありません。 しかし、最近のアプリ UI のトレンド として、リフレクティブ UI などのよ うに現実を取り入れた UI が増えてき ています。mooo においてもアプリが リアルに半分はみ出すような珍しい価 値の出し方を試してみたいと思い、挑 戦しました。最終的にはこういった遊 び心ある機能をユーザー個人がカスタ イマイズできるようなインクルーシブ デザインを目指しています。 mooo のデザインに隠された ６つのこだわりポイント D E S G I N P O I N T S 01 文：星野結水（mooo デザイナー） 06 精密デザインシステム Description 画面は全部で 70 画面をデザインし ました。画面自体は３つですが、動き まで定義するとそこまで増えました。 それだけ mooo がモーションなどの 動きにこだわったアプリだと期待して いただきたいと思います。あとはエン ジニアからの視点ですが、デザインシ ステムも今までで一番詳しく、珍しく 綺麗に定義できたと思います。ぜひダ ウンロードして隅々まで楽しんでいた だきたいです。 04. 様々なアプリを利用 Description アプリの UI 作りでは Figma を利用 しました。今回は GUI 的な見栄えと いうよりはゲームに近いオブジェクト を作りたかったため、他にも様々な ツールを利用しました。レコードの 動きは After Effects、右のパネル案は Blender で作成しました。あとは SND という UX サウンドキットも利用し、 動作１つ１つに定義しました。私自身 が広く浅く様々な分野を触ってきたデ ザイナーだったのですが、今回はそれ らを全て使った感覚がました。これ まで積み重ねてきた知識全てを mooo 煮込めたので、これまでの集大成だと 言えます。 After Effects で制作したモーション Blender で制作したオブジェクト Figma デザインシステム mooo に登場するオブジェクト 03. スキュモーフィズム Description 現実の物を活用するスキュモーフィ ズムというスタイルの再ブームが海外 で到来してきています。そういった意 味では mooo は日本におけるトレン ドの先取りに挑戦しています。 05.UX ライティング Description mooo の言葉遣いについても議論を 重ねました。私自身がアプリの UI は 機能性だけではマイナスで、それを補 うのは面白さや驚きだと思っていま す。他のメンバーの意見も取り入れて 面白いテキストを考えられました。 会ったことあるっけ？　カフェ だっけ？　それとも君の心の中？ 利用規約を読むのが趣味 だったよね？ 10 11 デザイナー視点から見た チームとアイデアとは 引き続き mooo デザイナーの星野結水にインタビューします！ 初期アイデア集 Q6.mooo チームにおけるエンジニアはどんな 雰囲気？ 毎回思うことですが、デザインの力をエンジニア側が信 じてくれるのはともても嬉しいことでした。UI のレベルで 使いやすさを話せるエンジニアは多いですが、UX や気持 ちよさや世界観を優先できる人は少ない印象です。企業で もおそらくほぼないでしょう。そこに理解が十二分にある 2 人との動きがおもだったので、本当にストレスはなかっ たです。今回は今まででもそれが一番特徴的だったと思い ます。エンジニア、デザイナーそれぞれが相手に対して指 示を全くしなかったんです。エンジニアはデザイナーは工 数などを気にしなくていい！といい、同時にこの雰囲気は デザイナーは多分出せるから大丈夫！のような信頼を感じ ました。信頼と同時にプレッシャーでもありましたが。あ る意味、 これが私にとって理想の動きで、 デザイナーがユー ザーの方だけを向ける素晴らしい機会でした。大きなプロ ダクトがすでにある 99 から 100 の段階ではできないとこ ろなので、趣味開発で一番楽しい要素つだと思います。 Q5.AD のような役割を経験した感想は？ はい。今回チームとして参加しているアオタケプロジェ クトの一環として、秋田美大の方す名がデザイナーとして 協力していただきました。私が窓係となり、指示出しやレ ビュを行ったのですが、初の経験で大変でしたね。正直自 分で作った方が早いと思うこともあったので、そのくらい 私は他の人に雰囲気や指示を出す能力がないのだと痛感し ました。あとは単純に私は美大教育を受けていなかったの で、美大の方とお話できたのはとても楽しい経験でしたね。 デザインに対する意見はしっかりと言っていただける方 なので、最後には二人が指摘してくれるだろ！というよう な安心感がありました。 Q7. アイデアはどうやって作られた？ とにかく出し切りました。もともとさんと谷川と桑田が 付き合ってから結婚までの期間が空いているということを 調べてくれていて、途中から星野が追加された感じです。 初期はとにかくヘンテコな案も多くて、恋人の現在地の方 部分的に位置情報を共有する スマホ越しに指でいちゃつける機能 他のカップルのデートプランを閲覧・作成できる パートナーと違う UI 相手の不満を AI に相談して、解決のサポートをする 運命の赤い糸をゆらゆらさせる 記念日を管理する機能 恋愛条約メモ 信頼パスポート機能 SNS 監視ビューアー スタンプを送り合う機能 お互いの取説を作る 好きなメディア共有機能 将来の計画を少しずつ作っていくのをサポート 嫌いを共有する 毎日お互いにミッションをこなす 今の位置情報 を送る 相手の環境音で作るオーディオスペクトラム 相手の 1 日の移動ログが毎朝送られてくる お互いに自分クイズを作って出し合う 初期 UI ラフ集 向に赤い糸がフルフルできる機能や、指をスクリーン越し に感じられていちゃつけるなどのあんがありまいした。 Q8. 音をレコードにこめる構想はどこから生ま れた？ 今回は自由にやれる機会だったので、本当に様々な方向 性を考えました。私は UI をただの操作パネルにしたくない と言う思いがあります。ただの操作パネルは機能的ですが、 毎日使うと飽きますし、操作を強要している時点でマイナ スです。私はそこに情動を動かす動きやアイデア、遊び心 を組み込ませて、できるだけマイナスをせめて０にしたい と思っています。なので、今回、音声を扱う UI だとリスト 形式が一般的ですが、ゲーム画面のようなものにしようと は初めから考えていました。考え的にはタンジブル UI が一 周まわった感じです。 具体的には下の画像のように様々な現実の要素を取り入 れる方向性で考えていきました。カセットレコーダー、IC レコーダー、カード、絵文字などの要素に音声を取り込む ことを考えましたが、最終的にはレコードが選ばれました ね。理由としては回転や破壊などのアニメーションしやす い要素で、画像、テキストなどをはったりする面積が多く、 今後の拡張性が高いと感じたためです。唯一、 若者がレコー ドを知っているかだけは賭けでしたね。 6 ロゴの制作過程と ロゴの流行の ポイント D E S I G N P O I N T S 02 mooo の由来 morning からモーという音を考えました。そ こから初めのモーという音が日本語と相性がよく 「もー、mooo 入れなきゃ」のように広告として も使いやすいと思ったからです。o が３つなのは モーショングラフィック的に活用しやすそうだと いう点からで、 全て小文字なのは可愛いからです。 最近のロゴのトレンドは複雑化 一般的なアプリのロゴは単色のシンプルな形の ものが多い印象だと思います。例えば iOS 標準ア プリは若干グラデーションがありますが、ほぼ単 色のシンプルなものが多いです。理由としては小 さいスマホ画面で区別のしやすさや、モダンな形 が流行っていることが挙げられます。 しかし、最近はモダンに対するアンチモダンの ような複雑なロゴも多くみられるようになってき ています。具体的には日本ではまだ少ないので すが海外の位置情報共有アプリ Zenly や写真共有 アプリ ID などはロゴと言うよりはイラストレー ションに近いほど複雑です。おそらく、実店舗な どを持たずにアプリ内だけに世界観がある場合は 現実の看板の可視性などを考えずにアプリ特化の 物を作れます。それを逆手にとった自由なロゴが 今後トレンドになってゆくと考えています。 mooo ロゴ 01：iOS app Store 用 02：シンボルマーク 03：ロゴマーク 04：iPhone SE でのプレビュー 01 02 03 文：星野結水（mooo デザイナー）
60. 60 07 日本が動き出すワクワクを 観光立国 表明ポスター 観光立国・ニッポンを表明するため の国内向けポスターを 「ようこそ。お もてなしの、国へ。 」という与えられ たキャッチコピーを下に制作した。 専門学校課題 3週間 (2023/11) Illustrator, Photoshop Α ͏ ͜ ͦ Ố ͓ ΋ ͯ ͳ ͠ ͷ ỏ ࠃ ΁ Ố ؍ޫཱࠃɾχοϙϯ
61. 61 08 コロコロ転がる自作フォント Coron Font ABCDEFGHIJKLMN OPQRSTUVWXYZ 0123456789,.:;?!() CORON 専門学校課題 + 自主制作 １ヶ月 (2024/1) Illustrator, Photoshop abcdefghijklmn 小さな石ころをモチーフとした角丸を多用したフォントであ る。ディスプレイ書体としてボードゲームのタイトルなどに使 われる想定。文字の丸さを強調するため文字間は広くとった。 opqrstuvwxyz
62. 62 09 自主制作 1週間 (2024/1) Illustrator, Photoshop, InDesign, Figma ミニマルなアニメーションが可愛い ポートフォリオサイト ノーコードツール Framerを利用して個人用 のポートフォリオサイトを制作した。 トップページのイラストは Lottieアニメー ションで動き、シンプルなサイトの中にも遊 び心を加える。 https://yusuihoshino.framer.website/
63. 63 10 飛蚊症の不安を和らげる 飛蚊症記録 スライド 飛蚊症 （視界にゴミが見える症状）の不安解消、患者 と医者のコミュニケーションを目的とした、飛蚊症を 記録できる Googleスライドを制作し、公開した。 既存の手段の濃さや位置を指定できないという課題 を解決した。 自主制 1週間 (2023/11) Illustrator, Photoshop, Google Slide 12スライド分の飛蚊症パーツから 自分が見えているものをコピー 詳しい使い方はnotenで公開中 https://note.com/yusuihoshino/n/ n7dbc225dc067
64. 11 統一感を意識した 楽曲 『あの枝の葉』 PV制作 友人の楽曲の PVを制作した。実際 の植物の撮影から編集まで一貫して 行った。全体通して雰囲気の統一を 意識して行った。 専門学校課題 1ヶ月 (2024/1) AfterEffects, Illustrator, Photoshop https://www.youtube.com/ watch?v=EftAitBwAYM 64
65. 65 +3৴ೱொӺ +3ઍବϲ ୩Ӻ ट౎ߴ଎߸৽॓ઢ ܚጯٛक़େֶ ৴೶ொ Ωϟϯύε ࠨ໰ொ 5IF
    "SUDPNQMFY
    $FOUFS
    PG
    5PLZP '
    "$5
     ೔ ຊ ϑΥτ ࡒ ஂ ڠ ࢍ XFE
    
    
    TVO "EESFTT
    ౦ژ౎৽॓۠େژொ ʵ &NBJM
    JOGP!HBMMFSZDPNQMFYDPN 
    
    
     ೖ৔ྉແྉ 5IF
    "SUDPNQMFY
    $FOUFS
    PG
    5PLZP ੕ ໺ ݁ ਫ
    ࣸ ਅ ల ໷ ͷ ଍ ੻ ͕ གྷ Γ ग़ ͢ ඈ ᠳ ͢Δ ޫ ジャズフェスティバルフライヤー 子供から大人まで参加できるフェスティバルの雰 囲気は守りつつも、落ち着きや統一感でイベント の規模や体制の信頼度を表すことを意識した。 専門学校課題 | 2 週間 (2023/10) | Ai 自分の個展チラシ 夜の街の写真を集めた自身の架空の写真展の A4 フライヤー。写真の禍々しい炎のような光を重々 しい威厳のある生き物として表現しようとした。 専門学校課題 | 3 週間 (2023/9) | Ai, Ps, Lr 12 他作品
66. THANK YOU 日本デザイナー学院　グラフィ ックデザイン科 （25 卒） mazisu99@gmail.com