こちらは購入いただいた方だけが読める有料記事です。
検索で引っかからないようにしており、一般公開もされていません。
ブックマークをしていただければと思います。
実務経験がないマークアップエンジニアが案件で事故らないために
そもそもマークアップエンジニアの立ち位置知ってる？
web制作のフローはこのようになります。
①ディレクター
②デザイナー
③マークアップエンジニア(フロントエンドエンジニア)
④バックエンドエンジニア
このように、実務ではデザインの次の工程がマークアップです。
デザイナーからデザインデータ(PSDかXDが多い)をもらって作業がスタートします。
マークアップエンジニアの前はディレクターがクライアントと主に連絡を取り合います。
その後、webサイトの仕様などを決め、デザイナーがそれをカタチにしていきます。
その後デザイナーはデザインしたデザインデータを、マークアップエンジニアにバトンタッチします。
クラウドワークスなど、副業をする場合でも、依頼主はこのディレクターかデザイナーかのいずれかです。
もしくは、その両方を担当している方とコミュニケーションを取り合うことになります。
マークアップエンジニアはwebサイト制作の役割の一部であることをまずは理解しましょう。
デザインを確認する
それではデザインデータをもらってコーディング作業を開始します。
コーディングを始める前に、あらかじめ確認しておかないといけないことがあります。
デザインデータの形式
コーディングするためのデザインデータの形式を確認してください。
- PSD
- XD
- Sketch
- Figma
デザイナーさんによってデザインするアプリケーションが違います。
ですので、アプリケーションによってデータ形式が変わります。
ちなみにSketchデータはXDでも読み込み再現できるので、Sketchをインストールする必要はないです。
コーディング用の写真素材をつくろう
あらかじめデザインデータを確認できるようにアプリケーションをインストールしておいてください。
お仕事でコーディングをするときは、参考書のようにあらかじめ画像素材は用意されていません。
学習時は困りませんが、実務に入るとマークアップエンジニア自身で写真素材やテキストデータをデータから書き出さなければいけません。
デザインデータから写真やロゴを抜き出して、コーディングできるようにすることを“書き出し”と呼びます。
マークアップエンジニアは素材を作れないといけません。
クライアントは画像素材を用意しません。
それに、全ての画像素材をあらかじめクライアントが用意していたとしても、それが自分が使いたい範囲の画像や形式だとは限りません。
この時に、自分でデザイン素材を作れないと、何度もコミュニケーションを繰り返さなければいけないようになるだけではなく最悪の場合、失注したり信頼を失います。
スキル系教材では語られていないことなので、必ずマークアップエンジニアもデザインアプリケーションを操作できるようになりましょう。
あくまで、マークアップエンジニアはデザインスキルを上げる必要はまったくありませんので、写真素材は書き出せるようにしておいてください。
アウトラインデータと元データ
アウトラインデータと元データをデザイナーにもらうことがよくあります。
アウトラインデータとは、テキストを図形の形式に変更したものです。
これがないと、デザインが正しく表示されないケースがあります。
アウトラインデータをもらうか、正しくテキストが表示されるようにフォントデータをもらってください。
フォントはライセンスがないと使用できません。
最悪の場合、テキストを画像で書き出す必要があります。
このように、フォントを自分も持っていないとデザインを再現できません。
webフォントは準備してもらえるか
Google Fontsであれば特に気にすることがないですが、Adobe FontsはAdobeアカウントにフォント使用のライセンスが依存します。
Adobe Fontsのwebフォントを使う場合はスクリプト(CDN)をクライアントからもらいます。
エンジニアのアカウントでAdobe Fontsをクライアントのサイトに埋め込むことは規約違反になります。(2019.12.31にUpdateされた)
実装を担当したエンジニアのアカウントが消えたら、サイトのフォントが正しく表示されなります。
なので、クライアントに説明してフォントのCDN（フォントベンダーからの絶対パス）を頂戴する必要があります。
Adobe Fontsに関するレギュレーションはこちらです。
テキスト・写真はダミーではないか確認しよう
お客さんによっては、まだ決定では無い画像や文言を使用していることがあります。
デザインを最初に見たタイミングで、すべてが決定事項が確認してください。
そうじゃないと納品後に何度も修正対応させられる可能性もあります。
あらかじめいつまでに全部を決定するかを聞いておくといいでしょう。
その上で、後日対応を有料か無料にするか決めます。
納品方法と仕様の確認
納品方法は最初に聞いてください
納品方法は何パターンもありますが、主に
- 納品方法
- データ納品
- 本番アップまで
- 本番アップとネームサーバーの変更
この3つのいずれかが多いです。
LPを納品する場合はデータ納品が多いと思います。
WordPressだったら公開までお願いされることも多いかとおもいます。
なので、本番公開するにはサーバー情報を事前に頂かないといけません。
サーバーによって動くPHPのバージョンも違うので、あらかじめ細かく聞いておく必要があります。
納品方法はサーバーの知識を多少は知っておく必要があるので、実務経験がないエンジニアが事故る可能性がもっとも高いです。
しかもレンタルサーバーなのかAWSなのかでも全然違います。
私も実は納品時にモメた苦い経験があります。
今考えれば、データを納品すればいいと思い込んでいた私の落ち度です。
作って最後にモメて支払ってもらえなかったら、笑い話にもなりませんよね。
納品先のURLを確認しましょう。
納品後に公開されるURLを聞いておいてください。
フォルダの名前がそのままURLになるのは皆さんご存知ですね？
また、絶対パスや相対パスかなど、パスの指定がこれで変わってきますよね。
あらかじめ公開時にバタバタしないように聞いておきましょう。
対応するブラウザのバージョン
あらためて言うまでもないですが、ブラウザによってCSSの解釈が違います。
当然それを加味してマークアップします。
どこまでのバージョンを対応ブラウザにするか、あらかじめ聞いておきましょう。
古いブラウザをレガシーブラウザと言います。
あまりに古いブラウザに対応する場合、有料になることが多いです。
どのブラウザのバージョンまでを担保するかを確認しておいて下さい。
対応する文字コードが違うと死ぬ
HTMLには文字コードというものがあります。
ほとんどのサイトではUTF-8という形式ですが、古いサイトではたまに違うものがあります。
古めのサイトにページ追加をする場合は、これを最初の段階で確認しておかないと過労死します。
私の一番の苦い思い出は納品前に『Shift-JISで納品してください』という内容のレギュレーションが後から出てきたことです。
さっくりいうと、文字コードとは、テキストを表示させるための文字の形式です。
後から変更するためには、miなど、文字コードの変換が可能なテキストエディタで変換する必要があります。
対応するデバイスを確認しよう
国内のサイトであれば、iphoneで見られることを想定することが多いですが、何より注意すべきはiPadの時の見え方です。
iPadで表示する時にスマホのレイアウトに変えるか、PCの見え方をさせるかは決めておきましょう。
デザインによって、どちらがいいかは一緒に考えてあげるほうがいいです。
タブレット端末はタップするけど、ブラウザではマウスオーバーのインタラクションがあります。
この二つのユーザー動作の違いで、使い勝手が破綻しないようにデザインされていないといけません。
デザイナーが考えずにデザインしているケースも見られますが、マークアップする時になって気づくようでは半人前です。
おまけ：納品前のチェック
SNSでちゃんと共有されるか
SNSが共有された時、どのようにタイムラインに表示されるかは知っておかないといけません。
Twitterのバリデート
Twitterでのタイムラインの見え方を確認できます。
Facebookのバリデート
Facebookでシェアされる時の確認ができます。
デバイスチェック
もちろん実機でチェックするのが確実な方法であるのは言うまでもないのです。
でも、世の中には無数の機種があります。
スマホであれば、AndroidとiPhoneで確認します。
PCであれば、VirtualboxにWinをOSごとインストールして動作を確認することができます。
macをつかている人はIEをインストールしておきましょう。
参考
Google Analyticsがきちんと動作しているか確認しよう
あらかじめGoogle Analyticsのタグをクライアントからもらっておきましょう。
せっかく公開したとしても、どれだけのアクセスがあったかどうかわかりません。
ここを忘れていると、マークアップエンジニアとして致命的です。
なので必ず納品する前にAnalyticsのタグをもらうことを覚えておきましょう。
まとめ
web制作に長く携わっている身として、これからwebの世界に入りたい方に、何か先人からの恩返しができないかと思いました。
そこで去年から、HTML・CSS/WordPressのマークアップをこれまで260人以上の初学者に教えてきました。
初学者の彼らがwebに興味を持つきっかけは十人十色のようです。
そして教えていくうちに気づいたことがあります。
プログラミングに加えてリモートワークまで流行ってしまったものだから、『マークアップエンジニアの仕事内容』をわかっていないのに学習している方が多すぎる。
コーディングはわかってきたとしても、仕事として何をすべきかがイメージつかないんだと思います。
でもよく考えたら当たり前ですよね。
自分も他の業界・業種を理解していないのと同じ。ごく自然なことだとおもいます。
マークアップを仕事にすると、前後の職域も程度知っておく必要があります。
それを今回は理解してもらえたんではないでしょうか。
この記事を通じて、もっとweb制作の品質と制作者のリテラシーがアップすることを願います。
また、オンラインで職業訓練して欲しい方がいらっしゃれば相談に乗りますので、こちらからお問い合わせください。
ほなね