そのデザイン、マークアップ意識してる?文書構造を理解せずしてWebデザインを作るな!

あなたはどんなWebデザイナー?

もしあなたが「Webデザイナー」という職業ならば、自分の作ったデザインを、きちんとコーディングできますか?

「Webデザイナー」がどこまで手広くやるかは昔からよく議論されている内容ではありますが、「Webデザイナー」「コーダー」が完全分業という考えは、今はもうだいぶ古くなってきているのではないでしょうか。(決して完全分業を否定しているわけではありません)

どちらかに特化した人材は作ることはできますが、どちらにしても、双方の手法を知らないと、結局両者への負担が大きくなったり、意味のないコードが増えたり、デザイン通りのサイトにならなかったり、SEOを無視したソースの汚いサイトが出来上がってしまったりなどマイナス面が大きくなってしまいます。

Webデザイナーを含む、Webクリエイターの相関図

上図のとおり「Webクリエイター」という括りの中には複数の職種が存在しています。

デザインしかできないWebデザイナーか、コードしか書けないコーダーから始まり、その次のステップに多少のコードなら書けるWebデザイナーと、多少のデザイン修正ならできるコーダーと、html・cssをより深く理解したマークアップエンジニア、よりシステムが絡むフロントエンドエンジニアが位置します。

マークアップエンジニア

ここで出てきた「マークアップエンジニア」とは、HTML5でのコーディング、CSS3でのデザインあてはもちろんのこと、コンテンツの内容をきちんと理解しながらデザインや文章を構造化し、検索エンジンにもフレンドリーなマークアップをするなど、ディレクターやデザイナーの意図を汲み取りかつ改善の提案ができるレベルでのコーディングができる人材のことを指します。

フロントエンドエンジニア

また、「フロントエンドエンジニア」とはWeb標準やアクセシビリティに配慮した質の高いコーディングを行い、長期的に見た保守性にも優れた設計をできることが前提となります。その他、UI(ユーザーインターフェース)にも意識した実装に気を配りつつ、画像素材の用意やデザイン設計といったWebサイトやページデザインなどのWebデザイナーとしての役割も求められることがあります。
企業によってはこの職種がシステム部分を理解し触るケースも多く、簡単に言えば、プログラマ寄りのWebクリエイターと言えますね。

かくゆう私は「デザイナー」兼「マークアップエンジニア」という立場になるかと思うのですが、最近は実作業に集中するよりは、ディレクション業務の方が主なため、「コードが書けるデザイナー」「簡単なデザイン修正ができるコーダー」を育て上げることに現在は熱意を注いでいます。(※熱意はあってもその分時間を費やせているわけではありませんが、、)

「デザイナー」兼「コーダー」兼できれば「マークアップエンジニア」までになれれば最高ですが、現在弊社には「デザイナーのひよっこ(or卵)」「コーダーのひよっこ(or卵)」レベルのスタッフが大半なので、まずは欲張らずに、「サイト(ページ)構成を理解した上で、きれいなデザインが作れて、htmlとcssを使ってコーディングできる」レベルのお話をしましょう。

こんな人はWebデザイナーと名乗らないで欲しい

私が一番Webデザイナーとして危険だと思うのは、デザインしかできなくて無理難題なデザインや、ページ構成を無視したデザインが上がってきて、ひとりよがりのデザインだけたたきつけて、コーダーやマークアップエンジニアを泣かせるデザイナーです。

決して否定しているわけではないですが、最近は「Webデザイナーです」と名乗ると最低限のコードは書けると思われることがほとんどなので、そういった方は自分の首を絞めないためにも、「コードはかけませんがWebデザイナーです」とでも言っておきましょう。

さて、デザインしかできないWebデザイナーについて、何がダメなのかきちんと理由を紐解いてみましょう。

デザインの理由や構成を説明できない

こういったタイプの人は、「どうしてそのデザインにしたの?」「ここ、どう組むかわかってる?」という質問を投げかけた時に、悩んで黙り込んだり、曖昧な返事しかできないことが非常に多いです。たとえ業務上、完全分業であっても、きちんとコードを思い描いてデザインして欲しいですね。html構成を初心者であれば手書きで、できるようになってきたら頭の中でもいいので最初に決めてから、デザインして下さい。

誰のためのデザイン・サイトなのか理解できていない

これはどんなデザインを作る時もですが、そのデザインは、必ず誰かのために作らなくてはいけないものです。

ペルソナを設定する、とよく言いますが、まさしくこれのことですね。設定したペルソナになりきって、「どうすれば心に響くか」を考えたり、詳細なペルソナ設定がまだ難しければ、せめて年齢層・性別・地域くらいは焦点を絞って、「どうすればこのターゲット層に対してアプローチできるか」を考えながらデザインすることが重要です。

ここで勘違いしてはいけないのが、「クライアントのため」のデザインでは全くないということです。ここを履き違えると、膨大なクライアントからの修正依頼を全て鵜呑みにして、エンドユーザーには全く響かないサイトデザインになってしまったりします。

さて、ここで質問です。

すこしコードもわかるようになってきたWebデザイナーはどういった分類となるのでしょう?

Webデザイナーは2種類に分けられる

Webデザイナーには、Webデザインと初歩的なコーディングまでしか出来ないデザイナーと、マークアップエンジニアの領域も手広くこなすデザイナーの2種類に分けられます。デザインしかできないWebデザイナーとは言わばコーダーから一歩踏み込んだばかりの人の事と言えるでしょう。

もしくは、デザイン学校卒業の学生や、印刷会社などでグラフィックデザインを学び「印刷は下火だしもういいや、Webしてみたい!」と転職を決意し、この世界に足を踏み入れたタイプの人に該当します。

そもそも原点回帰するなら、Webデザインとは、グラフィックアートやイラストとは違い、最終的にはhtml化をしないといけない媒体です。

つまりいくらデザイン単体で優れていても、html化するにあたって、構造が複雑すぎたり、いくつものjsや無駄なcssをばりばりに使ってユーザービリティが下がってしまってはエンドユーザーにストレスを与えるだけの、無駄なデザインとなってしまうのです。

だからこそ、マークアップを最初から意識しているWebデザイナーとそうでないWebデザイナーで分けられるのです。

当然の話ではありますが、前者のデザインしか出来ないWebデザイナーでも最低限度のHTMLの知識はあるので、Webサイトデザインとしてはあらかた形にはなりますが、根底からマークアップを理解し制作したWebデザイナーのサイトデザインの場合は、デザイン要素とマークアップ要素が完璧に合致し素晴らしいWebサイトになるのです。

ですので、採用の際など特に、一概にWebデザイナーと言っても優れているか否かを見極める際は「マークアップエンジニアの範疇もこなせるか?」という基準に基づき、見定めることも重要です。

まとめ

2017年を迎えたWebデザイナーの皆様、あなたがどこを目指したいか、目指すべきか決意を新たにしていただけたでしょうか。

今年は去年よりも一歩踏み込みコーディングを前提とし、html構造をより深く理解し、さらなるステップとしてSEOやアクセシビリティ、保守性やエンドユーザーへの訴求にも配慮したWebデザインをできるよう、邁進してください。

このエントリーをはてなブックマークに追加

筆者

Y.Nakatani

二児の母で、Bigmacに入って2年、Web業界は丸7年。デザイン以外は繊細さのかけらもない杜撰さ。 好きな色は浅葱色とか、新橋色とか、シアン系の色味。好きなタグはsectionとolタグ。ほっとくと擬似要素多用。好きなフォントはヒラギノのW0。今一番してみたいことは、語尾にハートマークをつけてみる。

筆者が最近執筆した記事