Webデザインってセンスがなきゃだめなの?の話を考える

ある種の趣味で過去にWebデザインをかじっていたのですが、Web系エンジニアとしていざ社会に出ると、その知識が思わぬところで意外と役に立つ場面が多いなーという実感があります。

しかしながら、自分の周りでエンジニアを見渡してみると、やっぱりデザインが苦手という話は結構受けます。そういう時に、自分なりに理論を伝えるのが難しかったので、改めてWebデザイン(ないしはデザイン系全体)に必要な要素を噛み砕いて、自分なりにまとめてみました。

よいWebデザインには美的センスが命?

「もっとデザイン良くしろって言われちゃったんだけど、俺にはセンスが無いから無理だよ」

よくある話ですが、良いWebデザインを達成するための必要条件が「美的センス」なの?と言われれば、結論から言えば私はNOだと思います。美的センスが無くても、”良い”Webデザインは全然できます。

勿論、美的センスがあればあるほど、Webが映える可能性は確かに高いので、十分条件にはなります。仮にWebを作る目的が『美しいデザインで人を感嘆させる』という目的だったとすれば、美的センスは欠かせません。しかし、そこまでいくと、デザインというより「アート」とか「アーティスト」の世界だったりするので、必須要素にはならないと私は思います。

Webデザインの重要性

私は、Webデザインは、他のデザイン分野に比べて、ユーザーが干渉する影響範囲が広いのが特色と考えています 1 。例えば、突き詰めてシンプルなものだと、『リンクをクリックしてサイト内のコンテンツを切り替える』だとか『フォームに文字を書き込んで送る』とかです。勿論、今のWebの世界は、昔みたいに、単にページを切り替えてネットサーフィンをするような範囲には収まりきらなくなっており、考慮すべき点は山のようにあります。

昔だったら、まだWebデザイナーと呼べる人は、個性の光ったホームページを作る、いわば「アーティスト」しかいなかったのかもしれませんが、Webの進化に伴い、個性以上に普遍性が重要になってきたのが今のWebデザインと言えます。

Webの進化は恐ろしく速く、Web2.0 を通過し、Webサービス/アプリケーション全盛の時代を迎え、今となってはシングルページアプリケーション (1つのページだけで完結するアプリケーション) 上に構築されたサービスなども目立ってきました。Webがより普遍的にサービスを与える立場になったことで、使うユーザーとの「仲立ち」がより重要になったと言えるでしょう。

結果、Webデザイナーは、ユーザーとシステムの “双方向の流れ” をコントロールし、Webサイトという共通の世界観に落とし込む というポジションになった、と私は考えています。大規模化したWebの中では、サービスやアプリケーションの仕組みを作るWebエンジニアの力量は勿論重要ですが、それを触るユーザーとシステムの仲介役を担う、Webデザイナーの成果も、当然ウェイトが高くなります。

「理論」を大事にする

Webデザインを支えるために大事にすべきなのは、美的センスよりも「理論」だと思っています。

当然、老若男女に対して100%正解という理論はありませんが、優れたWebデザインには、必ず“裏に隠れた理論がある”と思って良いです。理由も無く字が太いとか、理由も無く線の色が違うなどはまず無いでしょう。そして、それらの理論が堅固な理由の元に存在していればいるほど、「何故そういったデザインになっているか」という意味が出てくるものです。

Bootstrap のようなフレームワークは好例です。すでにBootstrapが持っている、Webデザイン上の理論 2 を達成するために、HTMLタグや、classのルールが定義されています。従って、そのルール通りにコーディングしていれば、自然と理論に基づくWebとなるわけです。

Webではないですが、iOSのフラットデザイン、Android (Google) のマテリアルデザインも、ルール化された理論に基づいたUI/UXであり、考え方の参考になる部分が多いです。3

この2つのデザインは、定めたルール(≒理論)が異なるので、それによって作り出される世界観もそれぞれ異なります。しかし、「携帯端末を通して操作するためのインターフェース」を定義したルールであることはどちらも変わりません。微妙にそのルールが異なるからといって、どちらが正ということもありません。それぞれが持つルールが「個性」となって、各端末に出てきているだけで、根本となる理論はどちらも同じです。

つまり、Webデザインで重要なのは、“理論を立てたり、既存の理論を持って来たり、あえてぶっ壊したりして、独自の世界観を作る”ことだと私は思います。ここの理論構成が上手いか下手かで、Webデザインの良し悪しが左右され、上手な人なら──たとえエンジニアだろうと──優れたWebデザインのサイトが作れることでしょう。

この理論を固めるプロセスの中に、自分のセンスを加えられて、独自の理論にまで昇華させられるスキルがある人ならば、その人は立派なWebデザイナーと呼べると思います。なので、見た目に関わる美的センスは、あくまでその人に依存するアイデンティティであり、必須の要素ではないのです。

知識を蓄えてセンスを磨く

優れたWebデザインをするための早道は何でしょう?

こればっかりはズルできるものではなく、Web や フレームワーク の理論を学び、徹底することに尽きます。根本の理論がぶれなければ、正直、見た目なんぞ、いくつにでも枝分かれできます。CSSのパワーなめたらあかんでー。

ズルして根本をすっ飛ばし、いきなりデザインしようとすると、ユーザーにとっては、地に足のついていない、統一感の無いインターフェースと受け取られてしまいます。結果、「デザインが良くない」と思われてしまうのです。それを回避するためには、まずは徹底して既存のルールを踏襲することが一番の早道です。

じゃあそもそも、どんなルールを知るべきなの?という話になると思いますが、Webと付き合う以上、HTMLの知識は大前提です。HTMLの各タグは、基本的にはそれぞれ意味づけされており、使用用途が決まっています。その用途に則って、正しいHTML文書を書くことが求められます(セマンティックWeb)。<h1>~<h6>タグは見出し、<p>タグは段落、<blockquote>タグは引用といった基本的なところから、<br>は見た目のための改行ではない…といった細かいところもです。特にHTML5は、そういった概念の定義を解説する資料がネット上に多く存在しますので、是非読み込みましょう。

正しくHTMLを使えるようになったら、次は既存の理論 (フレームワーク) を使いましょう。Webフレームワークのドキュメントをこれまたしっかり読んで、そのフレームワークが “意図している理論の通り” に使うことが重要です。「このコンポーネントが、どのようなコンテンツを表示するために使われるのか」をしっかり理解しましょう。フレームワーク共通の理論の基にWebサイトが敷かれていれば、例えば後から “オリジナリティを出すためにデザインを変える”(CSSを変更する)…となった場合も容易です。

優れたWebデザインを作る一番の近道は、

  • 文書構造 (HTML)
  • 理論・ルール (フレームワーク etc)
  • 見た目 (CSS)

という3層構造で、役割を明確に分断して考えることです。ノンデザイナーは、この3層を一緒くたに見てしまいがちですので、それぞれが持つ役割(意図)を正しく分断しましょう。これでようやく、優れたWebを作る為の土台ができあがります。あとはこれらの要素をプロダクトごとに突き詰めていき、それぞれの最適解を見つけられるようになれれば、他でも使えるWebデザインのセンスが磨かれていくでしょう。

ということで、今度会社でデザイン系の相談受けたらこの話をしてみよーかなーと企んでいるVilartでした。

余談

「パブリックな写真を引っ張ってトップのアイキャッチにする」という、いかにもブログっぽいやり方にトライしてみました。
前回の木の写真は自分のストックフォトだったんですが、なかなかパブリックで思った通りの写真が出てこないので、なかなか慣れない。


  1. 工業製品のデザイン(いわゆるプロダクトデザイン)とかに近いかもしれないですね。 
  2. 「リンクは青地」とか「ボタンは角丸」とか。テーマによって見た目の理論は異なるものの、レイアウトのような大筋は一緒。 
  3. 例えば私の場合、マテリアルデザインは “よくわかるマテリアルデザインの設計コンセプト | fladdict” が超参考になりました。 
Pocket

投稿者:

vilart

世を忍ぶ姿はトーキョーでとあるサービスを回すエンジニア。実態は開発からデザインまで、Web関連なら広く手を回すひとです。