コーディングの仕事を始めたばかりの頃は、「言われたとおりに組んだのに、なぜか修正が返ってくる」ということがよくあります。
実は、プロのコーダーが自然と気を配っている「実務の基本」を押さえるだけで、仕事の質はぐっと安定します。
この記事では、コーダーが仕事で気を付けたいことを10個にまとめて紹介します。
「見た目が合っていればOK」ではない、その一歩先を一緒に見ていきましょう。
コーダーの私が解説します
この記事の対象読者
- 駆け出しのコーダー・Web制作者の方
- 修正指示がなぜ来るのか、いまいち分からない方
- 「作れる」から「任される」へステップアップしたい方
- 実務で最低限おさえるべき基本を知りたい方
品質にかかわること
Web制作やコーディングという仕事は、制作するあるいは納品する成果物のクオリティで評価されます。
そのため、仕事の品質には十分に注意を払うことが特に大切です。
①コーディング規約・命名規則を守る
案件やチームには、クラス名の付け方やインデントなどのルール(規約)があることが多いです。
自己流で書くと、あとで他の人が読めず、修正コストが跳ね上がります。
まずは既存のルールに合わせるのが、信頼される第一歩です。
制作会社やチームにジョインした場合は既存のガイドラインや規約、デザインシステムなどを確認しよう
②デザインカンプを忠実に再現する
余白・フォント・色・サイズは、感覚ではなく数値で合わせましょう。
「だいたい合ってる」で済ませた微妙なズレは、デザイナーには一発で見抜かれます。
数ピクセルのこだわりが、仕上がりの印象を大きく左右します。
パーフェクトピクセルという考え方(またはその手法をいう)があり、
カンプと1pxもズレがないようにコーディングするということも大切なスキルです。
気になった方は調べてみてください。
③レスポンシブ対応を確認する
今はスマホからの閲覧が主流なので、スマホ・タブレット・PCそれぞれで崩れないかの確認は必須です。
PCの画面だけ見て「完成」としてしまうのは、よくある失敗です。
ドデカ画面でみるとヘッダーメニューだけフルサイズなのに、メインコンテンツめちゃくちゃ小さくて見えないとかもあり得る話なので要チェック。
④クロスブラウザで表示をチェックする
同じコードでも、ブラウザによって表示が微妙に変わることがあります。
主要なブラウザで一通り確認し、どの環境でも同じように見えることを担保しましょう。
自分の画面で合っててもアカンのか…。いろんな環境で見なあかんねんな。
マイナーブラウザまで保証する必要はないですが、ChromeやSafariなどのメインどころをおさえておくのは最低限必要です。
フリーランスでやる方なら、最初に動作保証範囲を明記しておくといいです。(Chrome,Safari,Edge,Firefoxのみ動作確認する、など)
ユーザーと検索エンジンのために
webサイトの表示速度やアクセシビリティ、SEO対策をすることも非常に大切です。
⑤表示速度・画像を最適化する
重い画像をそのまま貼ると、ページの表示が遅くなり、離脱の原因になります。
画像は適切なサイズに圧縮し、必要に応じて遅延読み込みを使うなど、軽さも品質のうちと意識しましょう。
⑥アクセシビリティに配慮する
画像のalt属性や、見出しの正しい階層構造など、誰にとっても使いやすい配慮を忘れないようにします。
色のコントラストを確保するなど、見やすさへの気配りも大切です。
⑦SEOの基本を押さえる
見出しタグ(h1〜h6)を正しい順序で使い、意味の伝わるHTML(セマンティックなマークアップ)を心がけましょう。
コーディングの段階での基本が、後々の検索評価の土台になります。
チームと未来の自分のために
Webサイトは一度つくって終わりではありません。
定期的なメンテナンスや部分的な修正が必要になるケースも多いため、
後から見返しても保守しやすいように制作していくことが重要です。
⑧保守性を意識して書く
コードは一度書いて終わりではなく、あとで誰かが(未来の自分も含めて)修正するものです。
分かりやすい構造と、必要な場所へのコメントを心がけると、後々の作業がぐっと楽になります。
とりあえずでつけたclass名、共通化されていない部分的なルールを用いるのは悪手といっていいでしょう。
⑨バージョン管理・バックアップを習慣にする
Gitなどでこまめに変更を記録しておけば、問題が起きても前の状態に戻せます。
「上書きして戻せなくなった」という事故を防ぐ、大切な習慣です。
想定外のトラブルがおきてもバックアップや復元ができるようにしておくというのは、わざわざ言われない程「当たり前」のことです。
こまめにバージョン管理やバックアップを心掛けましょう。
⑩報連相と納期を大切にする
不明点は抱え込まず、早めに確認・相談するのが結果的にいちばん早いです。
進捗の共有や納期を守る姿勢は、技術と同じくらい信頼につながります。
まとめ
コーダーの仕事は、「見た目を再現する」だけでなく、その先の品質・使いやすさ・チームへの配慮まで含めて成り立っています。
今回の10個は、どれも特別な才能がなくても、意識するだけで今日から実践できることばかりです。
一つずつ身につけて、「作れる人」から「安心して任せられる人」へと近づいていきましょう。
技術だけやなくて、気配りも仕事のうちなんやね。ひとつずつ意識してみるわ!