iSara

初案件をスムーズに行うために知っておくべきこと【勉強と実案件の差】

こんにちは、ヒロ(@hirokiweblax)です。

今回初めて案件を行った際に、コーディングで戸惑った所をまとめました。

誰もが通る道だと思うので、
まだ案件をとったことの無い人にはぜひ読んでいただきたいです。

この記事を読むことで僕よりスムーズに初案件を終えられると思います。

ということで、この記事はこんな人におすすめです

・初案件に気をつけるべきことを知りたい

・わからないことがありそうで初案件を受けるのが不安

気をつけるべき点

僕が初案件時に戸惑った所は以下の5つとなります。

・photoshopの導入

・指定フォントが使えない

・どこまでカンプと一致させるか

・画像を圧縮させる

・納期は余裕を持つ

では早速解説していきます。

photoshopの導入

実案件を行ったことのない人は、XDや実サイトからのコーディングが多いと思いますが、
実際はXD以外のデータでもらうことが多いようです。

僕の今回のカンプデータもフォトショップで貰いました。

僕はphotoshopの購入からコーディングに問題がないレベルで触れるようになるまでに
丸一日かかってしまいました、、、

納期が一週間なのに、初日はコードを全く書けない状態でめっちゃ焦りました
そんなことにならないように、僕が参考にしたサイトをまとめます。

購入

photoshopを購入する時には色々プランがあり、安く買う方法もあるので迷います。

正直悩むのは無駄なので、デジハリオンラインスクールに入会して
コンプリートプランを購入
することをおすすめします。

https://blog.codecamp.jp/photoshop-buy-cheap

adobeの全製品が入っていて年間29800円です。
少し高いですが、コーダーを仕事にするなら入っておくべきだと思います。

フォトショップやイラストレーターの講座も付いてくるので、
余裕のある人は受講しておくと楽かもしれません。

画像、値の取得

画像、値の取得方法は以下のリンクを参考にしてください。
https://haniwaman.com/photoshop-coding/

ここも慣れるのに結構時間がかかりました、、、

指定されたフォントが使えない

フォトショップで指定されたフォントでWeb上で使えないものがあります。

デバイスフォント、Googleフォントに存在しない場合ですね。

その場合の解決方法は3つありますが、
どれもクライアントに確認する必要があるのでちゃんと確認しましょう。

・画像で実装する

・代替フォントで実装

・フォントファイルをもらう

画像で実装

文字を画像として取り出し、実装する方法です。

気をつけるべきことが2点あります。
文字がぼやける
レスポンシブした時に文字が小さくなりすぎる

以上の2点に気をつけて違和感がないように実装しましょう。

代替フォントで実装

指定フォントの似たフォントで実装する方法です。

自分で探す場合、クライアントに指定してもらう場合があります。
自分でフォントを探した場合は指定後のフォントを伝えてあげましょう。

フォントファイルをもらう

ファイルをもらって実装してください。

実装の仕方は以下のリンクを参考に
https://wemo.tech/1978

僕もまだ一度もやったことはありません、、、

カンプの一致率

元のカンプとどのくらい一致させるかという問題ですが、
これはクライアントによると思います、コミュニケーションを取りながら判断していきましょう。

今回の僕の案件ではほとんどpixel perfectは気にせず、
見た目の違和感がない程度でコーディングをしました。

今回そう判断した理由を説明していくと、

カンプと別にデザインと文言の修正が数十個箇条書きで書かれたデータを渡されていて、こちらで修正するという状態でした。

なのでそもそもカンプの再現は不可能でした。

クライアントもいい感じに修正しといて、というスタンスだったので
全体的なコーディングの精度も求められていないと思ったわけです。

画像の圧縮

勉強時には一度もやったことはないですが、
ページを早く表示させるために画像を圧縮させる必要があります

表示に3秒かかると、離脱率が50%以上になるというデータがあるぐらいなので
ページの表示速度が遅いのはクライアントにとって死活問題です。

わざわざ画像の圧縮を指定されることは無いと思いますが、
Webのプロフェッショナルとして必ずやっておきましょう。

以下、Web上で画像を圧縮させるツールです。
https://compresspng.com/ja/ (png用)
https://compressjpeg.com/ja/ (jpg用)

ファイルを最大20個一気に圧縮してzipで吐き出してくれます。
圧縮ツールはどれでもいいので、自分で使いやすいものを選びましょう。

納期に余裕を持つ

納期の延長は信頼を失うことにも繋がると思うので、少し余裕を持って納期を提示した方が良さそうです。

最終的な納期は間に合いましたが、途中の進捗報告で納期を延長してもらうこともありました、、、
(この部分は反省です)

余裕を持って納期を提示し、ダメだったらクライアントとすり合わせをした方が
クライアントの納得感も高そうですよね。

個人的な見積もりとしては、最短でできる時間の1.5倍ぐらいの時間を見積った方が良さそうです。

まとめ

初案件だと迷うことが多く時間もかかりますが
以下2点に気をつければ大丈夫かと思います。

・コミュニケーションを素直に取る

・納期に余裕を持つ

質問のしすぎはダメですが、コミュニケーションを全く取らないのもクライアントが不安になります。
最初は2日に1回ぐらい進捗報告や質問を行った方が安心感に繋がると思います。

クライアントに余計な負担を掛けないように意識していきましょう。