escafrace blog

nanapiのデザインプロセス(その1)

9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。
制作過程みたいなものを書いてみたいと思います。

ロケットスタートに全力投球を誓った、けんすうさんからのご依頼

ある日、ロケットスタートの社長、けんすうこと古川健介さん(以下、けんすうさん)から

:HOWTOサイトをつくりたいからデザインを依頼したい!

ということで早速じっくりとお話を伺うことにしました。

ベンチャーだからこそできる!?合宿的制作スタイル

以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。

それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。

宿泊こそ伴わないものの、合宿に似たようなスタイルです。
長い時間をかけるので一見コストがかかるようにも見えますが、直接やりとりすることで得られる情報量は多く、行き違いが少なくて結果的にスピードアップできるとお互い(以前お仕事したときに)感じていて、今回もそのようなスタイルで取り組むことにしました。

ちなみに通常の制作スタイルだと・・1回の打ち合わせ(長くても2時間くらい)でお客様の要望を最大限に吸収して、潜在的に何を求めているのかをじっくりと考えて…その後メールや電話でのやりとり、ということが多いのですが、合宿的スタイルではメールや電話によるタイムラグも発生せず、短期間に成果を出すときに効果的だと思っています。

最初のヒアリングのメモ書き

Howtoサイトをつくりたい、ということでけんすうさんが考えていることを聞き出しメモにとりました。

▲最近、サイト制作の前にヒアリングをする際には、自分の手になじむアナログなやりかたでメモをとって、イメージを忘れないように気をつけています。
個人的にはマインドマップ的にかいておくと、全体像を忘れにくいと思っています(クリックで拡大)

コンセプトをはっきりさせるまでの道のり

デザインをご依頼いただいたとはいえ、見た目をどうのこうのというだけでなくそもそもどうあるべきかというところからアドバイスが欲しいということでした。
そもそも私がデザインを考えるときにどうしても根本的な目的とか、何をもってゴールなのか、というのを明確にしておかないと良いデザインは生み出せないですから、最初の段階の話し合いにはかなりの時間をかけました。

けんすうさんが最初に考えていたイメージ

▲ワイヤーフレーム案(クリックで拡大)

この画像はヒアリングの時点で、けんすうさんが持ってきてくださったワイヤーフレーム案です。「家電量販店で一番お得にポイントを使う方法」といった、今のnanapiにもありそうなネタをタイトルに置くなど、やりたいイメージというのが伝わってくるワイヤーフレームでした。
コミュニティの運営について多くの実績をもっているけんすうさんだからこそ出てくるアイデアが詰まっています。(今のnanapiのレベルシステムの原型とか、評価システムの原型がちゃんともりこまれているのがわかります)

サイトリリース時点でどうあるべきか、をはっきりさせる

具体的にデザインに落とし込むには、「サイトリリース時点でどうあるべきか」をはっきりさせる必要があります。

売上やPVは指標としてとてもわかりやすいですが、リリース時点ではまず

  • 多くの人にサイトを知ってもらう(具体的な数値はここでは割愛します)
  • 書き手にとってよい体験を与える
  • 書き手にとって書きやすいUIにする
  • 読み手にとって有益な情報を与える
  • 読み手にとって「やってみたい情報がたくさんあるね」「使えそうだね」というイメージを与える

といったような目標を定めました。

ロケットスタートのお2人が心から楽しく取り組める事業であってほしい

私としては、せっかく同じベンチャーで新しいサイトを立ち上げる以上、何よりロケットスタートのお2人が心から楽しくとりくめる事業であってほしいという思いがありました。

けんすうさんが今までに作ってきたサービスの共通点は、どれもギスギスしていなくてほんわかしていると思っていたので、けんすうさんの良さをサイトに取り込むのはサイトにとっても大変メリットが大きいと考え、女性向けに絞ってみせていくのはどうかと提案してみました。

「ライフレシピ」という概念

そこで考えたのが「ライフレシピ」という概念です。
Howto記事といえばブックマークサイトでも多く人気にあがってきたり、何かと効率の良いやり方はライフハックとも呼ばれて多くの人の注目を集めていますが、もっと女性にも親しみやすい呼び方を考えたときに、お料理のレシピのごとく、よりよい生活のやり方(ライフレシピ)というのがしっくりくると思ったのです。

ということで早速トップページでどういう見せ方をするかブレスト

生活を良くするというアプローチでは、そもそも現状に満足していたり問題だと認識していない場合にとても届きにくいものになってしまいます。
どんな見せ方をするにしても、結果的に多くの人に読みたいと思ってもらえる仕掛けが必要です。

2種類の見せ方

1.問題提起を行う見せ方

このままじゃまずい、という気にさせ、必要にせまられて問題の解決策を読むという行動に導く見せ方

2.解決したときの自分をイメージできる見せ方

こうなりたい、という気にさせ、そのための方法が書いてあるから読むという行動に導く見せ方

このように大きく分けて2つの見せ方があるという仮説をつくり、問題提起型の一つの例をプロジェクトメンバー(けんすうさん・wadapさん・私)で考えました。

▲問題提起で見せるイメージのラフスケッチ(クリックで拡大)

すると・・・
モテない・ドケチ・・などといったネガティブワードが混在してきて、3人共に

「なんかちがうなー・・・」

ということで仕切り直し。

nanapiの原型が生まれる

最終的にけんすうさんが「セブンリッチ・すべての問題は7つにしぼる」と言いだしたのをきっかけに、ななつ・・語感がいいから「ナナピ!」というノリで、nanapiという名前が生まれました。
7つの問題をあてはめることで、7つのカテゴリーも生まれたわけです。

▲nanapiのラフスケッチ。現状と少し違いますが、ずいぶん近づいてきました。(クリックで拡大)

nanapiのデザインプロセス(その2)に続きます。

トラックバック

この記事について他のブログなどで参照いただく際に、下記の URI 宛に ping 送信するとこのブログに通知(トラックバック)することができます(但し、この記事にリンクのないトラックバックは削除されることがありますのでご了承ください)。

この記事を参照しているページの一覧

  1. 「nanapi」に学ぶウェブサイトのコンセプトデザイン from blogs.com

    ウェブサイトをどう作っていくか、というノウハウがこんなに詰まった記事を公開しちゃっていいんですか? と心配になるくらい、サイト作りのエッセンスが満載です。...

    September 18, 2009 6:03 PM

  2. Site iconnanapiは、Google AdSenseの収益が「0」のメディア from makitani.com

    ライフハック共有サイト「nanapi(ナナピ)」、メディア的な位置づけのサイトながら、Google AdSenseの枠がありません。バナー広告枠もありま...

    March 25, 2010 9:58 AM

コメント

* Gravatarに登録(FREE)するとあなたのアバターが表示されます。

Please Your Comments!

コメント投稿フォーム:

この記事に関係のない内容のコメントは削除させていただく場合があります。また、コメントに対するお返事は必ず行われるとは限りませんのでご了承ください。