調査・研究レポートReport

先ほどからTwitterで適当につぶやいていたらコーディング会社なりのウェブサイト制作の鉄板パターンについて思いついたので記事にまとめてみることにしました。題して「低予算のウェブサイト制作における合理的な制作黄金パターン｜コーディング会社の立場から」です。コーディングの工程に予算を割くことに重要性について書いてみます。

低予算でウェブサイトを作る場合の鉄板制作フロー

ウェブサイトの制作業務は印刷会社や広告デザイン会社が担っている場合が多く、コーディングなどの技術面が得意でない場合が結構あるのが現実だと認識していますが、弊社においてはクリエイティブな側面を持ちつつもコーディングやプログラミングに強みを持っているので、デザインに強みを持つ会社とは少し違った目線を持っています。コーディングが得意という強みを生かせる枠組みでもっとウェブサイトの制作を合理化できないか考えていたら次のような流れを思いつきました。

• ディレクションは少し多めの予算
• デザインはトップ1ページに予算を集中
• コーディングは少し多めの予算

上記についての私のツイートは以下の通りです。

コーディング会社なりのウェブサイト制作のやり方としては有りな気がするな。

ディレクションは少し多めの予算
デザインはトップ1枚の予算
コーディングも少し多めの予算

この枠組みでやっていければエンジニアが喜ぶと思うな。エンジニアやったことない人には思いつかない枠組みだと思える。

— 山口 真／FLARES／歌うグロースハッカー (@shinroh) July 11, 2019

ディレクションには少し多めの予算を割く

ディレクションという言葉は魔法の言葉なのでその内訳を見てみると、私にとってのディレクションとは次の内容を含んでいます。

• 顧客折衝／顧客対応／写真撮影
• サイトコンセプトの作成
• サイト構成の検討
• 原稿の作成
• ワイヤーフレームの作成

デザインコンセプトの決定などは数回の顧客訪問で確定することが多いのですが、ワイヤーフレームや原稿の作成についてはきちんとお客様のご意見を反映していく必要があるため十二分に予算を割いて時間を十分にかけられるようにする必要があります。現状では、弊社の場合はこの工程を私が担当しています。

顧客折衝／顧客対応／写真撮影

顧客折衝とは、顧客先にご訪問しお客様とお話をしながら制作内容を詰めたりヒアリングする時間のことを指しています。せっかく訪問するのであれば、別途カメラマンをアサインする予算を頂けない場合には、必然的に写真の撮影まで行ってしまうことが効率的です。なので、顧客訪問の際の写真撮影までを含む概念です。

サイトコンセプトの作成

サイトコンセプトとはサイトの目的、集客チャネルの検討、ターゲットユーザー層の検討など、ビジネスサクセスを得るために必要な要件を整理することを指しています。

実際にはヒアリングを行いながらこの内容を整理してその場で顧客に議事録という形で提出してサイトコンセプトを固めてしまう場合が多いです。逆に言えば、顧客先に訪問したときにサイトコンセプトとなる情報をアウトプットできなければ顧客先に訪問する意味がないとも言えます。ウェブサイトの制作も無料ではないので、ウェブサイトに対して投資をしていただけたのであれば、投資に見合った効果をお返しする必要がありますから、確実にお客様にとって価値のあるものにするという意識が必要です。後は論理的にマーケティング的な着眼点で分解をして文書に落とし込めば完了です。

サイト構成の検討

サイト構成についてもヒアリング時に即座に固めてお客様にご提出することが重要です。必要なページをリストアップしながら予算と相談ですね。サイト構成に検討にはサイトマップを作成します。

原稿の作成

原稿とは、ウェブサイト閲覧ユーザーに向けてお客様が伝えたいことを文章にまとめたものです。多くの場合にはGoogleドキュメントやWordのファイルにまとめます。原稿がない状態でデザインを進める案件もあるのですが、弊社においては出来る限り原稿ファーストな制作フローを心がけています。原稿はお客様の想いを反映するものであるため「原稿がない状態」＝「想いがない状態」とも言い換えることができるためです。

とはいっても最初から完璧な原稿である必要はありません。原稿は修正することができるので、ある程度方向性が決まって、その方向性に合った文章が作成されていればそれで問題ありません。ドラフトを作成さえしてお客様にご提出すれば、それをたたき台としてお客様の意見が反映できる場合もありますし、そのままご提案が通る場合もあるでしょう。

原稿作成に当たっては、お客様先にご訪問をし、一緒になって原稿を作成していく時間を取るのも一つです。長時間一緒に時間を過ごしながら「あーでもない、こーでもない」とお客様の意見をいただきながら原稿を作成して、その場でFIXさせてしまうのが最も時間を省略できる原稿作成手法であると私は考えています。お客様のご意見をリアルに反映させるためにも有効な手法ですし、制作ディレクターとしての自分の意見も反映させることができて、なおかつその場でお客様の了承をいただける素晴らしいやり方です。

作成した原稿に即したデザインテイストを作りこむことがデザイナーの仕事なので、そのインプットとなるデザイン文書をきちんと作りこむことが重要です。

ワイヤーフレームの作成

ワイヤーフレームとは、ウェブサイトの各ページ内に配置される各要素を実際に図として書き出した文書のことです。ワイヤーフレームを作成するためのツールとしては、Adobe社のXdなどがあります。弊社でも現状ではXdを使用しています。

ワイヤーフレームも原稿と同様にお客様にご提出するためのたたき台を作成してご提出するとお客様のご意見をいただくことができるものです。それら意見を反映しながら少しずつブラッシュアップを重ねていきましょう。

また、ワイヤーフレームだからと言って写真を埋め込まないわけではありません。実際に撮影した写真などのデータをすべて盛り込んだワイヤーフレームを作成し、クオリティを極限まで高めておくことが必要です。ここでワイヤーフレームのクオリティを高めておくことが後のコーディングの工程で大きな意味を持ちます。

最終的に出来上がったワイヤーフレームの内容は絶対なので、この時点でお客様の要件をすべて取り込むようにする必要があります。この後の追加は別料金であることもきちんと伝えて、確実に案件を前に進めることが重要です。

デザインはトップ1ページに予算を集中

弊社にはデザイナーが在籍していないためデザインの業務は案件によって適したデザイナーに外注に出すことが多いです。デザイナーによって単価感もそれぞれなので、求められるデザインクオリティと予算との兼ね合いで発注先を決めています。また、発注先の選定で重要なのが「経営者」に発注をしてはならないということです。経営者ではなく「デザイナー」としてこだわりを持っている方に依頼をした方が金額も抑えられるうえに、最終的な成果物の品質も高くなる場合が多いですね。

低予算案件の場合には、デザインはトップページ1ページのみデザインカンプを作成してもらいます。その際には予算を十二分に先、デザインクオリティを担保できるような仕事をしてもらった方が最終的に出来上がるサイトのクオリティも高くなります。

例えば、1ページ当たりの単価感としては5万円～10万円程度がちょうどよいと思います。実際に作業をしてもらうにあたって手書きのイラストが必要であれば作成していただきますし、ディティールにこだわった作り込みができるようにする必要があります。1ページに7万円程度の予算が割けると、デザイナーとしても良い仕事がしやすいものです。存分に実力を発揮していただくためにも必要な金額感なので、安すぎないように注意をしながらトップページに限定することによって稼働量を調整してデザイナーさんに気持ちよく仕事をしていただきましょう。

コーディングは少し多めの予算

さて、コーディングが弊社の本丸ではありますが、デザイナーが多く在籍している会社にとってのコーディングの意味合いとコーディング会社にとってのコーディングの意味合いは大きく異なるということをまずは認識していただきたいです。具体的には以下の枠組みとなります。

会社の得意分野の違いによるコーディングの意味合いの違い

従来の広告デザイン会社のコーダーの役割

• デザイナー作成したデザインカンプ通りにコーディングをするのが仕事
• クリエイティビティよりもデザインの再現性を求められる
• できるだけ少ない予算で合理的かつ効率的な仕事が求められる

コーディング会社（弊社を含む）のコーダーの役割

• 高品質ワイヤーフレームからデザイン的要素を付加しながらのクリエイティブコーディング
• 十分な予算を確保した上で、コーダーの職務を拡大し、デザイン的な作業やアニメーションなどのコーディング品質の追求を求めている

上記を読んでいただけるとわかるかと思うのですが、デザイン会社の目線としてはコーディングはどちらかと言えば予算とデザインの再現性重視の作業であると言えると思いますが、コーディング会社の目線からすると、コーディングこそ最もクリエイティブな活動であり、ウェブサイト制作における最終工程であるため、最後の最後まで責任を持って高品質を追求できる予算が必要であるとも考えています。したがって、十二分な予算を割くことによってコーディングの品質を追求することが求められています。

コーダーの目線からすれば、職務が拡大して背負わなければならない責任も重くなっている傾向にありますが、やりがいも充実しているはずです。予算が十分にある分、それ相応の良い仕事が求められています。

ウェブサイト制作の予算配分のモデルケース

それでは上記の枠組みを実際の予算に落とし込むとどうなるでしょうか。具体的に見ていきましょう。

総額40万円で5ページ相当の低予算なウェブサイト制作案件のケース

顧客折衝／顧客対応／写真撮影／サイト構成検討　6万円

原稿作成　6万円

ワイヤーフレーム作成　6万円

デザインカンプ作成　7万円

クリエイティブコーデイング　15万円

仮に予算40万円で6ページ程度のサイトを制作する場合の予算組を考える。

顧客折衝：5万円
原稿作成：5万円
ワイヤー作成：8万円
デザイン費：7万円
コーディング：15万円

コーディング会社らしい枠組みやな。
コーディングに責任を持たせて予算があれば、見た目も動きも全部フォローできるじゃん。

— 山口 真／FLARES／歌うグロースハッカー (@shinroh) July 11, 2019

実際は上記に加えて会社の儲けを2割程度（40 × 20% = 8万円）乗せるとすると、48万円程度の予算感になりますね。

各工程別の仕事内容と予算配分をまとめると以下のようになります。

ディレクターの仕事内容と予算

仕事内容：顧客折衝／顧客対応／写真撮影／サイト構成検討／原稿作成／ワイヤーフレーム作成

予算：18万円

デザイナーの仕事内容と予算

仕事内容：トップページ1ページ分のデザインカンプ作成

予算：7万円

コーダーの仕事内容と予算

仕事内容：5ページのクリエイティブコーディング

予算：15万円

まとめ

住宅を例に出してみても「大工」が実際に家を作る上での最後の砦です。しかし住宅とウェブサイトの違うところは、住宅は物理的に形があるものであるため、確実に予定を立てて順序だてて進めていかないと絶対に成立しない部分があるとは思いますが、ウェブサイトの最終成果物はコーディングデータであり、これらコーディングデータを自分で書き換える分にはお金はかかりません。すなわち、コーダーの裁量を大きくすることによって自由自在に創り上げるクリエイティビティを更に高めることができると考えています。

また、私が広告デザインの会社でアートディレクターが旗振りする制作プロジェクトにおいて、全ページのパソコンページとスマホページのデザインカンプが作成されて、それらをそのまま再現してくれとコーディングの仕事に励んできましたが、そこからはクリエイティブさをあまり感じることができていませんでした。それよりは、デザイン自体を省略してしまって、コーディングに予算をかけることによって、「コーダー」がデザインの工程も兼ねることになるので「コーダー」というよりは巷で言うところの「ウェブデザイナー」という職種に近寄ることができるかもしれませんね。

最近ではcanvasアニメーションやSVGアニメーションなどのリッチなUIを実現するためのアニメ―ションのコーディング手法が高い技術力を求められる反面で市場競争力なども高く、周囲からは高く評価される傾向にあります。私たちはウェブデザイナーやクリエイティブコーダーとして、これらの技術習得をいとわずにスキルアップを重ねていければと考えております。

自社案件においては、上記のような枠組みでの仕事が可能ですが、制作会社様の下請けの仕事もないことはないので、そういった仕事をお手伝いする場合にはまだまだ従来のコーダーとしての役割を求められることもあるでしょう。それでも、徐々に自社案件比率を高めながら技術力を蓄えつつ、地域でも有数の技術力を保有している会社を目指して進んでいこうと考えています。