投稿日：2019年4月5日
マークアップエンジニア／コーダーのスキルと一緒に働くために必要なこと
マークアップエンジニアやコーダーと呼ばれている人たちの頭の中はどうなっているのかについてみてみたいと思います。どのようなことを考え、どのようなことにこだわりを持って日々の制作に取り組んでいるのか。マークアップエンジニアやコーダーと呼ばれる人たちは世間一般には理解しがたい存在だと思っていて、何をやっているのか、何のためにやっているのかということがわからない方も多いと思います。
今日は私がマークアップエンジニア／コーダーとしては日々こだわりを持って考えていることについて書いてみたいと思います。
コーダー／マークアップエンジニアの初心者の方にもこの世界を知るために読んでほしい記事ではありますが、コーダーの仕事を深く理解していないウェブディレクターさんに一番読んでほしいです。思ったよりも奥が深いということが理解できると思います。
マークアップエンジニア／コーダーのスキル領域
ぱっと思いつくだけで以下の領域が思いつきました。
- デザインの再現性と見た目のきれいさ
- ユーザーの利便性や操作性の良さ（クリック領域やマウスホバーアクションなどのインタラクション）
- www（ウェブ）の歴史と時代の変遷への理解
- HTML要素の意味と文書構造（各要素の意味と文章のアウトライン）
- 画像の対応（デバイスによる出し分けや軽量化）
- 機能の実装（PHPやJavaScriptの実装やWordPressプラグイン開発）
- CMSへの理解（WordPressなど）
- CSS設計（保守性の高いCSSの記述／チームで開発するということ）
- 開発環境（モダンなビルドシステム／StyleLintやESLintへの対応）
- チームでのコラボレーション（Gitなどのソース管理への理解）
それでは、それぞれいていくことにしましょう。
デザインの再現性と見た目のきれいさ
見た目が一番大事
エンドユーザーさんや間に入っているデザイナーさんやウェブディレクターさんが見ている大部分はこちらの領域であるという認識が私の中にあります。はっきり言いきってしまえば、エンドユーザーさんは見た目のきれいと次の項目である利便性以外の部分については理解が難しい領域であると私はそう考えています。
したがって、何よりも一番優先すべき項目としてもっとも重要な項目として見た目のきれいさやデザインの再現性があげられるわけです。
デザインデータという平面図でウェブは表現できない
デザインの再現性を考えた場合に重要な要素として、コンテンツ幅に関する議論がありますが、デザインデータが960pxのコンテンツ幅であったからと言って、私はコンテンツ幅が画面幅に従って1200程度までは大きくなるようなコーディングが必要だと考えています。このあたりの考え方の標準は現状ありませんし、制作文化によって様々です。
ただ、私個人としては大画面化が進む現代において980pxや960pxまでのデザインというのは正直時代遅れだと感じています。980pxや960pxなどを対象としたデザインから更に大画面に展開した場合には文字の回り込みの場所が変わったり、画像の大きさが変わったりしてバランスが変わることも多々あります。これら微調整を行うのもコーダー／マークアップエンジニアの仕事ですが、私のようにこのような見た目の微調整が得意ではない（感覚としての美的感覚が不足している）タイプの人間もいます。
このあたりは考え方の問題でもあるし、やり方一つとっても難しい領域なので時間をかけてデザイナーさんやウェブディレクターさんとの関係を作っていく必要があるのではないかと考えていました。
でも見た目がすべてじゃない
ただ、はっきりお伝えしておくとお客様が見た目の部分しか判断できない状態であったとすれば、その状態からそれ以外の項目を理解させられるようにすることがディレクターなどのお客様の間に入っている方々の責任だと私は思います。コーダー／マークアップエンジニアがどれだけこだわりを持って日々学び続けてきた技術について能力を発揮してもそれらを理解することが出来なければコーダー／マークアップエンジニアの力を発揮させることは難しいでしょう。
次の項目も一般的には理解しやすい領域ですし、デザイナーとしての領域です。
ユーザーの利便性や操作性の良さ（クリック領域やマウスホバーアクションなどのインタラクション）
コーダー／マークアップエンジニアの方は「クリック領域が狭いから広げよう」を素直に思える感覚を持っている必要があります。これはデザインデータに指示がなかったとしても直感的に対応しなければならない領域です。その他マウスホバーなどのインタラクションについても同様でユーザーのストレスを下げるための工夫やユーザーからの視認性を上げたり理解しやすいデザインをコードに落とし込むということが必要になります。
- クリック領域
- ホバーアクション
- アニメーションなど
以降はお客様には理解できない領域です。お客様との間に入っている方々はこれらのすばらしさをお客様に伝えるための努力を怠るとコーダー／マークアップエンジニアの方々の機嫌を損なうどころかあっという間にその場からいなくなってしまうでしょう。日々努力していることをもっと認めてあげてください。
www（ウェブ）の歴史と時代の変遷への理解
HTML4 → XHTML → HTML5 と時代の流れを知っていれば昔の古いサイトを改修する機会などに役に立つ知識になりますし、HTML文法上何が正しくて何が正しくないのかということが理解できる状態になります。その他には、ブラウザのIE6の時代から現代におけるChromeなどに搭載されたwebkitが標準になるまでの流れなどを理解しているかどうかも一つ重要な要素です。なぜ jQuery が生まれたのかを知っていれば jQuery を使う意味が分かります、現在ははっきり言って使う必要がだいぶん減ってきているということがわかりますよね。
これらをはじめとしてウェブを取り巻く時代の変遷をきちんと理解しているかどうかが仕事のクオリティに直結すると考えていますので、学んだことがない方はぜひ学んでみてください。
画像の対応（軽量化とデバイスによる出し分け）
以下に記載の画像への対応については内部SEO対策のうち速度改善の項目としては非常に重要です。SEO対策を行う上でのベースとなる考え方なのでSEOに取り組む場合には確実に押さえるようにしてください。ユーザーの利便性の面でも表示速度が画像によって遅くなりすぎるとよいことは一つもありません。
画像のファイルサイズ軽量化
TinyPngというサイトを利用すれば画像のファイル容量を圧縮することができます。画像を圧縮することによって表示速度が改善し、特にスマホでの評価が大きく上がります。誰でも簡単に無料でできることなのでぜひトライしてみてください。
TinyPng
https://tinypng.com/
解像度の異なるデバイスによる大きさの異なる画像の出し分け
レティーナディスプレイへの対応として2倍サイズの画像を使用する場合がありますが、レティーナディスプレイではない解像度の環境にとっては表示速度が遅くなるマイナス要素でしかありません。解像度によって異なる大きさの画像を出し分けるための方法として srcset 属性や sizes 属性を img 要素に付与する方法があります。詳しくは以下のページに記載がありますので覗いてみてください。
https://flares.jp/digimag/optimize-wordpress-images-site-improvement-speed-improvement/
HTML要素の意味と文書構造（各要素の意味と文章のアウトライン）
内部SEO対策として重要なのがHTML要素の意味をきちんと理解しているかどうかということです。例えば引用を表す blockquote 要素に対して引用元を表す cite 要素をきちんと使用しているかどうかや、時間を time 要素できちんとマークアップしているかどうか、dl要素と ul 要素と ol 要素などの意味をきちんと理解して使い分けているかなど、数えればきりがありませんが上記のようなこだわるべきポイントがたくさんあります。
もちろん文章のアウトラインという意味では見出し（heading）要素をきちんと利用する必要がありますし、この部分ができていないと内部SEO対策としての基礎は出来ていないことになります。これが出来なければお金をもらうことなんてできないと個人的には考えていますが、世の中どうやらそうでもないようです。この領域がきちんとした状態になっていないサイトがまだまだ多くあるようなのです。ウェブディレクターさんは見た目だけ確認するのではなくきちんとソースコードも読んであげてくださいね。
内部SEOを含めてSEO対策については以下の書籍がすごくお勧めなのでぜひ目を通してみてください。
現場のプロから学ぶ SEO技術バイブル
CMSへの理解（WordPressなど）
中小企業様がお客様の場合には、WordPressで作ってしまうことが多いのですが、WordPressを使いこなせるということはコーダー／マークアップエンジニアにとっては重要な要素の1つになってくると思います。それもただWordPressを使ってサイトを作れるというレベルではまだまだで、どうしてその機能を利用して実装したのかというところまで論ぜられるような状態になっている必要がありますよね。まずは勉強することが絶対に外せませんのでWordPressに関する書籍をいくつか読んでみてください。導入書を読み終えた後に読むべきおすすめの書籍は次の書籍です。
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
こちらの書籍を理解できるくらいのレベルに達すれば基本的には何でもできる状態にはなってくると思います。
機能の実装（PHPやJavaScriptの実装やWordPressプラグイン開発）
こちらについては一般的にプログラマとしてのスキルを持ち合わせているかどうかということになります。機能を実装する上で必要な知識などを持ち合わせているか、これまでにどのくらいのプログラムコードを書いてきたかという経験値が重要な要素です。
基本的にはOSS（オープンソースソフトウェア）などを再利用するのではなく、開発言語レベルであれば、だいたいのことは簡単に実現できるものです。PHPやJavaScriptなどの言語の基礎学ぶことから初めて、小規模なライブラリが扱えるようになってくれば世の中の頭のいい人が作ったすごく高機能なソフトウェアを無料で使用することが可能です。
この点についての私からのメッセージは出来るだけポピュラーなライブラリを使用するということと、出来るだけオリジナルのコードを書く量を減らすということが重要だということです。のちの保守を考えるとコードを書けば書くほど解析する時間が必要になります。自分以外が書いたソースコードを解析する場合を考えると、その量が多いのと少ないのでは少ない方が良いに決まっていますね。なので、出来る限りソースコードを書く量を減らすという努力を行うようにしてください。それがチームで制作を行う人にとっての最低限のマナーです。
以下の書籍は私も読みましたが、PHPの基礎を押さえるには最適な書籍だと感じています。
プログラミングPHP 第3版
CSS設計（保守性の高いCSSの記述／チームで開発するということ）
CSS設計とは。
CSS設計は、CSSを記述する時のルールとなるものです。 プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。
FLARESでは現在FLOCSSを基本としたクラスの命名基準でコーディングを行っています。CSS設計などは初心者レベルからは一歩踏み込んだ領域になってくるため、まだまだスクールなどでも教えていない新しい領域です。現状ではセレクタの詳細度をできる限り低く保つための工夫やクラス間の責任分解の仕方などが主な領域になります。これらに加えてクラスの命名規則が各CSS設計の手法によって異なるのでそれらに従ってコーディングすることによって意味が把握しやすくなります。
私なりに以下のページにCSS設計についてまとめてありますので、もしよろしければお読みください。
https://flares.jp/digimag/css-design-textbook/
CSS設計に関する書籍もご紹介します。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
開発環境（モダンなビルドシステム／StyleLintやESLintへの対応）
npm, yarn, gulp, webpack 等々、様々なビルドシステム（正確にはビルドシステムではないものも含まれますがここれはビルドシステムという用語に統一します）がありますが、これらを使いこなすことによって開発効率の効率化を図ることができたり、品質担保が容易になります。
例えば StyleLint や ESLint を利用することによってソースコードレベルでの間違いをその場でリアルタイムに指摘される状態を作ることができ、最終的に出来上がるソースコードの品質が向上すると考えることができます。上記でも挙げた画像のファイルサイズの圧縮なども自動化することが可能です。
チーム間でこれら開発環境を共有することによってプロジェクト全体の速度向上に一定の効果があると考えることができます。ただし、使いこなせればの話です。実際には少し敷居が高いことも多く、文化としてこれらの環境を使いこなすことが普通になっているような会社でなければ逆効果にもなり得るでしょう。いや、ほんと難しい領域です…
Gulpというビルドシステムもまだまだ現役だと思います。ちょうど去年の4月頃に発売された書籍を1冊だけご紹介します。私も読みましたが、この1冊を読むとできることが結構増えますよ。
Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門
チームでのコラボレーション（Gitなどのソース管理への理解）
最後は先祖がえりを防いだりする目的で導入されるGitというソース管理システムもマナーとしてちゃんと使えるようになろうねという話です。開発プロジェクトにおいてGitを使う機会が結構増えてきていますが、基本的な使い方は非常に簡単なのですぐに覚えることができると思います。チーム全体として使い方を覚えて、便利な環境に慣れてしまうともう後戻りはできません。
ここ最近ではGitHubのプライベートリポジトリが無償化されたこともあってGitHubがオススメです。エンジニア間の横の繋がりのあるコミュニティになっています。
GitHub
https://github.co.jp/
Gitを学ぶための書籍を1冊だけご紹介します。私がGitを学んだ時に購入して読んだ書籍です。わかりやすくまとまっています。
Gitが、おもしろいほどわかる基本の使い方33
マークアップエンジニアに伝えないといけないこと
上記が私の中でのフルスペックです。プロジェクトによって必要なものと不必要なものをより分けて何を実行するかを判断する必要がありますが、個人的には出来る限りフルスペックな環境で開発を行いたいと考えています。マークアップエンジニアに伝えるべきことで絶対に外せない重要なことは何かについてみていきましょう。
制作するウェブサイトのウェブ集客の戦略
私の中でのウェブ集客戦略とは主にどのチャネルを利用して集客を行うかということです。ウェブ集客のチャネルには主に以下の6項目があります。
- 自然検索
- ソーシャルメディア
- 広告
- 外部サイト
- メール
- アプリなどのダイレクト
このうち特にフォーカスしなければいけない領域は自然検索です。HTMLマークアップの各領域において特に重要だと言われている領域についてはすべて自然検索経由での流入を獲得するための方法論でしかない場合が多いです。要するにGoogleなどの検索エンジンにとっての価値があるかどうかという視点です。
自然検索経由での流入を確保する必要がないのであれば、そもそも対策が必要のない施策が多くあるという現実に気が付くことができます。そして、それはコストにも直結する部分だと思います。
このことからウェブ集客の戦略は必ずコーダー／マークアップエンジニアに共有を図るようにしてください。
制作チームの存在／誰がそのサイトを修正するのか
このことも重要ですね。ウェブサイトの最終データはHTMLなどのコーディングデータです。このコーデイングデータをだれが変更する可能性があるかについてはきちんと押さえておく必要があるでしょう。あまりにハイスペックな環境で制作を進めていてもそれらが使いこなせない人が保守をしなければならない場合にはどうしようもなくなる場合があります。
したがって、どの程度の技術レベルの方がサイトを保守するのか、自分以外にサイトを保守する方々はどういう方々なのかということを事前に把握しておくことは重要なことだと思います。
まとめ
いかがだったでしょうか。コーダー／マークアップエンジニアとしてあまりにも評価されないことが悔しかったので普段考えていることをまとめてみました。
「15万円でこれだけ作ってください。」と平たく言われても、僕の中では上記全て詰め込んで15万円という認識になってしまいがちです。それは自分の中でクオリティを落としたくないという気持ちとこだわりがそこにあるからです。そして地方におけるコーダー／マークアップエンジニアの単価は非常に安いのですが、上記全部を詰め込んでこの単価が実現できるのかと考えるとおそらくそれはNoとなると思います。
1ページ1万円という格安単価でコーディングの仕事をよくやりますが、結果的にその単価感で対応しようとスケジュールを引くと品質担保ができないということに気が付きました。詳細度を低く保つためのクラス設計が行えていても、StyleLint対応のきれいなCSSを書いてもディレクターさんやデザイナーさんは全く評価をしてくれませんからね。ただ、そういった意味での低品質なものを世の中に残していきたくないという気持ちが非常に強いためそういった面で葛藤することが非常に多いです。
集客戦略上効果があると思えるサイト制作にしていく必要もあるし、作って終わりを脱却したい気持ちが非常に強い中、地方都市の温度感としてはまだまだ時期尚早かなぁという感覚がどうしてもなくなりませんが、ポリシーとして曲げることをせずに誰かが応えてくれるそのときを信じて現状維持の姿勢は崩さないと心に決めています。
稼げなくて生活ができなくなると困るのですが、きっと理解してくれる方はいると信じていますし、最終的には自分が理想としているウェブ人材がたくさんいる世界が地方都市にもやってくると嬉しいので、そんな未来を目指して地道にできることをやっていこうと思います。
最後に弊社のコーディング代行のサービスをご紹介して終わりたいと思います。このページで僕がこだわっている内容を盛り込んだコーディング代行のサービスです。
https://flares.jp/coding/
