Journal — 56 posts

Notes on making

Webの歴史とモダンな作り方、各言語の紹介、デザイン、ディレクションとプロジェクトマネジメント（WBS・ガントチャート）まで。つくる現場で使える単位で書いています。

2026.11.06
公開先を並べて比べる——レンタルサーバー・Vercel・Netlify・Cloudflare Pages
公開先は「どこが有名か」より、誰が更新するか、サーバー側の処理があるか、問題が出たときにどう戻すかの3軸で選ぶと決めやすくなります。レンタルサーバー・Vercel・Netlify・Cloudflare Pagesを公式ドキュメントをもとに比べます。
#modern-web#direction
2026.11.05
画像フォーマットの使い分け表——JPEG・PNG・WebP・AVIF・SVGを用途で比べる
画像形式は「どれが一番軽いか」より、写真か図か、透過は要るか、誰が差し替えるかで選ぶと決めやすくなります。JPEG・PNG・WebP・AVIF・SVGの特徴を公式資料で確認し、用途別の表に整理します。
#modern-web#design
2026.11.04
ドメインとDNSを切り替える前に知っておくこと——Aレコード・CNAME・TTL
DNSの切り替えで段取りを左右するのは、当日の設定作業より前日までの準備です。Aレコード・CNAME・TTLの役割をRFCと公式ドキュメントで確認しながら、切り替え前に決めておく順番を整理します。
#modern-web#direction
2026.11.03
CSSの書き方を比べる——素のCSS・CSS Modules・Tailwind CSS
素のCSS・CSS Modules・Tailwind CSSは、どれが上かより「誰が更新し、変更の影響をどこで読むか」で選ぶと決めやすくなります。引き継ぎやすさ・変更範囲の読みやすさ・導入の手間の3軸で、公式ドキュメントをもとに比べます。
#modern-web#direction
2026.11.01
遅延を報告するときの型——事実・影響・選択肢の3点で伝える
遅れの報告が揉めるのは、謝罪と言い訳が先に来て、相手が判断に使える材料が後回しになるからです。私が使っている「事実・影響・選択肢」の3点で書く報告の型と、送るタイミングの決め方を整理します。
#pm#direction
2026.10.31
AIをコーディングに使うときの線引き——任せる範囲・自分で読む範囲・テストで守る範囲
AIにコードを書かせるとき、私は「任せる」「自分で読む」「テストで守る」の3つに分けて線を引いています。全部任せるか全部疑うかの二択にせず、どこを人が持つかを決めておくための整理です。
#ai#direction
2026.10.30
ディレクターが知っておくGitの範囲——ブランチ・プルリクエスト・レビューの流れ
ディレクターがGitのコマンドを覚える必要はあまりありません。ただ、ブランチ・プルリクエスト・レビューの3つが「何を決める場所か」を知っていると、進行と確認の精度が上がります。私が押さえている範囲を整理します。
#direction#pm
2026.10.29
アクセシビリティの最小チェック——コントラスト・キーボード・代替テキスト・見出し構造
アクセシビリティ対応を「専門家に頼む大きな作業」と考えると、いつまでも手が付きません。私が公開前に30分ほどで見ている、コントラスト・キーボード操作・代替テキスト・見出し構造の4点の確認手順を整理します。
#design#modern-web#direction
2026.10.28
保守運用の契約範囲の決め方——定期作業・問い合わせ対応・緊急対応を分ける
保守運用の契約を「月額いくらで面倒を見ます」とだけ決めると、公開後に範囲の食い違いが起きます。私は定期作業・問い合わせ対応・緊急対応の3つに分け、それぞれ回数・時間・判断者を書くようにしています。その分け方を整理します。
#direction#pm
2026.10.27
発注側に説明するWeb制作の用語——ステージング・CDN・キャッシュ・ロールバック
ステージング・CDN・キャッシュ・ロールバックは、制作側には当たり前でも発注側には伝わりにくい用語です。私が打ち合わせで使っている言い換えと、その用語が「発注側の判断」にどう関わるかを4つ整理します。
#direction#modern-web
2026.10.26
要件定義の初回ヒアリングで聞く項目——背景・現状・制約・成功の定義
初回ヒアリングで「何を作りたいですか」から聞き始めると、要望のリストしか集まりません。私は背景・現状・制約・成功の定義の4つを、この順番で聞きます。それぞれの質問例と、聞き漏らしやすい点を整理します。
#direction#pm
2026.10.25
静的サイトジェネレーターの選び方——更新頻度・担当者・ビルド時間の3軸で比較
静的サイトジェネレーターは機能の多さより「どのくらいの頻度で更新するか」「誰が更新するか」「ページが増えたときビルドに何分かかるか」の3軸で選ぶと、運用に入ってから迷いにくくなります。私が案件で使っている比べ方を整理します。
#modern-web#direction#language
2026.10.24
デザインレビューの観点チェックリスト——目的・導線・一貫性・実装可能性
デザインレビューが「好き嫌い」の言い合いになるのは、見る順番と観点が決まっていないからです。私がレビューで使っている4つの観点（目的・導線・一貫性・実装可能性）と、それぞれの確認項目を整理します。
#design#direction
2026.10.23
見積もりで後から揉める3つのパターン——前提条件を見積書に書く
見積もりのトラブルは金額そのものより「何を前提にした金額か」が共有されていないことから起きがちです。私が経験した3つのパターンと、見積書に前提条件として書いている項目を整理します。
#pm#direction
2026.10.17
AIで作ったものをクライアントに出すときのルール——申告・確認・権利の3点
生成AIで作った文章や画像をクライアントに納品するとき、私は「使った箇所を申告する」「事実と類似を人が確認する」「権利の扱いを先に合意する」の3点を決めています。文化庁の資料や利用規約を手がかりに、実務での運用を整理します。
#ai#direction
2026.10.16
生成AI研修で最初に教えていること——プロンプトより「前提の書き方」
生成AI研修の最初の時間、私はプロンプトの型ではなく「前提の書き方」を扱います。目的・読み手・素材・制約の4点を短く書くだけで出力が変わる理由と、研修で使っているワークの進め方を紹介します。
#ai#direction
2026.10.15
ChatGPT/Claudeを制作の「どの工程」に入れるか——要件定義・文言・検証
生成AIを制作フローに入れるとき、私は要件定義・文言・検証の3工程に絞っています。工程ごとに渡すもの・任せること・人が決めることを分け、手戻りを増やさない入れ方を整理します。
#ai#direction
2026.10.14
今週のFigmaの発表をディレクション視点で読む——モデル選択とAIを使うチームの習慣
Figma MakeへのGemini 4 Argon追加と、Figma公式ブログのAI定着に関する2本の記事を、公式発表だけを根拠に「進行・見積もり・レビューの設計で何を変えるか」に置き直します。
#news#design#direction
2026.10.13
今週のNext.jsとWordPressのリリースから実務に効く変更を拾う——2026年10月第2週
Next.js 16.4、10月14日予定のNext.jsセキュリティ更新、WordPress 7.1.3の3つを、公式発表だけを根拠に「今週やる」「新規案件で変える」「様子を見る」に仕分けします。
#news#modern-web#direction
2026.10.12
今週の生成AIの公式発表をWeb制作の工程に置き直す——2026年10月第2週
Claude Haiku 5.5、ChatGPTのGPT-6、Google CloudのGemini agentという今週の3つの公式発表を、Web制作のどの工程で使えそうか、何を確かめてから使うかの目線で読み解きます。
#news#ai#direction
2026.10.11
今週のブラウザ／Web標準の更新を制作現場の目線で読む——2026年10月第2週
Safari Technology Preview 254、Firefox Nightly 160、W3CのCSS Color 4とSVG 2の更新を、公式発表だけを根拠に「今の案件で使えるか、様子見か」に仕分けします。見出しの派手さより、Baselineかどうかで判断する読み方です。
#news#modern-web#direction
2026.10.10
静的サイトとサーバーレンダリングの使い分け——ページごとに3つの質問で決める
静的かサーバーレンダリングかはサイト全体で1つに決めず、ページごとに「誰が見ても同じか」「更新をいつ反映したいか」「リクエストの情報が要るか」の3つで決めると迷いが減ります。Next.jsの公式ドキュメントを確かめながら整理します。
#modern-web#direction#language
2026.10.09
Core Web Vitalsを制作フローに組み込む——デザイン・実装・公開後の3地点で見る
Core Web Vitalsは公開後に測って直すより、デザイン・実装・公開後の3地点に確認を分けて置くほうが手戻りが減ります。LCP・CLS・INPを工程ごとにどこで止めるか、公式ドキュメントを確かめながら整理します。
#modern-web#direction#pm
2026.10.08
「モダンなWeb」とは何を指すのか——速度・アクセシビリティ・運用性の3つで測る
「モダンなサイトにしたい」という依頼を、流行の見た目ではなく、速度・アクセシビリティ・運用性の3つの測れる基準に置き換える考え方です。Core Web VitalsとWCAG、Baselineなど公式の数値や定義を確かめながら、現場での使い方に落とします。
#modern-web#direction#design
2026.10.07
Webサイトの歴史③——Jamstack・ヘッドレス・生成AI（2020年代）
2020年代のWebは、ページを「いつ・どこで組み立てるか」を選べるようになり、さらに生成AIが作り手と読み手の両方に加わりました。Jamstackとヘッドレス、生成AIの流れを公式の記録で確かめ、今の制作判断につなげます。
#web-history#modern-web#ai
2026.10.06
Webサイトの歴史②——レスポンシブとスマホ最適化（2010年代）
2010年代のWebは「PC用とスマホ用を別々に作る」から「1つのHTMLを画面幅に合わせて変える」へ移りました。レスポンシブWebデザインの提唱から検索エンジンのモバイル対応まで、公式の記録で年号を確かめながら今の制作判断につなげます。
#web-history#modern-web#design
2026.10.05
Webサイトの歴史①——静的HTMLからCMSへ（1990年代〜2000年代）
1990年代〜2000年代のWebは「1ページ＝1ファイル」の静的HTMLから始まり、更新のしやすさを求めてCMSへ移っていきました。公式の記録で年号を確かめながら、その流れが今の制作や運用の判断にどうつながっているかを書きます。
#web-history#direction
2026.10.04
Processingとジェネラティブアート入門——乱数と繰り返しから始める
ジェネラティブアートは難しい数学から入らなくても、「繰り返し」と「乱数」の2つで最初の1枚が作れます。Processingとp5.jsの公式ドキュメントをもとに、私が最初に触る順番と、制作の仕事にどう持ち帰るかを書きます。
#language#design
2026.10.02
WebGLを「装飾」に使うときの注意——1つのCanvasにまとめる理由
ヒーローの背景、カードのホバー、セクションの区切り。WebGLを装飾に使うと、Canvasが気づかないうちに増えていきます。私が「1ページ1Canvas」を基本にしている理由と、そのときの組み立て方を書きます。
#modern-web#design#language
2026.10.01
Laravelで小さな管理画面を作る——ディレクターが知っておく構造
お知らせや問い合わせを管理するだけの小さな画面でも、Laravelは「テーブル・URL・権限」の3点で構造が決まります。私が要件を詰めるときに、この3点をどう言葉にしてエンジニアと話しているかを書きます。
#language#direction
2026.09.30
Next.js（App Router）でポートフォリオを作るときのフォルダ構成
ポートフォリオは「見せる作品」と「書き足す記事」と「隠したいページ」が同居するサイトです。私が自分のサイトをNext.jsのApp Routerで作ったときのフォルダの分け方と、運用が楽になった判断を書きます。
#modern-web#language#direction
2026.09.29
Reactの考え方をディレクター向けに説明する——コンポーネントと状態
Reactのコードが書けなくても、「部品に分ける」「変わるものを決める」という考え方はディレクションに使えます。私がワイヤーの段階でコンポーネントと状態を整理し、エンジニアと話すときの順番を書きます。
#language#direction#modern-web
2026.09.28
Pythonを業務効率化に使う——GAS・スプレッドシート・SQLとの役割分担
業務の自動化は、全部をPythonで書かなくても進められます。私がスプレッドシート・GAS・SQL・Pythonをどう使い分けているか、道具を選ぶ基準と、置き換えるタイミングの見極め方を書きます。
#language#direction
2026.09.27
PHPとWordPressの現在地——テーマ・ブロック・ヘッドレスの選び方
WordPressの作り方は、クラシックテーマ・ブロックテーマ・ヘッドレスの3つに分かれています。私が案件ごとにどれを選ぶか、PHPのバージョンをどう確認するか、更新する人の目線で決める理由を書きます。
#language#modern-web#direction
2026.09.26
TypeScriptを小さく始める——型を付ける順番は「境界」から
既存のJavaScriptをいきなり全部書き換えなくても、TypeScriptの恩恵は受けられます。私が小さな案件で採っている順番、JSDocでのチェック、外から来るデータの型付け、strictの上げ方を書きます。
#language#modern-web
2026.09.25
JavaScriptを「ライブラリなしで」書ける範囲を広げる——fetch・DOM・イベント
小さなサイトの「動き」は、ブラウザ標準のAPIだけでかなり書けます。私が素のJavaScriptで書くときに押さえている、fetchのエラー処理、DOMの組み立て方、イベントの付け方と外し方の3点をまとめました。
#language#modern-web
2026.09.24
HTML/CSSの2026年時点の基本——セマンティクス・コンテナクエリ・:has()
新しい機能を追いかける前に、いまの制作で「前提にしていい」ものを3つに絞りました。意味のあるHTML、部品単位で効くコンテナクエリ、親や状態を選べる:has()。私が実案件でどう使い分けているかを書きます。
#modern-web#language
2026.09.23
中小企業サイトで写真が用意できないときの設計——素材より先に決めること
撮影予算がない、手元の写真が暗い、人を出せない。中小企業サイトでよくあるこの状況で、私はフリー素材を探す前に「写真に何を担わせるか」を決め直します。文字・図・実物の小さな写真で組み立てる手順を書きます。
#design#direction
2026.09.22
デザインカンプからコードへ——手戻りが減る「引き渡し」の書き方
カンプを渡してから出てくる質問は、だいたい同じ場所に集中します。私が引き渡しのときに必ず添えている「余白・状態・可変」の3点セットと、Figmaのどの機能に何を載せるかの分け方をまとめました。
#design#direction
2026.09.21
ダークUIで気をつけること——コントラスト・彩度・グレインの決め方
背景を黒くしただけのダークUIは、まぶしいのに読みにくいという状態になりがちです。私が実際に使っている、明度差の測り方・彩度を落とす順番・グレインでバンディングを隠す手順を書きます。
#design#modern-web
2026.09.20
タイポグラフィの最小ルール——書体2つ・サイズ4段・行間1.6〜2.0で決める
文字まわりの判断を毎回ゼロから考えると、ページごとに見た目がばらつきます。私は「書体は2つ、サイズは4段、行間は1.6〜2.0」を出発点にして、そこから案件ごとに削ったり足したりしています。その決め方を書きます。
#design#modern-web
2026.09.19
コーポレートサイトの情報設計は「3階層で止める」——深くしない決め方
中小規模のコーポレートサイトなら、階層はトップ・カテゴリ・詳細の3つで止めると、迷いにくく運用もしやすくなります。3クリックルールとは別の話として、私が情報設計で使っている「止め方」を書きます。
#design#direction
2026.09.18
ペルソナとカスタマージャーニーマップは「会話の道具」として使う
ペルソナやジャーニーマップは、きれいに仕上げて納品するほど使われなくなりがちです。会議で指をさし、判断の根拠を言い合うための道具として、粗く作って何度も書き直す。私が制作案件で使っている形を書きます。
#design#direction
2026.09.17
LP改善は「数値→仮説→デザイン」の順番で——1回に1つだけ変える理由
LPの改善が「なんとなく作り直す」で終わると、何が効いたのか誰にも説明できません。数値で詰まっている場所を見つけ、仮説を1行で書き、デザインは最後に1か所だけ変える。私が改善案件で使っている順番を書きます。
#design#direction
2026.09.16
一人で全工程をやるときの段取り——役割の往復コストを減らす順番
ディレクションもデザインも実装も一人でやると、遅れる原因は作業量よりも役割を行き来する回数のほうにあります。決めごとを先に倒し、同じ役割をまとめ、待ち時間を前提に並べる。私が使っている順番を書きます。
#direction#pm
2026.09.15
リリース前チェックリストは3列で作る——検証・計測・戻し手順
公開直前のチェックが「表示確認」だけで終わると、公開後の計測漏れや戻せない事故に気づけません。検証・計測・戻し手順の3列に分けて、公開前日に埋めるチェックリストの作り方を、私の実務の形で書きます。
#direction#pm#modern-web
2026.09.14
クライアントとの「決める会議」の設計——議題・決定者・期限を先に書く
打ち合わせを重ねても何も決まらないのは、議題が「話すこと」で書かれているからです。議題を問いの形にし、決定者と期限を招集の時点で書く。私がクライアントとの定例で使っている会議の組み立て方を書きます。
#direction#pm
2026.09.13
システム遷移図とAPI仕様書は誰のために書くか——テクニカルディレクターの仕事
遷移図や仕様書は「作ること」が目的になると誰にも読まれません。読み手を先に決め、1枚ごとに答える問いを絞る。テクニカルディレクターとして私が書き分けている3種類のドキュメントと、その使い方を書きます。
#direction#pm#modern-web
2026.09.12
見積もりは3つに分けて出す——工数・期間・リスクを混ぜない理由
「この案件、いくらで何日?」に1つの数字で答えると、あとで削る相談ができなくなります。工数・期間・リスクを別々に出す手順と、クライアントに見せる順番を、実際に使っている形で書きます。
#pm#direction#wbs
2026.09.11
Webサイト制作の標準WBSテンプレート——企画から公開後の運用まで
案件ごとにゼロからWBSを書くと、抜けるのは毎回「公開後」と「クライアント側の作業」です。私が使っている4区切り・約30行の標準テンプレートと、案件に合わせて削るときの考え方を書きます。
#wbs#direction#pm
2026.09.10
バッファはタスクごとに積むか、末尾にまとめるか——置き方で変わるもの
各タスクに少しずつ余裕を足す引き方と、末尾にまとめて置く引き方では、遅れの出方が変わります。私が末尾寄せにしている理由と、合流点にだけ別途置く判断、クライアントに見せる範囲の分け方を書きます。
#pm#direction#wbs
2026.09.09
クリティカルパスを口頭で説明できるか——依存関係の見つけ方
クリティカルパスは図の中で色を塗るものではなく、口で言えて初めて使えるものだと考えています。依存関係の聞き出し方、3文で言えるかの確認、経路ごとに違う余裕の扱いを書きます。
#pm#direction#gantt
2026.09.08
進行管理の週次レビュー：遅れを「発見する日」を先に決める
遅れは起きた日ではなく、気づいた日に問題になります。私は週次レビューを「進捗を報告する会」ではなく「遅れを発見する日」として設計しています。曜日の決め方と、当日に見る3点を書きます。
#pm#direction
2026.09.07
要件定義で最初に書く1枚：目的・対象・やらないことを決める
要件定義を機能一覧から書き始めると、何を足しても減らしても判断できない資料になります。私は先に「目的・対象・やらないこと」の1枚を作ります。その3項目の書き方と、1枚では拾えないものを書きます。
#direction#pm
2026.09.06
ガントチャートは「線」ではなく「依存」を描く道具——引き方の順番
ガントを日付から引くと、遅れが出るたびに全部引き直すことになります。先に依存関係を決めてから日付を置くと、線は後から機械的に決まる。私が実務で使っている引き方の順番を書きます。
#gantt#pm#direction
2026.09.05
WBSの作り方：ディレクターが最初に決める「分解の単位」
WBSは作業を細かく書き出す表ではなく、「何を1つの塊として扱うか」を決める道具です。単位を先に決めると、見積もりも進行管理も揺れにくくなる。私が実務で使っている決め方を書きます。
#wbs#direction#pm

Notes on making

公開先を並べて比べる——レンタルサーバー・Vercel・Netlify・Cloudflare Pages

画像フォーマットの使い分け表——JPEG・PNG・WebP・AVIF・SVGを用途で比べる

ドメインとDNSを切り替える前に知っておくこと——Aレコード・CNAME・TTL

CSSの書き方を比べる——素のCSS・CSS Modules・Tailwind CSS

遅延を報告するときの型——事実・影響・選択肢の3点で伝える

AIをコーディングに使うときの線引き——任せる範囲・自分で読む範囲・テストで守る範囲

ディレクターが知っておくGitの範囲——ブランチ・プルリクエスト・レビューの流れ

アクセシビリティの最小チェック——コントラスト・キーボード・代替テキスト・見出し構造

保守運用の契約範囲の決め方——定期作業・問い合わせ対応・緊急対応を分ける

発注側に説明するWeb制作の用語——ステージング・CDN・キャッシュ・ロールバック

要件定義の初回ヒアリングで聞く項目——背景・現状・制約・成功の定義

静的サイトジェネレーターの選び方——更新頻度・担当者・ビルド時間の3軸で比較

デザインレビューの観点チェックリスト——目的・導線・一貫性・実装可能性

見積もりで後から揉める3つのパターン——前提条件を見積書に書く

AIで作ったものをクライアントに出すときのルール——申告・確認・権利の3点

生成AI研修で最初に教えていること——プロンプトより「前提の書き方」

ChatGPT/Claudeを制作の「どの工程」に入れるか——要件定義・文言・検証

今週のFigmaの発表をディレクション視点で読む——モデル選択とAIを使うチームの習慣

今週のNext.jsとWordPressのリリースから実務に効く変更を拾う——2026年10月第2週

今週の生成AIの公式発表をWeb制作の工程に置き直す——2026年10月第2週

今週のブラウザ／Web標準の更新を制作現場の目線で読む——2026年10月第2週

静的サイトとサーバーレンダリングの使い分け——ページごとに3つの質問で決める

Core Web Vitalsを制作フローに組み込む——デザイン・実装・公開後の3地点で見る

「モダンなWeb」とは何を指すのか——速度・アクセシビリティ・運用性の3つで測る

Webサイトの歴史③——Jamstack・ヘッドレス・生成AI（2020年代）

Webサイトの歴史②——レスポンシブとスマホ最適化（2010年代）

Webサイトの歴史①——静的HTMLからCMSへ（1990年代〜2000年代）

Processingとジェネラティブアート入門——乱数と繰り返しから始める

WebGLを「装飾」に使うときの注意——1つのCanvasにまとめる理由

Laravelで小さな管理画面を作る——ディレクターが知っておく構造

Next.js（App Router）でポートフォリオを作るときのフォルダ構成

Reactの考え方をディレクター向けに説明する——コンポーネントと状態

Pythonを業務効率化に使う——GAS・スプレッドシート・SQLとの役割分担

PHPとWordPressの現在地——テーマ・ブロック・ヘッドレスの選び方

TypeScriptを小さく始める——型を付ける順番は「境界」から

JavaScriptを「ライブラリなしで」書ける範囲を広げる——fetch・DOM・イベント

HTML/CSSの2026年時点の基本——セマンティクス・コンテナクエリ・:has()

中小企業サイトで写真が用意できないときの設計——素材より先に決めること

デザインカンプからコードへ——手戻りが減る「引き渡し」の書き方

ダークUIで気をつけること——コントラスト・彩度・グレインの決め方

タイポグラフィの最小ルール——書体2つ・サイズ4段・行間1.6〜2.0で決める

コーポレートサイトの情報設計は「3階層で止める」——深くしない決め方

ペルソナとカスタマージャーニーマップは「会話の道具」として使う

LP改善は「数値→仮説→デザイン」の順番で——1回に1つだけ変える理由

一人で全工程をやるときの段取り——役割の往復コストを減らす順番

リリース前チェックリストは3列で作る——検証・計測・戻し手順

クライアントとの「決める会議」の設計——議題・決定者・期限を先に書く

システム遷移図とAPI仕様書は誰のために書くか——テクニカルディレクターの仕事

見積もりは3つに分けて出す——工数・期間・リスクを混ぜない理由

Webサイト制作の標準WBSテンプレート——企画から公開後の運用まで

バッファはタスクごとに積むか、末尾にまとめるか——置き方で変わるもの

クリティカルパスを口頭で説明できるか——依存関係の見つけ方

進行管理の週次レビュー：遅れを「発見する日」を先に決める

要件定義で最初に書く1枚：目的・対象・やらないことを決める

ガントチャートは「線」ではなく「依存」を描く道具——引き方の順番

WBSの作り方：ディレクターが最初に決める「分解の単位」