ColleColleのデザインモック×YNUミスコンコラボ企画!!

 

 

 

 

おはようございます! ColleColle作っています、石田 寛成 (Tomonari Ishida)です。
本日はColleColleのデザインモックを公開していきたいと思います!

 

Content image
ColleColleデザインモック公開!!

#はじめに

僕ら開発チームは、常に人不足であり、そのため、チーム内にデザイナーなどいません。しかしながら、「人がいないから進まない」というのは当然論外です。

昨年の一時期は、チーム内では当初、誰もプログラミングができなかったため、「プログラマーを探そう!」と僕らはプログラマー探しに一ヶ月以上費やしてしまい、結局見つからなかった、という苦い経験をしています。

この経験を経て僕らは、いないなら自分たちがなるしかない、という当たり前の事実を再認識し、各自がプログラミングを学びプロトタイプのα版完成までこぎつけました。僕らは常にこの精神なので、今回もデザイナーさんいないけど、他のアプリやサイトを参考に今回のUIを設計したら、形になるのでは?の考えのもと、独学で作成しました。

当然甘いことはわかっています。ただ僕らにはみなさんという強力な助っ人がついています。HPを立ち上げたら、ミスやバグをフィードバックしてくれる人、Whitepaperをわざわざ読んでくれてさらにコメントをくれる人、無給で手助けしてくれる人、Twitterの週間報告に必ずリアクションをくれる人、本当に多くの人の力を借りてやってこれました。僕らは市場のみなさんからの「生」の声が最も大事であることを、これらの活動を通して学んできました。

今回公開する「ColleColle デザインモック」は、デザイナーでもなんでもない僕が、13種類のアプリのUIと、7つのサイトを見ながら作った完全なる「素人」作品です。

なので今回も、みなさんのお力をお貸しください!
Invisonというサイト上にアップしたのもそのためです。

このサイトでは、プロトタイプデザインを閲覧するだけでなく、コメントをすることができます。

「ここの画面はこうしたほうがいいんじゃないの?」や、「ここの画面にはこんな機能つけたらいいと思う!」など、気軽にコメントを残していただければと思います。

僕らチームはそれらの意見を真剣に1つ1つ吟味し、検討&実装させていただきます。(僕のSwiftのコーディング力次第では、実装できない部分もあるかもです。ごめんなさい泣)

 

#デザインモックとフィードバックコメント

それでは、デザインモックアップに移っていきたいと思います。デザインモックは、こちらのURLから飛ぶことが可能です!

上記の通り、このinvisionは、コメント機能でフィードバックコメントを残すことが可能です。フィードバックコメントはデザインについてだけでなく、”こんな機能が欲しい”という機能要望もいただけると嬉しいです。

以下でフィードバックコメントの方法について説明させていただきますので、たくさんのコメントをお待ちしております!
(※コメントはPCのみで可能)

①URLをタップorクリック

Content image
URLをタップするとこの画面に遷移します...

②プレビューモード(デフォルト)からコメントモードへ

Content image
画面中央の下部の▶︎(デフォルト)はプレビューモードですので、右のコメントボタンをクリック

③コメントしたい場所をタップorクリック

 

Content image
コメントモードに切り替えると、コメントが可能です!

(*初回のみコメントする際にメアドによるアカウント登録が必要です。アカウント登録後、一旦invisionサイトに戻ってしまう可能性があるので、その際はMediumのURLを再度クリックしてください。)

 

#デザインにかけた思い

デザイナーではないにせよ、僕は僕なりにこのデザインを考える際に色々と考えて作りました。今回はメイン画面のみ、自分がどのようなことを考えてデザインしたかを解説したいと思います。

まずColleColleのペルソナは以下の表です。

Content image

こんな感じで、「人気になりたい, 承認欲求強めの子」です。つまりInstagramに生息しているユーザーの一部です。では競合はInstagramなのかと聞かれれば、それは異なります。
なぜなら、ColleColleは投稿を見てもらうターゲットが「マス」であるからです。(ColleColle のターゲットがマスという意味ではありません。)

Instagramを投稿する際は、発信した先(受け手)をイメージしており、それは仲のいい知り合いです。つまりInstagramでは、「誰が見ているか」が大事であり、近況報告であったり、自慢系(高級レストランに行った!など)の投稿が多いと思います。それは個人の日常という事実をそのまま伝えればよくて、「誰に見てもらうか」が大事です。(もちろんフォロワーが多い人は違いますが。)
つまりInstagramは、いかに自分が充実した生活を送っているかを身近な人に発信するためのSNSということです。

しかし、ColleColleは知人向けに投稿をするというよりかは「どのくらいの人に見てもらえるか」が大事になります。高級レストランに行った!ではなく、高級レストランに行ってこんな体験が良かった!と参考になる情報まで含めないと中々見てもらえないでしょう。なぜなら、全く知らない人の自撮りを見ても興味は普通の人は湧きませんからね。

全く知らない人の単純に可愛いだけの自撮りには、正直価値はありません。(いや、一部の人のアンケートに対する回答では可愛いは正義!みたく可愛ければなんでもいいという内容もありましたが。)

情報の受け手が可愛いだけではなく、その投稿からアクションを起こさせるような自撮りでなくてはなりません。日常+α、何かためになる付加価値がついていないと中々、伸びないと僕は想定しています。

ようはコンテンツ力が高ければ、今までのSNSで伸び悩んでいた人も、陽の目を見る可能性がある!ということです。

1. [投稿者視点] 陽の目を見る環境を作ること
2. [見る専視点] 一回いいねしたからといって、そのユーザーの自撮りを毎回見たいと思ってるわけではないこと

以上の2点を意識してタイムライン画面を作りました。

Content image
この画像の選択方法はサイコロで決めましたww 他意は皆無です!!

まず陽の目を見る機会を創出するには、自分のことを知らない人にも自分を露出する必要があります。

そこで、ユーザー個人のインプレッション数から機械学習によってaaS(as a Service)を実装した「オススメ」と急上昇を意味する「ホット」のタイムラインを作りました。

最初はフォロー機能をなくそうと思ったのですが、アンケートを取ってみると、「毎回見たい子は必ず存在するからフォロー機能がないと不便」という意見が多数でした。

しかし僕としては、現在のフォロワー買いや相互フォローなどのよくわからない部分を透明化し、本物志向の人のためのSNSを作りたかったので、意地でもフォローという言葉とその数の見える化を行いたくないと思い、「ウォッチ」にしました。

つまりこの人の発信する自撮りは、継続的に見たいなと思うユーザーに対しては、ウォッチタイムラインで見ることが可能となります。

また自撮りの質≠コンテンツの質だと考えているので、自撮り投稿の詳細画面には、コメント欄をでいるだけ大きくし、見る側とのインタラクティブの機会を増やして欲しいと思い、コメント欄を大きく設けました。

今回はメイン画面であるタイムラインスクリーンのみ、デザインに込めた考えを書かせていただきまいした。

他の画面はなぜこうなっているのかや、どのアプリを参考にしたのか気になる場合は、ぜひコメント欄もしくはTwitterまで連絡をください!

 

 

#コラボ企画について

おっと、まだ終わりじゃありませんよww

お気づきになられた方もいるかもしれませんが、

デザインモックのモデルさん、みなさん「いとうるはし」だと思いませんか?

そうです…..

 

「いとうるはし」といえば、2019年

MissYNUコンテストのテーマですね!

(強引な持ってきかただなぁww)

MissYNUとは…
横浜国立大学(Yokohama National University)ミスコンのことです!!

Content image
2019MissYNUコンテスト

僕らのサービスColleColleと2019年MissYNUはコラボしています!

 

まず今回デザインモックのモデルとして協力していただいたMissファイナリストのみなさんを紹介したいと思います!

Miss YNU 2019 Entry №2 涼宮雪乃さん

Miss YNU 2019 Entry №3 柴村典花

Miss YNU 2019 Entry №4 Emily ショウ エミリ

Miss YNU 2019 Entry №5 永田ミユキ(アンジェ)

 

ミスコンの活動は今年の11月上旬まで続くそうです。

みなさん、一緒に応援しましょう!

以上が今回協力していただいたミスの皆さんでした!

本当にありがとうございました!

また、こちらのホームページから、ミスの皆さんに一人一日一票、投票することが可能です!

 

ぜひ、Invisionでのコメントと、ミスコンの投票をよろしくお願いいたします!

長くなりましたが、最後まで読んでいただき、本当にありがとうございました!

 

いいね、サポートしていただけると励みになります!よろしくお願い致します!

 

 

 

#Please Contact me !

Webサイトはこちら → JapanFuse-Web

Twitterはこちら → @ColleColle_jf / @rnsnknyu

Mediumはこちら → @collecolle

Whitepaperはこちら→ver1.1.0


 

Article date Article like Article tip Article supporter
公開日 いいねによる獲得 投げ銭による獲得 サポーター
: : :
2019/09/01 35.49 ALIS 380.27 ALIS
Tomonari 💭's icon'
  • Tomonari 💭
  • @thetomonari
CEO of JapanFuse,Inc. / 価値の概念を再定義します
コメントする
コメントする