エスカフラーチェLLC

概要

デザインの構想から完成まで。
デザイナーがどのような工程を経ているのか？何を大切にしているのか？ というようなことを、経験をもとに共有しあい、理解を深めていきます。

勉強会の内容

主に以下のような内容で進行しました。

1. nanapi のデザインプロセスブログ記事（その１、その２）をとりあげ、軽く振り返る
2. 事前アンケートより、関心が高いトピックについて意見を出し合う

ディスカッションを振り返って・・・

関心の高かったトピックのうち、「クライアントとのコミュニケーション」「コンセプトの決め方」「ユーザ調査・分析・ペルソナシナリオ手法」の部分について、制作の現場ではどのようにやっているのかということを中心に意見を出し合いました。

クライアントに提案を行う際に「（サイトができたとして）5年後に何をしたいですか？という質問で、本当の目的が見える」（５年後のビジョンの共有）という意見など、自分のやり方以外のお話をいろいろ知ることができて参考になりました。

反省点など

第0回ということで試験的に、手探りにはじめてみましたが、とくに勉強会の進行についてとても学びが多いものでした。当日の進行においては不慣れなためにあまり上手にできず申し訳なく思います。また、メールやTwitterなどでご意見をいただいた方、ありがとうございます。この場を借りてお礼申し上げます！

• デザイナー・ディレクター・プログラマーといった役割が見えにくいまま幅の広い（どちらかというとディレクション寄り）話題を中心に進めてしまい、結果的にデザイナー視点がぼやけてしまった
• デザインプロセスの前段階・前提となるコミュニケーションについての話が大きくなってしまい、デザインプロセスになかなか踏み込むことができなかった
• 30人で座談会のような形式にしたため、人によっては発言をしづらい状況をつくってしまった

次回以降の課題

• 人数を減らして発言しやすくするか、あらかじめ決めたテーマについてグループワークの上で発表してもらうスタイルにする
• 発言時に普段の役割が見えやすいように名札もしくはその場で見えるポジションペーパーなどを作成する
• テーマを広げすぎない ... 次回はもっと狭いテーマで、「ビジュアルデザインの起こし方」にフォーカスする予定です。

ブログ・Twitter でのレポート

当日、ハッシュタグについて何も触れないままホワイトボードに書いていただけなのに活用いただき、ありがとうございます。今後発信の際には活用していきたいと思います！

※レポートの際に、トラックバックでお知らせいただけると嬉しいです。

• Twitter ハッシュタグ（#povcc）
• WEB勉強会POINT OF VIEWに参加してきました！｜しらさかブログ-デザイン事務所で働く東洋人の成長日記-

私がデザインをご依頼いただいたときに踏むデザインプロセス

1. 目的を明確にし、戦略を決める
2. 要件定義を行い、サイトの構造を決める
3. ページの骨格を決めたり、ページの中で見せたい情報に優先順位をつけたりする
4. 見た目の表現を形にする

大枠に考えるとこのようなフローでデザインを行います。プロトタイプを作ってから問題点を見つけてブラッシュアップをする場合は2〜5をいったりきたりすることも多いです。

また、そのときのコンディションによって順序が入れ替わることもあります。

デザインプロセス（その１）でやってきたことを振り返ると、まだ1.の段階というわけで、入り口にようやくたったというところでした。

※nanapi ではロケットスタートさんが考えていらっしゃる中期的・長期的戦略があるのですが、まずはリリース後＞集客に成功するというフェーズでのデザインに絞って書いています。

Step2〜3：要件定義を行い、サイトの構造を決め、ページの骨格を決める

ページの骨格決めとワイヤーフレーム

ワイヤーフレームといえば先日の CSS Nite LP7 IA（情報アーキテクチャ）特集を中心に話題になっていました。

せっかくなのでここでのワイヤーフレームの意味について触れておきます。

けんすうさんはワイヤーフレームを作る際、それ自体は参考資料というか、ページで表示させたい要素を盛り込むものという位置づけで作ってくださっていて、必ずしもその通りに作ってください的オーダー見本ではないと思っていただいてました。

つまりここから私がやるべきことは、ワイヤーフレームに書いてあることを美しく再現することではありません。

ワイヤーフレームをよく観察して、目的により合致した画面の設計（情報の重要度・適切な表記のしかた・情報の見せ方）を提案し、形にしていくことだと思っています。

▲トップページのワイヤーフレーム

Step4 見た目の表現を形にする

おそらく、この工程はデザイン工程の中でもかなり悶々とする時間が長いところだと思っています。

実際にnanapiを制作した時には、Step4をやりながらStep3を考えるような感じですすめていったので、左脳（目的や理由がはっきりした設計を考える）・右脳（心地よさなど感情に訴えかける見せ方を目指す）がフル稼働し、脳みそがたっぷり汗をかいたような気がしています。

キーワードを抽出し、似合うテイストを決めることからスタート

グラフィックのデザインあるいはコミュニケーションのデザインは、情報の視覚化ともいえる作業なので、まずはサイトのイメージに近いキーワードを出しました。

• かわいい
• 親しみやすい
• 手軽
• 主婦
• 女性的
• やわらかい
• かっこよすぎない
• 上品すぎない
• かんたん
• 役に立つ

などなど。

そして、それらのキーワードに近いモチーフやカラーリングの例として、近そうなサイト・近そうな素材をピックアップして、これで方向性にずれがないか、けんすうさんにチェックしてもらいました。

▲イメージにあいそうな素材

最初に出したトップページラフショット

ラフを作るときに手描きするときもありますが、今回はスピードを優先し Fireworks を使ってラフ作りを始めました。

そしてここからは１人作業、けんすうさんにアウトプットするまでは本当に自分自身との戦いがはじまります。

▲ラフ段階なのでガイドラインがあっていなかったり、余分な画像が写りこんでいたりもします。フィニッシュまでは細かいところは後回しにします。

まず、７つのカテゴリを色分けし、それぞれのカテゴリごとのゴール（＊＊できる）を訴求するようなトップページの案をつくりました。

メニューの並び方やラベリングなどもこの時点ではワイヤーフレームをもとにして大きくはかわらず、主にテイストあわせを目的とした作業です。

普段デザインラフをつくるとき、色情報にひっぱられないようにあえてグレースケールにして作業をすることが多いのですが、今回の場合はセブンリッチ（７つの問題）というコンセプトを重要なものと位置づけるため、またカラフルでかわいらしい印象を与えるためカテゴリに色情報を持たせることにしました。

しかし、カテゴリーに色情報を持たせるにはいくつか欠点があることを想定していました。

カテゴリに色情報を持たせる欠点

• 一度決めたら簡単に変更できない（将来的にカテゴリ名や分け方を変更したくなったとき、あるいはカテゴリそのものを撤廃したくなった時の対応にコストがかかる）
• そもそも色に意味を持たせること自体アクセシビリティ上好ましくない（ただ、今回の場合はテーマカラー程度の意味でしかないので、カテゴリのラベリングなしで色が使われるわけではないから良し、という見方もできます）

スタートアップ時にコンセプトやかわいらしさを伝えることを重要と位置づけていたため、このような欠点がありながらもカテゴリーに色を持たせることを決めました。

トップページラフ、その後の変遷

すべての過程のキャプチャを並べてしまうと限りなく長い記事になってしまうので（すでに長いですが）、大きく変わったタイミングだけを掲載します。

▲試しにメニューに黄緑色をあててみて印象を確認してみたときのキャプチャ。

▲グローバルメニュー以外はほぼ現状に近づいたときのキャプチャ。この間にロゴの制作を並行しておこないましたが、ロゴ作りのプロセスを書いたらまた記事がさらに長くなるので割愛。もし興味がありましたら勉強会などでお話させていただけたらと思っています。

苦労したのはグローバルナビゲーションの設計

このような感じでほぼ現状に近づいてきましたが、自分が利用者になったときのことをイメージすると、どうしてもグローバルナビゲーションの導線が自分の欲求とあわない気がしていました。

また、一部の女性テスターの方々に、メニューが黒いせいか重たい印象という意見をいただいていたこともあり、ナビゲーションの設計だけでなく見た目の面でも改良しなければ私自身も納得がいきませんでした。

最初はファンを増やしやすい見せ方が良いかもという仮説

そこで、スタートアップの時期ははファンを増やしやすい見せ方が良いかもという仮説をたて、導線を多少犠牲にしてでも、全体の印象が良くなることを優先することにしました。

このようにしてグローバルメニューをカテゴリーへの導線にし、カテゴリカラーでカラフルに彩るナビゲーションに変更しました。

そして忘れてはならないのは、いくら印象が良くても、最初は人力の営業努力が欠かせないということです。
リリース後、Twitter を中心にロケットスタートのお二人が懸命に努力していらっしゃったのを見て、ますますお二人のnanapiへの愛情や本気さが伝わってきた気がします。

おわりに

私は好きがこうじて、独学でひたすらデザインの勉強をやってきてこの業界にとびこんでしまった人です。デザインの勉強をしてきたときに、あまりこうしたプロセスを具体的に紹介しているところが少なくて自分なりに苦労したりもしました。

弊社の代表、大日田はデザイン思考が身についた開発者だったので、そういう面ではとてもよい刺激を受けていたのですが、具体的な受託制作の進め方などというものに関しては、正直に言って2人とも勝手がわからないところだらけでした。
私たちに仕事を依頼してくださるお客様に対して、自分たちの力をできるだけ発揮したい。そのためにはどうしたら良いのかということを軸に、試行錯誤で色々とやってきて今のようなかたちになってきているという感じです。
他のプロの方からみたらおかしなところもたくさんあるかもしれません。もちろん、まだまだ改善できる点はたくさんあると思っています。デザインの仕事は、お客様と一緒につくりあげる仕事だと考えています。ご一緒にお仕事をさせていただく中で、より良いかたちを共につくりあげていけたらと考えています。

エスカフラーチェでは、お客様のビジネスを成功に導く手段のひとつとしてデザインを特に重要なものと位置づけています。

デザインの面白いところは、美しいだけでもだめ、教科書的に使いやすいだけでも差別化にならない。それらを超えて、人の感情に訴えかける力が必要とされているところだと思います。
これからもデザインによって人の生活がもっと豊かになるようなお手伝いができたら嬉しいです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

▲ワイヤーフレーム案（クリックで拡大）

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

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

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

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

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

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

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

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

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

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

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

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

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

２種類の見せ方

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

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

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

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

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

nanapiの原型が生まれる

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

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

私が特にいいなと思ったサイト

• フルFlashのサイトだとしてもプラグインのない環境の人に正しく情報が伝わる
• キーボードだけでもサイトが操作できる
• 目的にあったビジュアル表現がされている
• 重要な情報とそうでない情報にきちんとメリハリがついている
• 多くのユーザにとって使いたい機能が使いやすい位置に配置されている
• サイト内で出てくる文言にも気配りがなされている