株式会社Web春 代表取締役の栗田です。
結論から。2026年にWebflowを日本語で学ぶ最短ルートは、「①日本語記事で操作の土台を作る → ②Webflow公式大学（英語・無料）で体系を学ぶ → ③作りたいもの別の日本語記事で仕上げる」の3ステップです。当ブログではWebflow関連の日本語記事を30本以上公開しており、この記事はその入り口（ハブ）です。
この記事の要点
- Webflow University（Webflow大学）とは
- Webflow University（Webflow大学）とは、Webflow公式の無料オンライン学習プラットフォームです。英語の動画コースが中心で、本記事の前身である21Dコース（1日30分×21日間でポートフォリオサイトを作る講座）も、この公式コースを日本語化したものです。
目次
Webflowは日本語で学べるのか？——結論：学べます
学べます。Webflow本体のUIとWebflow公式大学（Webflow University）は英語ですが、基本操作・SEO・CMS・多言語化までを日本語で解説した記事を当ブログに揃えています。さらに2026年はブラウザ翻訳とAIの併用が当たり前になり、数年前の挫折の定番だった「公式情報が英語でよくわからず沈没」という壁は大幅に低くなりました。
ステップ①｜まず日本語記事で操作の土台を作る
最初の1本は「Webflowの使い方｜操作が10倍早くなる4つの基礎知識」です。HTML・CSSの場所、ALLタグ、CSSパネルの色の意味——この4つを知らないままWebflowを触ると、どこを編集すればいいのかわからないサイトになっていきます。最初の30分で読めるので、ここから始めてください。
ステップ②｜Webflow公式大学（英語・無料）で体系を学ぶ
Webflow Universityは、Webflow公式の無料オンライン学習プラットフォームです。英語の動画コースが中心ですが、レッスンは実際の画面操作を見せながら進むため、映像を追うだけでも流れが掴めます。わからない用語が出てきたら、そのままAIに日本語で質問すればその場で解決できます。
WebflowのアカウントはWebflow公式サイトから無料で作成できます。無料プラン（Starter）のまま学習を進められます（2026年時点）。
Webflowの使い方をイチから学んだ方法【当時は未経験でした】
ステップ②の公式大学を、僕自身がどう使って学んだかの記録です。
僕がWebflowを学んだ方法はWebflow公式のポートフォリオ作成コースを３ヶ月かけて受講したところから始まります。このコースではWebflowの使い方全般を紹介しつつ、ポートフォリオサイトの作成を行います。
コースは全て英語です。そのため自動翻訳や動画の手元の作業を見てなんとかWebflowに慣れたのが最初のステップです。素材などはWebflow公式からダウンロードできます。動画はこちら↓
初心者がWebflow を使って1番ラクして､1番安くWebサイトを作る方法を2パターン紹介します
ステップ③で目的別に学ぶ前に、まず1枚作ってみたい方向けの作り方です。
この記事を書く私は､WebflowでWebサイト制作を行い月に30万円ほど収益を上げています（執筆当時）｡またこのブログもWebflowで作成･管理されており､Webflowのテンプレートを参考に作成しています｡
Web初心者でもWebflowを使って､プロ同等のデザインを作る方法
手順は下記の5ステップです｡
- 【手順1】WebflowのショーケースからWebサイトをコピー
- 【手順2】フォントを変える
- 【手順3】色を変更する
- 【手順4】写真､ブロックの幅
- 【手順5】文章を入れる
【手順1】WebflowのショーケースからWebサイトをコピー
Webflowのショーケースからクローン可能なデザインを選択するだけです｡
おすすめのショーケースについては｢こちら｣を参照ください｡
【手順2】フォントを変える
クローンしたサイトに日本語のフォントを入れます｡
無難なところは｢Noto sans｣｢さわらび｣などのGoogleフォントです｡
フォントの入れ方については｢こちら｣をどうぞ｡
【手順3】色を変更する
フッターの色は全体よりも暗い色を配色するとバランスがよく見えます｡
全体の背景色に悩んだ際は｢小林さん｣の以下ツイートを参考にするのがおすすめです｡
Web制作でスグに使える情報を発信している方で､他にも有益なツイートがたくさんあります｡
テキストが読みやすくなる "やさしい背景色" をあつめてみた pic.twitter.com/278ZDDEPSV
— 小林 I Webデザインアイデアレシピ著者 (@pulpxstyle) January 27, 2022
【手順4】写真を差し替える
僕の場合､先に文章を入れる事が多いのですが､写真がすでに揃っている方は先に写真を入れるのがおすすめです｡理由は､Webサイトの構成を一緒に決められるからです｡また文章を作るのが少し楽になります｡
【手順5】文章を入れる
写真を入れて情報の入れる場所が決まったら併せて文章を入れましょう｡フォントサイズが見づらい場合は少し調整します｡文字は16pxが平均です｡
簡単なテンプレートをコピーする：0円/7時間
上記で紹介した方法を使い自分ですべて作成する方法です｡自分で作成しているので金額は0円｡
所要時間は以下の通りです｡
- ステップ1〜5：1時間
- ライティング･画像の用意：5時間
- その他調整：1時間
- 合計7時間
（2026年追記: 当時はもう1つのパターンとして、写真と文章の用意も1ページ単位で請け負っていました。今は受けていません。制作のご相談は料金ページからどうぞ）
この記事の前身「21日間コース（21D）」について
この記事はもともと、Webflow公式の21日間コース（21D）を日本語で解説した全14回の講座のハブでした。1日30分×21日間で、未経験からポートフォリオサイトを完成させる構成です。当時の講座で伝えたかった考えは今も変わりません。
そのため、21日終了後はWeb制作のスキルではなく、他のスキルを身につけることをお勧めします。（デザインやマーケティングなど。）Web構築はあとは必要に応じて調べる力があればWebflowを用いてサイト制作を行うことができます。
たった21日でWeb制作のスキルを手に入れ、即座に次のスキル習得に行く。これは間違いなく現代最速のスキル習得といえます。
僕自身、元になった公式の「21日でポートフォリオを作ろう」コースを最後まで完走しています。途中で挫折しやすいポイントが分かった上で、この学習ルートを組んでいます。
2026年追記: 旧講座（2日目〜14日目）の記事は、Webflowの度重なるUIアップデートで手順が現行の画面と合わなくなったため、公開を終了してこの記事に統合しました。旧記事のURLからは、このページに自動で転送されます。内容が現在も有効な「基礎知識編（0日目）」と「reCAPTCHAを設定する方法」は、引き続き公開しています。
ステップ③｜作りたいもの別に、日本語記事で仕上げる
基本が身についたら、あとは「作りたいもの」に合わせて学ぶのが最短です。目的別に以下の日本語記事を用意しています。
- 全体の索引: Webflowの記事一覧
- SEO対策: WebflowのSEO対策 完全ガイド（AIO対応・2026年版）
- ブログ・CMS構築: Webflow CMS完全理解ガイド
- 多言語サイト: Webflowローカライズを1年間使った経験とSEO効果
- デザイン連携: FigmaからWebflowへデザインをコピペする方法
- 料金の把握: Webflowの料金プラン解説（2026年5月の新体系対応）
2026年、AI併用でWebflowの学び方はどう変わったか
結論: 「操作手順の暗記」の価値が下がり、「構造の理解」の価値が上がりました。
実例を1つ。当社は2026年7月、自社サイトをClaude Code（AI）を使って7日間（構築は3日）でフルリニューアルしました。26ページ・記事62本の移行を、人間1人で行っています。画面操作を1つずつ暗記しなくても、HTMLとCSSの構造さえ理解していればAIと組んでサイトを作れる時代です。そしてその構造の理解は、Webflowの学習でそのまま身につきます。
だからこそ、これからWebflowを学ぶ方には、ショートカットや手順の暗記よりも「ALLタグ・クラス設計・ボックスの構造」といった仕組みの理解を軸に学ぶことをおすすめします。わからない項目は、名前をそのまま検索するかAIに日本語で質問すれば解決できます。
Webflowの使い方を質問する方法｜Webflow Forumと公式サポート
わからないことは、2026年の今はまずAIに聞くのが速いです。AIが知らない最新の仕様やバグ、公式の見解は、Webflowの公式の場で確かめます。
2026年10月時点の公式の入口
- Webflow Forum（Webflow Community）: forum.webflow.com がそのまま開きます。旧URLの discourse.webflow.com は community.webflow.com（Webflow Community）へ転送され、質問は「Ask the Community」から投稿します。検索だけならログインは要りません。
- 公式サポート: support.webflow.com のSupport Portalから送り、回答はメールで届きます。チャットではAI Support Assistantが先に答えます。相談できるのはアカウントの持ち主と、Workspaceのオーナー・管理者です。カスタムコード・DNS・SEO・外部ツール連携はサポートの対象外で、Webflow Communityで聞くよう案内されています。
出典: Webflow Help Center「Customer Support Policy」（2026年10月5日確認）
回答をもらいやすい質問の仕方
また回答者が答えやすい質問､答えたくなる質問を書く事で回答率が上がります｡どんな風に質問すればいいかわからない方は｢Yes｣｢No｣で回答できる質問を心がけると回答率が上がります｡
記事は英語で作成します。「英語が苦手です」と明記すると優しく説明してくれるので英語が苦手な方はおすすめですよ。
2021年に僕がForumで聞いたのは「Webflow.ioのドメインから自分の購入したドメインに301リダイレクトする方法」です（元の投稿は今は残っていません）。
簡単な英語しか使っていませんが､なんとか意味が伝わりリダイレクトの方法を教えていただきました。今回は根本的に難しい設定のようで解決することはできませんでしたが「できない」とわかる事で、一歩前に進むことができます｡(今回はできそうでしたが手間がかかると判明したので､実装しませんでした｡)
今回僕は事前に同じような質問がないか調べた上で、似たような質問をリンク付けし、さらにWebflowの公式ページも引用｡YesかNoで回答できることを意識して質問しました｡自分の質問と似た記事を添付することで｢この記事を読んでみたら？｣という回答をなくすことができます｡
またYes､Noで答えられるように質問すると回答者が本能的に回答しやすいと判断してくれるので回答率があがります｡｢返信が全然来ないよぉ〜｣って方は一度､質問内容を見直して見るといいでしょう｡
まとめ｜Webflow日本語学習の最短ルート
①基礎知識の記事で土台を作る → ②Webflow公式大学（無料）で体系を学ぶ → ③目的別の日本語記事で実践する。この順番なら、日本語メインでも実務レベルまで到達できます。
Webflow×AIの最新の実践は、メルマガで先にお知らせしています。
制作実績
よくある質問
Webflowは日本語で学べますか？
学べます。Webflow公式大学は英語ですが、当ブログでは基礎操作からSEO・CMS・多言語化までWebflow関連の日本語記事を30本以上公開しています。2026年はブラウザ翻訳とAIの併用で、日本語メインでも実務レベルまで到達できます。
Webflow公式大学（Webflow University）は無料ですか？
無料です。Webflow公式が提供する動画中心の学習プラットフォームで、追加費用なしで受講できます。Webflow自体も無料プラン（Starter）のまま学習を進められます（2026年時点）。
英語が苦手でもWebflow公式大学で学べますか？
学べます。動画は実際の画面操作を見せながら進むため映像だけでも流れが掴め、わからない用語はブラウザ翻訳やAIに日本語で質問しながら進められます。
Webflowの使い方はどこで質問できますか？
Webflow Forum（Webflow Community）と、support.webflow.com の公式サポートの2つです（2026年10月時点）。サポートの対象はアカウントの持ち主とWorkspaceのオーナー・管理者で、カスタムコード・DNS・SEO・外部ツール連携はCommunityで聞くよう案内されています。
Webflowの習得にはどれくらいの期間が必要ですか？
旧21Dコースの設計では、1日30分×21日間で基本操作を一通り習得する想定でした。2026年はわからない箇所をAIに日本語で質問しながら進められるため、詰まって止まる時間はさらに短くできます。
HTML・CSSの知識がなくてもWebflowを学べますか？
学べます。WebflowのUIはHTML・CSSと同じ名前（Div block・margin・padding等）を採用しているため、わからない項目は名前をそのまま検索するかAIに質問すれば解決できます。基礎はまず0日目の記事（0step-webflow）で押さえましょう。
