web制作案件を受けたときの話【受注から納品の流れを公開】

先日、WEB制作の案件を頂き、なんとか納品まで行いました。

このときの流れを、記憶が鮮明なうちにブログに残しておこうと思います。

これから案件をこなして行きたいけど、まだ経験が無いので不安という方に読んで頂きたい記事です。

今回受注した案件について

早速ですが、今回受注したweb制作案件は以下のとおり。

正直、初めての案件にぴったり過ぎるくらい、丁度いいレベルを頂けたので、かなりラッキーだったと思っています。

というのも、

• LP1ページだけなのでボリュームは多くない
• ワイヤーフレームは用意されていたので比較的簡単に作成できた
• 他のページのデザインに合わせるという要望だったので１からデザインしなくても良かった

こういった条件が揃っていたので、ほとんど苦労することなく納品までこなすことができました。

とはいえ、多少の紆余曲折はあったので、納品までの流れを詳細に公開していきます。

web制作案件受注から納品までの流れ

以下の3つに分けてそれぞれ書いていきます。

web制作案件の流れ受注編

案件は「クラウドワークス」を利用しました。

web制作系の案件を見かけたらとにかく応募して、今回は見送らせて頂きますのメッセージを何度ももらい、それでも諦めずに応募し続けること20回。

ようやく今回の案件が決まりました。

余談ですが、提案する上で僕が重要だと思うポイントは以下の２つ。

• 自分のポートフォリオサイトを公開する
• 応募者が少ない時（早め）に提案する

ポートフォリオの添付はほとんどの発注者が応募の条件にしているくらい重要なもので、「本当に仕事を任せても大丈夫かどうか」を判断するために欠かせないものなので、必ず作成しておきましょう。

実績はあった方がもちろんいいですが、発注者が必ずしも実績を気にしているわけではありません。

ポートフォリオサイトのデザインや、作り込み度合い（アニメーション、レスポンシブデザインなど）を見るだけでも、最低限その人の実力は知ることができます。

実績が少ない初心者ほど、いろんなサイトのデザインを参考に、サイトを訪れた人の目を惹くデザインにしておきましょう。

また、早めに提案する理由は、発注者が単純に急いでいるからというのと、何十人も応募が殺到したときに、全員を見るのは面倒なので、応募したのが早かった数人の中から選ぶ確率が高いから。

結構単純な理由だと思われたかも知れませんが、発注者の立場に立って考えてみれば、「クラウドソーシングで、仕事を見ず知らずの他人に、お金を払って依頼する」というのは、そこそこ急を要する仕事であることが多いです。

もちろん最低限のクオリティは必要ですが、それよりもスピードが優先される場合もあるので、実績がない初心者が必ずしも不利だとは思いません。

最初に採用のメッセージを頂いたとき、以下のような質問が含まれていました。

その時のメッセージを一部改変して紹介します。

①既存のデザインデータをお渡ししますので（以下DL）、その既存のデザインルールに基本的には沿ってデザインをしていただくことになります。可能でしょうか？→xdファイルこちらからDLしてください（xdファイルのダウンロードリンク）

②既存サイトのHTML・CSSファイルをお渡ししますので、CSSはそこに追加する形で組んで頂くことになります。可能でしょうか？
こちらもファイル送りますので、一度　ご確認いただけますでしょうか？（HTML・CSSファイルのダウンロードリンク）

③今日中に契約まで至った場合、最短でいつまでに仕上げていただくことが可能でしょうか？

発注者の方には申し訳ないのですが、100%自信があったわけではないのに、この質問全部に「できます」と返信をしました。納期に関しては、当初の条件に1週間程度とあったため「1週間で納品します」と宣言しました。

こうやって自分を追い込んでしまえば、やるしかなくなるからです。

自信がなくて案件に応募出来ず足踏みしている方には、ぜひ「ハッタリ」をかまして自分を追い込むことをオススメします。

web制作案件の流れデザイン編

使用したツールは、「Adobe XD」です。

デザインといえば、「Photoshop」や「Illastlator」だと思うのですが、発注者から指定が無い限りはXDで十分デザインできると思います。

（今回も提供して頂いたデザインデータがXDだったのでXDを使用してデザインを作成しました。）

デザインは、すでに存在するwebページのデザインを引き継いでLPのデザインをして欲しいとのことだったので、１からデザインするのとは違ってラクでした。

例えば１からデザインする場合、テーマカラーを決めたり、ページの雰囲気（おしゃれなページ、落ち着いたページ、可愛らしいページなど）を決めたり、発注者とのやり取りやヒアリングから必要になってくると思うのですが、

他のページのxdデザインを事前に提供頂けたので、コピペしながらデザインを決めていくことができました。

文章やある程度の配置などは、事前にワイヤーフレーム（パワーポイント）が提供されていたので、それを参考にデザインを決めていきました。

xdの使い方に関しては、以前自分のブログテーマを作成する時や、web制作教材を作成する時に何度かイジっていたのでそこまで苦労することはなかったです。

web制作案件の流れコーディング編

デザインに関してOKを頂いたので、引き続きコーディングに入ります。

コーディングも事前にファイルを頂いていたので、そこに新たにHTMLとCSSのファイルを追加する形でコーディングしていきました。

すでに存在するファイルに追加するのって、最初は簡単だと思っていたけど、追加するほうが難しいということに、実際コーディングを進めていくと気付きました。

最初から自分でコーディングする場合、コーディングのルールだったり、クラス名の付け方だったり、自分で好きなように決めることが出来ます。

それが他人がコーディングしたものに追加するとなると、まず「コードを解読する」という作業が必要になってくるんですね。

このやり方は人によって様々なので、どのようなファイル構成になっているのか、どのcssファイルでどのクラス名でデザインを作っているのか、このあたりを把握するのに１日使いました笑。

それと、もう一つ今回の反省点なのですが、デザインをするときにコーディングするときのことをもっと考えるべきでした。

適当にデザインしていると、コーディングの時にどうやって実装していいか迷ってしまった部分が何ヶ所がでてきたので、そこは次回改善したいポイントですね。

まあなんだかんだで、コーディングが終わり、修正もなく無事納品完了しました。

案件の中で困ったこと・苦労したこと

仕事の流れをサラッと書きましたが、全てがうまくいったわけではなく、苦労した部分もいくつかありました。

こういったところも紹介しておきます。

困ったこと・苦労したことワイヤーフレーム、HTML・CSSファイルが間違っていたこと

仕事の最初からつまずいていました。

事前に頂いていたワイヤーフレームが間違っていました。

ファイル名と中身の内容が一致していないなーと思ってクライアントさんに連絡してみたところ、中身が間違っていたとのこと。

すぐに正しいワイヤーフレームを送ってもらいました。

また、すでにあるHTML・CSSファイルに追加して欲しいとのことだったので、事前にファイルを送ってもらっていたのですが、いざコーディングを始めようと中身を確認したところ、今現在公開されているサイトとはデザインやコンテンツ内容が異なっていて、これも確認したところ間違いだったとのことでした。

困ったこと・苦労したこと連絡の返信待ちで作業が進まなかったこと

ワイヤーフレームが間違っていたことに気付いてクライアントさんに連絡したのですが、返信があったのが3日後...締め切りまであと2日のときでした。

ワイヤーフレームって最初の段階なので、これが間違っていたとなるとデザインが出来ません。

というわけで、デザインとコーディングを２日で仕上げなければならなくなりました。

もちろん、クライアントさんのミスではあるので、納期の延長をお願いできたかもしれませんがその選択肢はとりませんでした。

というのも、ここで納期を伸ばしてもらうよりも、徹夜してでも期限内に納品した方がクライアントさんからの信用が得られるからです。

そして、次回も継続して案件を頂ける可能性が高まるので、ここはなんとしてでも期限内に納品しようと思いました。

困ったこと・苦労したことHTMLにSSIが使われていたこと

SSI は Server Side Includes の略です。HTML文書中にコメントを挿入することにより、サーバー側がコメントの場所に実行コマンドの結果などを置き換えてくれたりする機能です。

と偉そうに言ってますが、SSIなんてものは全く知りませんでした。

実際に提供されたトップページのHTMLファイルを開いてみても、ヘッダー部分が表示されず、記述内容を詳細に見てみると、以下のような記述がありました。

<!--#include virtual="/_include/header.html" -->

どうもこの記述で「header.html」を読み込んでいるみたいだけど、ただのコメントなのにどうやっているんだろう？とググりながら探していると、ようやく「SSI」という言葉にたどり着きました。

ただしこのSSI機能は、最初に説明したようにサーバー側が置き換えてくれる機能なので、ローカル環境では動作しません。

たぶん本番環境にアップロードすればうまく表示されると思うのですが、ローカル環境では表示されないため実際の表示を確認しながらコーディングが出来ません。

そこでローカル環境でもSSIを表示させる方法をまたググり、解決方法を見つけました。（半日はかかった笑）

その解決方法は、「.htaccess」というファイルを作って、その中に以下の記述を書けば良いだけでした。

Options +Includes
AddHandler server-parsed .html

ちなみに...ローカル環境は「MAMP」というツールを使って構築しているのですが、その場合は「httpd.conf」というファイルの中身をいじるだけでも良かったみたいです。

WEB制作初心者の方へ

こんな感じが、初めてのWEB制作案件を受けたときの話でした。

自分が今まで勉強してきたことが、誰かの役に立って、しかも報酬を貰えるという経験ができて良かったなーと思います。

駆け出しエンジニアにピッタリのクラウドソーシングサイト

「FLEDGLING」は駆け出しエンジニアへ仕事を依頼する変わりに、報酬を相場よりも抑えることができるという、新しいクラウドソーシングサービスです。

駆け出しエンジニアの悩みで多いのが、

実績がないから仕事が獲れない。仕事が獲れないから実績がない。

ということです。

FLEDGLINGを利用するメリットは、FLEDGLING内での仕事は全て実績として公開OKということ。

つまり、『報酬よりもまず実績を取りに行きたい』というエンジニア向けのサービスになっています。

詳しくは以下の記事で解説しています。

また、僕が案件を受注できるレベルになるまでの過程を以下の記事で公開していますので、これからWEB制作の仕事をやってみたいという方は参考にして頂けると嬉しいです。

だいたい3ヶ月程度の期間、独学のみで身につけました。