おすすめ情報

おすすめ情報

2017年1月3日

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

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

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

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

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

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

Webデザイナーを含む、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デザインをできるよう、邁進してください。

このエントリーをはてなブックマークに追加
メルマガ登録