Webデザインの守破離

僕がWebデザインの工程に取り入れていることは、「守破離」です。

守：スタンダードに組む
破：アレンジする
離：オリジナリティを出す

一気にゴールまで向かおうとするのではなく、段階をふんでいくとやりやすいです。構成がしっかり反映された「守」でもそれなりの出来栄えに仕上がってしまって、そこで手を止めてしまうのを防ぐ効果もあります。やはり「守」あたりだとつまらないですし。Webデザインあるあるで"ワイヤーフレームどおりにしかあがってこない"というのも「守」がそれなりに見えて、手が止まってしまうから。意図して「破」「離」へステップアップしようとしたらアウトプットも変わってくるし、地力が上がる気がします。

1. BSCインターナショナル

BSCインターナショナル様Webサイトの変遷を紹介します。

[1] ワイヤーまんま感
[2] 抜け感余白＋イラストでアクティブ感
[3] 琵琶湖を背景に。全体の一要素ではなく、一要素で全体を包み込み、世界観の中にパーツを重ねていく。

いきなり[3] には行けないので、いち、にの、さん ！というイメージでデザインするように心がけています。

2. 鹿熊組

鹿熊組様のWebデザインの変遷。

[1] グリッドを4本引いて、各要素をオーソドックスに組む
[2] 8つのサムネールの組み方を変え、グリッドを利用して右・左・右のウエイトをつける
[3] グリッドの本数を変えてみる。抜け感を出しつつ全体のバランスを整える

グリッド引くとこんな感じ。

[1] はちょっと単調で堅いと思ったので　[2] に変化したものの、やはり機械的な印象が拭えないので[3] に修正。グリッドというルールを前提に配置を考えていくと、意味のある抜けが発見できるなぁなんて思いながらレイアウトしました。メインビジュアル部分で遊びができたので、施工実績以下は逆にセンターに戻してウエイトを整えました。

3. BalenaのWebデザイン守破離

「くうき感」を大事にする建築設計事務所、Balena様のデザイン。

[1] シンプルに組む。でもワイヤー感が…。
[2] 抜け感を出すために余白をつくる。
[3] 「くうき感」を表す要素を追加。連動して配置をずらし全体に動きを。

[3] に行くには、ひとつでいいからアイデアを。

ストーリーをつくろう

守の先に行くためのひとつのポイントとして、メインビジュアルとそのすぐ下のブロックのデザイン。僕の場合は、分断するのではなくひとつの流れやストーリーをつくることを意識して、文字・図形・余白などをつなぎ役に利用するパターンが多いです。以下の例だと、メインビジュアルで完結させず、サービスやコンセプトがもつ世界観を意識して、コピーをかぶせたり、写真をスクロールさせるために一部を見せたり、背景にボックスをひいて関連性を持たせたりといった工夫をしています。

メインビジュアルを研究することは多いと思いますが、次のブロックのデザイン、はたまたスクロール全体のデザインを「ストーリー」という観点で研究すると引き出しが増えそうです。

関連記事

Twitter : harahiroshi