ヘッダーのナビはCMSから変えられる？ ヘッドレス構成で「本文の外側」を渡す設計
ヘッダーのメニューやサイト名も、ヘッドレスCMSならクライアントが編集できます。EmDashのメニュー・サイト設定・ウィジェットエリアの3つを整理し、どこまで渡してどこをコードに残すか、自サイトの実装を例に線引きの基準をまとめました。
ブログ
記事一覧の3／7ページ目です。
本文にCTAや動くデモを入れる｜EmDashでリッチテキストを拡張する4つの方法
記事の途中にCTAボックスや比較表、動くデモを入れたい。ヘッドレスCMSでそれを実現する方法をHTMLブロック・セクション・カスタムブロック・プラグインの4段階に整理し、自サイトでGSAPデモを埋め込んだときに詰まった点も含めて実装者視点でまとめました。
サーバー保守を抱えたくない制作会社へ。Cloudflare前提の構成で消える作業・残る作業
納品後のWordPress更新や監視、バックアップは件数分だけ積み上がります。Workers+D1+R2のCloudflare前提で組むと何が消え、何が残るのか。自サイトの運用実態と無料枠の注意点まで正直に整理しました。
静的サイトのまま動的処理を足すCloudflare Workers活用
静的サイトは速いがフォームやOGPが動かないのでは、という懸念はCloudflare Workersで解消できます。自サイトで動くフォーム送信・メール通知・動的OGP・下書きプレビューの実例と、動的CMSに寄せるべきケースの判断基準をまとめました。
WordPressからEmDashへ移行する手順と注意点
WordPressからEmDashへの移行で工数を決めるのは、記事数より運べないものの量です。棚卸し6項目、WXRとExporterで運べる範囲、取り込みの落とし穴、旧URLのリダイレクトまで、2026年10月の仕様で確かめた手順をまとめました。
ヘッドレスCMSのフィールド設計｜クライアントが更新しても崩れない管理画面にする
納品後の「更新したら崩れた」は操作ミスより設計が原因。本文リッチテキスト1本をやめて意味ごとにフィールドを割り、繰り返しは器で持ち、0件や長文はテンプレート側で吸収する。自サイトEmDashの実装から具体的に。CMS案件を担当する制作会社の方に向けた内容です。
書き出した画像がぼやける・ガタつく — 渡す前に防ぐ、実装者からのお願い
支給した画像がRetinaでぼやける、細い線がガタつく、なぜか位置が合わない。書き出した画像の不具合は、渡す前にほぼ防げます。ぼやけとにじみの原因、そして写真とロゴで書き出しを分けるコツを、受け取って組む側の視点でまとめました。
Figma VariablesをそのままCSS変数に写す——デザイントークンの受け渡し
カンプから色を拾ってベタ書きし、ダークモードで総取り替え——その手戻りは、Figma VariablesとCSSカスタムプロパティを同じ構造で並べれば消えます。自サイトのトークン設計を例に、型・モード・エイリアスの写し方と、デザイナー側に用意してほしい3点をまとめました。
LCPが遅い原因は「内訳」でわかる — サーバーを疑う前に見る4区間
表示が遅い原因はサーバーとは限りません。自分のサイトを計測したらTTFBは約10ミリ秒、それでもLCPは4.8秒でした。LCPを4区間に分けて犯人を特定し、作り直さずに直した手順を実装者の視点でまとめます。表示速度の改善を任されている方に向けた内容です。
GSAPの使い方 — gsap.to()からtimeline・staggerまで、記事内で動かして覚える
GSAPの書き方を、記事の中の動くデモで確かめながら追えるようにしました。gsap.to()の基本、timelineでの順番の制御、staggerでの複数要素。CSSで足りる場面との線引きと、読み込みや動きを減らす設定への配慮まで実装者の視点でまとめます。
「レスポンシブは別料金」で揉めないために、着手前に握る実装仕様
納品直前に「対応端末は別」「その状態は追加」と後出しされて揉める。原因は金額でなく、対応範囲の言語化不足です。着手前にブラウザ・端末・ブレークポイント・中間幅・状態・フォーム挙動を先に合意する実務をまとめました。外注の見積もりで揉めたくない方に向けた内容です。
義務化後のWebアクセシビリティをどうするかーー実装で押さえる勘所
2024年4月の法改正で合理的配慮の提供が義務化されました。ただしWebサイトの準拠対応は努力義務です。制作会社が実務で押さえるべきフォーカス管理・コントラスト・aria・キーボード操作を、自サイトの実装とあわせて具体的にまとめます。