【PR】本記事にはアフィリエイトリンクが含まれます。記事内で紹介する商品・サービスを購入・契約すると、当サイトに報酬が支払われる場合があります。

公開日:2026-04-23 / 最終更新:2026-05-17 / 運営者:マヤ

【PR】本記事には運営者が提携するアフィリエイトリンクが含まれます。製品情報は公式サイトおよび公式ヘルプをもとに2026年4月時点で整理しました。料金・機能は変更される場合があるため、最終判断前に公式の最新情報を必ずご確認ください。

Webflowの始め方｜登録から最初のサイト公開まで完全ガイド【2026年版】

Q: STUDIOとどちらが良いですか?

日本語 UI で直感的に始めたいなら STUDIO、CSS の細かい制御やコードエクスポートが必要ならWebflow。STUDIOは日本発なのでサポートも日本語、テンプレートも日本語前提で作られています。一方、Webflowは350万人以上のグローバルコミュニティと Webflow University という学習資源が強み。ポートフォリオや受託制作をグローバル水準で作りたい人はWebflow寄りです。

「ノーコードでサイトを作りたいけど、Wix だとデザインの限界を感じる。かといってコードをゼロから書く時間もない」——そんなデザイナーやマーケターが、深夜に「Webflow 始め方」と検索窓に打ち込む。ありがちな光景です。

CSS の頭の中がそのまま画面に出る——最初の1ページで体感できる。Webflow はそういうツールです。Flexbox の align-items を変えると要素がリアルタイムで動き、margin の数値をスライダーで触ると余白がその場で変わる。コードを書く代わりに、コードの論理をビジュアルで操作する。この「翻訳体験」が、他のノーコードツールとの根本的な違いです。

Webflow は350万人以上のデザイナー・開発者が利用するビジュアル開発プラットフォーム。無料で制作・学習が可能で、独自ドメインで公開する際に Basic $14/月（年払い）から。AWS + CloudFront CDN のホスティングが含まれており、Core Web Vitals のスコアが高いことでも知られています。

この記事では、マヤがアカウント作成から最初の1ページを公開するまでの手順を5ステップに分解しました。Webflow Designer の独特な操作感に戸惑うポイントも先回りして解説しているので、手を動かしながら読み進めてください。

おさらい:Webflow とは

項目	内容
正式名称	Webflow
提供会社	Webflow, Inc.（アメリカ・サンフランシスコ）
創業	2013年
主な用途	ウェブサイト制作、LP、ポートフォリオ、CMS、EC
料金	無料〜（Site Plan: Basic $14/月・年払い〜）
日本語対応	なし（UI・ヘルプ・サポートすべて英語）
公式サイト	https://webflow.com/

Wix が「テンプレートを選んで埋めるビルダー」なら、Webflow は「CSS をビジュアルで書く開発環境」。STUDIO（日本発の同系統ツール）とよく比較されますが、Webflow の方がコードエクスポート・CMS の柔軟性・インタラクション表現力で一歩先を行きます。

準備するもの

メールアドレス:アカウント登録用（Google アカウントでの SSO も可能）
Chrome ブラウザ（最新版）:Webflow Designer は Chrome での動作が推奨。Safari や Firefox でも動くが、一部レンダリングが異なる場合あり
公開したいコンテンツの素材:テキスト・画像・ロゴなど。なくてもテンプレートで練習可能
独自ドメイン（任意）:公開時に必要。無料プランでは webflow.io サブドメインで公開

Step 1:アカウントを作成し、プロジェクトを立てる

Webflow 公式サイトにアクセスし、「Get started — it's free」をクリック。Google アカウントまたはメール+パスワードで登録します。

登録後、ダッシュボードに到着。ここで最初にやるのはプロジェクト（サイト）の作成です。

「+ New Site」をクリック
テンプレートを選ぶか、「Blank Site」で白紙から始める
プロジェクト名を入力（あとから変更可能）

テンプレートを使うか、白紙か? 初めて Webflow を触るなら、テンプレートから始めることを推奨します。構造やクラス名の付け方など、Webflow の「作法」を体感できます。白紙は2サイト目以降で十分。

所要時間の目安:5分

Step 2:Webflow Designer でページを編集する

プロジェクトを開くと Webflow Designer が起動します。初見だと情報量が多くて圧倒されますが、使うパネルは主に3つです。

左パネル:要素の追加（Add Elements）

「+」アイコンをクリックすると、Section / Container / Div Block / Heading / Paragraph / Image / Button などが一覧表示
使いたい要素をキャンバスにドラッグ&ドロップ

右パネル:スタイル設定（Style Panel）

選択した要素の CSS プロパティをビジュアルで調整
Layout（Flexbox / Grid）、Spacing（margin / padding）、Typography、Backgrounds、Borders など
ここが Webflow の心臓部。CSS を知っている人ほど「あ、これ align-items: center のことか」と直感的に掴めます

上部バー:レスポンシブ切り替え

Desktop / Tablet / Mobile Landscape / Mobile Portrait の4段階でブレイクポイントを切り替え
各ブレイクポイントでスタイルを上書き可能

最初の操作で試してほしいこと:

Section を1つ追加し、その中に Container を配置
Container 内に Heading と Paragraph を入れる
Section の背景色を変える
Heading のフォント・サイズ・色を変える
タブレット表示に切り替えて、フォントサイズを小さくする

この5ステップだけで、「Webflow とは CSS をビジュアルで操作するツールだ」という感覚が掴めます。

クラス名について:Webflow ではスタイルを「クラス」に紐づけます。要素を選択してスタイルを変えると、右パネル上部に「Selector」が表示されます。ここにクラス名を付けて管理するのが Webflow の基本。同じクラスを付けた要素は同じスタイルが適用されるので、CSS を書いた経験がある人にはお馴染みの仕組みです。

所要時間の目安:30分〜1時間（初回の操作慣れ込み）

Step 3:ページを追加し、ナビゲーションを組む

左パネルの「Pages」アイコンをクリックすると、ページ一覧が表示されます。

「+ New Page」でページを追加（例:About / Services / Contact）
各ページにタイトルとスラッグを設定
SEO 設定（Meta Title / Description / OGP）もここで入力

ナビゲーションバーの設置:

Add Elements から「Navbar」コンポーネントをページ上部にドラッグ
ロゴ画像とメニューリンクを編集
Navbar は「Symbol」として保存すると、全ページで共通化できる

Symbol（シンボル）とは:ヘッダーやフッターなど、複数ページで使い回すパーツを1ヶ所で管理する仕組み。1つの Symbol を編集すると、そのシンボルが置かれた全ページに変更が反映されます。

所要時間の目安:20〜40分

Step 4:CMS を使う（必要な場合）

ブログやポートフォリオなど、記事やアイテムを繰り返し追加するサイトなら CMS を使います。

左パネルの「CMS」アイコンから「+ New Collection」をクリック
コレクション名を設定（例:「Blog Posts」）
フィールドを追加:Title（テキスト）、Body（リッチテキスト）、Thumbnail（画像）、Published Date（日付）など
コレクション内に記事を追加
デザイン側で「Collection List」要素を配置し、動的データをバインド

CMS 機能はCMS プラン（$23/月・年払い）以上で本番公開可能。無料プランでも 50 CMS items まで制作・プレビューはできます。

所要時間の目安:15〜30分（ブログの基本構成の場合）

Step 5:公開する

Designer 右上の「Publish」ボタンをクリックするだけで、webflow.io サブドメインに公開されます。

独自ドメインで公開する場合:

Site Plan（Basic $14/月〜）にアップグレード
「Project Settings」→「Hosting」→「Custom Domains」でドメインを追加
DNS の CNAME / A レコードを Webflow 指定の値に変更
SSL 証明書は Webflow が自動発行（Let's Encrypt）
DNS 反映後（数分〜最大48時間）、独自ドメインでアクセス可能

公開後にやっておくと良いこと:

Google Analytics / Search Console の設定:「Project Settings」→「Integrations」から GA のトラッキング ID を入力
ファビコンと OGP 画像の設定:「Project Settings」→「General」から
複数デバイスでの表示確認:実機のスマホ・タブレットでアクセスして表示崩れがないかチェック

所要時間の目安:10〜20分（DNS 反映待ちを除く）

よくあるトラブルと対処法

1. 要素が思った場所に入らない

Webflow は HTML の DOM 構造に忠実なので、「要素 A の中に要素 B を入れる」操作はドラッグの位置がシビアです。左パネルの「Navigator」（レイヤーパネル）で階層構造を確認しながら、正しい親要素の中にドロップしてください。

2. レスポンシブでレイアウトが崩れる

Webflow のスタイル継承は「デスクトップ → タブレット → モバイル」の順。デスクトップで Flexbox の direction を row にしていたら、モバイルで column に上書きする——この「カスケード」を意識すると崩れにくくなります。

3. フォントが日本語で表示されない

デフォルトの欧文フォントは日本語を含んでいません。「Project Settings」→「Fonts」から Google Fonts の日本語フォント（Noto Sans JP など）を追加し、body タグのクラスに適用してください。

4. 公開しても404になる

DNS の設定ミスが多い原因です。特に CNAME の値を「proxy-ssl.webflow.com」ではなく「proxy-ssl.webflow.com.」（末尾のドットあり）で入力すべきレジストラがあります。DNS 設定後は数時間待ってから再確認してください。

5. Site Plan と Workspace Plan の二重課金で混乱する

個人利用なら Free Workspace + 必要な Site Plan の組み合わせで OK。Workspace Plan の課金が必要になるのは、コードエクスポートやチーム機能を使う場合だけです。

まとめ:最初の1ページで「CSS を見える化する」体験を

Webflow の醍醐味は、コードを1行も書かずに CSS の論理をそのまま形にできること。テンプレートを選んで触り始めれば、1時間後にはセクション構成とレスポンシブ対応の基本が身についているはずです。

無料プランで制作・学習は無制限にできるので、まずは手を動かしてみてください。独自ドメインで公開する段階になったら Basic $14/月（年払い）に課金すればいい。デザインの制作段階でお金がかからないのは、Webflow の親切な部分です。

【PR】下記リンクは運営者のアフィリエイトリンクを含みます。公式サイトで料金・機能の最新情報を確認の上、自己判断でご登録ください。

【PR】▶ Webflow 無料プランで始める

デザイン制作は無料で無制限。独自ドメイン公開は Basic $14/月（年払い）から。AWS + CloudFront CDN 込み。

【PR】▶ STUDIO のレビューを読む

「日本語UIで始めたい」「日本語サポートが欲しい」なら、国産ノーコードのSTUDIOもチェック。

合わせて読みたい

よくある質問（FAQ）

Q. Webflowは無料でサイトを公開できますか?

Starter（無料）プランでは webflow.io のサブドメインで公開可能ですが、独自ドメインの接続はできません。独自ドメインで本番公開するには、Basic（$14/月・年払い）以上の Site Plan が必要です。デザインの制作・学習は無料のまま無制限でできるので、まず作ってみて、公開する段階で課金する流れが一般的です。

Q. HTMLやCSSの知識がなくても使えますか?

使えますが、Flexbox や Grid の概念を「名前だけでも知っている」レベルだと格段にスムーズです。Webflow は CSS のプロパティをそのままビジュアルで操作する設計なので、CSS の仕組みを理解していると「なぜこう動くのか」が腑に落ちやすい。まったくの初心者の場合は、Webflow University の入門コース（英語・無料）を1〜2時間見てから触り始めるのがおすすめです。

Q. Site PlanとWorkspace Planの違いは何ですか?

Site Plan は「公開するサイト1つごと」にかかる費用（ドメイン接続、帯域、CMS）。Workspace Plan は「デザイン作業環境」にかかる費用（コードエクスポート、チーム管理）。個人で1サイトを作る場合は、Free Workspace + Basic Site Plan（$14/月）の組み合わせがもっとも安く済みます。

Q. 日本語フォントは使えますか?

Google Fonts に含まれる日本語フォント（Noto Sans JP、M PLUS Rounded 1c など）はそのまま使えます。Adobe Fonts やカスタムフォントの読み込みも可能です。日本語サイトの制作で困ることはまずありません。

Q. STUDIOとどちらが良いですか?

日本語 UI で直感的に始めたいなら STUDIO、CSS の細かい制御やコードエクスポートが必要なら Webflow。STUDIO は日本発なのでサポートも日本語、テンプレートも日本語前提で作られています。一方、Webflow は350万人以上のグローバルコミュニティと Webflow University という学習資源が強み。ポートフォリオや受託制作をグローバル水準で作りたい人は Webflow 寄りです。

この記事について 運営者:マヤ(海外 SaaS × 日本人向けアフィリエイト歴の個人サイト運営者) 情報ソース:Webflow 公式サイト、Webflow University、G2 / Capterra / Trustpilot の公開評価最終更新日:2026-04-23