山田 あかね(Akane YAMADA[purprin])

デザイナー 山田あかね プロフィール

1979年生まれ、名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら、Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.でWebサービス開発に携わる。2007年1月、エスカフラーチェLLC の設立に参画。

主なお仕事の分野

ユーザエクスペリエンスデザイン ・インターフェースデザイン ・グラフィックデザイン ・CI・ロゴ・シンボルデザイン ・企画立案 ・(X)HTML/CSSなどのフロントエンド設計&それらの分野に関係する講演・書籍執筆

お客様のビジネスを成功に導く手段のひとつとしてデザインを特に重要なものと位置づけ、そもそも何をつくったらいいかしら?という段階からじっくりご相談に応じつつ、成功するサイトへ導くのを得意としています。

その他の特殊技能:マウスやペンタブレットを使わず、ノート型PCのトラックパッドだけでイラストを描く・HTML/CSS/デザインの話でご飯3杯

山田あかねが投稿した記事

投稿した記事の最新5件を表示しています。

POINT OF VIEW #1 コンセプトからのビジュアルデザイン開発勉強会 開催します 

POINT OF VIEW #1

告知が遅くなりましたが、きたる12/7(月)19:00から、POINT OF VIEW #1 コンセプトからのビジュアルデザイン開発勉強会 を開催します。

参加費は無料です。興味のある方は是非ご参加ください!

※勉強会終了後、懇親会(3,500円程度実費)を開催予定です。

POINT OF VIEW #0 デザインプロセス勉強会レポート 

去る10/30(金)、POINT OF VIEW #0 デザインプロセス勉強会を開催し、30名の皆様にご参加いただき、以下のようなトピックで進めてまいりました。

概要

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

勉強会の内容

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

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

関心の高かったトピック

  • クライアントとのコミュニケーション
  • コンセプトの決め方
  • ユーザー調査・分析・ペルソナシナリオ手法
  • サイト構造の設計
  • ワイヤーフレームの意義と使い方
  • レイアウト設計
  • ビジュアルの起こし方

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

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

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

反省点など

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

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

次回以降の課題

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

ブログ・Twitter でのレポート

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

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

デザインプロセスについての勉強会を開催します! 

povcc_banner.png

少し前にnanapiのデザインプロセス その1その2と書いた際に勉強会をやってみたいと募ったところ反響をいただき、少しずつ準備をすすめていましたがようやく告知できるようになりました。
すでに参加したいとおっしゃっていただいた方、お待たせしてすみません!

せっかくなので単発の勉強会という感じではなく、これをきっかけに月1回くらいのペースで開催できたらいいなと考えていました。

そこで今回、POINT OF VIEWという企画を立ち上げることにしました。Web制作やサービス開発などについて、デザイナーの視点から考え、 学んでいくことを目的として、勉強会やイベントなどを開催したいと考えています。

というわけで「POINT OF VIEW #0 デザインプロセス」としてデザインプロセスについての勉強会を行いたいと思います。デザイン制作のプロセスをテーマとし、考え方や仕事の進め方などの情報交換をする勉強会になります。楽しくて役に立つ勉強会にできたらと思っています。

もしご興味がありましたら、POINT OF VIEWのサイトから参加お申し込みしていただけますので是非どうぞ!詳細もこちらに記載しています。

今まで個人的に、デザインプロセスについて話をしたり聞いたりする機会があまりなかったので、とても楽しみにしています!よろしければ、ぜひご一緒に勉強しましょう。

勉強会のお申し込み・お問い合わせはお気軽にどうぞ!

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

9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。
前回の記事に続き、サイトデザインが生まれる過程(デザインカンプができあがるまでの試行錯誤)を振り返ってみたいと思います。

nanapi

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

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

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

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

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

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

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

要件定義

コンセプトが固まった・リリース当初のゴールが決まった・・
次にすることは、要件定義です。

要件定義の目的は、あいまいだった依頼を明確にして、概算で見積していたところを明確にすることだと考えています。

いつまでに誰がどのような成果物を納品しなければならないかはっきりさせないことには、何をもって納品なのかがわからなくなってしまいます。

サイトの構造を決める

幸いなことに、ロケットスタートのけんすうこと古川健介さん(以下、けんすうさん)がページごとに大枠のワイヤーフレームを作ってくださっているのでサイト全体の構造を決めるのにとても助かりました。

サイト全体でどのような機能・ページが必要なのか、ということをすりあわせる過程です。

けんすうさんの場合デザイン・プログラム・サービス運営といった一通りの工程を自身で経験されているため、ユーザーが実際に利用するフローがイメージできていました。そのため必要なページのリストアップにぶれることなく全体像が浮かび上がっています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

などなど。

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

イメージにあった素材

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

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

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

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

最初のラフショット

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

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

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

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

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

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

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

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

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

メニューバーに色をつける

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

グローバルメニュー以外はほぼ現状に近づいた

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

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

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

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

nanapi の設計には2つの視点が必要

nanapiは生活に役立つライフレシピのサイトですから、読み手にとって読みたいコンテンツがたくさん並んでいてほしいですし、役立ちそうな印象を与えなければなりません。

それと同時に素晴らしい書き手の人がどんどん現れて、たくさん書いてもらえる仕掛けが必要になります。

どっちも同じくらい大切なことです。
記事を書いてくれる人がいなかったらつまらなくなってしまう→読み手にとっても有益でなくなる。
逆にいくら素晴らしい書き手の記事があっても、読み手にとって魅力的にみえてなければ使いたいと思わない。

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

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

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

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

おわりに

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

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

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

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

P.S. 制作者の皆様へ:制作プロセスについての勉強会やりたいです!もしご興味がありましたらpurprin@escafrace.co.jpTwitter / purprin宛、もしくはエスカフラーチェのお問い合わせフォームからご連絡ください。

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)に続きます。

→投稿した記事をもっと見る