【2026年版】Webflowの使い方を項目別にまとめました

Webflowとは: Webflowとは、コードを書かずにWebサイトを制作できるノーコードのWeb制作ツールです。デザインからサイトの公開まで一貫して行え、HTML・CSS・JavaScriptのコード出力にも対応しています。

今回はこういった悩みを解決していきます。

✓本記事の内容

Webflowの基本的な使い方
僕がWebflowをイチから学んだ方法【実体験】
テンプレートを調整する効率UPテクニック

僕はWebflowを使って制作代行や使い方指導などを行って仕事をしています。またこのサイトもWebflowを使用して作成されています。

今回は今まで紹介してきたWebflowの使い方をリンクでまとめ、更に細かなWebflowのテクニックを紹介していきます。

Webflowの使い方を項目別【まとめ】

Webflowの使い方を各項目でわけて記事を作成しています。気になるページをチェックしてみてください。また使い方の質問や記事のわからない箇所など解説のリクエストはお問い合わせにて受付しています。

Webflowの基本

Webflow CMS

Webflow SEO

Webflowの料金について

‍【2026年最新版】Webflowの料金プランを解説｜5月の新体系（Basic・Premium）対応

Webflow × Figma

‍【革命】figmaからWebflowへデザインをコピペする方法

Webflow多言語化アプリ「Weglot」

Webflow × Instagram

‍【無料】ノーコードWebflowにInstagramを埋め込む方法

※随時更新中。まず読むならWebflowのSEO対策完全ガイド、CMS完全理解ガイド、Webflow大学の日本語解説の3本がおすすめです。

Webflowの使い方をイチから学んだ方法【当時は未経験でした】

僕がWebflowを学んだ方法はWebflow公式のポートフォリオ作成コースを３ヶ月かけて受講したところから始まります。このコースではWebflowの使い方全般を紹介しつつ、ポートフォリオサイトの作成を行います。

‍コースは全て英語です。そのため自動翻訳や動画の手元の作業を見てなんとかWebflowに慣れたのが最初のステップです。素材などはWebflow公式からダウンロードできます。動画はこちら↓

当ブログではこのWebflow公式を日本語翻訳しています。

当ブログではこのコースを日本語に翻訳して紹介しています。ブログを始めた初期に作成したものなので少し読みにくいかも知れませんが「公式サイト✕Web春の日本語翻訳」を掛け合わせて見てみるとスムーズに作成できると思います。
>>日本語翻訳はこちら

現在はDay14まで作成しています。（2026年追記: 個別の講座記事は公開を終了しました。Webflow大学の解説は日本語解説まとめに集約しています）

Webflowのテンプレートを効率よく編集するテクニック

Webflowの作業効率がUPする方法を紹介します。これは基礎的なテクニックです。

①
まずは画面右の表示の意味を知るところから始めます。
オレンジ：他から効果を受けている
青：その要素にCSSが記入されている

②
オレンジをクリックして要素の大元を確認しましょう。

↓続く pic.twitter.com/d98aRD1PjZ
— ノーコードで1000万チャレンジ中＠Webflowデザイナー (@METANA_flow) January 27, 2023

こちらのツイートでも紹介していますが、以上の方法でWebflowではテンプレートを効率よく変更することができます。

有料テンプレートならあまりないことかも知れませんが、無料のテンプレートは誰でも投稿できるので余計な数値が入力されていることがよくあります。余計な数値というのは例えばレスポンシブデザインに意味もなく数値0を指定していたり、ブレイクポイント（★マークのサイズ）と同じ数値を意味なく指定していることを指します。

これはWebflow初心者でもよくやってしまうことなので注意しましょう。余計な数値が入力されているとブレイクポイント（★マークのサイズ）の変更で自動でレスポンシブデザインが作成されなくなります。後々「どこに数値指定されていてレスポンシブデザインが壊れているかわからない」とならないように余計な数値指定はしないようにしましょう。

Webflow制作でよく使うショートカットキー一覧

Webflowのショートカットでよく使うキーを紹介します。ちなみにコピペや戻る、進むなどは他のアプリと同様に使用できますよ。

コピー「command＋c」
ペースト「command＋v」
戻る、進む「command＋z」「command＋z+shift」 ---------------------------------------
数値削除「Alt＋クリック」
クラス入力「command＋enter 」
要素検索＋挿入「command＋k」 Margin、Paddingの数値指定
左右同時指定「Alt＋マウススライド」
全方位同時指定「shift＋マウススライド」
CMSページのページ移動（デザイナーページ）「Alt＋←→」
子要素内で移動「↓」
上から順に移動「Alt＋↓」

以上が僕がよく使うショートカットキーです。おすすめがあれば是非教えて下さい。ちなみにショートカットキーはWebflowデザイナー内の左下Helpの項目より全てのショートカットキーを確認できます。
>>ショートカットキーの公式サイトはこちら

‍

よくある質問

Webflowの使い方を独学で学ぶにはどうすればいいですか？

Webflow公式のポートフォリオ作成コースを受講する方法があります。コースは全て英語ですが、当ブログではその日本語解説をWebflow大学まとめ記事に集約しています。素材はWebflow公式からダウンロードできます。

Webflowの無料テンプレートを編集するときの注意点は？

無料テンプレートには余計な数値が入力されていることがよくあります。余計な数値があるとブレイクポイントの変更でレスポンシブデザインが自動で作成されなくなるため、画面右のオレンジ表示をクリックして要素の大元を確認しましょう。

Webflowのショートカットキーはどこで確認できますか？

Webflowデザイナー内の左下Helpの項目から全てのショートカットキーを確認できます。よく使うものには数値削除（Alt＋クリック）、クラス入力（command＋enter）、要素検索＋挿入（command＋k）などがあります。

Webflowの使い方でわからないことはどこで質問できますか？

使い方の質問や記事のわからない箇所など解説のリクエストは、当サイトのお問い合わせフォームにて受け付けています。

Webflowの料金はいくらですか？

2026年5月の改定後は、Starterが無料、Basicが月15ドル、Premiumが月25ドル（いずれも年払い時の月額）です。多言語化のローカライズ追加は1言語あたり月9ドルです。詳細は料金プラン解説の記事にまとめています。