何かと話題のデザイナー板橋聡氏がツイッターでWebデザインの実況中継を投稿、ストイックすぎると話題

you_gj
MONOspaceの代表、並びにstudygift問題などで話題になったLivertyの一員、板橋聡。彼がまたおもしろい試みに挑戦、それは自身がWebデザインを手がけるサービスの製作過程をTwitterで実況するというもの。その模様がストイックすぎると話題に!ものづくりに関わっている方は必読です

予備知識

板橋聡 @MONOspace (Satoru_ItabashI) on Twitter

MONOspaceの代表兼webデザイナー。クライアントワークと平行して家入一真氏を中心としたLivertyや孫泰蔵氏のスタートアップにも参加し、様々なサービス開発を行っています。

【Twitterのプロフィールから引用】

第二弾もあります。

第四弾まで

ストイックすぎると話題の実況デザイン

板橋聡 @MONOspace@Satoru_ItabashI

デザインプロセスで考えている事をリアルタイムでつぶやいていこうという勝手な実験してみます。映画「ソーシャルネットワーク」でザッカーバーグがサービス開発の様子を書きまくっていた様に。とにかくその時の考えやそれに伴う動きを包み隠さず書いてみる。今日デザインするのは写真共有アプリ。

板橋聡 @MONOspace@Satoru_ItabashI

ちなみに今日のスタート時点ではこんな感じ。こっからいじくり倒して調整して行く pic.twitter.com/FgvlvL5Y
デザイン実況がスタート!

板橋聡 @MONOspace@Satoru_ItabashI

ボタンの影の比率と濃度を微調整。こういう細かい作業を最初に設定しておくと後々楽になる pic.twitter.com/m8QUVjuD
まずは細かいデザイン基盤をつくると。

板橋聡 @MONOspace@Satoru_ItabashI

今日作る画面の目標は初期ログインの画面でいかにサービス内容も伝達させるk事が出来るか。中央にイメージ写真を配置するのか、もしくは説明テキストをスライドで流すのかを検証中

板橋聡 @MONOspace@Satoru_ItabashI

イメージに近いDropboxのイラストをサンプルに入れて、ログイン画面で説明スライドを配置するパターンを検証。悪くは無いけど良くも無い。余白のバランスが少し悪いね pic.twitter.com/upqIKLEs
「結構かっこいいじゃん」と思ったあなた、違うんです。余白のバランスが悪いと本人は言っています。

板橋聡 @MONOspace@Satoru_ItabashI

太字だと主張しすぎてボタン部分とのバランスが悪いのでテキストをW6からW3に変更。同時に矢印のアイコンもカラーを#aaaから#cccへ変更して若干薄くしてみる。少しまとまった。いいね。 pic.twitter.com/gpxpVxnK
W6が太くてW3が細い、フォントの話です。#aaaとか#cccってのはカラーコードのことで、PC上の色ってのは6桁のアルファベットと数字の組み合わせで再現されてるわけです。

板橋聡 @MONOspace@Satoru_ItabashI

急遽Skype会議が入ったので中断…

板橋聡 @MONOspace@Satoru_ItabashI

少し前からデザイン再会。今日はこの画面を完成させて寝よう

板橋聡 @MONOspace@Satoru_ItabashI

ボタンの色の検証中。どれもしっくり来ない。全体的なカラー配分が間違ってるのかも pic.twitter.com/n0hGjWfF
う…うそだろ( ゚д゚)ボタンなじんでないことねーよ( ゚д゚)全体のカラーを変えるだと( ゚д゚)ストイックすぎる…( ゚д゚)ここからはじまるストイック劇場ごらんあれ…( ゚д゚)

板橋聡 @MONOspace@Satoru_ItabashI

こういう配色に迷った時はひとまずモノクロにしてレイアウトを優先に考えるってゆうのがいつものやり方。順番を逆にするってゆうのかな。解ける課題から先に解いていく

板橋聡 @MONOspace@Satoru_ItabashI

ログインと新規登録をタブで分けて表示画面を別々にしたら面白いかも。ちょっと試してみる

板橋聡 @MONOspace@Satoru_ItabashI

タブはだめだ。ターゲットユーザーに対して動きが複雑すぎる

板橋聡 @MONOspace@Satoru_ItabashI

今回のターゲットである女性ユーザーはログインに対して抵抗感のある人が多いという統計から、ログイン時にサービス内容と素性を明かすのは有効と判断してバー部分に会社概要とプライバシー規約をさりげなく配置する事に。画面はいまだほぼモノクロ状態 pic.twitter.com/3VnBGSq7
ヘッダーに会社概要とプライバシーポリシーを設置することでデザインが崩れないようにわかりやすいピクトグラムを使ったわけですね。賢い

板橋聡 @MONOspace@Satoru_ItabashI

迷宮入りしすぎて書く事すら無くなってきた。こっから脱すると早いんだけどね

板橋聡 @MONOspace@Satoru_ItabashI

デザインはいかに自分の中の違和感を排除し続けるかだと思う。何パターンも作っては壊してを繰り返す我慢の作業が1番多い

板橋聡 @MONOspace@Satoru_ItabashI

色づけしてないけどちょっとレイアウトが変化。推移を1つ減らす為に入力画面はデフォルト表時に修正。あとはボタンとイラストコンテンツの関係性をどう探っていくか。そして配色 pic.twitter.com/uxVFDTaH
以前のデザインはログインボタンを押さないと入力画面がでなかったのに対して、今回はトップ画面にすでに設置されてある。ユーザの手間を減らしたってこと。ユーザビリティの向上、すばらしい。そろそろ完成かな…♪

板橋聡 @MONOspace@Satoru_ItabashI

全く違う方向にデザインを振ってみるのも大事 pic.twitter.com/UNZjRxBb
うおおおおおおおおいぃぃぃいいいいいいいい!!!!!!!!!!さっきのでほぼ完成と思いきや急になにしとんねん( ゚д゚)ストイックすぎる…( ゚д゚)

板橋聡 @MONOspace@Satoru_ItabashI

結局昨日の時点からデザインに多きな変化は無く、風呂入ったりロード乗ったりして気分転換で夜が明けた。その間に別の仕事を進めて、また例のデザイン再開します。

板橋聡 @MONOspace@Satoru_ItabashI

ちなみに昨日中断した時点ではこんな感じでした。思いっきり違う方向に振って、自分の感覚を頼りにユーザー心理を考えているところ。余白の調整とかはまだ何もやっていない状態。これくらいシンプルな方が良いのか、もっと説明的な方が良いのかの判断に迷う pic.twitter.com/wMSIxhZS
シンプルでかっけー!しかし個人的にはボタンを透過しすぎてわかりづらいかなぁと

板橋聡 @MONOspace@Satoru_ItabashI

TOPバーの概念を外して、中央にテキストが入るパターンを検証。背景の写真と共にスライドでサービス説明出来たら良いかもって思ってるとこ。迷った時はシンプルな構成を目指す事が望ましかったりする pic.twitter.com/TY0tQr1x
ええええええトップバー好きだったのに…( ゚д゚)しかし中央のテキストいい感じ♪

板橋聡 @MONOspace@Satoru_ItabashI

写真を全面に使うとアプリの楽しさがあまりにも表現出来ないので、また振り出しに戻して違うパターンで作ってる pic.twitter.com/qB9dtkP0
え… ( ゚д゚) ・・・ (つд⊂)ゴシゴシ (;゚д゚) ・・・ (つд⊂)ゴシゴシゴシ (;゚Д゚) …!?また1から…?

板橋聡 @MONOspace@Satoru_ItabashI

ボタンが普通すぎるので細かい調整して今はこんな感じ。まだまだ先は長い pic.twitter.com/DLiDNHXB
facebookが提供してるボタンってデザインはイジらないでね的なこと書いてる気がするんだけどみんな良い感じに変えちゃうよね。そこら辺どうなんだろ?

板橋聡 @MONOspace@Satoru_ItabashI

とりあえずモノクロで作って配色は他の画面と平行して後で決める事に。レイアウトは完成。あとはロゴを差し込んでバランス調整するのみかな。進めていくうちにデザインが変わる可能性はおおいにあるけど pic.twitter.com/R42Bsvib
おぉぉおおおお!!!戻ってきた!あの黄緑系をメインに使うのは辞めた模様

板橋聡 @MONOspace@Satoru_ItabashI

この画面はアプリ初回起動時のログイン画面なんだけど、ログインへの誘導とともに、アプリにログインする前にサービス説明をする事で「ログインに対する安心感」と「どんなサービスかを事前に知ってもらうか」という事に注力。 pic.twitter.com/lcnjvxoN
Facebookでログインできるようにしたことでアカウント登録のハードルを低くしたわけですね。

板橋聡 @MONOspace@Satoru_ItabashI

ちなみにPhotoshopのレイヤーはこんな感じ。基本的にはいつもこの様にブロックで分けて、名前は必ず表記。誰が見ても分かる様な構成を心がけてる。たまに「レイヤー1」等のデフォルトネーム使ってる人がいるけど、その名前だと自分しか分からない pic.twitter.com/nQKYw7tu
すげーすっきり!技術だけでなくココらへんのこだわりが一般的なWebデザイナーとの違いかなとか思ったり

板橋聡 @MONOspace@Satoru_ItabashI

昨日のスタート時のデザイン pic.twitter.com/NtE8SIFI
なつかしいあの頃(´;ω;`)ブワッ

板橋聡 @MONOspace@Satoru_ItabashI

途中こんな方向に振りながら pic.twitter.com/0SirZYYd
まじどうしちゃったんだと思ったぜ、ヒヤリとしたぜ( ・∀・)ふぅぅ〜

板橋聡 @MONOspace@Satoru_ItabashI

最後はこうなりました pic.twitter.com/wymAgwtQ
うん、黒いiPhoneで見たら大きく印象が違うだろうなぁこのデザイン。いやぁ〜ストイックすぎました、お疲れ様でした!勉強になりました!…φ(..)

板橋聡 @MONOspace@Satoru_ItabashI

昨日と今日で実験的に始めたデザインプロセスのリアルタイム実況だけど、色んな人が随時追いかけててくれたみたいで嬉しいです。役にたてるかは分かりませんが、また別のデザインでやってみようと思います

おれはこう思った

ども、まとめ管理人のyou_gjです。
かく言う僕もしがないwebデザイナーしてまして、この実況は生では見れなかったんですけどウワサを聞いて気になってタイムラインを追ってみたんです。
こういう仕事をしてると出来上がりのデザインはよく見たりするんですけど、そのプロセスを見ることってあんまないんですよね。貴重なもん見せてもらったなって感じです、世の中は広い。すごい人がいるなって思いました。またやってほしいっすね。

関連まとめ

https://matome.naver.jp/odai/2134580404268648601
2014年09月18日