話題のWebデザイナーがデザインの裏側をすべて公開!【大好評】実況デザイン第四弾!

you_gj
Webデザインのようなクリエイティブな分野の仕事がどのように行われているか想像したことはありますか?どのように考え、どのように実現しているのか。今回はそれをプロのWebデザイナー、板橋聡氏がTwitterを使って実況しながら、丁寧に解説してくれています。デザインに関係のない方でも必見!

実況デザインとは?

Webデザイナー板橋聡がWebデザインのプロセスをTwitterで一般公開したことから始まる。

【第一弾】
何かと話題のデザイナー板橋聡氏がツイッターでWebデザインの実況中継を投稿、ストイックすぎると話題
https://matome.eternalcollegest.com/post-2134580404268648601【第二弾】
板橋聡氏がツイッターでWebデザインの実況中継!
https://matome.eternalcollegest.com/post-2135090397158833601

【第三弾】
実況デザインで話題の板橋聡氏が手がける新プロジェクトの製作過程が面白かったのでまとめてみた
https://matome.eternalcollegest.com/post-2134724620694028601

Webデザイン実況第四弾はじまるよ!

※以下、板橋聡氏のTwitterから引用

SATORU ITABASHI@bash1boy

約10ヶ月ぶりにデザイン実況やります。今回は実際に現在進行形で進んでいるクライアントワークで、内容はクライアントが運営するWEBサービスの紹介&メインサイトへの誘致です。HPの全面リニューアルに伴って新たに0から作るページになっていきます。

SATORU ITABASHI@bash1boy

HPは主にブログコンテンツを主導としてWBEサービスのリリースまではニュース系メディアの立ち位置、リニューアル後はそこにコンテンツを少し追加する事で継続したHPとして成り立つ様な2段階の仕組みを採用。

https://matome.naver.jp/odai/2141100494448440901/2141101279357296503
コンテンツを追加することで継続したHPとして…とあるのはSEOの観点から見ても大事です。
===========
申し遅れました、このまとめの管理人です。Webに携わる者として口を挟んでいられなくなったので、邪魔なら無視してください。

SATORU ITABASHI@bash1boy

当初は年末に本格始動するWEBサービスに合わせたティザーを作りたいという要望だったのですが、ティザーとして作るには空白の期間が長過ぎる懸念点があった為に「HPのリニューアルと連動出来るサイト」を提案し、それが採用された形です。

SATORU ITABASHI@bash1boy

それに合わせてHP内に組み込むページとしての立ち位置で作っていきます。デザイン実況が何なのかはこちらのリンクを参考にして下さい。それではスタートします。 matome.naver.jp/odai/213878248…

SATORU ITABASHI@bash1boy

現時点での姿はこんな感じです。HPのその他のデザインは完成しているのでヘッダーなどはそのデザインを引用。ログイン部分は隙間時間でさくっと作っただけの完全な仮状態です。 pic.twitter.com/ffx72fJtWX

SATORU ITABASHI@bash1boy

ヘッダーにある様に今回は日本語と英語で運営されるので、デザインは英語表記で作ります。ちなみに内容のテキストはテキトーに既存サイトから抜いて来たサンプルなので気にしないで下さい。写真もイメージ挿入なのでサンプルです。

SATORU ITABASHI@bash1boy

一旦すべてを白紙に。この状態からデザイン開始。 pic.twitter.com/pCE6CA8d6K

SATORU ITABASHI@bash1boy

メインの横幅は960px、ヘッダーとフッターは先日作ったHPデザインのものを引用。今回のルールはそれくらいですかね。

SATORU ITABASHI@bash1boy

今回のページに含む要素の検討。何をどの順番で入れるのかを頭の中で整理して全体の構成順位を決めていく作業。 pic.twitter.com/QowHtoa6UN

SATORU ITABASHI@bash1boy

ちなみに今回のデザインはクライアントから全ての判断と提案を任されているのでこの辺は自由に考えていく事に。ハイブランドとしての地位を長期的に築きたいという代表の意見を取り入れながら、HPから全て綺麗めデザインで作っています。

https://matome.naver.jp/odai/2141100494448440901/2141101279357296603
一瞬で消費されてしまう表面的なデザインだけでなく、長期的なブランド戦略も見据えHPを制作するのがプロのWebデザイナー

SATORU ITABASHI@bash1boy

導入ステップとよくある質問を追加。そしてムービーを作る予定は無いけどサービスが少し機能的に多く、ユーザーへの伝達方法としてあった方が良いかもという事でムービーを追加。これは僕個人の意見を反映したクライアントへの提案になります。 pic.twitter.com/tDMD72HPg1

SATORU ITABASHI@bash1boy

全体の顧客要素はひとまずさっきので決定。要素の増減は作りながらバランスを見て考えていきます。

SATORU ITABASHI@bash1boy

まずは導入ステップ部分から着手。この段階で色は一切考えません。形作りだけに集中して色々と探っていきます。今は全体で使用するフォントサイズの検証。毎回異なるターゲットによって英語ではXXpx、日本語はXXpxなどのフォーマットを決めます pic.twitter.com/UUwpXgXTof

https://matome.naver.jp/odai/2141100494448440901/2141101279357296703
実況デザインでは常識になりつつありますが、基本的に配色を考えるのは最後。まずはレイアウトから

SATORU ITABASHI@bash1boy

ステップの表現は出来るだけ3ステップ以内に納めたい。それ以上になると一気に手間を感じる印象になるので。もっと言えば3ステップ目は完了と同じ意味を持つ項目で締めくくられてる事が理想ですね。

SATORU ITABASHI@bash1boy

とりあえず表面的なフォントサイズが決定したので少し進行。全体の綺麗めを統一させるため今回のデザインではイラストなど一切使わず、絵を見せたいブロックは全て写真を使います。 pic.twitter.com/21ZLOEK1jc

SATORU ITABASHI@bash1boy

3つ並べた状態でブロックごとの余白調整と写真の高さ検討。単純に黄金比に従ってはいつするのでは無く、細身の長方形にするとスタイリッシュな印象になるので今回のデザインの様な綺麗めな方向性ではこういうバランスを見る事も多いです。 pic.twitter.com/HPhombVKu2

SATORU ITABASHI@bash1boy

ステップごとに番号を振ろうと検証。写真の邪魔しちゃうかなーとか●だとハイブランドでは印象落ちるかなーとかグダグダ細かい部分を練っていきます。 pic.twitter.com/EqkNfKZCCn

SATORU ITABASHI@bash1boy

僕は普段からラフデザインとか一切書き出しません。なんか図を見ながら作るデザインって無意識にその絵の形に固定されてしまうので、デザインを作りながらその流れでフレームワークを頭の中で作り上げていく感じです。それが正しいかは分かりませんけど。

SATORU ITABASHI@bash1boy

四角とか番号の位置変えてみたりしたけれどあまりイメージが湧かないので実際に画像を組み込みながら考える事に。 pic.twitter.com/qsDMQRsbnc

SATORU ITABASHI@bash1boy

ステップ部分が時間かかりそうなので別のブロックから先に作る事に。ここからはヘッダー直下に位置するキャッチ部分とメインページへのボタンが配置されるブロックです。

https://matome.naver.jp/odai/2141100494448440901/2141101279357296803
要素ごとに形を作っていけば時間がかかりそうな部分は後回しにできる。効率化できて頭もリフレッシュできて一石二鳥。

SATORU ITABASHI@bash1boy

今悩んでいるのがログインのボタンを配置してログインボタンと同時にメインサイトに飛ばすか、もしくはこのサイトではメインサイトへの誘致のみに徹するかという部分。既存ユーザーはログインあった方が良いけど新規ユーザーからすればこの場所でのログイン設置はどうなのかという判断の検証です。

SATORU ITABASHI@bash1boy

要素が多くて見栄えが複雑になるログインボタン設置バージョンから作ってみる事に。 pic.twitter.com/zf6o76vYIc

SATORU ITABASHI@bash1boy

完全にゾーン入って来た。一気に進められそうな予感がする。

https://matome.naver.jp/odai/2141100494448440901/2141101279357296903
湯水のごとくアイディアが湧いてくる最強の状態をゾーンと呼びますって説明いらんかw こっからが期待!

SATORU ITABASHI@bash1boy

この2つの要素で組んでみた場合の仮デザインが完了。まだ細かな部分は一切無視して、「ここにこんなイメージでこんな内容を組み込む」程度のあくまで自分だけが見るメモ帳の状態で残しておきます。 pic.twitter.com/YnuX1MNEIw

SATORU ITABASHI@bash1boy

話を戻すとこの段階ではフォームのボックスの高さ&横幅調整とそれに付随するテキストサイズ&バランスを簡単に見ただけです。ここもまだ頭を整理しきれてないと作れなそうなので放置。別ブロックやります。

SATORU ITABASHI@bash1boy

僕のデザインのやり方は「解ける問題から先にやれ」と言われる受験の数学みたいなもので、「今決まらないものは無理に今決めない方が良い」という考え方で進められます。

SATORU ITABASHI@bash1boy

次はギャラリー部分を。綺麗めの中に親しみやすさが出せないかという事でギャラリーのみ角丸ボックスで検証してみます。 pic.twitter.com/kZuzZ7TEPy

https://matome.naver.jp/odai/2141100494448440901/2141101279357297003
デザインには意味があります。角丸ボックスは親しみやすい

SATORU ITABASHI@bash1boy

すいませんギャラリー作ってたらさっきのメインイメージ部分の見せ方が浮かんだのでそっち先にやります。

SATORU ITABASHI@bash1boy

今はこんな感じです。ログインは辞めました。HP内ではサイトへの誘致に徹底して、そこに焦点を合わせる方向で進めます。ここから微調整。 pic.twitter.com/BeAR3Tj0dE

SATORU ITABASHI@bash1boy

フォントサイズ、テキスト量、テキストの横幅(改行)のバランス、テキストと共に設置するリンクボタンのバランス、これをトータルで何十パターンか検証していきます。ここはあまりに細か過ぎて伝わらないので割愛します。 pic.twitter.com/jCuQXmq6zK

https://matome.naver.jp/odai/2141100494448440901/2141101279357297103
何百、何千、それ以上のアイディアから最高のものを選びぬきクライアントに提供する。大変だけど、それが超楽しい。

SATORU ITABASHI@bash1boy

文章が読みやすく、かつボタンへの移行がスムーズにいきそうなバランスがだいたい決定。ボタンを透過にしているのはもし動画を背景に敷いた際にもこのレイアウトで組めるから。後は白背景や色を付けてしまうとボタンの存在が強すぎるので。 pic.twitter.com/Azn0GmR5Wx

SATORU ITABASHI@bash1boy

ある程度の方向が決まったのでギャラリーへ舞い戻り

SATORU ITABASHI@bash1boy

ボタンって結構重要なコンテンツだけど強過ぎて最初っからボタンに目が向いてしまうとコンセプトが伝わらないまま判断を迫らせる事になるのであまり好ましくないかなーと個人的に思ってたりします。

SATORU ITABASHI@bash1boy

さっきの角丸ボックスへ実際に写真を挿入。まぁ悪くは無いかなという印象。 pic.twitter.com/WAX3XhvES0

SATORU ITABASHI@bash1boy

スタイリッシュな印象を持たせるために背景を黒へ。タイトル付けるとバランス崩れてダサい。 pic.twitter.com/vQzDq9r252

SATORU ITABASHI@bash1boy

今回はHPデザインが白黒貴重なので背景なんかを自然と黒に設定しています。

SATORU ITABASHI@bash1boy

写真の並べ方を色々と検証。横並べも見ていきます。例えばこの横にならんだ写真がゆっくり動いてたら躍動感が出るかなとかWEBに起こした際のイメージも一緒に記録。 pic.twitter.com/m8AhJQrD7O

SATORU ITABASHI@bash1boy

なんか写真の比率に違和感を感じたので10px高さを短く。さっきよりはマシになりました。ギャラリーはまた保留。 pic.twitter.com/oyHJePJXWv

https://matome.naver.jp/odai/2141100494448440901/2141101279357297203
自分の中にある違和感を取り払っていく作業により、少しずつデザインを磨いていきます。

SATORU ITABASHI@bash1boy

またトップイメージに戻りますがボタンの横にムービーリンクを付けました。ここはまだムービーの導入自体が提案前なのでどちらにも対応出来る形で作っています。そしてムービーが導入されたらAppleの様にビデオを流すのが良いかなと。 pic.twitter.com/yjceBFBzDo

SATORU ITABASHI@bash1boy

最初にいじっていた導入ステップ部分を変えてみました。背景を取って番号も取ってシンプルな形に。今回のサイトデザインではこっちの方がしっくりくる。 pic.twitter.com/1PUXtcz47o

SATORU ITABASHI@bash1boy

フォントサイズは同じ様な見栄えをもったブロック同士でも内容によってフォントを2px小さくしたりとか、コンテンツに合わせて細かに調整する必要がある。例えばタイトルの直下に写真が来るのかテキストが来るのかによっても印象はだいぶ違いますしね。

https://matome.naver.jp/odai/2141100494448440901/2141101279357297303
法則と感覚の微妙なところの話。非常に興味深いですね

SATORU ITABASHI@bash1boy

見栄えをシンプルにした事によって導入ステップなのか分からなくなってくるのでタイトルを追加。ここも細かな調整は割愛しますが余白やフォントサイズを色々と試しています。 pic.twitter.com/uzZPvuiOyG

SATORU ITABASHI@bash1boy

こういうブロックごとにリンクボタンを付けた方が良いかなと感じて要素を追加。デザインが縦長になりそうだったら設置しても良いかもしれません。 pic.twitter.com/lQ5KxWfEwu

SATORU ITABASHI@bash1boy

ひとまず導入ステップ部分は仮で置いておき、さっきのギャラリーに戻ります。

SATORU ITABASHI@bash1boy

青一色バージョンも。全体的に明るくなってこっちの方が良いね。 pic.twitter.com/785rnMsuKj

https://matome.naver.jp/odai/2141100494448440901/2141101279357297403
ここへきて配色が決まりつつある。ここからは一気に制作のスピードも上がります。

SATORU ITABASHI@bash1boy

今回のサービスはギャラリーの様な絵で伝わる機能も多かったりするので、ここをもっと目立たせて補足としての立ち位置を持たせたら直感的に伝わりそう。そんな意図を持って写真を大きい存在に変更しました。

SATORU ITABASHI@bash1boy

ガラッとデザイン変えました。 pic.twitter.com/vqw3KlzDCw

https://matome.naver.jp/odai/2141100494448440901/2141101279457297503
で、でたーーーーーーwwwwwww配色も決まって終盤に取り掛かろうかという段階でデザインガラっと変えるやつwwwwwwww

SATORU ITABASHI@bash1boy

iPhone6予約完了

https://matome.naver.jp/odai/2141100494448440901/2141101279457297603
なにしてんねん

SATORU ITABASHI@bash1boy

実況に戻ります。テキストを無くしてもっと直感的に分かるイメージに変更。テキスト部分を写真の下へコンパクトに配置する様にして、補足的な役割にしました。この部分は写真をメインに見て欲しいので、テキストはあくまでサポートの存在に。 pic.twitter.com/wopxuwd9ef

SATORU ITABASHI@bash1boy

また唐突にトップイメージに戻りますがボタンを青に変えました。改めて見るとボタンが沈みすぎてたので主張しすぎない程度のカラーと、ボタンとして分かりやすくする為に。 pic.twitter.com/763O2HKBCR

SATORU ITABASHI@bash1boy

同じ写真ですがこのトップイメージの下にページ内のナビゲーションを付けようかと探っています。写真が大きくなった事でタテの長さも広がるので、そうなった際には簡単にブロックの切り替えが出来る様にナビがあった方が便利かなと。 pic.twitter.com/wlbw84hdqT

https://matome.naver.jp/odai/2141100494448440901/2141101279457297703
やはり配色の方針も決まったようで、整ってきましたね。

SATORU ITABASHI@bash1boy

現時点で作った主な要素はこの2つ。これも完成では無いけれど。 pic.twitter.com/uf8ES0NX3K

SATORU ITABASHI@bash1boy

またフォントや余白調整をしていきます。

SATORU ITABASHI@bash1boy

次に着手するのは「よくある質問」部分。ここは要素として主張させず、あくまで補足的な存在として、あくまで他のブロックを引き立たせる一部として作っていきます。

SATORU ITABASHI@bash1boy

次にコンタクトフォームに着手。ただここは既に作ったHPデザインのものが引用出来るのでそのままのデザインを活かして進めていく。

SATORU ITABASHI@bash1boy

そんなに悩む部分も無く、こんな感じかなーという構成。ここは複雑にするよりスッキリしてる方が良いですね。 pic.twitter.com/WEnqHK1j8T

https://matome.naver.jp/odai/2141100494448440901/2141101279457297803
よく見ると、配色やフォントサイズ、ウェイト、余白…などなど絶妙なバランスで各コンテンツが共存しています。

SATORU ITABASHI@bash1boy

コンタクトフォームはこんな感じです。タイトルとかは最後に変更。これはこれで置いておいて、他の要素とのバランスを見ながらいじっていこうと思います。 pic.twitter.com/dnQRteWpqK

SATORU ITABASHI@bash1boy

ここからは後回しにしていたけど割と重要な「サービスメリット」の部分。だいたい3〜6つくらいのメリット&特徴を載せる予定だけど、他2つのブロックで写真を多用しているのでさすがにここも全て写真だと全体的にうるさくなってしまう。

SATORU ITABASHI@bash1boy

という事で主にテキストを中心とした見栄えで考えていきます。主張する特徴&メリットのテキストがまだ決まっていないのでタイトルとアイコンも今は仮で入れていきますね。

SATORU ITABASHI@bash1boy

今こんな姿。余白と文字量、字間の調整がメイン。ちょっと時間かかりそう。 pic.twitter.com/pygDV7QTtc

SATORU ITABASHI@bash1boy

メリット&特徴ブロック完成 pic.twitter.com/PJOeth4gka

SATORU ITABASHI@bash1boy

同時にコンタクトのフォームと電話番号部分を左右逆に。今回のクライアントはサービスの問合せに関してきちんと説明出来る人材を配置していて、顧客目線で考えるとフォームより電話の方が詳細を分かりやすく聞けるので、細かな部分だけど逆に設置 pic.twitter.com/2fRMlO8UEF

SATORU ITABASHI@bash1boy

今まで別々に作っていた要素を一覧で pic.twitter.com/h0VnbHu6de

https://matome.naver.jp/odai/2141100494448440901/2141101279457297903
白を基調としながらも黒を効果的に利用しています。差し色の青はファーストビューで飛び込んでくるのでその後の登場が少なくても非常に印象的。

SATORU ITABASHI@bash1boy

ここからは全体を見ながら微調整。

SATORU ITABASHI@bash1boy

実寸サイズの画像はこっちにアップしたので興味ある方はどうぞ。まだ途中のものですが。
dropbox.com/s/wmm8f8uwprqq…

https://matome.naver.jp/odai/2141100494448440901/2141101279457298203
私もダウンロードしましたが、実寸で見るとまたひと味違います。ぜひダウンロードしてみてください。

SATORU ITABASHI@bash1boy

コンタクトブロックも気になる部分があったので調整します。

SATORU ITABASHI@bash1boy

グレー背景が少し違和感あったのと、全体の印象の中で印象がここだけ優し過ぎたのでギャラリー部分を修正。画像の上に文字を置いて両要素の一体感を強めてみました。 pic.twitter.com/hVKhT7Amik

SATORU ITABASHI@bash1boy

コンタクトブロック変えました。背景の黒が全体の中で強すぎるので無しに。フォントを少し小さくして余白を活かしながら綺麗系を少し強めに。そして気軽に問い合わせがしやすい様、スタッフ写真を配置して親近感を持たせる形に。 pic.twitter.com/UGkkIQeflE

SATORU ITABASHI@bash1boy

だいたいまとまったかな

SATORU ITABASHI@bash1boy

写真が入る事で無機質な印象から脱却出来たかなーと思います。コンバージョンなんてリリースしなければ分からないけどデザインで出来る部分はなるべく追求していかないと。

SATORU ITABASHI@bash1boy

開始当時の姿 pic.twitter.com/3QgN1jZ120

SATORU ITABASHI@bash1boy

途中のログイン部分検証などを経て pic.twitter.com/s3IY3PfyVy

SATORU ITABASHI@bash1boy

ギャラリーなどもこんな感じから変化して pic.twitter.com/xvZgWhFQ0P

SATORU ITABASHI@bash1boy

記載してない細かな修正も含めて最後はこうなりました。 pic.twitter.com/DoQ2uC02pc

https://matome.naver.jp/odai/2141100494448440901/2141101279457298303
確かに最後に写真を入れたことでより一層リッチなサイトに仕上がりました。最後の味付けがなんとも素晴らしい

SATORU ITABASHI@bash1boy

レイヤーはこんな状態。誰でも分かるレイヤー構造に整理するのは僕のこだわりです。修正の時に分かりやすかったり、納品後に触る人が使いやすかったり、誰も見ない部分ですが毎回きちんと整理する様にしてます。 pic.twitter.com/7sD5GQP9GR

SATORU ITABASHI@bash1boy

正解が無い世界なのでそういう追求は必然的につきまとう事になりますね。それが楽しいのだけど。

SATORU ITABASHI@bash1boy

というわけで今回のデザイン実況は以上です。毎回そうですがこれで完成ということはありません。ここから3日ほどデザインを置いて、3日後に新鮮な状態でデザインを見てみる。そして違和感あれば修正し、納得出来なければ全てを解体して0から作る事もあります。その繰り返し。

SATORU ITABASHI@bash1boy

最後に、今回のデザインの実寸サイズのJPEGも共有アップしたので興味ある方はDLしてみて下さい
dropbox.com/s/695r01zsghac…
今回も色んな方がツイートを追ってくれてたのでモチベーションも保てました。ありがとうございました。

https://matome.naver.jp/odai/2141100494448440901/2141101279457298403
非常に勉強になりました。再度完成品をみながら読み返すのもありかもしれません。おつかれさまでした。

おまけ

SATORU ITABASHI@bash1boy

ミニマルは難しい。たったこれだけのレイアウトに辿り着くまで3日かかった pic.twitter.com/M3q6m5gH0l

SATORU ITABASHI@bash1boy

クライアントのディレクションと違って “客観的に見る” という思考が圧倒的に難しい自社のWEBは、建築士の知り合いが「自分の家だけはいつまで経っても完成しない」と言っていたその感… facebook.com/photo.php?fbid… pic.twitter.com/Ugnv27svGA

https://matome.naver.jp/odai/2141100494448440901/2141101279457298603
いくつもの案件を抱えながらひとつひとつこれだけ吟味して作成するのがさすがプロの仕事ですね。次の実況デザインが楽しみです。では
https://matome.naver.jp/odai/2141100494448440901
2014年09月18日