AI推進室
AI Web制作とは?制作会社が実際に使っている工程を実録で解説

AI Web制作とは?制作会社が実際に使っている工程を実録で解説

「AI Web制作」と聞いて、ツールに任せれば数分でサイトが完成すると期待していませんか。じつは現場で使われているAI活用は、工程の一部を効率化する「制作支援」がほとんどです。ただし、どこにAIを使い、どこを人間が担うかを知らなければ、導入しても成果につながりません。GOROは自社のサイト制作やこのメディアの運営そのものをAIで動かしながら、企業研修も行ってきました。ここでは、その実録をもとに、Web制作の各工程で実際に何が起きているかを工程別に解説します。

AI Web制作とは?「自動生成ツール」と「制作支援」は別物

結論から言うと、「AI Web制作」という言葉には性質の異なる2つの意味が混在しています。ひとつは「質問に答えるだけでサイトが自動生成されるツール」、もうひとつは「制作会社がデザインやコーディングの工程でAIを支援ツールとして使う」というものです。この記事で扱うのは後者です。もし「AIに任せれば人の手をほぼかけずに完成する」というイメージを持っているなら、まずその前提を整理しておく必要があります。

世の中で言われる「AI Web制作」の2つのタイプ

「AI Web制作」と検索すると、多くは以下のどちらかの文脈で語られています。

タイプ 概要 代表的な使われ方
①AIオールインワン生成ツール型 業種やイメージを選ぶだけで、AIがサイト全体を自動生成するサービス 個人・小規模事業者が自分でサイトを持ちたい場合
②AI制作支援型 制作会社のデザイナー・ディレクターが、要件定義からコーディングまでの各工程でAIを補助的に使う 企業のコーポレートサイト・LP・リニューアル案件

この2つは「AIがサイトに関わる」という点では同じですが、目的も、関わる人間の役割も、できあがるものの質も大きく異なります。①は「早く・安く・自分で」がゴールになりやすく、②は「人間の判断・設計力をAIで底上げする」ことがゴールになります。サイトリニューアルのように、ブランドや業務要件を反映させる必要がある案件では、②の考え方で語られる「AI Web制作」を理解しておくことが判断材料として重要です。

AIオールインワンツールでできること・できないこと

①のようなツールは、テンプレートに沿ってテキストや画像を自動配置し、短時間でそれらしい見た目のサイトを作ることを得意としています。ヒアリングなしでも公開までたどり着ける手軽さは事実です。

一方で、次のような部分は依然として人間の設計・判断が必要になりやすい領域です。

  • 自社の業務フローや商材の特性に合わせた情報設計(どの情報を、どの順番で、どう見せるか)
  • ブランドガイドラインや既存資産との整合性
  • SEOやCVR改善を見据えた構成・導線設計
  • 社内外の複数関係者の要望を調整しながら仕様を固める工程

つまり「サイトの形にする」ところまではAIが速く担えても、「なぜその形にするのか」を決める部分は依然として人の役割です。ここを理解せずに導入すると、「早くはできたが、狙った成果につながらないサイトができてしまった」という結果になりかねません。

Claude Codeのような生成AIが「制作支援」として使われる理由

これに対して、Claude Codeのような生成AIは「サイトを自動で完成させるツール」ではなく、「人間の指示に沿ってデザインやコードの形にする」ためのパートナーとして使われています。日本語での指示だけでワイヤーフレームのたたき台やコーディングを進められるため、コードを書けない担当者でも、要件や意図を言葉で伝えながら制作工程に関与できるのが特徴です。

私たちGOROでも、自社のサービスLPをClaude Codeでコーディングした際、企画・構成をあらかじめ固めたうえで、実装作業自体は2時間程度で形にできた実例があります。ここで重要なのは「AIが全部決めた」のではなく、「人間が固めた設計を、AIが形にするスピードを引き上げた」という点です。次のセクションでは、この制作支援としてのAI活用が、実際の制作工程のどの部分に組み込まれているのかを、工程別に詳しく見ていきます。

Web制作の工程別に見る、AIが実際に使われている場所

「自動生成ツール」と「制作支援」の違いが分かると、次に気になるのは「では実際の制作会社は、どの工程でAIを使い、どこを人間が担っているのか」という点だろう。Web制作は要件定義からリリース後の運用まで複数の工程に分かれており、AIが強みを発揮する工程と、依然として人間の判断が欠かせない工程がはっきり分かれている。ここでは実際の制作現場での使われ方を工程別に見ていく。

要件定義・ヒアリングでのAI活用

要件定義は「何を作るか」を決める最上流の工程で、クライアントの business課題や目的を正しく汲み取る力が求められる。この工程でAIが担うのは、次のような補助業務が中心だ。

作業 AIが担う部分 人間が担う部分
ヒアリング内容の整理 会話ログや議事録を要点に整理・構造化する どこが本質的な課題かを見極める
提案骨子の作成 ヒアリング内容から提案の叩き台・見積もりドラフトを生成する 提案の方向性を決め、精度を検証する
競合・業界情報の収集 情報収集・要約のスピードを上げる 情報の取捨選択と戦略への落とし込み

実際の制作現場でも、ヒアリング内容をAIに渡すと提案骨子と見積表のドラフトが出てくる体制を整え、営業向け提案資料や見積もりのたたき台作成、会議の議事録作成をワークフロー化している例がある。ただし、これはあくまで「たたき台」であり、クライアントの本音や優先順位を見極めて提案の方向性を最終決定するのは、依然として人間の役割だ。

ワイヤーフレーム・プロトタイピングでのAI活用

サイトの骨格を決めるワイヤーフレーム作成は、AIとの相性が良い工程のひとつだ。「トップページに実績紹介セクションを追加したい」「問い合わせフォームを2ステップにしたい」といった日本語の指示を伝えるだけで、たたき台となる構成案やプロトタイプを短時間で出せるようになっている。

  • ラフな構成案・情報設計のパターン出しをAIに任せる
  • 出てきた案をもとに、ユーザー導線として自然かどうかを人間が検証する
  • 修正指示も日本語ベースで反映できるため、非エンジニアの担当者が構成案の検討に直接関わりやすい

この工程は「コードが書けるかどうか」よりも「サイトに何を置くべきか整理できているか」が問われる領域であり、非エンジニアが最も関わりやすい工程だと言える。

デザイン制作でのAI活用

デザイン制作は「センスや世界観の設計」と「その実装」に分けて考えると理解しやすい。実際の制作現場でも、デザイナーがワイヤーフレーム作成やプロトタイピングにAIを日常的に使い、Figmaで作ったデザインからHTMLプロトタイプを生成したり、既存のデザインシステム(配色・フォント・コンポーネントのルール)を再現したりする作業を実務で運用している。

フェーズ AIの役割 人間(デザイナー)の役割
コンセプト設計 参考事例の収集・パターン提示 ブランドの世界観・体験設計の決定
ビジュアル作成 なし〜補助的な素材生成 配色・レイアウト・トーンの最終判断
実装への橋渡し デザインからのプロトタイプ生成 デザインシステムとの整合性チェック

ここで重要なのは、AIが「デザインを決めている」わけではないという点だ。AIが担っているのは、決定済みのデザインを次工程(実装)へ橋渡しするスピードを上げる部分であり、ブランドの世界観や体験の良し悪しを判断するのは人間のデザイナーのままである。

コーディング・実装フェーズでのAI活用

コーディング・実装はAI Web制作の中でも最も注目されやすい工程だが、ここでの実態は「コードを丸ごと自動生成して終わり」ではない。日本語の指示から実装コードのたたき台を生成し、動作確認・修正を繰り返しながら形にしていく、という進め方が現実的だ。

  • 指示(要件)を具体的に伝えるほど、出てくるコードの精度が上がる
  • 生成されたコードが意図通り動くか、表示崩れがないかは人間が確認する
  • 公開前のセキュリティ・品質チェックは人間の工程として残る

この工程を実際にどこまで非エンジニアが担えるのか、どんな指示の出し方が有効なのかは、次のセクションで実際の制作実録として詳しく紹介する。

公開後の運用・レポーティングでのAI活用

Web制作はサイトを公開して終わりではなく、公開後の効果測定・改善提案まで含めて一連の工程だ。この運用フェーズこそ、AIによる自動化の効果が数字として見えやすい領域でもある。

実際の制作現場では、GA4やSearch Consoleと連携した月次・週次のレポートを自動生成する仕組みを社内で運用している例がある。従来は「データ取得→集計→レポート化」を手作業で行っていたが、これをコマンド一つで実行できる形に整備することで、レポーティングにかかる工数を大きく圧縮できている。

作業 従来 AI活用後
データ取得 各ツールに個別ログインして手動抽出 連携済みのデータを自動取得
集計・グラフ化 表計算ソフトで都度作成 フォーマットに沿って自動生成
改善提案の検討 数値を見ながら人が都度検討 傾向をAIが要約し、人が優先度を判断

ここでも役割分担の構図は同じだ。データを集めて可視化するところまではAIが高速化できるが、「その数値から何を改善すべきか」という意思決定は、事業やユーザーへの理解を持つ人間が担う部分として残り続ける。

工程ごとに見てきたように、AI Web制作の実態は「AIがすべてを作る」のではなく、「工程ごとにAIと人間が役割を分担しながら進める」ものだ。次のセクションでは、この役割分担を踏まえて、実際に制作会社が手を動かして作ってみた実録を紹介する。

Web制作会社がAIで実際に作ってみた実録

工程ごとにAIの使いどころを見てきましたが、「実際に何を作ったのか」がわからなければ、自社に置き換えて判断するのは難しいはずです。ここでは、私たちの会社がAI Web制作に取り組んだ実例を、良かった点も限界も含めて正直に報告します。ツールの機能紹介ではなく、実際に手を動かした結果としてお読みください。

自社サービスLPをAIで制作した実例

私たちは自社のサービス紹介LPを、Claude Codeというツールを使って制作しました。ターミナル画面のようなデザインモチーフを採用し、料金表や導入実績、受賞歴なども掲載した、簡易ページではなく本格的な構成のLPです。

このコーディング作業にかかった時間は、約2時間でした。

ただし、この数字には誤解が生まれやすいポイントがあるため、条件を正確にお伝えします。

工程 AIで実施したか 所要時間
企画・構成設計(どんな情報をどの順で見せるか) 事前に人間が検討済み 2時間には含まない
コーディング(構成をもとにページを組む作業) AI(Claude Code)が実施 約2時間

つまり「2時間でLPが完成した」のではなく、「設計図ができた後のコーディング作業が2時間だった」というのが正確な実態です。ゼロから何もない状態で2時間、というわけではありません。

また、これは私たちが自社の判断で作ったデモであり、Web制作の実務経験がない人が独学で同じ時間で再現できることを保証するものでもありません。それでも、構成さえ固まっていれば、コーディングという最も時間のかかりやすい工程を大幅に圧縮できることを示す実例にはなるはずです。「AIに任せれば何もかも一瞬」という誇張ではなく、「人間が設計し、AIが実装する」役割分担がうまく噛み合うと、これだけのスピードが出るという記録として捉えてください。

診断コンテンツを短期間で公開した実例

もう一つの実例が、16タイプ診断形式の性格診断コンテンツです。社内向けの「ディレクションタイプ診断」と、採用向けの「デザイナータイプ診断」という2つのWebコンテンツを、AIを活用して制作しました。

社内向けディレクションタイプ診断のトップページ

採用向けデザイナータイプ診断のトップページ

実際に公開している2つの診断コンテンツのトップページ。それぞれ実際に診断を試すこともできます:ディレクションタイプ診断デザイナータイプ診断

診断コンテンツは、通常であれば次のような工程が必要になり、企画から公開まで数週間かかることも珍しくありません。

  • 診断ロジックの設計(質問項目・タイプ分類のルール作り)
  • 各タイプの診断結果テキストの執筆
  • 診断画面・結果画面のデザインとコーディング
  • 動作確認と公開作業

これらの工程を、企画からデザイン・実装・公開まで、通常よりも短い期間で完成させることができました。特に診断結果のテキスト作成やページの実装部分は、AIとの対話を通じて何度も調整しながら進められたため、人が一つひとつ手作業で組み上げるよりもスピーディーに形にできています。

診断コンテンツのように「パターンが多く、テキスト量も多い」コンテンツは、AIが得意とする領域と相性が良いというのが、実際に作ってみた実感です。

このメディア自体がAIで運営されている舞台裏

最後にご紹介したいのが、今あなたが読んでいるこのメディア自体の話です。

このメディアは、記事の生成パイプラインそのものをAIで構築し、記事の制作フローにAIを組み込んで運営されています。メディアの基盤づくりも、記事の執筆・制作プロセスも、AIを活用した仕組みの上で動いているということです。

これは特別な実験のために作った事例ではなく、「AIで業務を自動化する」ことを、自分たち自身の情報発信の現場でも実践しているという意味を持ちます。Web制作会社が「AIはこう使える」と伝える記事を、AIを使って運営するメディアの中で書いている——この構造自体が、AI活用の実務レベルでの手応えを裏付ける材料だと考えています。

3つの実例に共通しているのは、「AIがすべてを代わりにやってくれた」のではなく、「人間が設計・判断する部分」と「AIが速く形にする部分」を分けて運用している、という点です。次のセクションでは、この役割分担の中で非エンジニアがどこに関わり、どんな考え方を持てばよいかを整理していきます。

非エンジニアがAI Web制作の工程に関わるために必要な考え方

前章の実録からわかるのは、AIが「魔法のように何でも作ってくれる」わけではなく、工程ごとに人間の役割がはっきり残っているということです。ここで気になるのが「では自分のような非エンジニアは、実際にどこまで関われるのか」という点でしょう。ここでは、関わり方の線引きを整理します。

コードを書けなくても関われる部分はどこか

AI Web制作において、コードの知識がなくても十分に価値を発揮できる工程は少なくありません。むしろ、非エンジニアが得意とする「言語化」「業務理解」「センス」を活かせる場面のほうが多いとも言えます。

工程 非エンジニアが関われる内容
要件定義 「誰に何を伝えたいサイトか」を言葉で整理する
構成・コピー案 ページ構成案やキャッチコピーの叩き台をAIに指示して作る
デザインの方向性 参考サイトの画像やトンマナの好みをAIに伝えてラフ案を出す
フィードバック 生成された案に対して「もっとこうしたい」を具体的に指摘する
公開後の改善提案 アクセス解析の結果をもとに、改善したいポイントを言語化する

いずれも「AIへの指示(プロンプト)」と「人間としての判断」が中心で、コードを読み書きするスキルは必須ではありません。重要なのは、コードではなく「日本語での指示力」です。

AIに任せてはいけない工程・人間が担うべき判断

一方で、AIに丸投げしてはいけない工程もはっきり存在します。以下のような判断は、最終的に人間が担うべきものです。

  • ブランドとしての一貫性の判断:AIが提案するデザインやコピーが、自社らしさ・過去の発信と矛盾していないかの最終チェック
  • ユーザー体験(UX)の妥当性判断:機械的に「良さそうな配置」ではなく、実際のユーザー行動として自然かどうかの判断
  • 公開前の品質・法務チェック:表現の正確性、個人情報の扱い、業界特有の表記ルールなどの確認
  • 予算・スケジュールの意思決定:どこにAIを使い、どこに人的リソースをかけるかの配分判断

AIは「たたき台を高速に出す」ことは得意ですが、「それを自社の文脈でどう判断するか」までは代わりに担ってくれません。この最終判断の部分にこそ、非エンジニアの担当者が本来持っている業務理解や意思決定の経験が活きてきます。

未経験のメンバーが成果物を作り切った研修事例に学ぶ

「とはいえ、実際に自分たちでできるのだろうか」という不安は当然出てくるはずです。ここで参考になるのが、menu社のUIUXデザイナー10名を対象に実施したオフライン研修の事例です。

参加した10名は、いずれもコードを書いた経験のないデザイナーでした。事前ヒアリングで業務内容を把握したうえでプログラムをカスタム設計し、研修当日には次の2つを日本語での指示だけで完結させています。

  • 採用サイトの制作
  • ヒューリスティック評価(サイトの使いやすさをチェックする手法)の自動化

いずれも「その場で説明を聞いて終わり」ではなく、当日中に動く成果物として完成させた点がポイントです。この事例からわかるのは、コードの知識がなくても、業務理解と的確な指示があれば、成果物を作り切るところまで到達できるということです。「わかった気になって終わる」研修ではなく、「実際に手を動かして完成させる」経験こそが、その後の社内定着や自信につながっていきます。

コードが書けるかどうかではなく、「どこまでを任せ、どこを自分たちで判断するか」という考え方を持てるかどうか。それが、非エンジニアがAI Web制作の工程に関わるための最初の一歩になります。

AI Web制作のメリットと限界を正直に整理する

ここまで、非エンジニアがAI Web制作の工程にどう関わればいいかを見てきました。最後に整理しておきたいのは「結局のところ、AIを使うと何が良くなって、何が良くならないのか」という身も蓋もない問いです。ツールの紹介ページでは触れにくい部分ですが、導入判断の材料にするなら、メリットと限界の両方を正直に見ておく必要があります。

スピードとコストで得られるメリット

AIを制作工程に組み込むことで得られるメリットは、主に「時間」に集約されます。ワイヤーフレームのたたき台作成、コーディングの初稿、レポートの集計といった作業は、AIが下地を作ることで着手までの時間が大きく短縮される場合があります。

工程 人間だけで行う場合 AIを組み込んだ場合の傾向
ワイヤーフレームのたたき台 ゼロから構成を考える時間が必要 要件を伝えれば初稿がすぐに出てくる場合がある
コーディング(実装) 仕様書を見ながら1行ずつ書く 指示に沿ってコードの初稿が短時間で生成される場合がある
定型レポートの作成 毎回手作業でデータを集計・整形 一度仕組み化すれば自動で出力できる場合がある

これらはあくまで「傾向」であり、案件の複雑さや準備の丁寧さによって差が出ます。ただし、時間が浮いた分を「デザインの検討」や「コンテンツの精度」に振り向けられる点は、コスト面だけでなく品質面にも波及するメリットだと言えます。

品質・ブランド表現で注意すべき限界

一方で、AIが苦手とする領域もはっきりしています。特に次の3点は、現時点では人間の判断が欠かせません。

  • ブランドらしさの表現:AIは「一般的に良いとされるデザイン」は作れますが、「その会社らしい世界観」を最初から言語化するのは苦手です。ブランドガイドラインやトーン&マナーを人間が定義し、AIに翻訳させる形が現実的です。
  • 細部の違和感の察知:文言のニュアンス、余白の取り方、画像の選定など、「なんとなく違う」という感覚的な判断はAI単体では拾いきれない場合があります。
  • 法務・薬機法などのリスク判断:業界特有の表現規制や誤解を招く表現のチェックは、AIの出力をそのまま信用せず、必ず人間が最終確認する必要があります。

これらは「AIが劣っている」というより、「AIと人間で得意分野が違う」と捉えるのが実態に近いでしょう。AI Web制作を検討する際は、この境界線を事前に理解しておくことで、過度な期待も過度な不安も避けられます。

「思ったほど楽ではない」というリアルな声

SNSなどでは「AIで10分でサイトが完成した」という体験談を目にすることがありますが、実際の制作現場での感触はもう少し地に足がついています。

例えば、AIにコーディング作業を任せる場合でも、事前に企画・構成をしっかり固めておく工程は別途必要です。あるサービス紹介用のLP制作では、コーディング自体はAIを使って数時間程度で形になったケースがありますが、それは企画・構成の検討をあらかじめ済ませていたためであり、「思いついてから公開まで数時間」というわけではありません。準備にかけた時間があってこそのスピード感だという点は、正直に共有しておくべき事実です。

また、AIへの指示(プロンプト)が曖昧だと、期待と違う出力が繰り返し返ってきて、かえって手戻りが増える場合もあります。「AIに丸投げすれば楽になる」のではなく、「何を作りたいかを明確に言語化できる人がいると、AIの力を最大限引き出せる」というのが実態に近い感覚です。

つまりAI Web制作は、魔法のように工数をゼロにする手段ではなく、「準備を丁寧にした分だけ、その後の作業が速く・楽になる」という道具だと理解しておくと、導入後のギャップを防げます。

自社の制作工程にAIを取り入れるには何から始めればいいか

ここまで見てきたように、AI Web制作には確かなメリットと同時に見過ごせない限界がある。大切なのは「AIを使うか使わないか」の二択ではなく、「自社の工程のどこに、どう組み込むか」を具体的に考えることだ。最後に、実際に自社の制作工程へAIを取り入れる際の考え方を整理する。

まず自社の工程を分解してAIが使える場所を見つける

いきなりツールを探し始める前に、まずは自社のWeb制作・更新の工程を書き出してみることをおすすめする。多くの企業では、この「工程の分解」が抜け落ちたままツール導入だけが先行し、結局現場に定着しないというケースが目立つ。

分解の観点は次のようなものでよい。

工程 具体例 AIが関わりやすいか
情報整理・要件のたたき台作成 ヒアリングメモ、要件定義書の下書き ◎ 得意
ワイヤーフレーム・構成案 ページ構成、導線設計のたたき台 ◎ 得意
デザイン・実装 デザインカンプ、コーディング ○ 支援可(人の判断が必要)
公開後の運用 アクセス解析、レポート作成、更新作業 ◎ 得意

この表からもわかる通り、AIが強いのは「たたき台を作る」「定型作業を巻き取る」領域であり、最終的な品質判断や意思決定は人が担うべき領域として残る。自社の工程表を作ってみると、「ここは今すぐAIに任せられそうだ」「ここは当面人の手が必要だ」という線引きが自然と見えてくる。

ツール選定より「使い方の設計」が重要な理由

工程を分解できたら、次に陥りがちなのが「どのツールが一番すごいのか」という比較探しだ。しかし本記事で見てきた実例が示すように、成果を分けるのはツールの性能そのものではなく、「誰が」「どの工程で」「どんな指示の出し方をするか」という使い方の設計にある。

同じAIツールを使っても、次のような違いで成果は大きく変わる。

  • 指示(プロンプト)の出し方が具体的か、抽象的か
  • 生成物をチェックする担当者にデザインやコピーの知見があるか
  • 「AIが作った後、誰が最終判断をするか」の役割分担が明確か

実際に、menu社のUIUXデザイナー向けに実施した研修では、参加者はコードを書いた経験がないデザイナーだったが、業務内容に合わせて事前にプログラムを設計したうえで臨んだ結果、採用サイトの制作とヒューリスティック評価の自動化を当日中に完結させることができた。これはツールが優れていたからというより、「その職種・その業務に合わせて使い方を設計した」ことが効いた結果だと言える。

裏を返せば、ツールだけを導入して「あとは現場で使ってみて」と丸投げしてしまうと、多くの場合は宝の持ち腐れになる。自社の業務・職種・スキルレベルに合わせた「使い方の設計」こそが、投資対効果を左右する分岐点になる。

組織にAI活用を定着させるためのステップ

最後に、AI Web制作を一過性の取り組みで終わらせず、組織に定着させるための順序を整理しておく。

  1. 小さく試す:まずは1つのページ、1つのレポート業務など、影響範囲が限定的なところから試す
  2. 成果物を残す:「試してみた」で終わらせず、実際に完成した成果物を社内に共有し、効果を可視化する
  3. 担当者のリテラシーを底上げする:ツールの操作だけでなく、「何をAIに任せ、何を人が判断するか」の勘所を担当者が理解できるようにする
  4. 業務フローに組み込む:単発の活用から、定例業務・定型フローの一部として運用に落とし込む

特に3番目の「担当者のリテラシーを底上げする」段階は独学だけでは時間がかかりやすく、自社の業務内容に合わせた実践的なトレーニングを受けることで、遠回りせずに定着まで進められるケースが多い。

自社にどんな工程があり、どこにAIを組み込めそうか、そしてそれをどう社内に定着させていくか——この設計を一人で抱え込まず、実際の制作現場での知見を持つプロと一緒に整理することも、失敗を避けながら前に進む有効な手段の一つだ。

この記事と合わせて読みたい


Claude Codeを業務で使いたい方へ|GOROのClaude Code法人研修

株式会社GOROでは、デザイナー・マーケ担当・ディレクターなど非エンジニアを対象としたClaude Code実践研修を提供しています。

  • 成果物を作り切る体験型 — 研修当日に実際の成果物が完成します
  • 御社の業務に合わせてカスタム設計 — 事前ヒアリングをもとにした御社専用プログラム
  • コードの知識は不要 — 非エンジニアが主役の研修です
  • 研修後も伴走 — 業務設計・実装支援までコンサルティングで継続支援

「AIを使いたいが何から始めればいいかわからない」という段階のご相談も歓迎です。まずはお気軽にお問い合わせください。

Claude Code研修の詳細を見る(無料相談はこちら)

執筆:株式会社GORO編集部(記事制作にはAIを活用し、自社の実践・研修実績に基づいて制作しています) —運営者情報 / 代表・旭俊成の実践記録はnoteで公開しています