# ideaman's Notes アイデアマンズ株式会社の研究ノート。調査と実測にもとづく技術メモ 87件。最終更新 2026-08-14。 以下は概要の一覧です。関連しそうなものを選び、各行のリンク先を読んでください。 ## 2026年7月 - [実例に学ぶサイトスピード改善(7) head内の同期スクリプトが描画を止める](/v1/k/notes/docs/posts/2026/render-blocking-scripts.md) — HTMLのhead内に置かれた同期スクリプトは、ダウンロードと実行が完了するまでHTMLのパースを止める。外部CDNから読み込む場合はDNS解決とTLS接続の分だけ遅延が上乗せされる。 2026-07-22 - [CrUXはどのくらいあてになるか - Chrome限定の実測値を全ブラウザRUMと突き合わせてみた](/v1/k/notes/docs/posts/2026/crux-vs-rum.md) — CrUXはChromeのオプトインユーザーだけの実測値で、iPhoneのSafariもEdgeも対象外だ。全ブラウザRUMの Speed is Money と通販14サイトで突き合わせ、どこまで信用できるかを用途ごとに線引きした。 2026-07-20 - [実例に学ぶサイトスピード改善(6) 画像の寸法指定でガクッと動くページを防ぐ](/v1/k/notes/docs/posts/2026/cls-image-dimensions.md) — CLSは表示の速さとは別の指標で、読み込み中にコンテンツがずれる現象を数値化したもの。画像の width/height 指定とカルーセルの初期高さ確保の2つで、実在4サイトの CLS が最大89%改善した。 2026-07-19 - [通販サイトが遅いと損失はどのくらい？ 遅いサイトは見込み客の90%を取りこぼしている衝撃の損失見える化](/v1/k/notes/docs/posts/2026/speed-opportunity-loss.md) — サイトスピードが遅い通販サイトでは、本来買ってくれるはずだったユーザーが数多く離脱し、注文を取りこぼしている。通販14サイト・直近30日の実測データからその機会損失を可視化すると、速いサイトでも60%、遅いサイトでは90%以上を取りこぼして… 2026-07-16 - [実例に学ぶサイトスピード改善(5) 外部CDNは速いとは限らない](/v1/k/notes/docs/posts/2026/same-domain-resource-delivery.md) — 外部CDNからの配信はドメインごとに DNS・TCP・TLS の接続コストを足す。クリティカルパス上のCSSや同期JSなら、接続1回分で FCP・LCP が1秒以上悪化していた実例がある。効くケースと効かないケースを分ける。 2026-07-14 - [実例に学ぶサイトスピード改善(4) 重い日本語Webフォントが表示を遅らせる](/v1/k/notes/docs/posts/2026/japanese-webfont-optimization.md) — 日本語Webフォントは文字種が多くファイルサイズが英語フォントと桁違いになる。実在EC4例の数値を引きながら、未使用フォントの削除・font-display・サブセット化・preconnect を解説する。 2026-07-13 - [サイトスピードを改善してもCVRが変わらない？ 「機会損失率」なら成果が見えるかも](/v1/k/notes/docs/posts/2026/opportunity-loss-rate.md) — サイトスピードを大幅に改善しても、その前後でCVRには期待した効果が出ないことがある。通販サイト14サイト・約2,000万セッションの実測から、こうした場合はCVRではなく「機会損失率」を比べると、サイトスピード改善のビジネス成果を確認しや… 2026-07-09 - [実例に学ぶサイトスピード改善(3) テキストはGZIP/Brotliで圧縮する](/v1/k/notes/docs/posts/2026/text-compression-gzip-brotli.md) — テキストリソースのGZIP/Brotli圧縮は、サーバー設定を変えるだけで転送量を60〜80%削減できる。実在サイトでは設定漏れが意外と多く、有効にするだけでLCPが1秒以上改善した例もある。確認方法と設定方法を解説する。 2026-07-08 - [WebP/AVIFだけじゃないWeb画像最適化チェックリスト](/v1/k/notes/docs/posts/2026/web-image-optimization-checklist.md) — 画像最適化は「AVIF/WebPへの変換」だけで完結しない。適切な解像度・画像形式・データ最適化・画像配信・遅延読み込みの5本柱で、画像そのものと届ける仕組みの両面を点検するチェックリストを用意した。 2026-07-06 - [実例に学ぶサイトスピード改善(2) 画像は次世代フォーマットに移行する](/v1/k/notes/docs/posts/2026/images-webp-conversion.md) — AVIFやWebPへの移行は転送量に効く。ただし LCP は前段の FCP とダウンロード開始でほぼ決まるため、フォーマット変更で LCP が大きく縮むのは画像が極端に重いサイトに限られる。効きどころを実測データで示す。 2026-07-05 - [実例に学ぶサイトスピード改善(1) LCP画像は最優先で読み込ませる](/v1/k/notes/docs/posts/2026/lcp-image-priority-loading.md) — ファーストビューの最大画像に lazyload が残っていると、JavaScriptが動くまでダウンロードが始まらず LCP が数秒単位で悪化する。実在サイトの数値とともに、lazy を外す対処法と preload の要否を整理する。 2026-07-01 ## 2026年6月 - [Tailscaleという新しいネットワーク体験](/v1/k/notes/docs/posts/2026/tailscale.md) — オフィスに自前PCサーバーを持つ弊社がヤマハRTXによるVPNからTailscaleに移行して半年。Tailscaleは単なるVPNの代替に留まらず、AIエージェント時代の新しいネットワーク体験を提供するサービスである。 2026-06-28 - [アクセスランキングは何%クリックされるのか](/v1/k/notes/docs/posts/2026/access-ranking-clickthrough.md) — 弊社 Ranklet4 の累計約11.5億表示の実測データから、アクセスランキングのクリック率を分析。全体平均2.7%・典型値3.5%という代表値、設置場所による違い、対数正規分布というかたち、そして通年で1〜10%という安定した目安まで、… 2026-06-24 - [サイトスピードが遅いなら、まず疑うべきはサードパーティタグ](/v1/k/notes/docs/posts/2026/third-party-tags-and-sitespeed.md) — 広告・解析・タグマネージャーは思っている以上にサイトスピードを奪う。ページ本体は軽いのにタグだけで LCP が10秒以上遅い例も珍しくない。大規模改修の前にタグを見直す意義を解説する。 2026-06-22 - [ページスピードは一定ではない？ みんなのスピード体験を想像するコツは「対数正規分布」](/v1/k/notes/docs/posts/2026/speed-variance.md) — 同じページでもユーザーが体験する表示速度は大きくばらつく。その分布は対数正規分布のロングテールを描き、多くのユーザーは似たスピードで体験する一方、遅い人はとことん遅い。この形をつかめば、自分以外のユーザーのスピード体験を具体的に思い描けるよ… 2026-06-20 - [アクセスランキングの心理学](/v1/k/notes/docs/posts/2026/access-ranking-psychology.md) — なぜアクセスランキングはクリックされやすいのか。Googleディスプレイ広告の何倍ものクリック率を生む背景を、「社会的証明」と「選択肢を減らす効果」という2つの心理学的仮説と学術研究から考察する。 2026-06-17 - [「サイトスピード＝LCPなどの指標」ではない理由](/v1/k/notes/docs/posts/2026/sitespeed-is-not-a-metric.md) — LCPやINPなどの指標は「サイトスピード」の代名詞として使われるが、実際には本質を完全には表せない不完全な数値である。待ち時間がユーザーの集中力を少しずつ削り、コンバージョンを妨げる「抵抗の大きさ」こそがサイトスピードの正体であり、指標は… 2026-06-17 ## 2026年4月 - [GridgramをAIエージェントフレンドリーにする](/v1/k/notes/docs/posts/2026/gridgram-ai-agent.md) — CLIツール Gridgram を AI エージェントから使いやすくするための取り組みを解説する。llms.txt・Context7・gg llm のドキュメント系と、Skills・gg icons のコマンド系の2軸で整理した記録。 2026-04-23 - [Mermaid風のテキストから図解を生成するGridgram](/v1/k/notes/docs/posts/2026/gridgram-concept.md) — テキストDSL（.ggファイル）から関係図・概念図をSVG/PNGで生成するCLIツール「Gridgram」を開発した。グリッド配置による決定論的な出力と6000種類以上のTabler Iconsを組み合わせ、業務資料に馴染む図解をコードで… 2026-04-23 - [D2 + Freepik APIでポンチ絵を自動生成するAIエージェントを作ってシビれた](/v1/k/notes/docs/posts/2026/d2-and-freepik-agent-concept.md) — 図版記述言語D2とFreepik APIを組み合わせ、自然言語から高品質なポンチ絵を自動生成するAIエージェントのコンセプトを公開。パワポやKeynoteから解放される未来がすぐそこにある。 2026-04-08 - [Chart.jsのグラフをCLIで画像化するOSSツール「chartjs2img」を公開](/v1/k/notes/docs/posts/2026/chartjs2img.md) — Chart.jsの設定JSONをコマンド一発で画像化するCLIツール「chartjs2img」をOSSとして公開。AIエージェントによるレポート自動生成で役立つ、Chart.js 4.4と12プラグイン内蔵・セットアップ不要のグラフ画像生成… 2026-04-07 ## 2026年3月 - [LLMの原理を学ぶとAIとの付き合い方が上手くなる](/v1/k/notes/docs/posts/2026/learning-llm-internals.md) — LLMの内部原理（トークン・コンテキスト・アテンション機構）を学ぶことで、AIとの協業スキルが本質的に向上する。プロンプトテクニックより原理理解を優先すべき3つの理由を解説する。 2026-03-06 ## 2026年2月 - [「画像を軽くして」と言われたときの定量的な基準](/v1/k/notes/docs/posts/2026/image-fitness-criteria.md) — 約300サイトのECサイト調査から導き出した「画像配信効率（KB/Mpx）」と5段階評価基準を紹介。「画像を軽くして」という要望に統計的根拠をもって定量的に答えるための指標を解説。 2026-02-25 - [サイトスピードとCVRの関係を数式で記述する - 指数減衰モデル](/v1/k/notes/docs/posts/2026/speed-cvr-modeling.md) — 14の通販サイトのデータから、LCPとCVRの関係を指数減衰モデルで定量化。ポテンシャルCVR・減衰率・ロイヤルティCVRという3パラメータが持つビジネス的意味を解説する。 2026-02-10 - [AIエージェントによる自社メディア運営の統合プラットフォーム - セカンドフェーズ完成](/v1/k/notes/docs/posts/2026/ideamans-media-overview.md) — AIエージェント（Claude Code）とモノレポを組み合わせた自社メディア運営の自動化プラットフォーム。SNS投稿・HTMLメール配信の99%を自動化したセカンドフェーズの全容を公開する。 2026-02-06 - [アニメーションを抑制したWebスクリーンショットを撮るCLIツール static-webshot](/v1/k/notes/docs/posts/2026/static-webshot.md) — CSSアニメーション・カルーセルスライダー・乱数を徹底的に制御し、再現性のある決定論的スクリーンショットを撮影するCLIツール static-webshot の設計と実装を解説する。 2026-02-04 ## 2026年1月 - [サイトスピードとテレビの視聴率の不思議な関係](/v1/k/notes/docs/posts/2026/sitespeed-and-tv-ratings.md) — サイトスピードとテレビ視聴率は確率的に同一の構造を持つ。「良い体験が新規行動を生む」のではなく「離脱を防ぐことで本来あり得た成果を取り戻す」という因果メカニズムを解説する。 2026-01-31 - [Webページのほぼ完全なコピー環境を作る http-playback-proxy](/v1/k/notes/docs/posts/2026/http-playback-proxy.md) — Webページ表示に必要な全通信を記録・再生するRust製オープンソースツールhttp-playback-proxyの仕組みを解説。本番環境に触れずにサイトスピード改善施策をシミュレーションできる。 2026-01-26 - [通販サイトのスピードを遅くする悪魔のA/Bテスト - CVRに19倍の差](/v1/k/notes/docs/posts/2026/ec-site-speed-ab-test.md) — 服飾系ECサイトで実施した自然実験により、LCP 1.5秒の壁でCVRが19倍・再訪問率が4.5倍異なることを実証。サイトスピードが短期収益と長期LTVの両方に与える影響をデータで示す。 2026-01-21 ## 2025年12月 - [さくらのCDN料金体系の裏をかいた激安AWS Firehoseとして使う「ずるい使い方」](/v1/k/notes/docs/posts/2025/sakura-cdn-streaming-hack.md) — さくらインターネットのウェブアクセラレータは「アウトバウンドのみ課金・リクエスト数は無料」という料金体系を持つ。GETパラメータでユーザー行動データを送信しログに記録する手法でAmazon Data Firehose相当のストリーミングデー… 2025-12-29 - [ページ読み込みプロセスを動画化するCLIツール「Loadshow」をGo言語でリニューアル](/v1/k/notes/docs/posts/2025/go-loadshow.md) — Webページの読み込みプロセスをMP4動画に録画し、最適化前後を横並び比較できるCLIツール「Loadshow」をGo言語で全面リニューアル。単一バイナリ配布、OS標準H.264エンコーダ活用、Playwright自動ブラウザ調達など技術的… 2025-12-27 - [サイトスピードと収益性の定量的な関係 - 最小LCPによる新モデル](/v1/k/notes/docs/posts/2025/speedismoney-modeling-v4.md) — 通販サイト14サイトのデータ分析から、セッションのLCP代表値として「最小値」を採用することでサイトスピードとCVRの相関が明瞭になることを発見。平均LCPの因果逆転問題を解消した新モデルで「10%のLCP改善で約8〜9%のCVR改善」とい… 2025-12-15 ## 2025年9月 - [Gemini CLIで寝ている間に仕事してくれる「小人のくつ屋さん」を手軽に実現する](/v1/k/notes/docs/posts/2025/gemini-cli-common-work.md) — Gemini CLIとPlaywright・Brave Search MCPサーバーを組み合わせ、TSVファイルの空欄をAIが自動で埋めるバッチ処理を構築する方法を解説。プログラミング不要で単純な繰り返し調査作業をAI自動化できる「テキスト… 2025-09-01 ## 2025年8月 - [Feedlyの「あとで読む」を一括で抜き出す方法](/v1/k/notes/docs/posts/2025/feedly-read-later.md) — FeedlyのAPIがPro版で使えない問題を回避し、ChromeデベロッパーツールのJavaScriptコンソールから「あとで読む」記事の公開日時・URL・タイトルをタブ区切りでスプレッドシートに抽出するスクリプトを紹介する。データの自己… 2025-08-26 ## 2025年7月 - [WebPやAVIFに対応していない旧ブラウザのふりをするChrome拡張機能](/v1/k/notes/docs/posts/2025/next-gen-image-accept-controller.md) — 次世代画像フォーマットの出し分けをデバッグするため、HTTP Acceptヘッダを書き換えてWebP/AVIF非対応ブラウザをシミュレートするChrome拡張機能を開発・公開。旧ブラウザの実機調達が困難な現在の代替検証手法として活用できる。 2025-07-02 ## 2025年6月 - [AI時代のソフトウェアアーキテクチャと開発](/v1/k/notes/docs/posts/2025/ai-era-software-architecture.md) — AIコーディングの時代に最適なソフトウェア設計とは何か。接着コードの肥大化という従来の課題に対し、AIに部品開発を委ねてOSS化するマイクロサービス的アーキテクチャが6ヶ月の工期を3週間に短縮した実例を考察する。 2025-06-09 - [JPEGのEXIFサムネイルを削除するGo言語パッケージを公開](/v1/k/notes/docs/posts/2025/go-exif-remove-thumbnai.md) — JPEGのメタデータを無闇に削除するとICCプロファイルや向き情報が失われるが、EXIFサムネイルだけは積極的に削除すべき理由とそのGo言語製OSSツールを紹介。画像軽量化における副作用リスクとサムネイルデータの存在を解説する。 2025-06-03 - [Go言語のローカライゼーションパッケージ go-l10nを公開](/v1/k/notes/docs/posts/2025/go-l10n.md) — Movable Typeのローカライゼーション設計にインスパイアされた、英語メッセージ自体をキーとするシンプルなGo言語向け多言語対応パッケージgo-l10nを公開。認知負荷の低い辞書設計と環境変数による言語自動判別の実装アプローチを紹介す… 2025-06-01 ## 2025年5月 - [Web画像フォーマットの細かなバリエーションを網羅するデータセットとツールキットを公開](/v1/k/notes/docs/posts/2025/web-image-format-variation-toolkit.md) — JPEG・PNG・GIFの内部フォーマットバリエーション（Exifの有無・圧縮方式・サブサンプリング等）を包括的に網羅したデータセットとPython製生成ツールをOSSとして公開。画像変換ツールの品質評価や予期せぬトラブルの事前検知に活用で… 2025-05-31 - [AIコーディングと新時代の開発スタイル](/v1/k/notes/docs/posts/2025/ai-programming.md) — Claude CodeによるAIコーディング（Vibe Coding）を実践し、テストコードやドキュメント生成を含むGoパッケージを3時間で完成させた体験から、AIをOSSとして信頼する意識転換やマイクロサービス的設計思想など新時代のプログ… 2025-05-27 - [Vibe Codingでライブラリ選定のための簡易ベンチマークを頼む](/v1/k/notes/docs/posts/2025/vibe-coding-benchmark.md) — Go言語でKVSライブラリ（LevelDB・BBolt・Badger・Pebble・SQLite）を比較するベンチマークプログラムをClaude Codeに丸投げし、30分のプロンプト作成で一日がかりの作業を完了した体験を紹介。Vibe C… 2025-05-27 - [画像軽量化コストの妥当性「いくらまで適切？」を考える](/v1/k/notes/docs/posts/2025/image-fitness-cost.md) — Web画像軽量化の費用対効果を「海外クラウドコスト削減・表示スピード改善・CSR・チーム摩擦解消」の4つの価値軸で分析。月1000万PVの通販サイトで35万円/月の削減実績も交え、妥当な投資額の判断基準を具体的に示す。 2025-05-12 - [広報ブログをリニューアル・VitePressカスタマイズのコツ](/v1/k/notes/docs/posts/2025/blog-renewal.md) — Movable TypeのブログをVitePressで再構築し、ビルド時間を1分41秒から5.66秒に短縮した実例を紹介。Layout.vueでのテンプレート切り替え、データローダー、ダイナミックルート、RSSフィード生成など本格ブログ構築… 2025-05-06 - [AIとGitHub Actionsで定期的に記事の宣伝をXに投稿する](/v1/k/notes/docs/posts/2025/x-ai-posting.md) — 過去のブログ記事をランダムに抽出し、GeminiがSNS投稿文を自動生成してGitHub ActionsのCronワークフローで1日2回Xに投稿する仕組みを構築。文面パターン23種類のプロンプト設計からX APIの認証設定まで実装の全体像を… 2025-05-03 - [Mastra + ローカルLLM経由でMCPする](/v1/k/notes/docs/posts/2025/mastra-local-llm.md) — LM StudioでQwen3をOpenAI互換APIとして起動し、MastraのAI SDKからローカルLLMに差し替えてPlaywright MCPサーバーでブラウザを操作する実験を紹介。クラウドLLMとの精度差の現実と、手元のMacB… 2025-05-02 ## 2025年4月 - [アイデアマンズのミッションは「Webフィットネス」](/v1/k/notes/docs/posts/2025/mission-web-fitness.md) — 画像軽量化・ページ表示速度改善・アクセスランキング効率化という3つの事業に共通する「WebにおけるムダをなくしたいI」という思想を解説。デジタル赤字・クラウドコスト・ユーザー体験の観点から、アイデアマンズが目指す「Webフィットネス」のミッ… 2025-04-30 - [Googleスプレッドシートを簡易データベースにするNPMモジュールを公開](/v1/k/notes/docs/posts/2025/google-spreadsheet-tables.md) — TypeScript + ZodでGoogleスプレッドシートをドキュメントデータベースとして扱えるNPMモジュール「google-spreadsheet-tables」を公開。RDBMSを用意するほどでもない小規模データ管理に最適で、GU… 2025-04-26 - [AIエージェント × MCP × スプレッドシートで寝ている間に仕事をしてくれる「小人のくつ屋さん」を実現する](/v1/k/notes/docs/posts/2025/agent-mcp-batch.md) — Mastra・Playwright MCP・Googleスプレッドシートを組み合わせ、多数のWebサイトを自律的に調査するAIバッチ処理を実装する方法を解説。ソースコードも公開し、寝ている間にスプレッドシートが自動で埋まる仕組みの構築手順を… 2025-04-20 - [メディアサイトのアクセスランキング採用率は？ 平均 74%](/v1/k/notes/docs/posts/2025/access-ranking-adoption.md) — ニュース系メディアサイト220サイトを対象にアクセスランキングの採用率を調査。全体平均74%で、地方紙・IT専業メディアは90%超、一方で専門性の高いメディアは平均以下という実態とジャンル別の傾向を公開データで解説する。 2025-04-17 - [AIで300件ほどのメディアサイトを挙げてみた](/v1/k/notes/docs/posts/2025/media-sites.md) — ChatGPTでジャンル分類を得た後、GensparkとGemini Deep Researchのディープリサーチを活用して日本国内のメディアサイト約300件をURLつきでリスト化する手順を紹介。AIによる大規模リサーチの実力と限界、収集デ… 2025-04-10 ## 2025年3月 - [高速な通販サイトのための設計と実装](/v1/k/notes/docs/posts/2025/ec-speed-practice.md) — 体感スピードの速い通販サイトを実現するためのHTML全体キャッシュ戦略、JavaScriptで補完するダイナミック情報提供、CSSパージによる肥大化防止、サードパーティタグ管理、次世代画像フォーマット活用まで、新規構築・大幅リニューアル向け… 2025-03-17 ## 2025年2月 - [WebP変換の適切なタイミングについて](/v1/k/notes/docs/posts/2025/lazy-conversion.md) — 次世代画像フォーマット変換を「事前変換」と「オンデマンド変換」で比較し、ECサイトのように画像数が多い場合はオンデマンド変換が現実的であることを解説。さらに初回アクセスの遅延とサーバー過負荷を回避する「オンデマンド遅延変換」の設計思想とその… 2025-02-15 - [目標使用量ベースのファイル削除ツールを公開](/v1/k/notes/docs/posts/2025/go-file-cleaner.md) — 「10GBに収まるよう古いファイルを削除する」という目標容量ベースのクリーニングをGo言語で実装したOSSツールを紹介。ブロックサイズ基準の計算、省メモリ設計、並列処理による高速化など、大量ファイルを扱うサーバー運用の実用的な工夫を解説する… 2025-02-11 ## 2025年1月 - [デジタル赤字縮小のためのWeb画像軽量化](/v1/k/notes/docs/posts/2025/digital-trade-deficit.md) — AWSなど海外クラウドのデータ送信料金を削減し、デジタル赤字縮小にも貢献するWeb画像軽量化の経済的メリットを解説。月100万PVのサイトで30〜40%のコスト削減効果が見込め、次世代画像フォーマットWebP/AVIFへの移行が「三方よし」… 2025-01-26 - [Web技術で作るグラフィックツールの拡張機能](/v1/k/notes/docs/posts/2025/graphic-tool-plugins.md) — Figma・Canva・PhotoshopのプラグインはすべてHTML/CSS/JavaScriptで開発できる。各ツールのプラグインSDKと開発環境の概要を紹介し、AIのビジネス統合に向けてプラグイン・エンジニアというキャリアが今後注目さ… 2025-01-14 ## 2024年12月 - [スピード指標の確率分布ユーティリティをNPMで公開](/v1/k/notes/docs/posts/2024/npm-web-vitals-distribution.md) — Core Web Vitalsなどサイトスピード指標が従う対数正規分布の計算ライブラリ「web-vitals-distribution」をNPMで公開。CrUXの良好・不良割合から分布を推定し、PDF描画・パーセンタイル計算・CDFなどを提… 2024-12-31 - [サイトスピード指標の対数正規分布を確かめる](/v1/k/notes/docs/posts/2024/web-vitals-distribution.md) — Core Web Vitalsなどサイトスピード指標が対数正規分布に従うという前提を実データで検証。ヒストグラム・Q-Qプロット・統計的検定を用い、OnLoad・LCP・INPは対数正規分布に近く、CLSはやや一致度が低い実態を視覚的・定量… 2024-12-29 - [Ranklet4 アクセスランキングの AIレビュー登場！](/v1/k/notes/docs/posts/2024/ranklet4-ai-review.md) — Ranklet4にGeminiを活用したAIレビュー機能を追加。週間・月間ランキングの推移をもとに生成AIが自動でレポートを作成し、メール定期配信も可能。記事形式と箇条書きなどカスタマイズ設定の詳細と、ランキング解析という新しい切り口の狙い… 2024-12-16 ## 2024年11月 - [Core Web Vitalsの改善は本当に進んでいるか](/v1/k/notes/docs/posts/2024/core-web-vitals-trends.md) — 国内主要ECサイト100社のCrUXデータ月次推移を分析。CLSは2021〜2022年に大幅改善したがLCPはほぼ横ばい、INPは緩やかな改善傾向を確認。データが示すサイトスピード改善の現実と、各指標の改善が難しい理由を解説する。 2024-11-28 - [Core Web Vitalsの超実践的な改善術 - 総集編](/v1/k/notes/docs/posts/2024/core-web-vitals-in-action.md) — MTDDC Meetup Tokyo 2024での登壇を機にまとめたCore Web Vitals改善の集大成。CLS・LCP・INPの改善手法とサードパーティタグ対策をPageSpeed Questを活用した弊社独自のフレームワークで体系… 2024-11-24 - [移動しました - Core Web Vitalsの実践的な改善術 - INP編](/v1/k/notes/docs/posts/2024/core-web-vitals-in-actino-inp.md) — このページはURLの変更にともない移動しました。新しいURLへ自動で転送されます。ブックマークをお使いの場合は、移動先のURLへ更新をお願いします。 2024-11-21 - [Core Web Vitalsの実践的な改善術 - INP編](/v1/k/notes/docs/posts/2024/core-web-vitals-in-action-inp.md) — INP（Interaction to Next Paint）はシミュレーションできず改善が難しいCore Web Vitals指標だ。 2024-11-21 - [Core Web Vitalsの改善術 - サードパーティタグ編](/v1/k/notes/docs/posts/2024/thirtparty-tag.md) — サードパーティタグがTBTを1,530msから110msへ劇的に悪化させる実例を示し、棚卸し・削除・起動遅延の対策を解説。GTMの複数コンテナ問題、スクロール連動起動、ブラウザ言語による条件分岐など、実装可能な具体的コードを交えて解説する。 2024-11-20 - [Core Web Vitalsの実践的な改善術 - LCP編](/v1/k/notes/docs/posts/2024/core-web-vitals-in-action-lcp.md) — LCP改善の最大の誤解は「画像軽量化が効く」という思い込みだ。LCPはFCP+最大要素遅延の構造で理解すべきで、FCPを阻害するCSS・JavaScript問題と、メイン画像の読み込み優先制御が実践的な改善の核心であることを詳しく解説する。 2024-11-18 - [INPの収集および改善提案サービスを開始](/v1/k/notes/docs/posts/2024/speedismoney-fieldwork.md) — INP悪化の根本原因を特定するため、web-vitalsのattribution buildで実ユーザーのInput delay・Processing time・Presentation delayをBigQueryに収集する仕組みを構築。… 2024-11-15 - [Core Web Vitalsの実践的な改善術 - CLS編](/v1/k/notes/docs/posts/2024/core-web-vitals-in-action-cls.md) — CLS（Cumulative Layout Shift）改善の実践的手法を解説。画像のwidth/height明示、JavaScriptによるコンテンツ挿入への領域確保、カルーセルスライダーのHTMLとCSSによるモックアップ化など、丁寧な… 2024-11-10 - [PageSpeed Insightsの正しい読み方・活かし方](/v1/k/notes/docs/posts/2024/effective-pagespeed-insights.md) — PageSpeed Insightsのスコアは意思決定の根拠にならず、指摘事項の多くは10年前の話だ。真に重要なのはCrUX Web VitalsとLighthouseの指標値だけであり、両者の役割の違いと正しい活用法をANAトップページの… 2024-11-09 - [自前アクセスランキング実現のつらみ](/v1/k/notes/docs/posts/2024/ranking-hard-things.md) — アクセスランキングを自前実装するとDBへの書き込み負荷でパンクする。スケーラビリティの問題を解決するにはKinesisなどのストリーミングサービスか、GA4を活用する発想の転換が有効。Ranklet4がGA4データを使う技術的合理性を詳しく… 2024-11-03 ## 2024年10月 - [サイトスピードと収益性を高い解像度で理解する](/v1/k/notes/docs/posts/2024/sitespeed-profiling.md) — 通販サイトの実データでサイトスピードと収益性の関係を高解像度で分析。ユーザーを「絶対買わない層97.5%」「絶対買う層0.3%」「買うかも層2.2%」に分類し、機会損失率1.7%がCVR0.8%を上回る実態と、20%改善で収益22%向上の試… 2024-10-26 - [Difyでの自前APIとの連携方法と注意点](/v1/k/notes/docs/posts/2024/dify-custom-tool.md) — DifyカスタムツールによるOpenAPI-Swaggerスキーマを使った自前API連携の手順を実例で解説。入力スキーマの活用法、出力がフラットテキストのみとなる制限への対処法、API認証設定（Basic/Bearer）まで、実装時の注意点… 2024-10-19 - [Dify会話変数でcanvasのような共同作業を実現](/v1/k/notes/docs/posts/2024/dify-conversation-variable.md) — DifyのチャットフローでChatGPT with canvasのような「共同作業」を実現する方法を解説。会話変数に成果物を保持し、パラメータ抽出ブロックと変数代入ブロックを組み合わせることで、AIとの継続的な共同編集を実装できる仕組みを俳… 2024-10-18 - [自動生成するロゴマークを刷新 "alogorithm2"](/v1/k/notes/docs/posts/2024/alogorithm2.md) — アイデアマンズのロゴマークを自動生成するプログラムをalogorithm2として刷新。seedパラメータで無数に変化する幾何学模様をNode.js・trianglify・blobsライブラリで実現する仕組みと、動的ビジュアルアイデンティティ… 2024-10-15 - [DifyをAWSでガチ目に動かすには？〜理論編](/v1/k/notes/docs/posts/2024/my-aws-dify-stack.md) — DifyのDocker Compose構成をAWSに本番移行するアーキテクチャ設計を解説。ECSでコンテナを展開し、RDS/Aurora・ElastiCache・OpenSearch・S3・SESにマッピングする全体像と、Firecrawl… 2024-10-08 - [Difyが対応しているベクトルデータベース](/v1/k/notes/docs/posts/2024/dify-vector-stores.md) — DifyのRAG機能が対応するベクトルデータベースを網羅的に調査。Weaviate・Qdrant・Milvus・pgvector・OpenSearch・Elasticsearch・TiDBなど13種類以上を一覧し、AWS本番環境ではOpen… 2024-10-07 - [セルフホストしたDifyとNotionを接続する方法](/v1/k/notes/docs/posts/2024/dify-notion.md) — セルフホスト版DifyにNotionのナレッジを取り込む設定手順を解説。Notion側で内部インテグレーションを作成しIDとシークレットを取得、DifyのdockerのENV変数に反映して再起動する具体的な手順と、手動再同期の方法まで網羅す… 2024-10-07 - [自分専用DifyにFirecrawlもセルフホスト](/v1/k/notes/docs/posts/2024/my-own-firecrawl-for-dify.md) — DifyのRAGをWebクローリングで強化するFirecrawlを同じVPSにセルフホストする手順を解説。Docker Composeのネットワーク接続でDifyとFirecrawlを連携し、APIキーとBase URLの設定でWebサイト… 2024-10-04 - [VPSでお安く自分専用のDifyを持つ方法](/v1/k/notes/docs/posts/2024/my-own-dify.md) — オープンソース版DifyをVPSに月1,500円程度でセルフホストする手順を解説。Docker ComposeプロジェクトのクローンからSSL証明書の取得・nginx設定・管理者アカウント作成まで、Ubuntu上での一連の構築手順を詳細なコ… 2024-10-04 - [Dify - この素晴らしきLLMアプリ開発環境](/v1/k/notes/docs/posts/2024/dify.md) — LLMアプリ開発プラットフォームDifyの全体像を解説。ワークフローエンジンとしての設計、チャットフロー・テキストジェネレーター・エージェントのユースケース使い分け、RAGナレッジ機能、カスタムツールによる外部API連携、注釈機能まで実用的… 2024-10-02 ## 2024年9月 - [要約「サイトスピードと幸福の心理学」](/v1/k/notes/docs/posts/2024/psychology-site-speed.md) — SpeedCurveの論文「サイトスピードと幸福の心理学」を要約・解説。待ち時間を35%も遅く感じる非合理な人間心理、集中力の前借り、2秒超で生産性低下といった知見から、サイトが遅いとブランド価値まで毀損するという研究成果を紹介する。 2024-09-25 - [OGP画像を自動生成するプログラムをOSSで公開](/v1/k/notes/docs/posts/2024/banner-generator.md) — ヘッドレスブラウザに頼らずNode.jsのsharpとtext-to-svgでOGP画像を自動生成するOSSを開発・公開。背景画像への文字合成をURLパラメータで制御でき、フォントサイズ自動調整など実用的な工夫も解説する。 2024-09-23 - [WebアプリのためのSSLをサクッと立てる](/v1/k/notes/docs/posts/2024/nginx-with-lego-ssl.md) — VPS上のWebアプリにSSLを手軽に設定する方法として、Route53+lego+nginx+Dockerの組み合わせによる汎用SSLゲートウェイを解説。ワイルドカード証明書の自動取得・更新、シェルスクリプトによるサイドカー処理の仕組みを… 2024-09-20 - [Appleサイトはサードパーティタグを使っていない](/v1/k/notes/docs/posts/2024/apple-has-no-3rdparty.md) — Appleの公式サイトにはGoogle AnalyticsどころかサードパーティJavaScriptが一切存在しない。自社スクリプトが計測を一元管理するアーキテクチャは、サイトスピード観点から理想的な設計であり、その技術的根拠と示唆を解説す… 2024-09-16 - [そろそろWeb画像はWebPだけでよいか](/v1/k/notes/docs/posts/2024/webp-only.md) — WebPの国内対応率96.4%到達を受け、WebP一択移行の是非を多角的に検討。透過・アニメーション・可逆圧縮を全て網羅する万能性は評価できる一方、供給サイドの対応遅れ・エコシステムの懸念・技術負債リスクなど反対論もバランスよく論じる。 2024-09-15 - [GitLabセルフホスティングの話](/v1/k/notes/docs/posts/2024/gitlab-selfhost.md) — GitHubではなくGitLabをセルフホストする理由と、月500円程度で安定運用するシステム構成を解説。退役PCにProxmox+Dockerを構築しautosshで出島サーバ経由で外部公開、sameersbn/gitlabイメージとng… 2024-09-11 - [GitLabのよくある操作を半自動化するCLIツール](/v1/k/notes/docs/posts/2024/gitlab-op.md) — GitLabのグループ作成・プロジェクト作成・メンバー招待をコマンドラインから行えるGo言語製OSSツール「gitlab-op」を公開。GUIでの繰り返し操作を削減し、go-gitlabライブラリでスラグとIDの変換も自動化した実装の背景と… 2024-09-09 - [ページの読み込みを動画化するOSSツールを公開](/v1/k/notes/docs/posts/2024/loadshow.md) — Webページの読み込み過程を動画化し視覚的に比較できるOSSツール「loadshow」を公開。Puppeteerとffmpegを組み合わせ、URLを指定するだけで読み込み動画を生成・左右比較できる。専門家以外にもスピード改善の成果を直感的に… 2024-09-09 ## 2024年7月 - [サイトスピードの最も重要な指標とは？](/v1/k/notes/docs/posts/2024/important-metrics.md) — アパレルECサイトの実データでLCP・CLS・FCP・OnLoad・TTFBとCVRの相関を分析。OnLoadが良好なセッション群は全体平均の3倍以上のCVRを示し、20%改善で注文数22%増という試算も。サイトごとに最重要指標が異なる理由… 2024-07-11