2012.7.5

coconala(ココナラ)のリデザインを担当させていただきました

0705_s

7月3日に公開されたココナラ(運営会社:株式会社ウェルセルフ)のリデザインを担当させていただきました。
ココナラをどのようにデザインしていったか、またデザインの特徴などを書いてみましたので、参考になればと思います。

そもそもココナラとは?

500円で個人の経験・知識・スキルを売買できるWebサービスです。
自分の得意なことをサービスとして売ったり、他の人の得意なことをサービスとして買ったりすることができます。
購入者一人ひとりに合わせたオーダーメイドの回答がもらえることが特徴です。

私の担当領域

デザインがメイン作業で、単純なページに関しては情報設計+デザインを担当しました。
また、1からのデザインではなく、元々のベースがあって、それの作り替えという感じでした。(なので、リデザイン)
情報設計は @satoshimmyo さんが行い、その指示のもとデザインを作成していきました。

デザインプロセス

1. デザインイメージの選定

元々のデザインを作り替えるにあたって、以下のようなデザインオーダーがありました。

  • ECっぽさを出していく
  • 各パーツを見やすく、すっきりさせていく
  • 色のトーンをはっきりさせていく
  • デザインをもう少し洗練する

また、メインターゲットが20~30代の女性でしたので、デザインイメージはこのようにしました。

    • 目新しい感じ(今のデザイントレンドを適宜取り入れる)
    • メリハリがはっきりしている
    • やわらかさ
    • かわいらしさ
    • きれいな感じ
    • にぎやかな、楽しい感じ

2. 構成の咀嚼

デザインの構成は↑のような感じで紙できます。
これを見て、こうした方が良いんじゃないか、って思った場合は私で一から描いてみて、咀嚼をします。
こうすると設計の意図が明確になり、デザインもしやすくなります。
問題無い場合はそのままデザインに進み、それでも疑問に思ったところは聞いたり、試しにデザインをつくってみたりして解決するようにしました。


私の描いた構成(汚くてすみません…また、上の構成とは違うページになります)

3. デザイン

上記のデザインイメージから出来上がったのがこのトップページのデザインです。
メイン画像は何度か変遷を経て現在のものになったのですが、全体的なトーンやテイストは比較的早い段階で決まりました。

ココナラでのデザインの良し悪しの基準は、機能をデザインでわかりやすく示すことができているか、ということに終始したと思います。

その形状や色は適切か、意味があるか、きちんと伝わるか、など。

ただ全てを論理的に作成していくのではなく、感覚に頼るところもあります。
うまく言えないのですが、感覚的に、「あ、これだ」とぴったりはまるところがあります。それにたどりつくまで試行錯誤を続けます。

ただその勘は外れることもあって、外れたときは設計の意図をしっかり汲み取れていないときが多いです。
なので、意図を汲み取ってデザインするということは心がけていました。
(そういう意味では論理的なのでしょうか…)

デザインの試行錯誤

ココナラのベータ版では、メインとなるいくつかのページで、デザインが決まるまでに何度か試行錯誤を繰り返しました。
というのも、ユーザーインタビュー→デザインフィードバックを繰り返してデザインを改善していったからです。

デザインフィードバック

テストユーザーによるデザインフィードバックには、ユーザーの本音が含まれています。
ユーザーは何を不安に思っているのか、何を期待して訪れているのかがわかりやすくなり、それがわかることでデザインに反映しやすくなります。

参考サイト一覧

動きや機能面含め、参考にさせていただいたサイトをまとめてみました。海外多い。
海外のWebサービスはこなれすぎててちょっとわかりにくい面もあるのですが、全体的には洗練されていてとても勉強になります。
Webサービスではない普通のサイトをデザインするときも参考になるかと思うので、ぜひ一度、ユーザー登録をして、使って、じっくり観察してみると良いと思います。

国内

cookpad
http://cookpad.com/

nanapi
http://nanapi.jp/

海外

chill
http://chill.com/

dribbble
http://dribbble.com/

etsy
http://www.etsy.com/

fab.com
http://fab.com/

kickstarter
http://www.kickstarter.com/

gumroad
https://gumroad.com/

Pinterest
http://pinterest.com/

あとはTwitterやFacebookも良く見ましたねー。

さいごに

@satoshimmyo さんからTwitterでお声がけいただいて、初めてのWebサービスのデザインをすることになり、たくさんのことを学ばせていただきました。
特に海外のUI・デザイン面の研究では、こんな見せ方があるのか!と驚かされるばかりで…
デザインを作らせてもらえて、本当に感謝しております。

ちなみにココナラには私も出品をしているので、よろしければご購入ください(*´∀`)
また、他に魅力的なサービスがたくさん出品されていますので、ぜひご登録を~

ココナラ – あなたの得意でハッピーが広がるワンコインマーケット
http://coconala.com/

Share & Send

  • このエントリーをはてなブックマークに追加
HOME >  雑記・お知らせ > coconala(ココナラ)のリデザインを担当させていただきました