BLOG

Webデザイナーはコーディング出来なければならないのかをコーダー視点で考えてみる。

少し前の話になりますが、Twitterでは「Webデザイナーはコーディング出来るべきか否か」という話題で盛り上がりました。完全に話題に乗り遅れた感がありますが、7年ほどHTMLコーダーとして社内外の数多くのデザイナーさんのデザインカンプをHTMLに実装してきた経験からお話させていただきます。

どんなデザイナーさんがいたのか

Webサイトデザインを手がけるデザイナーさんは、大きく分けて2種類に分かれていました。

  • 入社時は私と同じようにコーディング業務から入り、その後デザイン業務を専門として進んでいったデザイナーさん
  • 紙からグッズからいろんなデザインを手がけている中でWebのデザインもあわせて行っているデザイナーさん

私はWeb制作会社に勤めていたので社内には前者が多く、パートナー企業には後者のタイプのデザイナーさんが多く、コーディング業務を請け負う形で一緒にお仕事をさせていただいていました。
パンフレットなどの紙媒体を手がけるグラフィックデザイナーさんの作成したIllustratorで作られたカンプをコーディングするので、普段PhotoshopなどのWeb向けツールに慣れていた私はものすごく苦労。。した覚えがあります。

でも紙のデザインというのは本当によくこだわって作り込まれているものがとても多くて、紙とWebの違いをひしひしと感じていました。「絶対的な締切（入稿）がある」という事実の上で作るものと、そうでないものの違いでしょうか。これは特性の違いなのでどちらがいいというわけではないのですが。

デザイナーはコーディングできなきゃいけないのか

いきなり結論を言っちゃうと、

Webデザイナーはコーディング出来るようになる必要はないが、Webページがどのような仕組みでデザインを表現しているかは知る必要がある、と思っています。

見た目を作るだけならイケてるサイトのデザインを参考に、自分なりのデザインを行えばそれなりの美しいものは出来るでしょうが、コーダーの自分から言わせていただくと、やっぱりWebページというのはコードの塊ですので、コードのしくみを度外視したデザインはあまり良いとは言えないですね。

知っておきたい概念１：ボックスモデル

HTML/CSSの基本的な概念として「ボックスモデル」というものがあります。詳しくは割愛しますが、要するに

「すべての要素は四角形のボックスの中にあってそれをゴニョゴニョするのがコーディング」ということです。

コーディングをしたことがある方はこの概念が身についているのでボックスモデルを考えないデザインをすることはあまりありません。ですが紙媒体などで出来る表現をすべてWeb上で再現しようとすると恐ろしくコストが掛かってしまう場合があります。
できないことはない、と思います。ただそのコストに見合う案件かどうかは見極める必要があります。

知っておきたい概念2：HTMLは文書であるということ

また、HTMLというのは「構文」です。そのページで何を言いたいのかをまとめ、見出しや図や説明文などで表現するのが基本的なHTMLの役割です。
書籍や論文など、よく「部」「章」「項」などで見出しがついていてまとまっていますよね？基本的にはあれと同じで、文書として成立しているのが正しいWebページです。

このHTML構文の仕組みを無視したデザインは、コーディングしにくいというのもありますが検索エンジンのページの評価を下げてしまうのであまり良いとは言えません。

ボックスモデルやHTML構文を無視したデザインは悪なのか

ここまで書くと、「じゃあWebの事を知らないグラフィックデザイナーが作ったデザインはダメなのか」みたいな方向に走ってしまいそうになりますが、私自身の経験から言うと一概に「悪だ」とは思いません。
なぜならWebサイトの役割はそのサイトを必要としている人の目的やその時の状況によって変わっていくからです。

例えば

  • ある商品のプロモーションに必要なサイトなので、見た目重視でWebの決まりを逸脱したサイトになった
  • 紙などの他の媒体とデザインを合わせる必要があった
  • 見た目さえ出来てりゃいいのだ納期がないのだそれでいいのだ
  • 鶴の一声

など、実務ではいろんな都合によりいろんなデザインをされる場合があります。なのでそこは自分の中での最適解を見つけるべきでしょう。

ただ、HTMLの仕組みをよく分かっていないままWebデザインをし続けるのは良くないと思っています。
Webデザイナーと名乗る以上は、HTMLとCSSとjavaScriptがどのようにデザインを形作っているのか、基本的な知識だけでも抑えるべきだと思っています。

なので駆け出しWebデザイナーの皆様におかれましては、とりあえずコーディングを頑張って覚えていただいたほうが今後のためになるのではないでしょうか。
デザイナーとコーダー双方がお互いの専門性を尊重し合いながら良いWebサイトを作っていきたいものですね。