はじめに
「Webflowを使ってみたいけど、英語だし画面が複雑で何から始めればいいか分からない」
そう感じて挫折しかけている方は多いと思います。実際、Webflowはコードを書かずにプロ品質のWebサイトが作れる強力なツールですが、最初の壁が高く感じられるのも事実です。
このガイドでは、Webflowを触ったことがない初心者の方を対象に、アカウント作成から実際のサイト公開まで、操作手順を丁寧に解説します。読み終わる頃には「なんとなく使えそう」ではなく、実際に手を動かしてページを作り始められる状態になることを目指しています。
1.Webflowの始め方
1-1.アカウント作成
まずはWebflow公式サイト（webflow.com）にアクセスします。トップページ右上の「Get started — it's free」ボタンをクリックしてください。
Googleアカウントかメールアドレスでサインアップできます。無料プランでも十分に機能を試せるので、最初はクレジットカードなしで始められます。
サインアップ後、「What are you here to do?」という質問が表示されます。ここでは自分の目的を選択しますが、どれを選んでも機能に差はありません。「Build for clients（クライアント向けに制作する）」や「Build for myself（自分のサイトを作る）」など、当てはまるものを選んでおきましょう。
1-2.ダッシュボードの確認
ログイン後に表示される画面がダッシュボードです。ここが作業の起点になります。
画面左側には「Sites（サイト一覧）」「Templates（テンプレート）」「Showcase（事例集）」などのメニューがあります。最初は「Sites」タブが開いた状態になっているはずです。
1-3.新規プロジェクトの作成
ダッシュボード右上にある「New site」ボタンをクリックします。次の画面では「Blank site（白紙から作成）」か「Browse templates（テンプレートから作成）」を選べます。
初心者の方にはテンプレートから始めることをおすすめしますが、このガイドでは構造をしっかり理解するためにBlank siteで進めます。
「Blank site」を選んだら、サイト名を入力します。この名前は後から変更できるので、仮のものでも構いません。「Create site」ボタンを押すと、いよいよWebflowのエディタ画面（Designer）が開きます。
2.Webflowの画面構成
Designer画面は大きく3つのエリアに分かれています。それぞれの役割を把握することが、Webflow習得の第一歩です。
2-1.左サイドバー（要素と構造の管理）
画面左側には複数のアイコンが縦に並んでいます。上から順に見ていきましょう。
Addパネル（＋アイコン） ここがWebflowの「部品棚」です。Section、Container、Div Block、Heading、Paragraphなど、ページを構成するすべての要素（エレメント）がここから追加できます。使いたい要素をキャンバスにドラッグ&ドロップするか、クリックして配置します。
Navigatorパネル（ツリーアイコン） ページの構造をツリー形式で確認できます。要素が入れ子になっている状態を視覚的に把握でき、特定の要素をクリックして選択するのにも便利です。複雑なレイアウトを組んでいるときは、このパネルを常に開いておくと作業しやすいです。
Pagesパネル（ページアイコン） サイト内のページ一覧と管理ができます。新しいページの追加もここから行います。
CMSパネル（データベースアイコン） Webflowには強力なCMS機能が内蔵されています。ブログ記事や商品情報など、繰り返し使うコンテンツを管理するためのパネルです。（有料プランで利用可能）
Assetsパネル（画像アイコン） アップロードした画像やSVGファイルを管理します。
2-2.キャンバス（中央エリア）
画面中央の大きなエリアが実際の編集スペースです。ここで要素をクリックして選択したり、ドラッグして移動したりします。
キャンバス上部にはブレイクポイントの切り替えボタンがあります。デスクトップ・タブレット・モバイルなど、デバイスごとの表示を確認しながら作業できます。
2-3.右サイドバー（スタイルとプロパティの設定）
画面右側が最も使用頻度の高いエリアです。要素を選択した状態で右サイドバーを操作することで、見た目を細かく調整できます。
Styleパネル 選択した要素のCSSプロパティを設定します。幅・高さ・色・フォント・余白など、デザインに関するすべての設定がここに集約されています。コードを書かなくても、ここをクリック操作するだけでCSSが生成されます。
Settingsパネル（歯車アイコン） 要素のHTML属性やリンク先URLなど、スタイル以外の設定を行います。
3.基本操作
3-1.要素の追加
左サイドバーの「Add」パネル（＋アイコン）を開いて、使いたい要素をキャンバスにドラッグ&ドロップします。
最初に覚えるべき要素はこの3つです。
- Section：ページを縦方向に区切るブロック。ヘッダー・メインコンテンツ・フッターなど、大きなエリア単位で使います
- Container：コンテンツの最大幅を制限し、左右中央に配置するための要素。Sectionの中に入れて使うのが基本パターンです
- Div Block：汎用的なボックス要素。Flexboxレイアウトを組む際の基本単位になります
3-2.スタイリング
要素を選択した状態で右サイドバーのStyleパネルを使います。
色を変えたい場合は「Background」の項目をクリックするとカラーピッカーが開きます。フォントサイズを変えたい場合は「Typography」セクションで数値を入力します。
ここで重要なのが「クラス」の概念です。右サイドバー上部にある「Selector」フィールドにクラス名を入力することで、同じスタイルを複数の要素に適用できます。後述しますが、クラス命名はWebflowを効率的に使う上で非常に重要です。
3-3.Flexboxレイアウト
Webflowの中でも特に使いこなせると一気にクオリティが上がるのが、Flexboxの設定です。
Div Blockを選択して、右サイドバーの「Layout」セクションを見てください。「Display」が「Block」になっているはずです。これを「Flex」に変更すると、その要素がFlexコンテナになります。
Flexに切り替えると、子要素をどう並べるかを制御するオプションが表示されます。
- Direction：子要素を横並び（Horizontal）にするか縦並び（Vertical）にするか
- Justify（主軸方向の揃え）：左寄せ・右寄せ・中央揃え・均等分散などを選べます
- Align（交差軸方向の揃え）：上揃え・下揃え・中央揃えなどを選べます
たとえば「画像とテキストを横に並べて、両方を垂直方向の中央に揃えたい」という場合は、Direction: Horizontal、Align: Center に設定するだけで実現できます。
3-4.Gridレイアウト
カードを格子状に並べたいときはGridが便利です。同様に「Display」を「Grid」に変更すると、列数や行の高さを視覚的に設定できます。
特にGridは「Columns」の設定で「repeat(3, 1fr)」のような値を入力することで、均等な3カラムレイアウトが簡単に作れます。
3-5.テキストの編集
テキスト要素（HeadingやParagraph）をダブルクリックすると、テキスト編集モードに入ります。直接入力・削除・コピーペーストが可能になります。編集を終えるときはEscキーを押すか、テキスト要素の外側をクリックします。
4.レスポンシブデザインの設定
4-1.ブレイクポイントの考え方
Webflowのブレイクポイントは「大きいサイズから小さいサイズへの継承」が基本ルールです。
デスクトップで設定したスタイルは、タブレット・モバイルにも引き継がれます。逆はありません。したがって、デスクトップファーストで作業し、必要に応じてタブレット・モバイルで上書き設定していくのが基本の流れです。
キャンバス上部のブレイクポイントボタンは以下の通りです（左から順に）。
- Desktop（1280px以上）：基準となるビューポート
- Tablet（991px以下）：タブレット向け
- Mobile Landscape（767px以下）：スマートフォン横向き
- Mobile Portrait（479px以下）：スマートフォン縦向き
4-2.モバイル対応の手順
デスクトップのレイアウトが完成したら、タブレットビューに切り替えます。レイアウトが崩れている箇所を確認して、修正が必要な要素を選択し、スタイルを調整します。
よくある対応例を挙げます。
横並びのカードを縦並びに変える Flex設定しているDiv BlockをタブレットビューでDirection: Verticalに変更するだけです。デスクトップでは横並びのまま、タブレット以下では縦並びになります。
フォントサイズを調整する モバイルビューに切り替えて、Headingを選択し、Typographyのフォントサイズを小さい値に変更します。
パディングを調整する デスクトップで大きく取っていた余白を、モバイルでは小さくします。
5.ページの公開方法
5-1.無料プランでの公開（Webflowサブドメイン）
無料プランの場合、「yoursite.webflow.io」形式のURLでサイトを公開できます。
Designer画面右上の「Publish」ボタンをクリックします。「Publish to webflow.io subdomain」にチェックが入っていることを確認して「Publish to Selected Domains」ボタンを押せば、数秒で公開されます。
5-2.カスタムドメインの設定（有料プランが必要）
独自ドメインで公開するにはBasicプラン以上が必要です。
- Webflowのダッシュボードから対象サイトの「Settings」を開く
- 「Hosting」タブを選択
- 「Add custom domain」にドメイン名を入力して「Add」をクリック
- 表示されるCNAMEレコードとAレコードの値を、ドメイン管理会社のDNS設定に追加する
- DNS変更が反映されるまで数分〜数時間待つ
- Webflow側で再度「Publish」を実行する
DNSの設定はドメインを購入したサービス（お名前.com・ムームードメイン・Google Domainsなど）の管理画面から行います。
5-3.公開前チェックリスト
公開ボタンを押す前に以下を確認しておきましょう。
- [ ] ページタイトルとメタディスクリプションが設定されているか（PagesパネルでSEO設定が可能）
- [ ] OGP（SNSシェア用の画像とテキスト）が設定されているか
- [ ] すべてのリンクが正しく機能するか
- [ ] 画像のAlt属性が設定されているか
- [ ] モバイル表示で崩れている箇所がないか
- [ ] ページの読み込み速度は問題ないか（不要な大容量画像を削除）
- [ ] フォームの送信テストは完了しているか（フォームを設置した場合）
6.覚えておきたいTips
6-1.ショートカットキー
作業効率が大幅に上がるショートカットキーを厳選しました。
- 要素のコピー — Mac: Cmd + D／Windows: Ctrl + D
- 要素の削除 — Mac: Delete/Backspace／Windows: Delete/Backspace
- 操作を元に戻す — Mac: Cmd + Z／Windows: Ctrl + Z
- やり直す — Mac: Cmd + Shift + Z／Windows: Ctrl + Shift + Z
- Addパネルを開く — Mac: A／Windows: A
- Navigatorを開く — Mac: Z／Windows: Z
- デスクトップビューに切り替え — Mac: 1／Windows: 1
- タブレットビューに切り替え — Mac: 2／Windows: 2
- モバイルビューに切り替え — Mac: 3／Windows: 3
- プレビューモード — Mac: P／Windows: P
特に「D」でのコピー（複製）と「Z」でのNavigator表示は頻繁に使うので、最初に覚えておくと作業がスムーズになります。
6-2.クラス命名規則
Webflowではクラスを使い回すことが効率化の鍵です。命名には一定のルールを持っておくと、後から見たときに混乱しません。
おすすめはBEM（Block Element Modifier）風の命名です。
.section-hero（ヒーローセクション全体）.section-hero__title（ヒーローのタイトル）.section-hero__subtitle（ヒーローのサブタイトル）.btn（ボタン共通スタイル）.btn--primary（プライマリボタン）.btn--secondary（セカンダリボタン）
「Component」という概念で、汎用的なスタイルは短い名前（.card、.btnなど）にして、ページ固有のものは長い名前にするといった使い分けも有効です。
6-3.シンボル（コンポーネント）の活用
ナビゲーションバーやフッターなど、複数ページで共通して使う要素は「Symbol」（シンボル）にしておきましょう。
シンボルにしたい要素を右クリックして「Create Symbol」を選択するだけです。一度シンボルにすると、どこか一箇所を変更するだけで全ページの同じ要素に変更が反映されます。
ページ数が増えてくると、シンボルを使っているかどうかで修正作業の手間が何倍も変わってきます。
7.つまずきやすいポイントと対処法
7-1.問題1：スタイルを変えたつもりが他の要素にも影響してしまう
原因：同じクラスが適用されている複数の要素に変更が反映されているためです。
Webflowでは、クラスを通じてスタイルを管理しています。「Selector」フィールドにクラス名が表示されている状態でスタイルを変更すると、そのクラスを持つすべての要素に変更が適用されます。
解決策：特定の要素だけ変えたい場合は、新しいクラスを追加するか、「Combo Class」（コンボクラス）を使います。Selectorフィールドに既存のクラスを選んだ後、さらにクラス名を入力すると、追加のクラスとして適用されます。
もしくは、その要素だけにスタイルを当てたい場合は「Selector」から既存クラスを外して、新規クラスを作成しましょう。
7-2.問題2：要素がどこにも見当たらない（消えたように見える）
原因：要素が存在しているが、Display: Noneになっているか、別の要素の後ろに隠れている可能性があります。
解決策：左サイドバーの「Navigator」パネルを開いて、ツリー構造を確認します。Navigator上でその要素をクリックして選択し、右サイドバーのStyleパネルで「Display」の設定を確認してください。「None」になっていたら「Block」や「Flex」に変更します。
また、サイズが0になっている場合も要素が見えなくなります。選択した状態でStyleパネルの「Size」を確認してみてください。
7-3.問題3：モバイルでレイアウトが崩れる
原因：デスクトップで固定幅（px指定）を使っているため、小さい画面では要素がはみ出したり崩れたりしています。
解決策：幅や高さの指定を固定値（px）から相対値（%、vw、auto）に変更します。
たとえばカードの幅をwidth: 400pxにしている場合、モバイルでは画面幅より広くなってしまいます。これをwidth: 100%やmax-width: 400pxに変えることで、画面幅に合わせて柔軟に変化するようになります。
また、Flexboxを使って子要素の幅を制御している場合は、flex-wrap: wrapを設定しておくと、小さい画面では自動的に折り返されるようになります。
8.まとめ
Webflowは確かに最初は戸惑うことが多いですが、画面の構成と基本操作を理解してしまえば、コーディングなしでプロ品質のサイトが作れる非常に優秀なツールです。
このガイドで解説した内容をおさらいします。
- アカウント作成からDesigner画面の起動まではシンプルな手順で完了
- 左サイドバー（要素追加・構造確認）・キャンバス（編集）・右サイドバー（スタイル設定）の3エリアを使いこなすことが基本
- Flexbox/Gridを使えれば、ほぼあらゆるレイアウトが組める
- レスポンシブはデスクトップから小さいサイズへの継承というルールを理解する
- シンボルとクラスを正しく使うことで、後々の修正が楽になる
ただ、実際のWebサイト制作では、このガイドでカバーしきれない応用的な知識が必要になることも多いです。アニメーション・CMSの構築・フォームの設置・Eコマース対応など、Webflowの機能は非常に広範囲にわたります。
「自分でやってみたけど思うようにできない」「時間をかけて作るより、プロに頼んだほうが早い」という場面も出てくるはずです。
そんなときは、Webflow専門の制作会社に相談してみてください。f2t.jpでは、Webflowを使ったWebサイト制作のご相談を承っています。デザインから公開・保守まで対応しているので、初めての方でも安心してお任せいただけます。まずはお気軽にお問い合わせください。
