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

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

「Webflowの使い方を効率よく知りたいなぁ〜。テンプレートを上手く変更できないくて悩んでるんだよね。」

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

✓本記事の内容

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

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

今回は今まで紹介してきたWebflowの使い方をリンクでまとめ、更に細かなWebflowのテクニックを紹介していきます。最速でテクニックを知りたい方はTwitterにて発信しているのでそちらも合わせてチェックしてみてください。

目 次

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

Webflowの使い方を項目別にまとめました。 

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

Webflowの基本

Webflow CMS

Webflow SEO

Webflowの料金について

Webflow × Figma

Webflow多言語化アプリ「Weglot」

Webflow × Instagram

※随時更新中Webflowの使い方をもっと知りたい方はTwitterにてリクエストをお待ちしていいます。

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

僕が実践したWebflowを使い方をイチから学んだ方法

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

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

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

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

現在はDay14まで作成しています。仮に要望があればリライト&Days21までの作成を致します。要望はTwitterコミュニティ又はTwitterにてお待ちしています。

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

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

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

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

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

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

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

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

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

無料メルマガで追加情報を告知します。

WEBFLOW専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方、事業計画、経験と過程について発信しています。不要なら1秒ですぐ解読できます。次は売上1000万を目指します。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。
くりたまさと
Masato Kurita
栗田将人

併せて読むとおすすめの記事▼

WebflowでSEO対策をする基礎知識

Webflowは、ビジネスオーナーやWebデザイナーにとって非常に便利なプラットフォームです。しかし、WebflowサイトのSEO対策を怠ると、ビジネスにとって大きな損失につながる可能性があります。この記事では、Webflowでの基本的なS

Read more...

【無料】Webflow CMSを完全理解ガイド2023

この記事ではWebflow CMSでできることを紹介しています。Webflow CMSの使い方でお困りの方、これからWebflow CMSを導入予定の方、Webflow CMSの便利機能を知りたい方は是非ご覧ください。

Read more...

Webflow専門フリーランスの2022年の実績を公開します

Webflowを使用して2022年にこなした案件数や、収益などを紹介します。これからフリーランスになる方やノーコードある方に興味は実際の数値を見ることで独立する参考になると思います。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup