OGPが表示されない原因と、エッジで動的生成する実装
SNSでシェアしても画像が出ない・古いまま残る。その定番原因を一つずつ潰し、さらに記事タイトルを差し込む動的OGP画像をCloudflareのエッジで生成する実装まで、制作会社向けに実装者の視点で整理します。シェア時の見え方を整えたい方に向けた内容です。
ブログ
記事一覧の5／7ページ目です。
Figma Dev Mode 注釈の使い方｜実装者が「聞く前に」欲しい情報
Dev Modeの注釈(Annotations)で、余白の数値は聞かなくても済むようになりました。それでも動き・条件・状態は伝わりにくい。実装者が着手前に本当に欲しい情報を、注釈で先回りして渡すコツをまとめます。デザインを渡す側の方は参考にしてください。
コーディングの納品をGitで受ける——制作会社と協業しやすい外注コーダーの進め方
zipの手渡しではなく、ブランチとPR（変更を提案する仕組み）で差分が追える形で納品します。履歴が残り、レビューでき、巻き戻せて、複数人で触れる。制作会社と協業しやすい進め方を、実際のやり方でお伝えします。外注コーダーとの協業を見直したい制作会社の方に向けた内容です。
他社が作ったサイトの改修・保守を安全に引き継ぐ手順
前任者不在・素性のわからないコードでも、現状把握から影響範囲の確認、バックアップ、小さく直して検証まで段取りを踏めば安全に改修できます。他社制作サイトの引き継ぎと高速化を任せたい制作会社の方へ。引き継ぎ案件で事故を起こしたくない方は、作業前の段取りの参考にしてください。
コーディング代行の修正対応——範囲の握り方と連絡の柔軟さで決まる
「修正は1回まで」「連絡はメールのみ」といった制約は、発注する制作会社にとって地味にやっかいです。回数で縛るのではなく、認識ズレを減らす前工程と合理的な範囲の修正対応で応える。私の修正運用の設計思想を、範囲の握り方と連絡手段の柔軟さから説明します。
構造化データが更新で壊れるCMSを、壊れない運用設計にする
手打ちで埋め込んだJSON-LDは、編集者が本文を触るたびに壊れます。CMSのデータから構造化データを自動生成し、テンプレート側へ隔離する設計で、更新後も崩れない運用にする考え方を、自サイトの実装をもとにまとめました。CMS案件を担当する方に向けた内容です。
納品後に別の人が更新できる「引き継げるコード」を書く外注先の選び方
外注したコードが属人化して、後で自社や別の会社が触れない。その不安を避けるには、引き継ぎを前提に書かれているかを見ます。命名・CSS設計・READMEなど、私が実際にやっている工夫を紹介します。外注先選びで失敗したくない制作会社・事業者の方は、依頼前の確認に役立ててください。
Figmaで作ったのにCMSで文字が溢れる。可変テキストの崩れを防ぐ渡し方
デザインは「ちょうど良い文字数」で作られがちですが、実データを流し込むと崩れます。CMS・多言語の可変テキストを最初から想定して渡すコツを、実装者の視点でまとめました。CMSで更新するサイトや多言語サイトのデザインを担当する方、実装後の崩れを減らしたい制作会社・ディレクターの方に向けた内容です。
コーディング指示書の書き方｜手戻りを減らす6項目と渡し方
コーディング指示書は、項目を並べるより、実装者が推測せずに手を動かせるかどうかで手戻りが決まります。受け取る側の視点で、即着手できる6項目、書き方の比較、Figma前提で省ける部分、CMS案件で足したい4項目をまとめました。
「スマホでは」より「640px以下」で。実装が崩れないレスポンシブ指示の渡し方
レスポンシブの指示は端末名でなく画面幅で渡すと、実装の挙動が一意に決まります。中間幅のデザイン不足で起きる崩れと、その防ぎ方を実装者の視点でまとめました。デザインデータを渡す制作会社・ディレクター・デザイナーの方に向けて、受け取る側が本当に助かる指示の形を整理しています。
外注コーダーが「途中で消えない」進捗共有の型
音信不通や進捗の見えなさは、制作会社が外注コーダーに抱く最大の不安です。着手連絡・中間共有・遅延の先出し・テスト環境の早期共有という、私が実際に守っている進捗共有の型を紹介します。外注コーダーとのやり取りに不安がある制作会社の方は、依頼先を選ぶときの判断材料にもしてください。
Astro・ヘッドレスCMSの実装、外注できる人がいない — モダン構成の案件を任せたい制作会社へ
「Astroやヘッドレスの引き合いは来るのに、社内・既存の外注では実装できない」——WordPress中心の制作現場で増えている悩みです。自サイトをAstro＋ヘッドレスCMS＋Cloudflareで作っている立場から、任せられる実装領域と、制作会社と組みやすい進め方をまとめました。