2011-07-08
Webサービスの舞台裏：Q&Aなうリニューアルの○秘メール公開
|
旧デザイン
新デザイン
Q&AなうというリアルタイムQ&Aサービスを運営している@paji_aことアタカハジメです。
すでに、Q&Aなうのデザインが新しくなっていることを気づいている方もいらっしゃるかもしれませんが、2011年7月7日の七夕ラッキーセブンにあわせて、よりスマートでシンプルなデザインに変更をしました。
Webサービスの運営は、日々の細かな修正・改修作業がとても多くて、なかなかこういった大きい節目がないので、この機会に、どのようにしてWebサービスのデザインが決まっていくかという一連のやり取りを、ほぼほぼ完全公開してみようと思います。ただ、読んでいけばわかりますが、特別なことはなにもしていないですし、「へーこんなもんか」という感じで、逆に「勇気出た！」みたいに伝わればよいなぁと思って書いています。メールのやりとりを公開しているので、リアリティは伝わると思います。ちなみに、今回のデザインはパパパパ開発合宿にも参加いただいていて、ブロガーとしても活躍中のフリーデザイナー・なつきさん（@Stocker_jp）にお願いしました。
あと、もうひとつのこうしたやりとりを公開する理由として、前回のリニューアルの時もそうだったのですが、デザインやUIの変更は、基本的にはサービス提供側から一方的に行われるので、既存のユーザーにとっては、鬱陶しい変更であることが多くて、なかなか理解を得られないということもあり、なぜ、デザインを変更したのか、ということについて書いてみたいと思います。
デザインリニューアルまでの一連のやりとり
「じゃあ、デザインを変えましょう。」
Q&Aなうのもう一人のメンバー（＝開発者）とそう話したのは、6月9日のことでした。その日のうちにデザイナーのなつきさん（@Stocker_jp）に電話をし、こんなメールを送りました。なつきさんとは、毎週日曜日に僕が主催している『パパパパ開発合宿』を通じて、さまざまな情報共有をしていて、デザインのスキルはもちろん、最新のWebの潮流に非常に詳しく、また柔軟な対応をしてくださると確信していました。（一緒になにかを制作するのは初めてでしたが、この記事を書いている今でもそのイメージは変わりません）
2011年6月9日9:48 paji_aからのメール
おはようございます、paji_aです。
折り入ってお願いがあるのですが、
いま、Q&Aなうのデザインリニューアルを検討していて、
デザインを手伝っていただけないかなと思ってメールしています。
あと、今日17時に渋谷近辺にいるので、
もし時間があったら打ち合わせできたら嬉しいです。
僕らは毎朝8時にskypeミーティングをしているので（朝まで飲み明かした日はつらい！）、決定事項であれば、メールの連絡や返信はすぐに行います。
2011年6月9日10:29 なつきさんからのメール
お世話になっております。なつきです。
お声がけいただき、ありがとうございます。
では、本日17時に○○駅に行きます。
私のiPhoneは
xxx-xxxx-xxxx
です。
以上、よろしくお願いいたします。
打ち合わせの日時、早速決定しました。打ち合わせ前に今回のリニューアルの骨子になる部分を箇条書きにしておきました。それを打ち合わせ中に送信したメールが下です。
2011年6月9日18:06 paji_a からのメール
コンセプト
・シンプル
・モダン
・万人受け
・デザインは主張しない、質問文が見やすいように
・軽く、早く
FacebookのモダンさとCookpadの万人受けを組み合わせたようなイメージ
作成するアイテム＆ページ
・ロゴ ※必要に応じて正方形アイコンやFavicon
・非ログイントップ
・ログイン後画面
・バーの画面
・質問／回答ページ http://qa-now.com/d/694945 ※非ログイン時の表示も
・Q&Aなうとは http://qa-now.com/about ※構成案必要
・使い方 http://qa-now.com/howuse ※構成案必要
・よくある質問 http://qa-now.com/faq
・利用規約、プライバシーポリシー
・会員登録の一連のページ
・質問／回答の一連の流れ（AJAX）
・会社概要 ※プレスリリース一覧を含める
・Yahooボランティアバナー
つくらない物
・ランキング全般
今回のリニューアルは、基本のUIはいじらず、色味やテイスト部分、いわゆる表側だけを変更するものだったので、画面を決めるワイヤーフレームはほぼ無しで進めていきました。
2011年6月10日14:37 paji_a からのメール
昨日は遅くまでありがとうございました。
方向性の確認のために、ヘッダ周りができた段階で
一度送っていただけますか。
よろしくお願いします。
実は今回のデザイン・リニューアルのきっかけになったのが、旧デザインのヘッダ周りの改修でした。ヘッダ部分をいかにスマートにシンプルに、そして万人に受け入れられるものにするか、この方向付けによって、最終的なデザインのデキが大きく変わってきそうです。そして、なつきさんから上がってきたデザインがこちらです。（画像はなつきさんの許可を得て公開しています。以下同）
2011年6月11日0:44 なつきさんからのメール添付画像
2011年6月11日11:35 paji_a からのメール
早速ありがとうございます！
サンプルでいただいた２つのヘッダのうち、
下のヘッダのほうをベースにしています。
■ロゴについて
・OKです
■色味について
・方向性OKです。（ただ、全体的に色薄いと軽い感じになるので、１ページ全体で考えたときに重みをもたせるポイントがほしいです）
■右サイドについて
・「ホーム」が入っているのでタブメニュー的にされていますが、どちらかというと、テキストリンクでさらっとなイメージです。背景色の濃い色はここでは強調しすぎかも（濃い色の色味はGOODなのでほかで使いたい
・なつきさんおっしゃるように、設定変更は表に出さないと迷いますかね。ログアウトはユーザーのところに置くのはいいアイディアですが既存ユーザーが探せなくなりそうなので、ひとまずは右上にも置いておきたいです
ホーム 設定変更 ヘルプ▼ フィードバック ログアウト の５つにしてください
■「Q」「A」アイコンについて
・アイコンは残していただきたいです。ただ、現状のアイコンはライトな感じなので、今回のコンセプトに合わせたいです。回答やナイスがつくとここが光るようになっています。
（Facebookと同じように、普段は主張せず、必要なタイミングで目立たせる）
以上、よろしくお願いします。
Q&Aなうのログイン後のヘッダに出てくる「Q」と「A」のアイコンはFacebookのヘッダにあるアイコンを尊敬の念を込めてオマージュしています。リアルタイムに質問／回答のやりとりを行う「Q&Aなう」では、自分がした質問に回答がついたり、回答にナイスがついたりしたときに、普段の行動の邪魔にならないようにお知らせしていくか、ということの解決方法のひとつとして、Facebookのアイコンは一つの”解”です。ここでの大きなポイントは、もし、なつきさんがFacebookを利用していないデザイナーだった場合、こんな手抜きの指示では通じないということ（逆に言うと、とても楽だったということ）で、本当にやりやすいかったなぁと思います。言葉の定義が微妙に違ってくると、うまくかみあわなかったりするものですが、共通の言語で話せる、語れるということはとても大事なことだと感じます。
2011年6月11日15:46 なつきさんからのメール
おつかれさまです。
再度ヘッダ部分+質問部分のイメージを作成しましたので送ります。
この画像は、「最近の質問あり、最近の回答なし」という想定で作っています。
最近の質問または回答がない場合はグレーアウトしています。
(Q)アイコンを赤くしようかとも思ったのですが、少し色味がきつく見えたので黒にしました。
質問部分は今とあまり色味を変えないほうが良いと思ったので、
背景は黒、ボタンは赤のままにしています。
（ちなみに、[回答する] ボタンは意味合いを分けるために青系にした方が良いのではないかと思っています。）
以上、よろしくお願いいたします。
リニューアル後の、新デザインから見ると、まだ粗削りな部分がありますが、この時点では方向性に間違いがなかったので、進めていきました。
Webサービスの運営で、デザインを変更するということは、実は、ほとんどのWebサービスで課題となる「人を増やす」ということには、あまり直接的に結びつかない行動です。それでもデザインをリニューアルする必要がある、という判断をする場合があります。それは、”デザインのリニューアルでしか解決できない根本的な課題を解決するため”ということになります。運営者の思いつきで変えている、ということは、そんな余裕もないですし、実際にはほとんどないと思います。そんなわけで、「Q&Aなう」にもデザイン・リニューアルも行わないと解決できそうにない課題がありました。それは、ユーザーの属性をもっと一般化し、だれが見ても違和感のない場所にするということ。初期のころ、Twitterアカウントを持っている人だけが利用できる形になっていたQ&Aなうは、Q&Aサービスとして当初予想してたより、かなりゆるいコミュニティができあがりつつありました。この方向性はこれまでのデザインやUI、そしてTwitterの特性によって方向づけられていることは明確でした。
今回のこのデザインは、そういったユーザーの偏りを大きく変える施策のひとつで、大人でも安心して利用できる場所に見えるようにすることが最大の目的でした。最初のメールで伝えた「万人受け」。そして、途中からキーワードとして出てくる「信頼性」「真面目」を前面に出したテイストに仕上がっていきます。
2011年6月11日15:57 paji_aからのメール
早速、ありがとうございます。
このまま進めて1ページ全体を作っていただけますか。（ログイン後トップ）
1ページ全体で見たときに、またヘッダ部分をコメントするかもしれませんが、
方向性OKな感じです。
2011年6月13日13:34 なつきさんからのメール
おつかれさまです。昨日はありがとうございました。
イメージを一通り制作しましたので送ります。
キーワードはフッタの上に1ラインにしたほうがすっきりするしクリックしやすい
と思うのですがいかがでしょうか。
あと、金曜の分の呑み代をまだ支払っていなくてすみません。
今度お会いしたときにお支払いします。
以上、よろしくお願いいたします。
ここまでで依頼してから4日間、僕的にはストレスなく進んできた印象をもちました。
あと、飲み会は潤滑油、大事。
ここから先は、デザインの各項目の調整が続きます。もはや当事者でないと分からない細かな修正項目が並びます。
2011年6月13日18:16 paji_aからのメール
下記修正をお願いします。
・質問ボックスがちょっと強調されすぎなので濃い色は使わないでください。どちらかというと最新の質問の質問文に視点がフォーカスするようにしたいです。
・質問ボックスが縦に長いので、もう少し縮めてください。（クリックしたら縦に長くなるので、テキストエリア1行分くらいでもいいかも）
・上と合わせて「知りたいことを聞いてみよう」は現状のテキストエリア内にいれたいです。
・質問ボックスの濃い色がなくなるので、やはりヘッダ部分に濃い色（フッターの黒色でなくベージュにあう暖色系が良い）を使っていただけますか
・右サイドのケータイバナーがポップすぎるので、落ち着いた感じにしたいです（500Pはトル方向でお願いします）
・ヘッダの「Q」と「A」はやはり文字はいれないでください。（分かりづらさはあるのですができるだけシンプルにしたい意図があります）
・ヘッダの「Q」と「A」とユーザー名は右上ではなく、タイトルロゴの右側においてください。スクロールするものが上下にあると操作的に問題がでそうなので。（右上に置いている意図があれば教えてください。）
・ヘッダの「Q」と「A」は点灯するイメージなので、黒色より光った感じがわかる色にしてください。
・ヘッダの部分でドロップダウンするメニューが縦にならんでいるので、使いづらくなりそうな気がします。
・右上のログインユーザー名のところ、マウスオーバー時のデザインはどういうイメージになるか気になります。
・フッターの「トップにもどる」についてですが、左側のカラムの右端、「ネタ」の文字の上くらいに置いてください。質問文のリストがずーっと長く並ぶので、長くなったときのそばに置いておきたいという意図がありました。
・ログイン中のつながりのログイン中の緑枠がなくなったので分かりづらいので、枠色は緑でなくてもいいので調整してください。（もし枠をとった意図があれば教えてください。）
・ヘルプの▼はとってください。（変更すいません）
・「招待する」ユーザーアイコンの上にある「ｔ」「ｆ」ですがちょっと小さくて見づらいので、招待するボタンに混ぜてください（変更すいません）
・「招待する」のボタンの色を全体の色味に合わせたい
・ Yahooボランティアのバナーを全体のデザインにあわせたものをお願いします。
細々ありますがよろしくお願いします。
こちらが指示した通りになっていない場合、どんな意図があってそうしているか、というところに重要なヒントがあったりします。なぜ、その位置にあるのか、なぜその色なのか、ひとつひとつプチプチをつぶしていくようなやりとりが続きます。
2011年6月14日22:51 なつきさんからのメール
おつかれさまです。なつきです。
Yahoo!バナー以外の箇所を制作しましたので、
mouseoverのイメージと共に送ります。
以下デザインに関する意図ですが、
> * 質問ボックスが縦に長いので、もう少し縮めてください。（クリックしたら縦に長くなるので、テキストエリア1行分くらいでもいいかも）
日曜日には、確か「質問ボックスは最初から大きめで、クリックしてもサイズが変わらないように」という話になっていたかと思いますが、
現状と同じようにするという認識でよろしいでしょうか。
> * 右サイドのケータイバナーがポップすぎるので、落ち着いた感じにしたいです（500Pはトル方向でお願いします）
こちらは、全体的にベージュばかりで他の色が少なすぎるため、わざと違う色を使ってポップな感じにしていました。
> * フッターの「トップにもどる」についてですが、左側のカラムの右端、「ネタ」の文字の上くらいに置いてください。質問文のリストがずーっと長く並ぶので、長くなったときのそばに置いておきたいという意図がありました。
多くのサイトでは、「トップにもどる」ボタンはフッターエリアの右端にあります。
その理由は、恐らく
・右端にあった方が探しやすい
・スクロールバーをドラッグしてスクロールするユーザーが多いので、スクロールバーに近いほうが良い
・デザイン的に見栄えが良い
・他のサイトに合わせたほうがユーザーにとって使いやすい
などの理由によるものだと思います。
> * ログイン中のつながりのログイン中の緑枠がなくなったので分かりづらいので、枠色は緑でなくてもいいので調整してください。（もし枠をとった意図があれば教えてください。）
アイコンの枠は取ったのではなく、茶色の1pxの枠にしています。
1pxである理由は、他の枠線を1pxに統一していること、茶色であるのはページ全体のベージュを濃くした色だからです。
もしログイン・非ログインのアイコンが見分けが付きづらいということであれば、非ログインアイコンの透明度を高く（つまり薄く）
するのはいかがでしょうか。
メール入れ違いになったみたいで失礼しました。
非常に良い感じになってきていると思います。
下記、注文が多くて恐縮ですが、お願いできますでしょうか。
ヘッダーについて ： まだしっくりきていないのでこだわらせてください
・「Q」「A」の右にある▼はとってください（わかりやすさよりシンプルさを求めたい）
・「Q」「A」の色味が浮いているので、再考したい。ここはFacebookモロパクリでいきたい感じです。「Q」「A」は同じ色で、背景と合うものにしたいです。（光っている感じも出す）
・paji_aの位置と「Q」「A」の位置を変更したい（名前の部分は可変なので）
・「Q」「A」「paji_a」の位置をタイトルロゴに近づいけたい（Facebook調）
・「Q」「A」の背景色の茶色が浮いているので、無しのほうが良いと思いますがいかがでしょうか。
・ヘッダーの背景色が濃い色バージョンを見たい。濃い色で締めたほうが締りが出て信頼感が増すと思うので。例：http://www.cnn.co.jp/
（わがまますいません）
・「Q」「A」のオン、オフ、ロールオーバー時のデザインがほしい
以下、インラインで回答します。１点バナーの修正お願いします。
> 日曜日には、確か「質問ボックスは最初から大きめで、クリックしてもサイズが変わらないように」という話になっていたかと思いますが、
> 現状と同じようにするという認識でよろしいでしょうか。
はい、↑でOKです。
＞＞ * 右サイドのケータイバナーがポップすぎるので、落ち着いた感じにしたいです（500Pはトル方向でお願いします）
> こちらは、全体的にベージュばかりで他の色が少なすぎるため、わざと違う色を使ってポップな感じにしていました。
現状でも、まだポップなので、再考願えますか。（ポップなしでいきたい）
あと、いまのバナーだとスマフォだけなので、ガラケーのイメージがつかない気もします。
> 多くのサイトでは、「トップにもどる」ボタンはフッターエリアの右端にあります。
使い勝手の部分が大きいと思うので、これはコーディングのほうで調整しますね。現状でOKです。
> 1pxである理由は、他の枠線を1pxに統一していること、茶色であるのはページ全体のベージュを濃くした色だからです。
> もしログイン・非ログインのアイコンが見分けが付きづらいということであれば、非ログインアイコンの透明度を高く（つまり薄く）
> するのはいかがでしょうか。
↑で行こうと思います。アドバイスありがとうございます。
2011年6月15日16:44 なつきさんからのメール
おつかれさまです。
イメージ送ります。
2011年6月15日17:52 paji_aからのメール
さきほどはありがとうございました。
ばっちりOKですので、この方向で進めてください。
次は、質問／回答ページをお願いします。
ようやくログイン後トップページが完成。ただ、ここが完成すれば半分完成したようなもの。あとは、トップページで決めた規定に合わせて、下位ページを作っていくだけです。
この後以降は、同じようなやりとりの連続ですので、ここまでのやりとりを見ていれば想像がつくと思いますので割愛します。リニューアルまで約30日間のメールを見直してみると、なつきさんとのやりとりのメールは100通ほどでした。
こうして振り返ってみると、制作の舞台裏は地味ですね。今回の記事で、現場の雰囲気、リアリティが少しでも伝わったら嬉しいです。
今回のやり取りを通じて、なつきさんとは今後も長くお付き合いしたいとおもうデザイナーの一人ですので、これからあまり忙しくなってほしくないなぁというのが本音だったり（笑）というのは半分冗談ですが、今後もよろしくお願いします。
なつきさん