IllustratorからWeb用画像を書き出す方法｜アートボード運用＋JSXで一括リネーム

動画・画像編集
デザインカンプから画像を書き出す作業が、毎回しんどい。特に校了データが回ってきたときの「また全部やり直し」がつらかったので、アートボード化して画像を書き出す時のリネームをJSXスク…
続きを読む

Claude for Chrome × Claude Code で、Webサイトを校正する方法｜プロンプトつき実践ガイド

AIでWebｺｰﾃﾞｨﾝｸﾞ
前の記事で「ClaudeforChromeで誤字が見つかる」という話を書いた。今回はさらに踏み込んで、ClaudeCodeの/chrome接続と組み合わせた、より網羅的な校正フロー…
続きを読む

HTMLエンティティ変換ツール｜特殊文字 <> & " ' → 実体参照

ツール HTML/CSS
<>&"などの特殊文字や、改行・タブを、HTMLの実体参照（エンティティ）に一括変換するツール。HTMLメールのalt属性やコード表示等のエスケープに…
続きを読む

MarkItDownで崩れる2カラム表PDFを、pdfplumberで正しくMarkdownテーブル化する｜PDF表抽出の実装と精度改善

PDF・文書編集
以前、MarkItDownでpptx/docx/pdfをMarkdownに変換するWebツールを作った記事を書きました。ドラッグ&ドロップだけで各種ファイルをMarkdow…
続きを読む

ブックマークレットは案外いいぞ｜X（旧Twitter）片思い一括フォロー解除ツールを作って再評価した「API非依存」の強さ

JavaScript
正直に白状すると、私はずっとブックマークレットを軽く見ていました。「javascript:から始まる古い書き方」「モダンじゃない」——そんなイメージで、選択肢から外していたんです。…
続きを読む

MarkItDownで、pptx/docx/pdfを → Markdownに変換するWebツールを作った

PDF・文書編集 ツール
WordやPowerPoint、PDFの内容をMarkdownにしたい場面は意外と多いものです。ブログの下書きに流用したい、READMEにまとめたい、あるいはChatGPTやCla…
続きを読む

CSS三角形ジェネレーター｜8方向・内枠・くり抜き対応（clip-path）

ツール HTML/CSS
CSSの三角形を8方向（▲▼◀▶◤◥◢◣）から選んで生成。幅・高さ・色に加え、三角形の内側に作る「内枠」や、内側を透明にくり抜いた三角形にも対応。clip-pathのコードをコピー…
続きを読む

HandBrake のおすすめ圧縮設定 — Web動画を高画質のまま小さくする方法

動画・画像編集
Webサイトに置く動画が重くて困っていませんか？HandBrakeを使えば、4K素材を高画質のままWeb用に圧縮できます。この記事では、同じドローン空撮素材（1分・元4K・281M…
続きを読む

scroll-padding-topはリロード時にズレる？CSS変数とJavaScriptで解決するアンカーリンク調整

JavaScript
固定ヘッダーのあるサイトでアンカーリンクを使用すると、ジャンプ先がヘッダーの下に隠れてしまう問題があります。この問題を解決する方法としてscroll-padding-topが広く知…
続きを読む

CDN「unpkg.com」は安全？信頼性とメリットをクライアントに説明する方法

JavaScript
unpkg.comは、npm上の全パッケージを高速配信するCDN（コンテンツ配信ネットワーク）サービスです。JavaScriptライブラリやCSSフレームワークを、自社サーバーにア…
続きを読む