LoveClip - Creative Class Output

「いつか色褪せるものを、一番鮮やかな状態で保存する ---」
Creative Class で取り組んだ、SNSアプリのリプロダクト「LoveClip」のコンセプトとUIデザインをまとめたプレゼン資料です。
Concept & Design: 南雲玲香

Transcript

1. LoveClip SNSアプリのリプロダクト 南雲玲香
2. SNSアプリの リプロダクト 1 We want you to imagine... 人とつながることが簡単になった一方で、「つながること」の意味そのものは変化してい ます。SNSは、情報共有やコミュニケーションのツールとして広く使われていますが、同 時に、比較や承認欲求、情報疲労といった問題も生まれています。誰と、どの距離感で、 どのように関わるのか。SNSは単なるツールではなく、人間関係のあり方そのものに影 響を与える存在になっています。 2 What is your design task? あなたは、新しいコミュニケーション体験を設計するデザイナーです。SNSは人と人を つなぐツールである一方で、さまざまな課題も抱えています。人と人との関係性を見直 した、新しいSNS体験を設計／デザインしてください。 コンセプト ターゲット つながり方を再定義する SNSを日常的に使っているが、 疲れや違和感を感じている人 ミッション 「つながる」という行為の前提を見直し、 新しいSNS体験のビジュアルとUIを設計 してください。 ©Shogo Tabuchi / 外部公開禁止
3. PROCESS 背景や文脈を思考するフェーズ ビジュアルを検討するフェーズ SNSの利用動機 2 SNSの多様化と疲れ 3 SNSの新たな受け皿 4 ペルソナ像 5 サービスコンセプト 6 ブランドコンセプト ビジュアル方向性 8 デザインコンセプト 9 UI/UXデザイン 10 象徴要素 11 デザインシステム 1 7 © Shogo Tabuchi 本資料に含まれる企画・デザイン・テキスト等の著作権はすべて田渕将吾に帰属します
4. PROCESS 背景や文脈を思考するフェーズ ビジュアルをするフェーズ SNSの利用動機 2 SNSの多様化と疲れ 3 SNSの新たな受け皿 4 ペルソナ像 5 サービスコンセプト 6 ブランドコンセプト ビジュアル方向性 8 デザインコンセプト 9 UI/UXデザイン 10 象徴要素 11 デザインシステム 1 7 © Shogo Tabuchi 本資料に含まれる企画・デザイン・テキスト等の著作権はすべて田渕将吾に帰属します
5. SNSの利用動機 SNSの利用動機は、大きく2つ 友達を近くに感じたい 自分の気持ちをリアルに感じたい 自分の存在を感じたい 新たな興味を発見したい 自分の立ち位置を確認したい 日々の活力が欲しい 他者との関係の中に 自分を感じたい 好きなものの中に 自分を感じたい SNSの利用目的は多々あると思いますが、大きく分けると2つに分類 できるのではないかと考えました。 1つ目は、『他者との関係の中に自分の存在を感じたい』というもの です。 これは、知人とのリアルタイム共有を通じて自身の存在や立ち位置を 確認したいという、多くのユーザーがSNSを利用する動機であると考 えています。 2つ目は、『好きなものの中に自分を感じたい』というものです。 好きなものとの繋がりを通して、日々の活力やエネルギーを得る、と いった趣味を通じた利用目的です。
6. 現代社会の孤独感 SNSはあるのに、現代人は孤独から解放されない どちらの場合も、「自分の存在感じる」という目的のためにSNSは使われているはずですが、 それにも関わらず、現代社会において孤独感を感じている人の割合は非常に多いです。 内閣府の令和7年の世論調査によると、「孤独」や「孤立」を「身近に感じる」人の割合が 48.7％、「身近に感じない」人の割合が49.5％となっています。 「知人との関係が希薄であるように感じてしまう」「自分の素をさらけ出せる相手がいない」 「そもそも同じような興味関心を持つ人との出会い方がわからない」など、 孤独の要因は1つではなく、複数が複雑に絡み合っているように思われます。 SNSを通じた表面的な交流や数多くの人とつながる行為が、かえって深い孤独感を生み出す原 因となっているのかもしれません。
7. 孤独を解決するために 現代を生きる人に向けた、つながりを感じる新たなアプローチ X そんな孤独感の解消ために、新たなSNSが出現し始めています。 Instagram Facebook Instagram Filmarks BeReal 食べログ Googlemap 読書メーター etc... 知人との関係性を深めたい etc... 同じ熱量の誰かとの つながりが欲しい 「知人との関係性が希薄」という課題に対しては、『BeReal』など のクローズドなSNSが新たな受け皿として注目されています。発信の 場を狭めることで比較や評価と遠い位置で「飾らないの自分をさらけ だす」ことが可能となっています。 一方、「自分の素をさらけ出せる相手がいない」「そもそも同じよう な興味関心を持つ人との出会い方がわからない」などの課題に対する 受け皿として、『Filmarks』『食べログ』などの特定の領域に特化し たサービスは存在していますが、そこから共通項を持つ人との繋がり へと発展させることは難しく、具体的な解決につながるサービスは少 ないように思われます。
8. ペルソナ 私はこれが好き。そんな自分を本当は誰かに受け入れてもらいたい！ 名前 minami 年齢・性別 30歳女性 居住地 東京都世田谷区 職業 アパレル店員 趣味・関心ごと： ファッションが大好き。古着屋に足繁く通う。 悩みやモヤモヤしていること： 買った古着屋気に入った服のコーディネートなどを記録したいが、カメラロールにた だ残すのも違う、でもSNSにアップして誰かに見せる勇気もない。。。と消化不良。 本当は、似たような趣味の誰かと共有したり共感しあいたい、という気持ちもある。 SNSとの関わり方： 投稿はしない、いわゆる「見る専」。 一人の時間も好きだし、無理して人と繋がらなくていいと思ってる。けれど本当は、 同じような趣味を持つ相手と出会って仲良くなれたらいいのにな、、と思っている自 分もいる。SNSでの発信は、他者の反応が気になり少し抵抗感あり。 やり場のない「好き」を消化する方法が見つかっていない 本当は同じような価値観の誰かと交流したいけど、その場がない状態。
9. サービスコンセプト 未来の自分に向けた、「スキ」のコレクション 自分の動いた感情を 鮮やかな状態で 切り取って留める LoveClip 同じような熱量を持った 誰かと偶然であう LoveClipは、人に見せるためではなく、 未来の自分が記録した日のことを思い出し、またその時のときめを取り戻すために、 大切なものを写した写真と共に、自分の感情を切り取って保存するSNSです。 嬉しい・感動・楽しい... 感情が高まった時、カメラロールにしまうだけでは物足りない。 誰かに見せるのにも勇気がいる。オープンなコミュニケーションは緊張するし、周りの目 が気になる。 でも、本当は同じ興味関心の誰かと分かち合いたい。。。 そんな「行き場のないスキ」という感情を、 未来の自分のために保存し、同じ熱量を持つ誰かと繋げるものにします。 時間が経っても、自分の記録を見返せば、その時の鮮やかな気持ちを取り戻せる。 自分の記録を見つけた同じ熱量を持つ誰かと、偶然繋がる。 そんなささやかな、未来の自分と知らない誰かとの繋がりを、LoveClipで提供します。
10. ブランドコンセプト 『LoveClip』 いつか色褪せるものを、一番鮮やかな状態で保存する。 Clip＝自分の感情を切り取って保存すること。 『好きなものを好きって言う』 ------- そんな小さな積み重ねが、 日々を明るく、生き生きと過ごす根源となるのではないかと思っています。 LoveClipを通じて、 毎日をもっと鮮やかに生きる、 そのままの素直な自分を、もっと好きになれるように。 あまり生きやすいとは言えないこの現代を過ごす中で、 LoveClipが、あなたにとっての支柱の1つとなることを願います。
11. PROCESS をするフェーズ ビジュアルを検討するフェーズ SNSの利用動機 2 SNSの多様化と疲れ 3 SNSの新たな受け皿 4 ペルソナ像 5 サービスコンセプト 6 ブランドコンセプト ビジュアル方向性 8 デザインコンセプト 9 UI/UXデザイン 10 象徴要素 11 デザインシステム 1 7 © Shogo Tabuchi 本資料に含まれる企画・デザイン・テキスト等の著作権はすべて田渕将吾に帰属します
12. ビジュアル方向性 LoveClipの主体験 趣味などを通じて、『嬉しい』『楽しい』『かわいい』『感動』・・・などの感情を抱く。 このときめきや高揚感をどこかに留めたい！ 今感じているこの気持ちを、忘れずに保存したい！ 写真と共に自分の感情を保存する（=Clip） 自分の熱い気持ちを言葉にすることで、満足感や気持ちの整理ができる 一定時間が経過した後、改めて見返したときに記録時の気持ちを思い起こせる 自分が残した記録が、見知らぬ誰かにとっても大切な1枚となり、偶然の繋がりが生まれる キーワード 高い熱量の保存 感情の投影 情緒の反芻 同じ興味関心の誰かと偶然出会う 自分のための記録
13. ビジュアル方向性 メタファー策定 LoveClipの主体験から、 「感情を切り取って保存」を体現しているプロダクトを 挙げ出し、どのモチーフがLoveClipに適しているかを 検討し、キーワードをデザインに落とし込むためのメタ ファーの検討を行いました。 高い熱量の保存→ コレクターの棚をイメージ。
 『自分の愛するものがぎっしり敷き詰められたマニ アックコレクション』 情緒の反芻→ 美術館をイメージ。
 『好きな作品の前で立ち止まって、じっくり鑑賞す る静かなひととき』
14. ビジュアル方向性 アナ ロ グ・紙・マット アナログ×洗練 アナログ×華やか ビジュアル方向性の検討 A 定めたメタファーを表現するための ビジュアル方針の策定にあたり、参 考リファレンスを4象限で整理し、 ビジュアル方向性を定めました。 ベース：静かな鑑賞体験とマッ トな質感を最も体現している 『アナログ×洗練』のイメージ 補完：ベースに欠けている情緒 の豊かさを『アナログ×華やか』 の色味の豊かさで補う。 B 洗 練・整 然 親しみ やすさ・華 や か DD デジタル×洗練 C 機 械・デ ジタル・透 明 感 デジタル×華やか
15. ビジュアルコンセプト 美術館で好きな作品に耽るような瞬間を、アプリで。 飾る楽しみと、見返す喜び。 コレクターのディスプレイのような、自分の記録がぎっしり並び、集めた熱量を一望できる一覧画面と、 展示会で気になる作品の前で立ち止まり、夢中で鑑賞する静けさを想起できる記録画面。 記録時の自分の感情も一緒に保存できるよう、写真と共に情緒を投影したカラーを設定。 記録時の気持ちを反芻しながら、じっくり静かに自分と向き合うひとときを。
16. UI/UXデザイン LoveClipの主体験 なをて、しいしいかいい感・・・なの感を このときめきや感をこかにめたい 感ているこの気持ちを、れにしたい とに自分の感をする（Clip） 自分の熱い気持ちを言葉にすることで、満足感や気持ちの整理ができる ・・・① 一定時間が経過した後、改めて見返したときに記録時の気持ちを思い起こせる・・・① 自分が残した記録が、見知らぬ誰かにとっても大切な1枚となり、偶然の繋がりが生まれる・・・② 体験に必要な画面 ①を達成するために必要な画面： 記録の一覧画面（Collectionと命名） 記録の詳細画面 ②を達成するために必要な画面： 見知らぬ誰かとの繋がりを生む画面（Placeと命名）
17. UI/UXデザ イン メイン画面①：Collection一覧画面 Fashion - All … 記録を網羅的に敷き詰め、自身が集めてきた軌跡を一望でき、熱量を実感できる画面。 画像は、加工しない生の形で保存するため、投稿した比率で並ぶ。 アプリが起動した時は、メインとなるこの画面が立ち上がる。 img <画面内に必要な要素> <構成優先順位> 画像の一覧画面 表示中のカテゴリ・小カテゴリを認識できる記載 記録の作成ボタン ボトムナビ ヘッダーナビ リアクション通知のお知らせアイコン 小カテゴリ選択アイコン（フィルター） ホームアイコン（設定画面への導線） 高 画像の集積エリア 記録の密集・ランダムさで、コレクターの 棚のような熱量を感じるエリアのため 高 ヘッダーナビ カテゴリの切り替え・記録の作成・リアク ションが届くなど、重要な機能を見やすく 整理する必要があるため 高 カテゴリ見出し 通知 HOME img img 画面のアイコン的存在で、ここでアプリの カラーが出る要素のため img img img Collection + Place img
18. UI/UXデザイン メイン画面①：Collection一覧画面 見出し右の「・・・」をタップ で、サブカテゴリ切り替え用の 一覧ハーフモーダルが立ち上が る。 （スライドアップで出現） 現アー 現アー 通知の受領： 手紙のアイコンが傾いてお知ら せ Collection カテゴリ切り替えハーフモーダル + Place Collection + Place
19. UI/UXデザイン サブ画面：moodカラーの選択（記録の作成画面） < 記録の作成時、自分の分の感情にあったカラーを「Moodカラー」として選択することで、 記録にその選んだ色が反映される、という仕様を検討。 「自分の感情も一緒に保存する」ということを色の投影を通して実現。 moodカラーのセレクト Select Your Mood ８色のmoodカラーの中から、その 時自分が思ったカラーをセレク ト。 記録の作成完了 Clip （保存する） Clipボタン（保存する）をタップで 記録の作成が完了。 選択したサブカテゴリの Collectionの中に追加される。
20. UI/UXデザイン サブ画面：moodカラーの選択
 （記録の作成画面） 8色の中から、投稿時の自分の気 分にあったカラーをセレクト。 ※カラーを選択しない場合は、 色を選択せずに「Clip」で記録 完了。 （記録詳細の編集画面より後か らカラーの追加は可能。） カラーを選択すると、ロゴが選 んだカラーで着色。 カラーのタップ時には、ロゴの ハサミが1回パチンと開閉してか ら、カラーの外側に◦枠線が追 加。 ◀︎左図のように８色の色と感情が 紐づいているため、ここから色は ８色としています。 What'今日のあなたの気分をひとつ s Your Mood Today? What'今日のあなたの気分をひとつ s Your Mood Today? Clip Clip
21. UI/UXデザイン メイン画面②：Collection詳細画面 ion - VIntage 通知 Fash HOME 画像とテキストを美術館に並ぶ作品とキャプションに見立て、記録とじっくり向き合うための画面。 Collection一覧画面の画像をタップすると、この画面に遷移。 img <画面内に必要な要素> 記録する画像 記録に対する自分のコメント <構成優先順位> 高 記録する画像 moodカラー背景orオーバーレイ もらったリアクションが見れるエリア コメントの編集ボタン コメントのやり取りができるエリア ボトムナビ ヘッダーナビ リアクション通知のお知らせアイコン ホームアイコン（設定画面への導線） 中 中 低 コメント moodカラー リアクション 記録と向き合う場所とすることが中心の 画面のため 記録を補完する要素であるため 記録時の情緒を反映する要素であるため 人との繋がり＜自分のための記録 の 優先順位のため t mp stamp stamp s a 高円寺の古着屋で見つけた綺 麗なパープルのトップス👚 20 Clip ・ ・ ・ icon XX.XX.XX テキストテキストテキストテキストテキストテキ ストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキ Collection Place + ストテキスト
22. UI/UXデザイン メイン画面②：Collection詳細画面 現アート鑑賞記録 現アート鑑賞記録 YBA & BEYPND 新国立美術館で鑑賞 背景は記録の作成時に選択した moodカラー。（全8色） カラーを選択しなかった場合は 色なしの白背景。 画像ゾーンのタップでピンチア ウト表示に。 「…」から記録の編集が可能 「ピン」アイコンのタップでリ アクションとコメントマークが 出現。コメントマークのタップ でコメント画面に切り替わる。 コメント画面 ピンチアウト画面 2026.08.01 2026.08.01 新国立美術館のテート美術館展。久しぶりに行ってきた けど、相変わらず素敵な展示会だった〜。新国立美術館 のテート美術館展。久しぶりに行ってきたけど、相変わら Collection Place ず素敵な展示会だった〜。 新国立美術館のテート美術 館展。久しぶりに行ってきたけど、相変わらず素敵な展 示会だった〜。 + 新国立美術館のテート美術館展。久しぶりに行ってきた けど、相変わらず素敵な展示会だった〜。新国立美術館 のテート美術館展。久しぶりに行ってきたけど、相変わら Collection Place ず素敵な展示会だった〜。 新国立美術館のテート美術 館展。久しぶりに行ってきたけど、相変わらず素敵な展 示会だった〜。 +
23. UI/UXデザイン メイン画面②：Collection詳細画面 選択したムードカラーに応じ て、背景にグラデーションが敷 かれる。（全8色） ピンアイコンのタップで、 本人→
 もらったリアクションが出現
 （全8種） 閲覧者→
 送りたいリアクションが出現
 吹き出し ▲リアクション×8種 水色 黄緑 ピンク
24. UI/UXデザイン メイン画面②：Collection詳細画面 紫 イエロー ブルー オレンジ グリーン
25. UI/UXデザイン メイン画面③：Place画面 検索窓 見知らぬ誰かと偶然の繋がりが生まれたり、能動的に繋がる相手を探すための画面。 LoveClipを共通のギャラリーとした、共同展示スペースのようなイメージ。 サブストーリー的役割ではあるが、「繋がりを生む」というLoveClipのもう1面の機能を担う。 img <画面内に必要な要素> <構成優先順位> 記録のランダムピックアップカルーセル 検索窓 検索画面 検索ワード入力欄 HotWord的なおすすめタグの提示 登録タグの新着投稿導線（3件程度） 絞り込み結果画面 高 ランダムピックアップ 偶発的な出会いの契機となる画面のため 中 検索窓 自ら繋がりを探すために必要なため 低 検索画面 メインストーリーではないが、繋がりを探 しやすくるための機能として必要なため 記録のタイトル ボトムナビ
26. UI/UXデザイン ③Place画面 Today's Encounter Today's Encounter YOGO. EXHIBITION ムカ展でアリエル鑑賞 今日のあなたに、とびきりの1枚。 今日のあなたに、とびきりの1枚。 詳細を見る 詳細を見る Search Collection 毎日1枚、ランダムで自分宛に誰 かの記録が届く。 （選択中のカテゴリに属する記 録が届く。） 検索窓をタップすると、 登録カテゴリの新着投稿やタグ のサジェストなどが出てくる 検索画面に遷移。 Search + Place Collection + Place
27. 象徴要素 象徴モチーフ 『Love Clip』の頭文字の『L』と『C』を使って、 『Clip＝切り取って保存する』という行為の象徴で ある『ハサミ』をイメージしたモチーフ。 ロゴの中でも『熱』と『静』の同居を表現したい意 図で、「サンセリフ体のL」×「セリフ体のC」を組 み合わせました。 ※L・・・Cabinet Groteskを使用 C・・・Instrument Serifを使用 LoveClip
28. 象徴要素 象徴モチーフ 展開例 App Icon Loading 起動画面 空投稿 moodカラー選択画面
29. デザインシステム
30. デザインシステム