SPONSORED LINK
MONOspaceの代表、並びにstudygift問題などで話題になったLivertyの一員、板橋聡。彼がまたおもしろい試みに挑戦、それは自身がWebデザインを手がけるサービスの製作過程をTwitterで実況するというもの。その模様がストイックすぎると話題に！ものづくりに関わっている方は必読です
予備知識
板橋聡 @MONOspace (Satoru_ItabashI) on Twitter
第二弾もあります。
第一弾で25000viewを超えた人気まとめの第二弾。MONOspaceの代表で色んな新しいことに挑戦しているWebデザイナー、板橋聡さんがTwitterでデザ…
https://matome.eternalcollegest.com/post-2135090397158833601
第四弾まで
Webデザインのようなクリエイティブな分野の仕事がどのように行われているか想像したことはありますか？どのように考え、どのように実現しているのか。今回はそれをプロ…
https://matome.eternalcollegest.com/post-2141100494448440901
ストイックすぎると話題の実況デザイン
板橋聡 @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上の色ってのは６桁のアルファベットと数字の組み合わせで再現されてるわけです。
板橋聡 @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
デザインはいかに自分の中の違和感を排除し続けるかだと思う。何パターンも作っては壊してを繰り返す我慢の作業が１番多い
板橋聡 @MONOspace@Satoru_ItabashI
色づけしてないけどちょっとレイアウトが変化。推移を１つ減らす為に入力画面はデフォルト表時に修正。あとはボタンとイラストコンテンツの関係性をどう探っていくか。そして配色 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
え… ( ﾟдﾟ) ・・・ (つд⊂)ｺﾞｼｺﾞｼ (；ﾟдﾟ) ・・・ (つд⊂)ｺﾞｼｺﾞｼｺﾞｼ （；ﾟДﾟ） …！？また１から…？
板橋聡 @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のレイヤーはこんな感じ。基本的にはいつもこの様にブロックで分けて、名前は必ず表記。誰が見ても分かる様な構成を心がけてる。たまに「レイヤー１」等のデフォルトネーム使ってる人がいるけど、その名前だと自分しか分からない 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デザイナーしてまして、この実況は生では見れなかったんですけどウワサを聞いて気になってタイムラインを追ってみたんです。
こういう仕事をしてると出来上がりのデザインはよく見たりするんですけど、そのプロセスを見ることってあんまないんですよね。貴重なもん見せてもらったなって感じです、世の中は広い。すごい人がいるなって思いました。またやってほしいっすね。
こういう仕事をしてると出来上がりのデザインはよく見たりするんですけど、そのプロセスを見ることってあんまないんですよね。貴重なもん見せてもらったなって感じです、世の中は広い。すごい人がいるなって思いました。またやってほしいっすね。
関連まとめ
MONOspaceの代表、並びにLivertyの一員、板橋聡。彼がWebデザインを手がけるサービスの制作過程をツイッターで実況中継したところ大反響！それに乗っか…
https://matome.eternalcollegest.com/post-2134604729086884201
Webデザイナーの板橋聡氏が運営するMONOspaceが手がける新プロジェクト、STANDCOLOR。新しいショップスタイルを作るとの大義名分のもとどんどん作業…
https://matome.eternalcollegest.com/post-2134724620694028601
https://matome.naver.jp/odai/2134580404268648601
2014年09月18日
SPONSORED LINK
MONOspaceの代表兼webデザイナー。クライアントワークと平行して家入一真氏を中心としたLivertyや孫泰蔵氏のスタートアップにも参加し、様々なサービス開発を行っています。
【Twitterのプロフィールから引用】