プロジェクト掲載手数料を20%から5%に引き下げるなど大幅のリニューアルを遂げて進化するCAMPFIREのアプリデザインの裏側が公開されました！今まで多くのデザイン実況を行ってきた板橋さんのデザインへのこだわりをご覧ください。
クラウドファンディングのCAMPFIREとは？
クラウドファンディングとは、インターネットを通してクリエイターや起業家が不特定多数の人から資金を募ることを言います。CAMPFIREは群衆（crowd）から資金集め（funding）ができる、日本最大のクラウドファンディング・プラットフォームです。
CAMPFIRE（キャンプファイヤー）- クラウドファンディング
現在までに1300件以上のプロジェクトが 65,000人以上の人々から 総額約6億円を集めています
そんなCAMPFIREのデザインを「デザイン実況」でお馴染みのwebデザイナーが行います
デザイン実況とは？
WebデザインのプロセスをTwitterで一般公開しながら制作を進めます
前置きはこれぐらいにして、デザイン実況はじまります！
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…）では「画像／プロジェクトタイトル／タグ／ユーザー名／％バー／主要３つの数字」が入ってて、競合を色々見ててもこの形はある意味鉄板。最初のリリースではあまり崩さなくても良いかなという印象。
Satoru Itabashi@bash1boy
ただリスト内に簡易な説明文あった方がタイトルだけより内部に入りやすい＆本当に興味ある内容か判別しやすいというのが過去の別案件で証明されているので、「現状の中身＋詳細文の先頭」を新たに追加してみようかと思っています。
Satoru Itabashi@bash1boy
余白、フォントサイズ、並び順の検証を黙々と②。まだバランス悪いけど並び順はこの状態が一番しっくりくる。 pic.twitter.com/J4yJhAFZRI
Satoru Itabashi@bash1boy
ちなみにこのレイアウトはKickstarterを参考にしてカードレイアウトを見ただけなので初めから不採用のものです。今日は頭の中で考えていたレイアウトを形にしてみたいというのが目標。
ちょこっと途中解説
リニューアル案件の難しさやジレンマとの戦い
日本のクラウドファウンディング系サービスではトップクラスに有名なサービスなので、ユーザ数も多いはず。既存ユーザーにとっても有意義なリニューアルにしないといけない。
Satoru Itabashi@bash1boy
基本的な構成を作成。色々と考えていた結果、この縦に長い形状が一番良いのではないかと思っていて、結局ガツっと数を見せるより１個１個の面白さを伝えた方がCAMPFIREの性質には合っているかなと。 pic.twitter.com/GaBRrqqkfX
Satoru Itabashi@bash1boy
クラウドファンディングは実際に動いてるプロジェクトは100前後が多く、カテゴリ数に割ると１カテゴリ＝15くらい。その上に成功したプロジェクトが掲載されて１カテゴリ＝30〜45くらいで数を一気に見せ過ぎると一瞬でスクロールが終了して「少なっ！」という潜在的な印象が生まれる。
Satoru Itabashi@bash1boy
そういった無意識の印象を避けるのと１個１個が面白みを持つCAMPFIREの性質を考えていくと１ブロックに重量を置いてきちんとした情報構成にした方があらゆる面で適しているなという思考プロセスがあって今日のレイアウト検証の内容になっています。
Satoru Itabashi@bash1boy
詳細文が余分な要素になっていないかの確認。入ってた方がバランスも良さそう。周辺の細かな要素はクラウドファンディングの基本形を中心に組み立て。あまりいじり過ぎてよく分からないものになるのも嫌なので。 pic.twitter.com/cOFH50ZoaX
Satoru Itabashi@bash1boy
詳細文を３行から２行へ変更。同時にカテゴリ＆ユーザー名などの細かな余白調整をざっくり。画面の小さなiPhone5サイズとかを考えると３行より２行が高さ的にも良い。３行は文章量が増えすぎてタイトルの邪魔になり目が逸れる、１行だと情報が少なくて存在意義がない。詳細文なしも一緒かな。
Satoru Itabashi@bash1boy
ヘッダー周りを作成。色は後で考えるのでとりあえず黒。アイコン小さい。サブメニューの高さが少し小さい印象。 pic.twitter.com/cNtDRBKmPw
Satoru Itabashi@bash1boy
アイコン調整。数px縮小してちょうど良い感じ。ちなみに１枚目に表示されてるプロジェクト画像が違うのは黒系の画像が来た時と白系の画像が来た時、どちらでもバランスが整っている状態を保つためにちょこちょこ入れ替えてるからです。 pic.twitter.com/uEofTIHETk
Satoru Itabashi@bash1boy
というか普通に考えてプロジェクト画像が無いことはありえないので無駄な検証だった。元に戻し。配色も消してレイアウトの検証を続けます。カード内の配置はわりとまとまった感じかな。順番も目の流れも悪く無い。たまたま隣にいたITには全く無知の人に聞いてもフォントサイズ問題もなさそう。
Satoru Itabashi@bash1boy
個人的には普段のクライアント案件でも序盤での配色はあんまり付ける事はせず、単色でバランスを探りながら作っていく事が多くてその方が全体のレイアウトバランスをまとめやすい。
ちょこっと途中解説
「まずはモノクロで作る」これテストに出ます！
このデザイン実況ではお馴染みの、まずはモノクロで作るが炸裂しました。その分手間はかかるけど、その分全体のバランスをまとめやすいのでオススメです！
Satoru Itabashi@bash1boy
コンテンツ部分が固まってきたので次にメニューバーを敷いてみる。本来の設計に従えばこういうメニュー敷いた方が良いんだろうけどちょっと余分な印象かなぁ。ユーザーの行動予測に対して明らかに不要かもという感じ。 pic.twitter.com/aVNwT0DyvU
Satoru Itabashi@bash1boy
クラウドファンディングは基本的に「プロジェクトを探して詳細を見る → 支援する」「プロジェクトを作る → 管理する」の２つだけで、もっと掘り下げれば「色んなプロジェクトを見てるうちに自分でもやりたくなる」というのが多かったりする訳でメニューバーの表示ってほとんど使わないなと。
Satoru Itabashi@bash1boy
最重要項目になるプロジェクト一覧はデフォルトで表示、ヘッダーにある検索で詳細検索が出来て、プロジェクトの作成をしたくなったらそのまま作成できる、それ以外の詳細はメニュー画面でどうぞ。みたいな簡易さがベストかなと。そうなるとプロジェクト作成をどうシンプルな表現に落としこむか。
ちょこっと途中解説
ちょこっと途中解説
怒涛の思考三連発
クライアント側の要望をいかにしてデザインに組み込むのか、デザイナーの腕の見せ所ですね。
Satoru Itabashi@bash1boy
本来であればプロジェクト作成もメニュー内に突っ込んで良いのかもだけど、CAMPFIREチームの今後の方針では「もっと障壁を無くしていって、金額に関係なく少額からでも色んな人のプロジェクト支援に繋げたい」みたいな思いがあるのでそこはデザインにも反映したいなと思っています。
ちょこっと途中解説
ちょこっと途中解説
ちょこっと途中解説
Satoru Itabashi@bash1boy
ごちゃごちゃいじってた結果、さりげないボタンが１つあれば解決出来そう。右下に固定のボタンを配置。主要ページには全て置いといて、いつでもプロジェクト作成に行ける状態はわりと理想かも。ボタン少し小さいかな。 pic.twitter.com/fJSufs1jN1
Satoru Itabashi@bash1boy
px単位でサイズ検証を。最終的に落ち着いた状態。いいね。スクロールの邪魔にもならず主張し過ぎず隠れ過ぎず。 pic.twitter.com/Qj8LK6Vw6I
Satoru Itabashi@bash1boy
全体像を確認して次は「成功したプロジェクト」の表示確認。デザイン変えすぎると目立ち過ぎたのでさりげない感じで。配色でバランス取ればよくなりそう。ここは既に頭の中にあったので悩まず仮完了。 pic.twitter.com/nbpw2NlCo6
Satoru Itabashi@bash1boy
今から一通り配色を検討してみます。複数の色は使わず、出来ればキーカラーのみの単色を使ってまとめたい。プロジェクト画像自体にあらゆる色が来るから、基盤の部分で色を多用するとかなりごちゃごちゃした見栄えになってしまうので。
ちょこっと途中解説
夜も深くなり、口が悪くなってきています。ご注意ください
デザイン実況始まってかれこれ3時間経過しています。ただいまの時刻AM5:23です。多少の悪態は見逃してください（笑）
Satoru Itabashi@bash1boy
新しいCAMPFIREの方向性の１つとして、「プロジェクト毎のカラーをもっと生かす為にCAMPFIRE自体はあえて色を持たないのも面白いね」という会話もあったので白黒単色も検証対象にしています。
Satoru Itabashi@bash1boy
とりあえずこれが最終的な全体の骨格。ここから数日置いて考えて、また微調整して配色も検証して、その後にCAMPFIREチームとディスカッションして、最終案に落とし込んでという感じになるかと。 pic.twitter.com/HAiYsmqIS2
Satoru Itabashi@bash1boy
作ってるうちは感覚が麻痺して判断が鈍る場合が多いので数日寝かせる事によって「自分の中の限りない新鮮な目」でも確認するという作業は本当に重要だと毎回思ってたりします。
ちょこっと途中解説
烈火のごとく作り上げたデザインでもその場で完成させるわけではなく、数日寝かせること！これ、テストに出ます
集中して作り上げたデザインというのはどうしても客観的に見られないものです。そういうときは一旦寝かせて、数日後に改めてじっくり見直しましょう。自分が作ったものなのに、また違った印象を持つはずです。
Satoru Itabashi@bash1boy
あとはこういうプロセス公開の中でユーザーとか客観的に見てた中での意見とか声を拾って、実際のデザインに反映できたら良いなと思ったり。結果的にそれがユーザーにとって一番良いものになるだろうしユーザーと一緒にCAMPFIREアプリを作っていくスタイルとかは面白そう。
Satoru Itabashi@bash1boy
レイヤー内部。参考までに。いつもこんな感じで上から順に名前振ってまとめる様にしてます。誰がファイルいじってもすぐ分かる様に。 pic.twitter.com/TCMOJtb0US
Satoru Itabashi@bash1boy
この後はディスカッションや色んな声を拾いながら落とし込んでいって、リリースした時に最終形がお披露目になれば良いなと思います。ずっとTLを見てくれた人も結構いたのでモチベーション的にも助かりました。長い時間になっちゃいましたが今日はここまでに。長丁場、ありがとうございました。
https://matome.naver.jp/odai/2145854383549858901
2016年03月22日
何かと話題のデザイナー板橋聡氏がツイッターでWebデザインの実況中継を投稿、ストイックすぎると話題
https://matome.eternalcollegest.com/post-2134580404268648601
【第二弾】
板橋聡氏がツイッターでWebデザインの実況中継！
https://matome.eternalcollegest.com/post-2135090397158833601
【第三弾】
実況デザインで話題の板橋聡氏が手がける新プロジェクトの製作過程が面白かったのでまとめてみた
https://matome.eternalcollegest.com/post-2134724620694028601