Webflowとは？ノーコードツールでサイト制作しよう！使い方を解説

まずはWebflowの公式ホームページを開きます。

＞＞Webflow公式ホームページ

画面右上部分にある「Get started-it’s free」というボタンをクリックすると、無料で会員登録ができます。

Eメールアドレスで登録したいときには「Sign up with email」、Googleアカウントで登録したいときは「Sign up with Google」で登録しましょう。

簡単な質問事項が続くので、答えましょう。

日本語訳を添えてご紹介します。

質問の前にユーザー名を聞かれるので入力しましょう。

How should we greet you?：何とお呼びすればいいですか？

⇒ユーサー名を入力してください。

▼質問事項１

What best describes your role?：あなたに一番近い職業はなんですか？

・Web designer ：ウェブデザイナー

・Product designer ：商品デザイナー

・Developer：デベロッパー

・Marketer：マーケター

・Entrepreneur：起業家/個人事業主

・Other：その他

自分自身がウェブサイト立ち上げに関わる職種についているなら答えましょう。

特にウェブ制作に関わりのない一個人が趣味で制作するなら、「Other(その他)」で問題ないです。

ノーコード事業でお客様のためにサイト制作をするなら、「Entrepreneur：起業家/個人事業主」や「Web designer(ウェブデザイナー)」が当てはまるでしょう。

▼質問事項２

Who will you be building websites for?：誰のためにウェブサイトを作りますか？

・Clients, as a freelancer：フリーランスとしてお客様のために

・Clients, as part of an agency：会社の職員としてお客様のために

・The company I work for：自分の勤めている会社のために

・My business：自分の企業のために

・Myself：個人利用

ウェブサイトをWebflowで制作する理由になります。

企業の一社員として他社のために制作するなら「Clients, as part of an agency（会社の職員としてお客様のために）」一方で、自分自身が勤めている会社でウェブサイトが必要になり制作するなら、「The company I work for（自分の勤めている会社のために）」となるでしょう。

個人事業主が自分の企業用のサイトを制作するなら「My business（自分の企業のために）」ですが、お客様のためにサイトを作るなら「Clients, as a freelancer（フリーランスとしてお客様のために）」が当てはまります。

一方で趣味のためや、Webflowを試しに使ってみたいというだけなら「Myself（個人利用）」で問題ありません。

▼質問事項３

How comfortable are you with HTML and CSS?：HTMLとCSSにどの程度慣れていますか？

・I’m unfamiliar with HTML/CSS：HTMLとCSSに慣れていない

・I’m familiar with HTML/CSS, but I’ve never coded ：HTMLとCSSに慣れてはいるが、コーディングはしたことない

・I’ve coded part of a website：webサイトの一部だけコーディング経験がある

・I’ve coded a full website ：webサイトを全パート コーディングした経験がある

サイト制作の経験をに対する質問です。

自分のサイト制作の経験に合わせて答えていきましょう。

▼質問事項4

What do you want to build today?：今回はどんなサイトを制作したいですか？

・Business site：ビジネスサイト

・Ecommerce store：ECサイト(ショッピングサイト)

・Portfolio：ポートフォリオ

・Blog ：ブログ

・Other：その他

・I’m just testing Webflow out：Webflowでテストをしたいだけ

どんなサイトを作るかの質問です。

作ろうとしているサイトについて答えていきましょう。

これらの質問事項がこの後の使い勝手に関わることはなさそうですが、簡単な質問なので答えておいて損はありません。

とはいえ、考えすぎる必要もないので、当てはまると思うものをクリックしサクッと先に進みましょう。

早速ウェブサイトの開発画面に進みます。

左上部分にポップアップのようなチュートリアルが始まるので、指示通りに進めていけばだいたいの動作がわかります。

チュートリアルも英語での解説にはなりますが、理解できなくても感覚で理解できるような簡単な作りになっています。

指示通りにドラッグ&ドロップなどをして、操作確認をしていきます。

左側のツールバーはHTMLのようなサイト構造の基礎を、右側のツールバーはCSSのようなデザインの色や大きさを決める役割になっています。

コーディングをする場合は自分の手で一つひとつ記載しなくてはいけない作業が、ボタンや数字の記入だけで簡単に完了します。

コーディング経験者にも、数値などの感覚を掴む勉強になるかもしれません。

登録は完了しているので、さっそく新しいページを作っていきましょう。

ワークスペース画面中央の「+New Site」ボタンを押して、スタートです！

テンプレートを選び編集をおこなっていきます。

ショーケース画面から、「Cloneable」を選択すると、他のWebflow利用者が制作したサイトをコピーして使用することができます。