Web制作会社18年、現役のフロントエンドエンジニア。年間100〜150案件が動く現場の品質基準で、Web制作の最前線を検証しています。コーポレートサイト・LP・CMS実装／WordPress・Movable Type／AIコーディング。小規模な実装と技術相談を副業でお受けしています。
東京・神奈川
Joined August 2024
- Tweets43
- Following73
- Followers40
- Likes36
selectの開いたリストは、これまでCSSで装飾できませんでした。
appearance: base-select を使うと、JavaScriptを使わなくても、リストまでCSSで整えられます。Firefoxを除く主要ブラウザで対応しています。
非対応ブラウザでも崩れない書き方と、実務で使えるデモをまとめました。
frontendclip.com/css-base-se…
普段何気なく使っている日本語のGoogleフォント。
そのまま1ファイルで配ると重くなるので、
100個以上のファイルに分割して配信している。
CSSを見ると @ font-face が大量に並んでいて、
それぞれにこんな指定がある。
unicode-range: U+3080, U+4ee5, …;
これは「このファイルが担当する文字」の指定。
ページ内に該当する文字があるときだけ、その .woff2 が読み込まれる仕組み。
ALT ページに「電話する」と表示するとき、倉庫の棚から「す・る」を含むかなの箱と、「電・話」を含む漢字の箱の2つだけがブラウザに届く様子を描いた図。箱には unicode-range の札が付いている。
同じカンプから、Claude Code（Opus 5）と Codex（GPT-5.6 Sol / GPT-6 Astra）にLPのファーストビューを組ませて比べました。
パッと見ただけでわかる違いもありましたが、
差が大きかったのは、むしろコードやファイルを開いてからでした。
8項目の判定をZennに書いています。
zenn.dev/frontendclip/articl…
画像20点、傾いた帯、その上に乗る文字。
LPのファーストビューのカンプを自作して Claude Code（Opus 5）に渡しました。
数ヶ月前、業務で似た構成を実装させたときは、そのままでは使えないクオリティでした。
今回は、ほぼカンプどおり。
ただし手直しが必要だったところは、どれも見ているだけでは気づけない場所にありました。
frontendclip.com/ai-coding-l…
静的HTMLをCMSに載せ替える作業は、AIとの相性がかなり良い。
理由は、現行のHTMLという「正解」が先に存在するから。
作ったものが正しいかを、機械的に検証できます。
・現行HTMLと出力HTMLのテキスト一致率を測る
・クラスの出現回数を突き合わせる
・生成したデータを逆変換して元に戻してみる
どれも、機械が自分の答案を採点できます。
同じ実装でも、デザインカンプからのコーディングはそうはいきません。
主な正解がカンプ、つまり画像の中にあるので、
「人の目」による照合が必要になります。
Claude Opus 4.8 / Opus 5 / Fable 5 の3モデル。
出力されるコードの品質は、実際どこが違うのか。
同じカンプ・同じプロンプトで、お問い合わせフォームを実装させました。
zenn.dev/frontendclip/articl…
AIにお問い合わせフォームを実装させた検証で、ラベルと入力欄の紐付けが抜けている箇所がありました。
Webアクセシビリティには、見た目だけでは気づきにくいチェックポイントがあります。
・ラベルと入力欄が正しく関連付けられているか
・画像に適切な代替テキスト（alt）があるか
・キーボードだけでも操作できるか
モデルの進化とともに、こうした対応もかなり良くなっている印象です。
ただ、「コードを書ける」ことと「適切に実装できている」ことは別。
AIがコードを書く割合が増えるほど、「書けること」より「正しくできているか判断できること」が重要になっていきそうです。
AIコーディングツール、生産性向上の実感は約86%、一方で課題や不満も約67%という調査。
昨年11月の調査です。
「AI便利！でもあなたけっこうやらかすよね」という状態。
私自身、書く時間が確実に減ったぶん、仕事の重心が見るほうに寄っています。
atmarkit.itmedia.co.jp/ait/a…
デザインカンプとバリデーション（入力チェック）の定義書を渡して、お問い合わせフォームをAIに実装させました。出てきたコードが、そのまま本番に出せる状態かどうか。実際の案件と同じ見方で確かめました。
プロンプトも定義書も、記事に全文載せています。
frontendclip.com/ai-coding-c…
AIでコーディングは確実に速くなります。ただ、納品するコードとして考えると、確認を省ける段階ではありません。とくにカンプや指示書に書かれていないところは、念入りに見る必要がありました。
frontendclip.com/ai-coding-c…
PCでは「メガメニュー」
スマホでは「ハンバーガー＋アコーディオン」
実務で使える基本構成を、HTML・CSS・JavaScriptで実装する方法を解説しました✨
細かい挙動の制御も自作なら自由自在！
frontendclip.com/mega-menu/
#JavaScript #フロントエンド #Web制作 #コーディング #メガメニュー
mix-blend-modeを、文字色×背景色×主要モードで“実際に操作しながら”比較できるデモを作りました。
左が「通常」、右に主要なブレンドモードを並べています。
スクロールしつつ文字色や背景を切り替えることで、見え方の違いを確認できます。
コード＆詳細解説はこちら👇
frontendclip.com/mix-blend-m…
店舗サイトや企業サイトでよくある要望👇
・複数マーカーを置きたい
・地図の配色をブランドカラーにしたい
・経路を表示してナビに使いたい
iframeではできません。
👉 Maps JavaScript APIで実装する方法を2025年最新版で解説！
🔗 frontendclip.com/google-maps…
#Web制作 #GoogleMaps #JavaScript
Web制作で定番の「要素が見えたら実行」処理は、Intersection Observerでシンプルに実装できます。
とくに分かりにくい rootMargin / threshold も、値を変えたときの発火タイミングを体感できるデモ付きで解説しています。
👉 frontendclip.com/intersectio…
#JavaScript #フロントエンド #Web制作
スライド数に応じて挙動が変わるサムネイル付きスライダーを実装しました🖼️
🔹5枚以下：サムネイルは固定、選択中だけハイライト
🔹6枚以上：スライドに合わせてサムネイルも自動でスクロール
仕組みとコードはこちら👇
frontendclip.com/custom-slid…
#jQuery #Web制作 #フロントエンド
🎥 アコーディオンUIの開閉デモ
一見シンプル。でも、
「JavaScriptの基本理解」や「自作の第一歩」に最適です。
👉 詳細解説はこちら
frontendclip.com/accordion-j…
#JavaScript #フロントエンド #Web制作
CSSでガラス風の透明感や背景のぼかしを表現できる backdrop-filter。
モーダルや固定ヘッダーなど、実務ですぐ使えるテクニックをまとめました。
フィルター8種類の見え方＋応用例を徹底解説しています👇
frontendclip.com/backdrop-fi…
#CSS #Web制作 #フロントエンド
