2023.08.22 2023.08.23

Webflowの使い方徹底解説：初心者でも簡単にWebサイトが作成できる！

susan

webサイトの制作をこれまでに体験したことがない人でも、Webflowなら簡単に始めることができます。

すーさん

本記事では、Webflowの使い方をステップバイステップで徹底解説していきます。あなたもWebflowを使って、プロフェッショナルなwebサイトをデザインしてみましょう。

初心者におすすめのWordpress独学用書籍については【初心者用】WordPress（ワードプレス）の独学・勉強におすすめしたい本10選で詳しく紹介していますので、ぜひチェックしてみてください。

あわせて読みたい

【初心者用】WordPress（ワードプレス）の独学・勉強におすすめしたい本10選

Contents

Webflowとは

wordpress, cms - Webflowの使い方徹底解説：初心者でも簡単にWebサイトが作成できる！

Webflowは、デザインと開発を一体化したCMS（コンテンツ管理システム）です。コーディングの知識がなくても、ビジュアルエディターを通じてwebサイトを自由自在にデザインできます。さらに、WebflowにはCMSが内蔵されており、コンテンツの管理も簡単にできます。

Webflowについては【CMS】webflowとは？特徴やメリット・デメリット、料金についてで詳しく解説していますので、ぜひチェックしてみてください。

あわせて読みたい

【CMS】webflowとは？特徴やメリット・デメリット、料金について

Webflowの無料プラン

Webflowの無料プランは、「スタータープラン」とも呼ばれ、主に学習用途や個人の小規模プロジェクトに適しています。詳細な機能は以下の通りです。

主な機能

最大2つのプロジェクトを作成可能
テンプレートの利用ができる
デザインツール利用可能
CMSとエディター利用可能
コミュニティへのアクセスができる
サブドメインでの公開とホスティング

最大2つのプロジェクトを作成可能

無料プランでは2つのプロジェクト（ウェブサイト）を作成することが可能です。それぞれのプロジェクトは最大2ページまで作成することができます。

テンプレートの利用ができる

無料プランのユーザーでも、Webflowが提供する豊富なテンプレートの中から選ぶことができます。しかしながら、一部のプレミアムテンプレートは有料となります。

デザインツール利用可能

Webflowのデザインツールは、無料プランでも利用可能です。これにより、レスポンシブデザインのウェブサイトを、プログラミング知識がなくても簡単に作成することができます。

CMSとエディター利用可能

無料プランでも、WebflowのCMSとエディターを使用することができます。これにより、独自のブログ記事やギャラリーなどのコンテンツを作成し、管理することが可能です。

コミュニティへのアクセスができる

Webflowのコミュニティーフォーラムへのアクセスが可能で、Webflowの使用方法についての質問や、デザインについてのアドバイスを他のユーザーから得ることができます。

サブドメインでの公開とホスティング

無料プランでは作成したウェブサイトはwebflow.ioのサブドメインで公開されます。独自ドメインを使用したい場合や、サイトをエクスポートして他のホスティングサービスにアップロードしたい場合は、有料プランを選択する必要があります。

以上がWebflowの無料プランの詳細です。Webflowを始めて利用する方や、Webデザインを学びたい方にとっては、この無料プランは大変役立つでしょう。しかし、ビジネス利用を考える場合は、より多くのプロジェクトを作成したり、独自ドメインで公開したりするために、有料プランを検討することをお勧めします。

Webflowの有料プラン

Webflowでは、様々なニーズに合わせたプランを提供しており、アカウントプランと、サイトプランの二つに入会する必要があります。

以下がそれぞれのプランの種類です。

アカウントプラン

項目	Coreプラン	Growthプラン	エンタープライズプラン
月額料金 (年間契約)	約2,755円 ($19)	約5,075円 ($35)	問い合わせる必要あり

レート：$1 = 145円で計算

サイトプラン

サイトプラン(一般用)

項目	Basicプラン	CMSプラン	Business プラン	Enterprise プラン
月額料金 (年間契約)	約2,030円 ($14)	約3,335円 ($23)	約5,655円 ($39)	問い合わせる必要あり

レート：$1 = 145円で計算

サイトプラン(Eコマース用)

項目	Standardプラン	Plusプラン	Advancedプラン
月額料金 (年間契約)	約4,205円 ($29)	約10,730円 ($74)	約30,740円 ($212)

レート：$1 = 145円で計算

Webflowの詳しい料金プランについては【CMS】webflowとは？特徴やメリット・デメリット、料金についてで解説していますので、ぜひチェックしてみてください。

あわせて読みたい

【CMS】webflowとは？特徴やメリット・デメリット、料金について

Webflowのアカウント設定

以下にWebflowのアカウント設定の詳細をご紹介します。

アカウント設定のステップ

アカウントの作成
メール認証
プロフィール設定
無料か有料プランの選択
新規プロジェクトの作成

ステップ①：アカウントの作成

まずはWebflowの公式サイトにアクセスしましょう。「Get started for free」ボタンをクリックし、新しいアカウントを作成します。アカウント作成には、有効なメールアドレス、パスワード、フルネームが必要です。

ステップ②：メール認証

アカウント作成時に入力したメールアドレスに認証メールが送られてきます。そのメールに記載されているリンクをクリックして、メールアドレスの認証を行います。

ステップ③：プロフィール設定

メール認証後、ダッシュボードにアクセスしてプロフィール設定を行います。アバターの設定、氏名、ロケーション、職業など、公開する情報を設定できます。

ステップ④：無料か有料プランの選択

Webflowでは、プランを選択することで機能を拡張できます。無料プランでも十分に機能は利用可能ですが、プロフェッショナルな利用を考える場合は有料プランを検討しましょう。

ステップ⑤：新規プロジェクトの作成

プロフィール設定が完了したら、新規プロジェクトを作成しましょう。「New Project」ボタンをクリックし、テンプレートを選んだり、新しくデザインを始めたりします。

以上が基本的なWebflowのアカウント設定です。設定はすべてブラウザ上で行え、特別なソフトウェアをインストールする必要はありません。

Webflowの使い方

ダッシュボードの理解

Webflowを開始すると、まずダッシュボード画面に行きます。ここでは、新しいプロジェクトの作成や既存のプロジェクトの管理、さらにはアカウント設定などが行えます。

プロジェクトの作成

「New Project」ボタンをクリックして新しいプロジェクトを開始します。ここで、ブランクの新規プロジェクトを開始するか、またはWebflowが提供する様々なテンプレートから選ぶことができます。

デザインエディターの理解

プロジェクトを開始すると、Webflowのデザインエディターにアクセスします。左側のパネルは、ページのエレメントやコンテンツを追加する場所です。右側のパネルでは、選択したエレメントのスタイルを編集できます。

エレメントの追加

左側の「Add Elements」パネルから、さまざまなエレメントをページに追加できます。これらのエレメントはドラッグ＆ドロップで追加でき、独自のレイアウトを自由に作成することができます。

スタイルの編集

エレメントを選択すると、右側の「Style」パネルがアクティブになり、ここでエレメントのスタイルを編集できます。色、フォント、マージン、パディングなど、CSSと同様のプロパティを視覚的に調整することができます。

ページの作成と管理

上部の「Pages」パネルでは、新しいページを作成したり、既存のページを管理したりすることができます。各ページには独自のSEO設定やカスタムコードを設定することができます。

レスポンシブデザインの確認

上部のデバイスアイコンをクリックすると、さまざまなデバイスサイズでのデザインをプレビューできます。この機能を使用して、レスポンシブデザインを最適化しましょう。

サイトの公開

全てのデザインと設定が完了したら、「Publish」ボタンをクリックしてサイトを公開します。また、サイトのURLをカスタマイズすることも可能です。

Webflowで作られたサイト

Webflowを使って作成されたウェブサイトは、そのビジュアル性とユニークなデザインで知られています。WebflowのShowcaseでは、世界中のクリエイターがWebflowで制作したウェブサイトを見ることができます。ぜひ、この中からインスピレーションを得て、自分だけのウェブサイトをデザインしてみてください。