外注先のコーダーを選ぶとき、多くの制作会社が同じ不安を抱えています。ポートフォリオの見栄えは良い。でも、それが本当に本人の実装なのか、掲載事例と同じ品質のものが自社案件でも上がってくるのか。この乖離が、後工程の手戻りやクレームに直結します。

結論から言えば、コーダーの実力は「完成画面の見た目」ではなく「納品物の中身」を見れば、発注前でもかなり判別できます。ブラウザの開発者ツールを開き、いくつかの軸で構造を確認するだけです。ここでは、その具体的な手順を6つの軸で示します。あわせて、私（Tsudzuri／藤原）が自分のサイト tsudzuri.com をどう作っているかも開示します。見られて困らない実装こそ、外注先を選ぶ側の判断材料になるはずです。

コーダーの実力を見抜く6つの軸（HTML構造／CSS設計・命名／中間幅の対応／表示速度・画像／アクセシビリティ／崩れにくさ）

表面ではなく「中身」を見る6つの軸

公開URLがあるポートフォリオなら、右クリックの「検証」やソース表示で中身を確認できます。次の観点を順に見てください。

  • HTML構造の素直さ：見出しが h1→h2→h3 と論理順で並んでいるか。ヘッダーやナビ、記事本文が header nav main article といった意味のあるタグ（セマンティックHTML＝要素の役割が明確なマークアップ）で組まれているか。div の入れ子だけで作られた画面は、後から手を入れにくく、SEOやアクセシビリティにも不利です。
  • CSS設計と命名：クラス名に規則性があるか。同じ見た目の部品が別々のスタイルで重複していないか。命名が場当たり的だと、改修のたびに崩れるリスクが上がります。
  • 中間幅のレスポンシブ：PCとスマホの端だけでなく、700〜900pxあたりのタブレット中間幅で崩れないか。ここは横並びが窮屈になりやすく、作り込みの差が最も出る領域だと感じています。
  • 表示速度と画像設計：画像に適切なサイズ配信の指定があるか。表示領域より大きい画像をそのまま出していないか。速度は体感とCore Web Vitalsの両方に効きます。
  • アクセシビリティ配慮：画像に alt があるか。開閉ボタンに aria-expanded などの状態が付いているか。キーボード操作でフォーカスが追えるか。
  • 崩れにくさ：文字数が増えても、画像が差し替わってもレイアウトが破綻しないか。実データで壊れない設計かどうかです。

見た目が同じでも、この6軸の中身は人によって大きく変わります。だからこそ、コードは実力の指紋になります。

表面の見た目で分かることと、中身（コード）を見れば分かることの比較

私が自分のサイトをどう作っているか

説明だけでは一方的なので、自分の実装を開示します。tsudzuri.com のマークアップは、ヘッダーやナビを header nav、本文を main article で組み、ハンバーガーメニューには aria-expanded と aria-controls を付与しています。装飾のスクロール演出は原則CSSだけで実装し、prefers-reduced-motion（動きを減らす設定）を尊重して、動きが苦手な方には静止表示するようにしています。

画像は特に気を配っている部分です。実績カードでは、レイアウトの実寸に合わせた sizes を明示的に渡し、過大な画像配信を避けています。

<img sizes="(min-width: 1280px) 600px, (min-width: 900px) 46vw, 92vw" ... />

さらにカード画像には aspect-ratio を指定し、読み込み前後でレイアウトがずれる現象（CLS）を防いでいます。色のコントラストはWCAG AA（4.5:1以上）を基準に確認しています。このあたりの背景は「表示速度とCore Web Vitals」で詳しく書いています。

こうした作り方の土台にあるのが、私の強みであるデザインへの忠実さです。Figmaのデザインを、余白や行間、色まで含めてピクセル単位で再現することを基本にしています。デザイン意図を崩さず、かつ壊れにくいコードに落とす。その両立が、制作会社にとっての「安心して任せられる」条件だと考えています。デザインデータの受け渡しについては「FigmaやXDからのコーディング依頼」も参考になるはずです。

見極めを、依頼前の一手間で

コーダー選びで失敗を減らす近道は、完成画面の印象ではなく、公開されている納品物のコードを一度開いてみることです。上の6軸を照らすだけで、掲載事例と実際の品質の距離感がかなり見えてきます。

Tsudzuriは、その中身を見られても困らない実装を心がけています。自社案件で「このレベルで上げてくるか」を確かめたい方は、まず気になる点をお問い合わせからご相談ください。既存サイトのコードレビューや、小さなテスト依頼からでも歓迎します。

本記事は2026年7月時点の情報です。仕様や実装の詳細は今後変わる場合があります。