Dear Web designer

Yusuke Nakanishi
8 min readMar 17, 2016

--

もう何年も前からWebデザイン、Webデザイナーの在り方について思うことがあります。

まず私のバックグラウンドがどういうものか示した上で、その思いを語ります。
DTPデザイン(紙のデザインです。ポスターやリーフレット、ポストカードなどなど)を1年半経験し、その後はWebデザイン、マークアップエンジニア、フロントエンドエンジニアへとコードを書くことに興味を持ちその時々でポジションを変え10年ぐらい経ちます。最近ではフリーランスとしてスタートアップのWebサービスの中でデザインからHTML, CSS, JavaScriptを主戦場にしている者です。

ここで語る内容は、Webサービスのデザインに偏った内容になってしまいますが、コーポレートサイトやランディングページひとつとっても考え方は同じだと思っています。

タイポグラフィはWebデザインに必要か?

よくWebデザインはタイポグラフィの部分で自由がないという意見が散見されます。今後その自由もブラウザの進化とともに増えていくものだと思います。ただ、生まれた時代も必要とされる役割も全然違うので、DTPデザインと同じ自由が必要だとは思いません。
活版印刷の歴史の中で生まれたタイポグラフィが、全く違う世界であるWebでそのまま活きるとは思えないからです。デザインの基礎がDTPデザインにあるのは歴史の長さから理解できますが、あくまでも基礎の部分でWeb独自のデザインやタイポグラフィの在り方がもっと議論されるべきです。

DTPデザイン

  • ユーザーが目にするデバイスは決まっている
  • フォントの種類や大きさは変わらない
  • ユーザーが確認する環境は多岐にわたる(読むもの)

Webデザイン

  • ユーザーが目にするデバイスは決まっていない
  • フォントの種類や大きさはユーザーの環境によって異なる
  • ユーザーが確認する環境は多岐にわたる(使うものだったり読むものだったり)

もっと挙げられますが、大きな違いがわかっていただければいいのでここまでにします。文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか?それを実装するエンジニアの工数は効果に見合ったものでしょうか?ユーザーはどんなメリットが得らるのでしょうか?何をもって美しいタイポグラフィとするのでしょうか?

Webにおいて、私は多くの環境で一定の見た目を保証することが美しいタイポグラフィだと考えています。ただ改行位置をどのデバイスで見ても同じにするのではなく、どこで改行されても読みやすくすることが重要です。こういったことから必要とされるタイポグラフィの在り方が違うように思うのです。

もう二度と「紙のデザインはタイポグラフィにこだわれるからいいよね。」という意見も、その時のあなたのしたり顔も見たくありません。そもそも比較することすら間違っていて恥ずかしいことだとはやく気付けるといいですね。

Webのタイポグラフィについて面白い考察がされていましたので紹介します。Webデザイナーでタイポグラフィ好きで勉強する方多いですが、その好きなタイポグラフィについてWebの世界で考察される方は少ないですね。

汎用性のある(再利用性の高い)デザインがなぜ必要か?

汎用性のあるデザインが苦手なWebデザイナーは多いようです。実際、フロントエンドエンジニアとして汎用性のあるデザインデータを頂いたことは数えるほどしかありません。個性が出せないとか、おもしろみのないデザインになるとか、こっちが恥ずかしくなるような意見をもらうことがありますが、自分の能力が無いことをそんなに誇らしげにしないで下さい。あとその個性はユーザーのためになるのでしょうか?あなたは何のために誰のためにデザインしているのでしょうか?売れないアーティストか何かですか?

汎用性のあるデザインができないのは何も考えていないからと言わざるを得ません。なぜ必要なのか考えてみましょう。

汎用性って?

まず汎用性についてですが、上記リンクがよい指針になるかと思います。コンポーネントの粒度についてガイドライン化されたものです。
共通化されたパーツが集まってページが構成されるWebにおいて必須とも言えるデザインの基礎知識ですね。こういった考え方のもとにデザインされて初めてコーディングガイドラインを作ることができます。時々お洒落なデザインからコーディングガイドラインを作って欲しいと言われますがお洒落すぎて無理ですね。ははは。

サイトを作る上で指針となるものが必要

Atomic Design にもありますが、情報設計、情報整理、各コンテンツの意味付けやルール付けなど指針となるものが必要となってきます。これを選定するのはデザイナーだけの仕事ではありませんが、デザイナーが重要な役割を担っていると考えられます。そもそもデザインはこういったものから生まれます。あれこれが苦手?仕事してます?

Webはデザインして終わりではなく、その後に控えている人間がいる

もちろんDTPにも印刷会社の方々がその後に控えていますが、Webと比べるとその影響は少ないと言えます。Webの場合、コードに起こす人間がいることを忘れがちといいますか、本当の意味で意識できていない人が多い気がします。意識できていたら汎用性のあるデザインが上がってくるはずですしね。

  • デザインに汎用性がない
  • コードにも汎用性がなくなりコード量が増える
  • ページの表示速度が遅くなったりバグが多くなる
  • 汎用性がないためその後の開発もしにくくコストが膨れ上がる

デザインに汎用性がないせいで、技術的負債がはじめからある状況が生まれ、その後の開発にも悪循環を生みます。自分のデザインが、その後の工数やチームのモチベーションに大きく影響するのだとしっかり意識してほしいものです。ボタンやリストのデザインに整合性があることによってユーザーがサイトを操作する学習コストが抑えられ、エンジニアリングの高速化(工数、コスト削減)ができます。良いこと尽くめなのに、それでも苦手で済ませますか?

DTPデザインができたらWebデザインはできるのか?

これはもう愚の骨頂ですね。オーサリングツールが上手く使えるという意味ではそうかもしれませんが…。また、ときおりWebデザインを下に見る方もちらほらいます。そう思ってる人はもうデザイナーとは呼べないどころか、人間としてどうかなと思いますね。そんな人もどきとは友だちになりたくないどころか同じ空間にいたくないですね。息を吸ってもいいけど吐かないでほしいですね。

何度も言っていますが、全くの別物です。それぞれにデザインの在り方があるべきで、必要とされる能力も大半が違います。同じだと思ってる人はDTPもWebもどっちもわかっていないポンコツだと自覚してください。お願いですから。

Webデザインといえば、ヤコブニールセン博士ですが、Twitterのbotが個人的に好きなので紹介しておきます。

その他

脱線しますが、難しいデザインをマークアップするのが嬉しいとか言いう方いますけど、これも理解できません。頑張りどころ間違ってると思うし、プロとして難しくてもマークアップする能力を持ってて当たり前だしで、どういう言葉をかけてあげればいいのかいまだに見つかっていません。

まとめ

新しいWebデザインの可能性を模索できないデザイナーを、World Wide Webは必要としていない。

まぁそういうことです。

自分のバックグラウンドを書いている時点で思ったのですが立派な老害…。僕自身の思いをまとめたものなので意見大歓迎です。

--

--