Webサイト制作未経験で脱サラしてから4ヶ月間。ついに、1万円超の案件を受注する事が出来ました！しかも3万円！
でも・・・、大変だから高額なのです。当然だけど。
受注に至った経緯
現在の私は、時給制のお仕事を1件。それと並行して単発案件を1件ずつ（1件終わったら次の1件を探す）こなしていくルーティンで日々お仕事を進めています。
当時対応していた単発案件が「終わりは見えてきたが、すぐに終わる程でも無い。」というタイミングだったので、わりと軽い気持ちで次なる単発案件を探し始めた矢先の出来事でした。
朝に応募した案件のクライアントから、その日の18時頃に「お願いしようと思います。」のメッセージが！
しかも、決まればラッキーくらいのモチベーションだったので安価な見積もりをせず、クライントの希望金額「3万円」ジャストでお見積もりをした案件でした。
はっきり言って、これまで単発案件で1万円越えの物を受注したことが無いので驚愕！
クラウドワークス
でコツコツと仕事を受注し始めて4ヶ月、案件受注実績は8件になっていました。
ようやく実績が増えた効果が出てきたかな？と喜びながら、早速お礼とお仕事詳細について打ち合わせのやり取りを開始。
案件の内容確認
ここから私のタイトな数日間が始まります。
今回の案件内容は以下の様な物です。
・とある会社様のホームページリニューアル＋追加ページ制作
・トップページと下層3ページの計4ページ（レスポンシブ）
・デザインデータは既に完成済み
納期までのスケジュールは下記の通り。
その後1日で修正のやり取りを行い、更にその翌日にエンドユーザーへ提出。
今回の案件は、Webサイト制作会社様が受注した案件のお手伝いですね。
私の現在の制作ペースだと、集中して取り組めれば何とかギリ間に合うかな？という印象。
初の1万円超え案件なので、多少無理してでも受注するつもり満々の私は2つ返事で了承しました。
クラウドワークス上で正式に契約を交わし、デザインデータを受け取る。
そしてここでトラブル発生。
デザインデータの形式が、私の慣れ親しんだpsd（photoshopの形式）ではなく、ai（illustratorの形式）だったのです。
illustratorはこれまで殆ど触ったことが無かったので、さすがに「うっ・・・」と思ったものの「フォトショップと同じadobeのソフトだし、大丈夫っしょ！」と気を持ち直す。
※ちなみにこの日デザインデータを頂いたのが夜の遅い時間だったため、翌日から取り組むことに。
作業1日目
この日は朝からこちらの案件に着手。
そして早速絶望しました。なぜかと言うと、illustratorはphotoshopと違い、Ctrlキーを押しても要素間の距離（margin）が表示されないことがわかったからです。
調べてみると。illustratorの場合は「ものさしツール」という物を使い、手動（マウス操作）で距離を見なければならないとのこと。
普段はPhotoshopのデザインデータに表示される数字データを見ながらサクサクコーディングが進められるのですが、これが無いのは痛い。
解決策は無いかと以下を試すも、ことごとく通用しない。
1.zeplinというweb制作補助ソフトとの連携 ⇒illusutratorは非対応
2.aiファイルをpsdファイルに変換
⇒変換は出来るが、レイヤー情報が無くなり一枚の画像になってしまう。（これでは要素間の距離がわからない）
3.get_distanceというスクリプトを導入
⇒illustratorで要素間の距離を計測する事が出来るスクリプトだが、そもそも頂いたaiデータが、見た目は横幅200px程度のバナーだが、選択するともっと大きい枠に囲まれているといった状態のため、数字を拾えたとしてもあてにならない。
わーわー書き綴ってきましたが、つまり状況は最悪。絶望アンド絶望。
もしかすると何か解決策があるかもしれないが、これ以上調べていては肝心の作業に取り掛かれない。ここは諦めてaiデータからpngファイルを生成し、PerfectPicxelでブラウザに画像データを重ねながら位置調整を行うことに。
先述のイラストレーターの件の他にも、デザインデータのフォントサイズが小数点を含んでいたり、システムフォント以外が使用されているため配置調整が困難であったり・・・。
先方と相談しながら進めているうちに、提出2日前の夜の時点でトップページのコーディングが4分の1も完成していない状況に。
しかも画像ファイルの使用も多いサイトだったため、コーディングが終わった後に慣れないillustratorで画像のアセット作業も待っている。
これは本当にまずいことになった。
この日は夜中の2時まで作業。
作業2日目
気持ちが落ち着かず眠れない（the ノミの心臓）ので、朝5時30分に起床して取り掛かる。
・・・にも関わらず、いまいち捗らない。
主な要因としてはこれら。
- 初のカルーセル（スライドショー）実装
- Bootstarpのグリッドシステム採用⇒挫折
- やはりillustratorで要素間の数値が出せないのが辛い
カルーセルはslick.jsというプラグインを入れて実装自体は出来たものの、デザインデータ通りの仕様にするためのオプション設定に苦戦。
Bootstrapグリッドは以前から少し勉強しており、初の実戦投入！（まだ余裕があった頃に決断）としたものの、グリッド間の間隔調整が飲み込めず、「これなら今まで通り作った方が早いわい！！」と、途中から通常verで構築し直し。
そしてillustrator・・・。
今となっては何故こんなに時間が掛かったのか不思議でもあるのですが、提出前日の夕方の時点でトップページのコーディング完成度が2分の1くらい。
吐きそう。
さすがに状況がマズすぎるので、夕方ごろにクライアントへメッセージ送信。
以下やりとり（要約ver）
「自分がまったく使えないアホンダラでごめんなさい。提出期限は明日ですが、夜の提出でも可能でしょうか？」
「夜中に送られても困るので、遅くとも19時までには提出してください」
それでも納期の日はやって来る
徹夜で意識がボーッとしつつも、無心でコーディング。
（19時までには完成させなきゃ・・・。19時前には提出・・・。）
壊れかけのレディオの如く脳内でリピートしながら作業をしているうちに、気づくと時刻は17時30分に。
この時点でトップページ完成度80％程度。下層ページ未着手。
だめだ・・・間に合わなかった・・・。
クライアントへ以下内容で連絡。
生きていてすみません。
現状トップページ完成度が80％程度ですが、一度提出させていただきます。
引き続き作業を行わせて頂き、明日中に必ず全ページ提出いたします。
本日中に全ページの提出をお願いしていました。
明日の何時に出来るかを教えてください。
明日、正午までには完成させます。
承知しました。引き続きよろしくお願いします。
そしてついに完成
翌朝の9時頃、なんとかトップページと下層3ページ全てが完成し提出。
当初の予定通りその日は何件か修正の連絡が入りましたが、これらも無事に対応が完了。
その翌日（本記事の執筆日）にはエンドへ確認の提出をしていただけました。
今回の案件で痛感したこと
長々と書いて参りましたが、今回の件で感じた事を記録します。
- 納期の何時までに提出すべきか、初めに”しっかりと”確認すべきだった
- 自分が作業に掛ける時間を”しっかりと”把握しなければいけない
- 経験が少ない以上、何が起こるかわからない。絶対に油断してはいけない。
- なんとなくわかった気になっている事（特にCSS）を放置してはいけない。
自分のダメな部分がたくさん出ました。
・納期の何時までに提出すべきか、初めに”しっかりと”確認すべきだった
事前に「提出日の何時頃まで」を確認せず、ギリギリのタイミングで確認をして余計に焦ることに。仕事の基本ですが、浮足立っていたのか今回は確認を怠ったことを猛省。
・自分が作業に掛ける時間を”しっかりと”把握しなければいけない
・経験が少ない以上、何が起こるかわからない。絶対に油断してはいけない。
自分の作業スピードが把握しきれていないが為に、本来はなりふり構わず大至急取り掛かるべき案件にも関わらず、確認を翌日に回したり、「今回はBootstapに手を出してみようかな？」という浮気心が発生し、結果的に大幅に時間をロスすることに。
・なんとなくわかった気になっている事（特にCSS）を放置してはいけない。
これは時間に追われた時に心の底から実感しました。時間に余裕があるときは「あれ？ここどうするんだっけ？」と思ったことは調べる時間がありますが、そんな事ばかりではありません。
「わからないけど、調べたら出来た」ことは「出来たから良かった」では無く、しっかりと自分の中で考え、定着させておくことがスピードアップに直結すると感じました。
まとめ
始めこそ「高額案件だ！」とハシャいでいましたが、業務は過酷なもので、何度も心が折れかけました。お金を稼ぐって大変な事なんだと実感。
しかし、自分に足りない物やコーディング・仕事の奥深さを再認識することが出来た、とても意義のある経験だったと思います。
最後に、この数日間私の体調を心配し支えてくれた妻に心から感謝。
お礼に美味しいもの食べさせてあげるためにも、頑張って成長しなきゃなぁ。
