【デザイン】 Webサービスのデザイン過程晒してみた 【ブクログ プレミアム】

Webサービス「ブクログ」のプレミアム版について、紹介ページのデザインをしたときの過程です。四苦八苦したり絶望したりした様子がうかがえます。
75
ショコ @chocolatina

PC整理してたら、ブクログ プレミアムの紹介ページ作った時のファイルが出てきました。みなさん興味あるかな‥?絶望したり四苦八苦した様子がうかがえるので晒してみます。 #PPB_design http://t.co/FhlmBrhX

2012-10-29 12:32:11
拡大
ショコ @chocolatina

ブクログ プレミアム紹介ページの完成したものは、こちらになります。是非ご利用ください! http://t.co/TTJBrHxu #PPB_design

2012-10-29 12:37:29
ショコ @chocolatina

ディレクター @megsorin との話し合い。要件とターゲットを決定する。ブクログをよく使ってくださるユーザーさんに、よりよい価値を提供したいということ。 #PPB_design http://t.co/77O1sI9t

2012-10-29 12:40:34
拡大
ショコ @chocolatina

(ちなみに晒すのは上司の許可取ってますので大丈夫です。ご心配ありがとうございます!) #PPB_design

2012-10-29 12:43:30
ショコ @chocolatina

(晒すのは、デザイン中の内容なので、実際の月額料金や説明と異なる箇所があります。正式なものはこちらでご確認ください! http://t.co/TTJBrHxu#PPB_design

2012-10-29 12:44:01
ショコ @chocolatina

ディレクター @megsorin からざっくりしすぎなラフがくる。ざっくりしすぎ!でもいいよ!センキュー!ブクログユーザーさんへの感謝の気持ちをお手紙として見せたいわけですね。 #PPB_design http://t.co/EcdSDyiL

2012-10-29 12:47:23
拡大
ショコ @chocolatina

ちなみにわたし小山田は普段は、ブクログのパブーのデザインの仕事をしています。(前はレンタルサーバーヘテムルのデザイナーでした)。今回のブクログ プレミアムの仕事は、ブクログの @meganejunkie が多忙のための代打です。念のため。 #PPB_design

2012-10-29 12:47:54
ショコ @chocolatina

ディレクター @megsorin から来たラフをイラレに起こして少し具体的にしてみました  #PPB_design http://t.co/KbJVsVf3

2012-10-29 12:48:19
拡大
ショコ @chocolatina

本と手紙を同ページ内で見せるのはデザイン的にバランスが悪いような気がしてきました。手紙とヘッダー一緒にしてみる? #PPB_design http://t.co/00L5TKvt

2012-10-29 12:51:17
拡大
ショコ @chocolatina

うーん‥そもそもユーザーさんがこのページで知りたい情報は何だろう?と原点に立ち返る。ユーザーさんが有料プランに求めるものって何だろう? #PPB_design

2012-10-29 12:53:26
ショコ @chocolatina

ディレクター @megsorin との話し合いの結果、ページは、具体的に、有料プランで出来ることの紹介でよいのでは?となる。 #PPB_design

2012-10-29 12:54:19
ショコ @chocolatina

ブクログとしての想いよりも、有料プランを使ったら自分の本棚がどんな本棚になるのか、を、ユーザーは知りたいと思う。話し合いの結果をデザインに反映。 #PPB_design http://t.co/06V21pjM

2012-10-29 12:56:01
拡大
ショコ @chocolatina

あ、お昼休み終わりました。あとでまた垂れ流します! #PPB_design

2012-10-29 12:56:24
ショコ @chocolatina

ここまでのデザインをブクログの @meganejunkie に共有。「本棚に吹き出し的に説明をつけると、機能が増えたときデザイン的に大変」というご意見をもらう。まったくその通りだ。 修正。 #PPB_design

2012-10-29 19:07:32
ショコ @chocolatina

例えば数字をつけて参照させるとか‥?と思ってやってみたけど、全然違った。数字をつけて参照、ってそもそもユーザーさんにはわかりにくい。 #PPB_design http://t.co/BcjDXH9d

2012-10-29 19:09:11
拡大
ショコ @chocolatina

うーん こうかな?‥うん、でかい!でも!すごく!イイ!! #PPB_design http://t.co/irDlqioP

2012-10-29 19:13:51
拡大
ショコ @chocolatina

とりあえず一旦考えるのをやめて、Photoshopに持って行ってバランスを見る。うーん、うーん‥でかい‥orz #PPB_design http://t.co/qxsQkkkk

2012-10-29 19:17:02
拡大
ショコ @chocolatina

なんとなくヘッダーがだめすぎる。プレミア感がない。 #PPB_design

2012-10-29 19:19:26
ショコ @chocolatina

そもそもプレミア感ってなんだろう?と思考の旅に出る。2時間ほどgoogleイメージ検索で迷子になる。 #PPB_design

2012-10-29 19:20:49
ショコ @chocolatina

整理しよう。[いまのデザインでだめなところ]ヘッダーのスカスカ感、色合い、キュンとしない。[いまのデザインでよいところ]本の形を使った視線の誘導 #PPB_design

2012-10-29 19:25:41
ショコ @chocolatina

ヘッダーだけすべて取り払ってイラレでレイアウトしなおすことにする。盛大に散らかした努力の跡 #PPB_design http://t.co/SCmNWmcK

2012-10-29 19:30:24
拡大
ショコ @chocolatina

この形で、@meganejunkie にも意見をきいて、修正。 #PPB_design http://t.co/h6yqXb85

2012-10-29 19:30:48
拡大
ショコ @chocolatina

やっぱり本が薄すぎるような気がする。表紙も厚すぎるし。というわけで修正。#PPB_design http://t.co/sutOTjFi

2012-10-29 19:41:25
拡大
ショコ @chocolatina

でもまだキュンとしない‥あとなんかシンメトリーすぎて怖い...てっとりばやくキュンとさせるには‥‥!キャラだ!!!! #PPB_design http://t.co/IJBmuZTo

2012-10-29 19:34:52
拡大
ショコ @chocolatina

※おまけ:バランスをとるための色んな線。この線、一応使ったけど、最終的には割と適当に体感的に気持ちいいバランスに持っていった。 #PPB_design http://t.co/znMw4eoo

2012-10-29 19:40:27
拡大