クラウドファンディングのCAMPFIREがリニューアル!デザインの裏側を公開し話題に【デザイン実況】

you_gj
プロジェクト掲載手数料を20%から5%に引き下げるなど大幅のリニューアルを遂げて進化するCAMPFIREのアプリデザインの裏側が公開されました!今まで多くのデザイン実況を行ってきた板橋さんのデザインへのこだわりをご覧ください。

クラウドファンディングのCAMPFIREとは?

クラウドファンディングとは、インターネットを通してクリエイターや起業家が不特定多数の人から資金を募ることを言います。CAMPFIREは群衆(crowd)から資金集め(funding)ができる、日本最大のクラウドファンディング・プラットフォームです。
CAMPFIRE(キャンプファイヤー)- クラウドファンディング

現在までに1300件以上のプロジェクトが 65,000人以上の人々から 総額約6億円を集めています

そんなCAMPFIREのデザインを「デザイン実況」でお馴染みのwebデザイナーが行います

デザイン実況とは?

WebデザインのプロセスをTwitterで一般公開しながら制作を進めます

【第一弾】
何かと話題のデザイナー板橋聡氏がツイッターでWebデザインの実況中継を投稿、ストイックすぎると話題
https://matome.eternalcollegest.com/post-2134580404268648601

【第二弾】
板橋聡氏がツイッターでWebデザインの実況中継!
https://matome.eternalcollegest.com/post-2135090397158833601

【第三弾】
実況デザインで話題の板橋聡氏が手がける新プロジェクトの製作過程が面白かったのでまとめてみた
https://matome.eternalcollegest.com/post-2134724620694028601

前置きはこれぐらいにして、デザイン実況はじまります!

Satoru Itabashi@bash1boy

夜中になってしまったけど久々にデザイン実況でも。

Satoru Itabashi@bash1boy

昔やったやつはこちらを参考に → 「何かと話題のデザイナー板橋聡氏がツイッターでWebデザインの実況中継を投稿、ストイックすぎると話題」matome.naver.jp/odai/213458040…

Satoru Itabashi@bash1boy

ちなみにデザイン実況は簡単に言えばデザインプロセスで考えている事をリアルタイムでつぶやいていこうという勝手な実験で、とにかくその時の考えやそれに伴う動きを包み隠さず書いてみるというものです。

Satoru Itabashi@bash1boy

今回の対象はCAMPFIRE(camp-fire.jp)というクラウドファンディングサービスのアプリUI。実際にプロジェクトチームに入ってるので実務レベルのデザインになるかも。今日は核となるプロジェクト一覧に該当するページに着手します。

Satoru Itabashi@bash1boy

デザインに対して言われてる要望は特になし。仕様書もなし。ワイヤーも無し。完全にデザイン側は任せられていて全体の遷移も含め僕の考えを基に自由に作っていく状態。唯一言われたのは「アプリデザインお願い!」だけ。個人的にはこれが一番やりやすかったり。とりあえずスタートします。

ちょこっと途中解説

デザイン実況始まるよー!!
クライアントの「すべてお任せします」はデザイナーにとってはすごくありがたい話ですよね。その分責任も大きいですが。
さて、どんなデザインに仕上がるか楽しみです、デザイン実況スタート!!!

Satoru Itabashi@bash1boy

開始前の今はこんな感じ。KickstarterのiOSアプリを参考にカードレイアウトをざっくり作っただけの状態でこっから色々といじっていきます。 pic.twitter.com/RfCcx4zXpm

Satoru Itabashi@bash1boy

まずはカード内に入れる要素の検討。現状のサイト(camp-fire.jp/projects/disco…)では「画像/プロジェクトタイトル/タグ/ユーザー名/%バー/主要3つの数字」が入ってて、競合を色々見ててもこの形はある意味鉄板。最初のリリースではあまり崩さなくても良いかなという印象。

Satoru Itabashi@bash1boy

ただリスト内に簡易な説明文あった方がタイトルだけより内部に入りやすい&本当に興味ある内容か判別しやすいというのが過去の別案件で証明されているので、「現状の中身+詳細文の先頭」を新たに追加してみようかと思っています。

Satoru Itabashi@bash1boy

追加してみた状態。同時に今のメインカラーを挿入。 pic.twitter.com/vYZy87aMbN

Satoru Itabashi@bash1boy

余白、フォントサイズ、並び順の検証を黙々。 pic.twitter.com/NTV8fUHRR2

Satoru Itabashi@bash1boy

余白、フォントサイズ、並び順の検証を黙々と②。まだバランス悪いけど並び順はこの状態が一番しっくりくる。 pic.twitter.com/J4yJhAFZRI

Satoru Itabashi@bash1boy

ちなみにこのレイアウトはKickstarterを参考にしてカードレイアウトを見ただけなので初めから不採用のものです。今日は頭の中で考えていたレイアウトを形にしてみたいというのが目標。

ちょこっと途中解説

リニューアル案件の難しさやジレンマとの戦い
日本のクラウドファウンディング系サービスではトップクラスに有名なサービスなので、ユーザ数も多いはず。既存ユーザーにとっても有意義なリニューアルにしないといけない。

Satoru Itabashi@bash1boy

基本的な構成を作成。色々と考えていた結果、この縦に長い形状が一番良いのではないかと思っていて、結局ガツっと数を見せるより1個1個の面白さを伝えた方がCAMPFIREの性質には合っているかなと。 pic.twitter.com/GaBRrqqkfX

Satoru Itabashi@bash1boy

クラウドファンディングは実際に動いてるプロジェクトは100前後が多く、カテゴリ数に割ると1カテゴリ=15くらい。その上に成功したプロジェクトが掲載されて1カテゴリ=30〜45くらいで数を一気に見せ過ぎると一瞬でスクロールが終了して「少なっ!」という潜在的な印象が生まれる。

Satoru Itabashi@bash1boy

そういった無意識の印象を避けるのと1個1個が面白みを持つCAMPFIREの性質を考えていくと1ブロックに重量を置いてきちんとした情報構成にした方があらゆる面で適しているなという思考プロセスがあって今日のレイアウト検証の内容になっています。

Satoru Itabashi@bash1boy

なんか作りながらだと文章読みづらくて汚なくなるな。

Satoru Itabashi@bash1boy

さっき検証していたカード内に入れる要素をまるごと入れてみた。 pic.twitter.com/vTxZ15Ae0U

Satoru Itabashi@bash1boy

詳細文が余分な要素になっていないかの確認。入ってた方がバランスも良さそう。周辺の細かな要素はクラウドファンディングの基本形を中心に組み立て。あまりいじり過ぎてよく分からないものになるのも嫌なので。 pic.twitter.com/cOFH50ZoaX

Satoru Itabashi@bash1boy

詳細文を3行から2行へ変更。同時にカテゴリ&ユーザー名などの細かな余白調整をざっくり。画面の小さなiPhone5サイズとかを考えると3行より2行が高さ的にも良い。3行は文章量が増えすぎてタイトルの邪魔になり目が逸れる、1行だと情報が少なくて存在意義がない。詳細文なしも一緒かな。

Satoru Itabashi@bash1boy

Satoru Itabashi@bash1boy

ヘッダー周りを作成。色は後で考えるのでとりあえず黒。アイコン小さい。サブメニューの高さが少し小さい印象。 pic.twitter.com/cNtDRBKmPw

Satoru Itabashi@bash1boy

ヘッダー全体を再調整。今度はアイコンでかすぎる。 pic.twitter.com/xvkKTEN9IK

Satoru Itabashi@bash1boy

アイコン調整。数px縮小してちょうど良い感じ。ちなみに1枚目に表示されてるプロジェクト画像が違うのは黒系の画像が来た時と白系の画像が来た時、どちらでもバランスが整っている状態を保つためにちょこちょこ入れ替えてるからです。 pic.twitter.com/uEofTIHETk

Satoru Itabashi@bash1boy

画像が無い場合だとまたバランスが変わるなぁ。中間点取るかどうしようかを微調整。 pic.twitter.com/w5D79diTOM

Satoru Itabashi@bash1boy

というか普通に考えてプロジェクト画像が無いことはありえないので無駄な検証だった。元に戻し。配色も消してレイアウトの検証を続けます。カード内の配置はわりとまとまった感じかな。順番も目の流れも悪く無い。たまたま隣にいたITには全く無知の人に聞いてもフォントサイズ問題もなさそう。

Satoru Itabashi@bash1boy

Satoru Itabashi@bash1boy

個人的には普段のクライアント案件でも序盤での配色はあんまり付ける事はせず、単色でバランスを探りながら作っていく事が多くてその方が全体のレイアウトバランスをまとめやすい。

ちょこっと途中解説

「まずはモノクロで作る」これテストに出ます!
このデザイン実況ではお馴染みの、まずはモノクロで作るが炸裂しました。その分手間はかかるけど、その分全体のバランスをまとめやすいのでオススメです!

Satoru Itabashi@bash1boy

コンテンツ部分が固まってきたので次にメニューバーを敷いてみる。本来の設計に従えばこういうメニュー敷いた方が良いんだろうけどちょっと余分な印象かなぁ。ユーザーの行動予測に対して明らかに不要かもという感じ。 pic.twitter.com/aVNwT0DyvU

Satoru Itabashi@bash1boy

クラウドファンディングは基本的に「プロジェクトを探して詳細を見る → 支援する」「プロジェクトを作る → 管理する」の2つだけで、もっと掘り下げれば「色んなプロジェクトを見てるうちに自分でもやりたくなる」というのが多かったりする訳でメニューバーの表示ってほとんど使わないなと。

Satoru Itabashi@bash1boy

最重要項目になるプロジェクト一覧はデフォルトで表示、ヘッダーにある検索で詳細検索が出来て、プロジェクトの作成をしたくなったらそのまま作成できる、それ以外の詳細はメニュー画面でどうぞ。みたいな簡易さがベストかなと。そうなるとプロジェクト作成をどうシンプルな表現に落としこむか。

ちょこっと途中解説

ちょこっと途中解説

怒涛の思考三連発
クライアント側の要望をいかにしてデザインに組み込むのか、デザイナーの腕の見せ所ですね。

Satoru Itabashi@bash1boy

本来であればプロジェクト作成もメニュー内に突っ込んで良いのかもだけど、CAMPFIREチームの今後の方針では「もっと障壁を無くしていって、金額に関係なく少額からでも色んな人のプロジェクト支援に繋げたい」みたいな思いがあるのでそこはデザインにも反映したいなと思っています。

ちょこっと途中解説

ちょこっと途中解説

ちょこっと途中解説

Satoru Itabashi@bash1boy

ごちゃごちゃいじってた結果、さりげないボタンが1つあれば解決出来そう。右下に固定のボタンを配置。主要ページには全て置いといて、いつでもプロジェクト作成に行ける状態はわりと理想かも。ボタン少し小さいかな。 pic.twitter.com/fJSufs1jN1

Satoru Itabashi@bash1boy

ボタンサイズの検証。でかすぎで邪魔。右手でのスクロールに影響する。 pic.twitter.com/DM81EhwF8z

Satoru Itabashi@bash1boy

px単位でサイズ検証を。最終的に落ち着いた状態。いいね。スクロールの邪魔にもならず主張し過ぎず隠れ過ぎず。 pic.twitter.com/Qj8LK6Vw6I

Satoru Itabashi@bash1boy

全体像を確認して次は「成功したプロジェクト」の表示確認。デザイン変えすぎると目立ち過ぎたのでさりげない感じで。配色でバランス取ればよくなりそう。ここは既に頭の中にあったので悩まず仮完了。 pic.twitter.com/nbpw2NlCo6

Satoru Itabashi@bash1boy

開始前に練っていた、だいたいの骨格は形として見えてきた。

Satoru Itabashi@bash1boy

今から一通り配色を検討してみます。複数の色は使わず、出来ればキーカラーのみの単色を使ってまとめたい。プロジェクト画像自体にあらゆる色が来るから、基盤の部分で色を多用するとかなりごちゃごちゃした見栄えになってしまうので。

Satoru Itabashi@bash1boy

配色検討 ①、重い pic.twitter.com/3DfGQH6cFJ

Satoru Itabashi@bash1boy

配色検討 ②、きもい pic.twitter.com/FL0yMHUie8

Satoru Itabashi@bash1boy

配色検討 ③、きもい pic.twitter.com/FlchP3KWmx

ちょこっと途中解説

夜も深くなり、口が悪くなってきています。ご注意ください
デザイン実況始まってかれこれ3時間経過しています。ただいまの時刻AM5:23です。多少の悪態は見逃してください(笑)

Satoru Itabashi@bash1boy

配色検討 ④、まぁまぁ pic.twitter.com/P2OnM83Yup

Satoru Itabashi@bash1boy

配色検討 ⑤、ヘッダーライン無い方が良いかも pic.twitter.com/yqyS6IqBha

Satoru Itabashi@bash1boy

配色検討 ⑥、黒基調 pic.twitter.com/NIg2Ndo9Ot

Satoru Itabashi@bash1boy

新しいCAMPFIREの方向性の1つとして、「プロジェクト毎のカラーをもっと生かす為にCAMPFIRE自体はあえて色を持たないのも面白いね」という会話もあったので白黒単色も検証対象にしています。

Satoru Itabashi@bash1boy

配色検討 ⑦、白基調 pic.twitter.com/YCwRI8Qa9q

Satoru Itabashi@bash1boy

色々と細かい調整をやってみたけど自分だけでは最終判断が難しそう。なので配色は一旦保留にしておきます。

Satoru Itabashi@bash1boy

とりあえずこれが最終的な全体の骨格。ここから数日置いて考えて、また微調整して配色も検証して、その後にCAMPFIREチームとディスカッションして、最終案に落とし込んでという感じになるかと。 pic.twitter.com/HAiYsmqIS2

Satoru Itabashi@bash1boy

作ってるうちは感覚が麻痺して判断が鈍る場合が多いので数日寝かせる事によって「自分の中の限りない新鮮な目」でも確認するという作業は本当に重要だと毎回思ってたりします。

ちょこっと途中解説

烈火のごとく作り上げたデザインでもその場で完成させるわけではなく、数日寝かせること!これ、テストに出ます
集中して作り上げたデザインというのはどうしても客観的に見られないものです。そういうときは一旦寝かせて、数日後に改めてじっくり見直しましょう。自分が作ったものなのに、また違った印象を持つはずです。

Satoru Itabashi@bash1boy

あとはこういうプロセス公開の中でユーザーとか客観的に見てた中での意見とか声を拾って、実際のデザインに反映できたら良いなと思ったり。結果的にそれがユーザーにとって一番良いものになるだろうしユーザーと一緒にCAMPFIREアプリを作っていくスタイルとかは面白そう。

Satoru Itabashi@bash1boy

一通りまとめると、これが開始時のデザイン pic.twitter.com/0iJ4MQXGJB

Satoru Itabashi@bash1boy

中間デザイン pic.twitter.com/I3Juvz3m37

Satoru Itabashi@bash1boy

最終デザイン(配色保留) pic.twitter.com/tssioHRGXW

Satoru Itabashi@bash1boy

レイヤー内部。参考までに。いつもこんな感じで上から順に名前振ってまとめる様にしてます。誰がファイルいじってもすぐ分かる様に。 pic.twitter.com/TCMOJtb0US

Satoru Itabashi@bash1boy

この後はディスカッションや色んな声を拾いながら落とし込んでいって、リリースした時に最終形がお披露目になれば良いなと思います。ずっとTLを見てくれた人も結構いたのでモチベーション的にも助かりました。長い時間になっちゃいましたが今日はここまでに。長丁場、ありがとうございました。

Satoru Itabashi@bash1boy

補足:画像は全てiPhone6sサイズで作っているので実機お待ちの方は原寸で確認できるかと思います

Satoru Itabashi@bash1boy

気付けば実況含めて22時間ぶっ通しでデザインやってた。寝よう。
https://matome.naver.jp/odai/2145854383549858901
2016年03月22日