OWIEです。以前、ミーティングに参加した際に雑談混じりに「OWIEさんってどんなお仕事をされているんですか？」という質問をいただきました。
その案件では調整役も担うコーディング担当（コーダー）という立場で参加していたのですが、たしかに「デザイナー」でも「ディレクター」でもなく、ましてや「マネージャー」でもない「コーダー」なる作業者が一体どんな仕事をしているのか理解しづらいかも…と思ったので今回のブログのお題とします。
コーディングとは一体なんの作業？
web制作の大きな流れの中では下記の図あたりです。
デザインを元にwebデータとして表示できるように再構成する作業になるのですが、もう少し噛み砕くと「テキストデータに意味と重みを与える作業」というのが正しい説明かもしれません。
ざっくり分けるとコーディング作業には２ステップある
- マークアップ（テキストデータに意味と重みを与える作業）
- スタイリング（デザインデータの再現）
個人的にですが（あくまで個人的にです）、６：４でマークアップを重要視しています。前述した「テキストデータに意味と重みを与える作業」に関してはマークアップがその役割を担っているため、自分はスタイリングが外れた状況下でマシン（PC、あるいはスマートデバイス）が読んだ際に理解が可能な状態（マシンリーダブル）を予算と作業時間内で可能な限り満たすのを目標としています。
マークアップ
実はマークアップを無視してスタイリングだけ行ってもwebサイトとして成り立つのですが、マシンが読み取るデータにスタイリングは考慮されない（アクセシビリティの点では大いに考慮されますが）ため、正しくテキストに重みを与える必要があります。
以下が例になります。
１．マークアップされていない状態
吾輩は猫である – 夏目漱石（改行）吾輩は猫である。名前はまだ無い。どこで生れたかとんと…
２．マークアップされた状態
（見出し）吾輩は猫である – 夏目漱石
（段落）吾輩は猫である。名前はまだ無い。どこで生れたかとんと…
※引用「夏目漱石 吾輩は猫である – 青空文庫」より
（１）はただの改行された一文として認識されます。それに対し（２）は見出し、段落という役割を振ることで、マシンにとってそれぞれの役割を正しく認識することが出来るようになりました。
以上のことからこれは見出し、これは段落、これは箇条書き…というように正しく役割を振っていくのがマークアップです。
スタイリング
マークアップ後、デザインデータから必要な部品を書き出してデザインの再現を行いますが、もう一つ重要な作業に「スマートデバイス対応」があります。これはタブレットやスマートフォンでの環境下で閲覧する際の仕組みを組み込む作業になります。
※スマートデバイス対応は色々方法はあるのですが、弊社では「PCでの閲覧環境」を整えたあとにスマートデバイス対応を行うようにしています。
例えばナビゲーション部分だと
- PC表示では横一列に並んでいるナビゲーションが
- 特定の画面幅になった際に
- 特定の場所に収納され
- あるボタンを実行するとナビゲーションが全画面に展開される
という仕込みを事前にしておく必要があります。これは特定環境下での動作なので、PC閲覧環境下では動作しないようにしておき、また読み上げブラウザで不必要な読み上げが行われないようにする作業も行います。
文章にすると、マークアップとスマートデバイス対応がきっちり分かれているように見えますが、実際はデザインを元にマークアップ作業とスマートデバイス対応を同時に行い、スタイリングの際に仕組みを設置する…という感じです。
まとめ
ザックリと「コーダー」の役割を説明しましたがいかがでしょうか。デザイナー、ディレクターと比べ、地味なパートですが、コーディングと聞いたらこんな作業してるんだな、と思っていただけたら幸いです。
