コーダーの仕事は「デザインをHTML/CSSで再現すること」と言いましたが、それが具体的にどのようなものなのかをイメージしましょう。
今学んでいるものが、仕事のどこに繋がっているか意識できると学習の効率も上がると思います。
それでは早速見ていきましょう。概ね以下の流れで行われます。
まずはデザイナーさんからデザインデータをもらうところから始まります。
データをもらったら、すぐにコードを書き始めるのではなくデータの確認作業を行います。
最初のデザイン確認においては、主に以下の点を見ます。
- 誤字脱字
- 規則性の崩れ（意図的な場合があるので要確認）
- アニメーションの有無
誤字脱字や、デザインのパーツが一部分だけ他と違っている箇所など、ミスの可能性がありそうなものは必ず確認しておきましょう。
特に規則性が崩れているものはミスなのか意図的なものなのか判断が難しいことがあります。それを勝手にコーダーが判断して実装すると、間違っていた場合に後で余計な手戻りが発生します。
また、デザインデータでは表現しにくいアニメーションについても必ず確認します。
各ボタンのhoverアニメーションはあるか、あるならどのような動きなのか、などをデザイナーと認識を合わせます。
デザイナーと認識を合わせることができたら、どのようにコーディングするか構想を立てましょう。ここでもすぐにコードは書き始めないほうが良いです。
改めてデザインを眺めて、以下の点をチェックしていきます。
- PC/SPを見比べて無理のないHTML構造になる様に注意する
- 実装に時間がかかりそうな箇所を事前に把握する
- ぱっと見で実装方法の見通しがつかない箇所を事前に把握する
コーディングの案件では、もちろんデザインを再現できることが大前提ですが「納期に間に合うように進める」ことも当然必要です。
その上で時間のかかる要素はなるべく事前に把握し、回避できるものは回避しましょう。
PC版のデザインだけを見てコーディングし、SP版を見たらメディアクエリだけではやりにくいHTML構造になっていた、という経験はありませんか？先に両方を見て構造を事前に考えておきましょう。
また常に自分の知っている実装だけでコーディングが遂行できるとは限りません。コーディングを進めていたら、「複雑なアニメーションを要求されて実装がパッと思いつかない」こともあり得ます。実装方法を事前に調べておくためにも、そうなりそうな箇所はこの段階でリストアップしましょう。
デザインデータのチェックができ、コーディングの構想を立てることができたらいよいよコーディングに入ります。
デザインデータは概ねイラレ、フォトショ、XDでもらいますが、これらのデータからコーディングに必要な値を読み取る必要があります。ですからデザインツールの最低限の使い方を覚えておきましょう。
主に以下のことができると良いです。
- 画像の書き出し（書き出したものの画質が低くないかの確認も行いましょう。）
- 要素のサイズの読み取り
- 余白の読み取り
- 色の読み取り
- 影の読み取り
- 角丸サイズ読み取り
具体的な方法については以下の記事をご覧ください。
XD/Photoshop/Illustratorを学ぼう
デザインデータの値を読み取りつつ、コードに反映させていきます。
ここについては学ばれている方も多いのではないでしょうか。こうやって手順を見てみると、コードを書くまでの準備が結構多いですよね。
コーディングに関しては学習ロードマップに沿って進めていただければ良いと思いますので、そちらをご覧ください。
学習ロードマップ
コードを書き終えたら、それで終わりではありません。納品する前に必ずテストを行って問題がないかを確認しましょう。
もちろんコードを書いているときにブラウザである程度確認しながら進めているとは思いますが、ローカル環境と実際のサーバーの環境では挙動に違いが出る場合があります。
必ずテスト用のサーバーを用意し、そこにファイルをアップロードした上でチェックを行いましょう。アップロードにはFTPツールを用いて行います。
テスト用の環境を構築する方法はこちらをご覧ください。
テスト用の環境構築方法を学ぼう
また、具体的には以下のような観点でテストを行います。
- 見た目をチェックする（複数ブラウザ、デバイスで確認する）
- 画像の読み込み速度をチェック、問題がある場合は適切に処理（圧縮や、サイズ縮小）を行う
- パスやリンクの間違いをチェックする
まず見た目は必ず複数のブラウザと複数のデバイスで確認します。
ブラウザはChrome、Firefox、Safari、Edgeなどで確認し、デバイスは特にスマートフォンにおいてiPhone、Android端末の両方で確認するのが好ましいです。
特に画像の読み込みに関してはローカルとサーバー環境で差異が出やすいところです。必ず確認して、きちんと画像が読み込まれるか、その速度は遅くないかを見ます。
ページの読み込み速度の目安としてPageSpeed Insightsを利用しましょう。速度を点数で評価してくれて、かつ改善箇所を詳細に教えてくれます。テストサーバーのURLを入力すれば実行できます。
そして見た目だけでなく、各種リンクやボタンが正常に動作するか一個一個クリックして確かめます。
テストが完了したら、いよいよ納品です。納品の形式はいくつかあり、ファイルを渡すだけのこともあれば先方の持っているサーバーにこちらがアップロードすることもあります。
場合によってはドメインの取得もこちらで行う場合もありますから、しっかりその方法を理解しておきましょう。
ドメインについては以下の記事をご覧ください。
ドメインの取得・適用方法を学ぼう
ということで、コーディング案件の流れを解説しました。これから学び始める方も、学習はある程度できて案件直前の方も、ぜひご参考にしてください。