「仕上がりチェック」は不可欠！Webディレクターのコーディングにおける役回り
はじめに
全部読むと"集客できる"Webサイトが作れる――。そんな記事を目指して。
成功しているクリエイターの実例を通じて、クリエイターの考え方や技術についての知識をお伝えしていきます。
【執筆クリエイター】
Webディレクター、コンテンツディレクター
山田 尚史
顧客からの「ありがとう」獲得数に定評があるWebディレクター。サービスやビジネスを深く理解をするためにも、顧客の懐に潜り込むスタイルのディレクションを得意とする。東証グロース上場のIT企業勤務時は300社以上のディレクションに関わった経歴を持つ。企業ブランディング支援の経験を持ち、ブランドプランナーの講師として登壇歴もある。また、コンテンツディレクターとしてメディア運用の責任者も歴任。メディアの構築やコンテンツ企画、反響分析にも従事した。
Webサイトが完成形に近づく過程で欠かせないコーディング。制作したデザインがいよいよブラウザで見られるようになる段階だけに、このタイミングでのミスは当然ながら絶対に避けたいところです。ただ、他のクリエイターの対応領域と同様にWebディレクターからの指示内容いかんでは、コーダーと上手く共通認識を得られないケースもあるでしょう。
コーダーと上手く連携し、自信を持って顧客提出できるコーディングに仕上げるためには、どんなことを意識すべきでしょうか。個人的に工夫しているのは、機能や顧客要望的に譲れない点とコーダーに任せる点で緩急をつけることです。そのためにはコーダーへの指示の仕方がキーになります。
◆淡白な指示だと想定外の出来に仕上がる恐れも
コーダーに限定されない話ですが、Webディレクターからデザイナー、ライター、エンジニアに依頼する際は依頼の意図を明確にすることが先決です。「この作業をやってください」という単なるお願いをするだけなら、それは「作業者への依頼」と言えます。コーディングのプロであるコーダーというクリエイターへの依頼だからこそ、納得して対応してもらえるようきちんと手ほどきをすることがWebディレクターの務めです。
指示内容だけの淡白な指示書を展開すると、まったく想定していなかった内容のコーディングに仕上げる危険性もあります。もし成果物が全然違う仕上がりになってしまえば、その修正依頼をまたコーダーにお願いすることになるので、完全なる二度手間です。そうした二度手間を防ぐ意味でも、コーディングの意図や理由、顧客背景などの補足情報をきちんと添えることを意識して、なるべく丁寧に指示書を書くようにしています。
経験あるコーダーであれば、要件に加えて目的や意図、背景について明確に伝えれば、コーディング依頼において大きな失敗はないという認識です。「コーダーが意図を汲み取ってくれなかった」と言うのは簡単ですが、クリエイティブな指示書ではなく作業用の指示書になっていないか、自身の指示内容を見返すことをおすすめします。
◆コーディングの仕上がりチェックはWebディレクターの重要業務
制作においてはコーダーのクリエイティブに委ねる部分は多いですが、依頼内容がきちんと反映されているかのチェックはWebディレクターの重要な役目です。内容としては、主に基本的な誤字脱字や表示崩れがないかをチェックします。レスポンシブのサイトはPCとスマホ両方での確認は基本です。今はあまりないですが、ブレイクポイント付近での変な表示になっていないか、横幅を調整して確認していました。かなり細かい顧客の場合は、コーディングデータを提出した後に指摘をいただくことも普通にありました。
後はコーディングにおいてよくあるミスと言えば、画像とHTMLのピクセル数が異なっていて、画像がつぶれて表示されるケースです。よく見ると「画像が変！」ということに気づく感じですね。提出後に発覚してしまうと自分たちのミスになってしまうので、結構意識して厳重にチェックしています。基本的に何か不備があって怒られるのは顧客対応をする自分なので（笑）。チェックの重要性は8割くらいだと思います。
コーディングの制作とチェックの役割を明確に分けるのが必ずしも良いとは限りませんが、それぞれの役割に徹することで顧客満足が得られればそれに越したことはありません。コーダーのクリエイティビティを尊重しつつも、顧客要望の箇所が反映されていなかったり、ミスがあったりした際はしっかり指摘して直してもらうようにコミュニケーションを取ることが大切です。
◆Webディレクターが押さえておきたいコーディング知識
コーダーとのやり取りは持ちつ持たれつの関係性だと言えますが、そうした良好な関係を築くためにも、WebディレクターはWebサイトの構造について最低限の知識を持ち合わせる必要があります。HTML（文章構造）とCSS（文字の色や大きさ、背景、配置といったスタイル）の関係、ディレクトリ構造について理解していないとコーダーに依頼はできません。それどころか会話にもなりませんし、信頼を勝ち取ることも難しいでしょう。
Webディレクターのコーディング知識としては、自身が手を動かせなくてもいいですし、極論を言えばタグのことが分からなくても何とかなります。しかし、繰り返しにはなりますが、HTMLとCSSという2つの言語の役割とその両者の関係性について、ディレクトリ構造については確実に把握したうえでコーダーとコミュニケーションを取るようにしましょう。
他のクリエイターにも言えますが、相手のクリエイティブをきちんと尊重したうえで、自身がお願いしたい対応を明確に、意図や目的が伝わるように依頼する。それがWebディレクターのコーダーとの適度な関わり方なのではないでしょうか。
・・・
ー Twitter
『はいふぁい＠HIGH-FIVE転職エージェント』では、「はいふぁい」編集部員が日常も交えて、クリエイターさんと遊んでいます（情報交換）。使える情報も3割！
ー クリエイターキャリア支援メディア『HIGH‐FIVE』
IT/Web領域クリエイターの転職情報・キャリアコラムを配信中！
１．C＆R社の転職エージェントってなにしてくれるの？
２．具体的な転職事例が知りたい！
３．どんな求人を持っているの？
ー LINE
ー Instagram
