ウェブデザイナーとかコーダーとか、マークアップエンジニアとかフロントエンドエンジニアとか、結局なんなのか。

ウェブデザイナーとかコーダーとか, マークアップエンジニアとかフロントエンドエンジニアとか, いろんな肩書きが氾濫しているけど, 結局なんなのか. ググっても, 統一された意見はいまのところ¹見られない.

人に訊かれたときにすぐ参照できるように, 人事部の採用担当者がよく分らないまま語彙を流し込まないように, そして, これらの職業の人々は何をしていて, どこに向かっていくのかを自分のために整理したいので（自分はどれなのか, そして何になりたいのかを知るために）, まとめてみる. ²

ウェブデザイナー³

（イラストはイメージです）

MUST

• ウェブサイトまたはウェブアプリケーションのサイト全体の構造設計ができる⁴.

• ウェブページまたはウェブアプリケーションを前提とした文書の情報設計ができる.
• 業務対象言語の正書法および修辞技法に一定の理解がある.
• ユーザの環境と主要なデバイスの特性について理解している. 「クリック」「スワイプ」などのイベントのインタラクションを考慮できる.
• ワイヤーフレームの設計ができる.
• Adobe Photoshopなどのツールを用いてグラフィックアートの加工・編集ができる.
• Adobe Illustratorなどのツールを用いてベクターアートの加工・編集ができる.
• Adobe PhotoshopやSketch, Adobe XDなどのツールを用いてプロトタイプの作製とプレゼンテーションができる. または, ウェブページやウェブアプリケーションのモックアップを作製できる.

WANT

• ウェブサイトやウェブアプリケーションのコンセプトやブランディングなどの設計指針をドキュメントにまとめることができる.
• ウェブサイトまたは各ページの目的達成のマイルストーンを理解し, アフォーダンスの最大化を考慮できる.
• ユーザの行動を分析し, 改善のためのPDCAサイクルを回すことができる.
• 映像や音声などのマルチメディアコンテンツを編集でき, 必要な場合においてウェブデザインへ導入できる.
• HTML / CSSのマークアップができる. レイアウトやインタラクションの設計においてHTML / CSSのマークアップ工数の見積りができる.
• WordPressやMovable TypeなどのCMSについての知見があり, 設計が必要なコンテンツを自ら提供できる.

コーダー・マークアップエンジニア⁵

（イラストはイメージです）

MUST

• （すでにデザインが仕上がっている場合において）デザインを忠実に再現したウェブサイトのHTML / CSSマークアップができる.
• HTML / CSSの仕様を理解している. XHTMLとHTMLの違いと各バージョンでの仕様をはじめ, ブラウザサポートについての知見があり, 考慮した実装できる.
• 業務対象言語の正書法および修辞技法に一定の理解があり, 校閲・推敲ができる.
• 情報群をもとに見出し, 引用, リンクといった文書構造を整理し適切なコードに反映できる.
• Adobe PhotoshopやAdobe Illustatorなどのファイルから画像などのコンテンツを切り出し, ウェブ標準に最適なフォーマットに変換し反映できる.
• レスポンシブデザインを考慮した設計と実装ができる. ⁶
• jQueryなどのウェブライブラリおよびそれらのプラグインの導入・運用ができる. またはそれらの開発ができる.

WANT

• OOCSSやBEMなどの設計思想に理解があり, 保守性を考慮したマークアップを実装できる.
• CSS3, JavaScript, HTML5 Canvasでのアニメーションを実装できる.
• Bootstrapなどのフレームワークについての知見があり, 導入・運用できる.
• WordPressやMovable TypeなどのCMSについての知見があり, 必要なテンプレートの設計と用意ができる.
• Googleの検索アルゴリズムやSEOの知識があり, 対策ができる.

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

（イラストはイメージです）

MUST

• コーダー・マークアップエンジニア の章で定義したMUST / WANTの要件を満たしている.
• Node.js等についての知見があり, npm等と併せてウェブサイトおよびウェブアプリケーションの構築ができる.
• バージョン管理の知識があり, git等の運用ができる.
• JavaScriptの最新仕様についての知見があり, 各種ツール群⁷と併せて実装・運用ができる.

• 各種フロントエンドフレームワーク⁸についての知見があり, 導入・運用ができる.

• OAuthやAJAXについての知識があり, サーバサイドのAPIを考慮した実装ができる. 各種REST APIの導入ができる.

WANT

• ウェブデザイナー の章で定義した項目を満たしている.
• PHPやMySQLの知見があり, 必要に応じた実装ができる.
• 英語での読解およびドキュメンテーションができる. ⁹

• リーンメソッドやスクラム等の開発プロセスについての知見があり, ウェブパッケージやウェブアプリケーションの保守・運用をマネジメントできる.

---

1. 2017年2月1日. ↩

2. 言葉の意味は流動的で変遷が激しいので, 原則この記事は更新しない. ↩

3. 個人的には子音が３つある単語の最後の促音便は省略したいのだけど, 市民権を得ているのは「デザイナー」である. ↩

4. 「できる」という言葉は抽象的で広汎だが, ここでその詳細に言及し始めるとキリがないのであえて使っている. 以下も同様. ↩

5. 本来コーダーとは「コードを書く人」という意味でプログラマ全般を指すが, HTMLとCSSのコーディングを行う作業者を指す場合が多いようだ. なお, コーダーとマークアップエンジニアを別な意味で用いるという主張も見られるが, 「ウェブデザイナー」「フロントエンジニア」の中間職として定義するため, ２職種に分類する必然性を感じずここでは同義として処理する. なお, 「HTML / CSSを書けるだけの人」という意味で「コーダー」という言葉を意図的に使う場合はあるようだ. ↩

6. レスポンシブデザインのデザインモックを作製するのはウェブデザイナーだが, 1px単位で全パターンが用意されるわけではないので, あらゆるブラウザ幅での再現性はマークアップの段階での考慮が必要になると考えられる. ↩

7. bower, browserify, webpackなどが挙げられるだろう. ↩

8. 有名どころではBackbone.js, AngularJSやReactなどだろう. これらに付随する, FluxやReduxのフローもここに含まれる. ↩

9. 多くのウェブパッケージやウェブフレームワークのドキュメントは英語で記載されており, またドキュメントを残す際も英語での記述を必要とされる場合があるため. ↩