レスポンシブWebサイトの構築ができるSaaSアプリケーション「Webflow（ウェブフロー）」について解説しています。
■フリープランを利用する
まずは「Webflow（https://webflow.com/）」のページにアクセスします。
アクセスすると、「Get started – it’s free」ボタンがありますので、こちらをクリックします。
クリックすると、「The most powerful web design tool awaits（最も強力なウェブデザインツールが待っています）」と書かれたウインドウが表示されますので、「Sign in with Google（Googleでサインイン）」ボタンをクリックします。今回はGoogleアカウントでのアカウント登録を行いますので、事前にGoogleアカウントを取得しておく必要があります。取得したアカウントでGoogleにログインします。
クリックすると、「ログイン – Googleアカウント」というページが表示されます。ページ内には取得したGoogleアカウントが表示されていますので、アカウントを選択します。
選択後、「We’ve got a couple quick questions（いくつか簡単な質問があります）」と表示されますので、「Let’s go」ボタンをクリックします。
クリックすると、「What best describes your role?（あなたの役割を最もよく表しているものは何ですか?）」と質問されますので、表示されている「Web designer（WEBデザイナー）」、「Product designer（プロダクトデザイナー）」、「Developer（デベロッパー）」、「Marketer（マーケター）」、「Entrepreneur（企業家）」、「Other（その他）」の中から該当するものを選択し、「Continue」ボタンをクリックします。今回は「Other」を選択しています。
クリックすると「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（自分自身）」の中から該当するものを選択し、「Continue」ボタンをクリックします。今回は「My business」を選択しています。
クリックすると「Do you have experience building websites?（ウェブサイトを作った経験はありますか?）」と質問されますので、表示されている「Never built（未構築）」、「Used website builders（使用済みWebサイトビルダー）」、「Some experience（ある経験）」、「Expert（エキスパート）」の中から該当するものを選択し、「Continue」ボタンをクリックします。今回は「Some experience」を選択しています。
クリックすると「What do you want to build today?（今日は何を作りたいですか?）」と質問されますので、表示されている「Business site（ビジネスサイト）」、「Ecommerce store（eコマースストア）」、「Portfolio（ポートフォリオ）」、「Blog（ブログ」、「Other（その他）」、「I’m just testing Webflow out（Webflowをテストしているだけです）」の中から該当するものを選択し、「Finish」ボタンをクリックします。今回は「Business site」を選択しています。
クリックすると「Create your first project（最初のプロジェクトを作成する）」と表示されますので、プロジェクトの作成を行います。今回は「Business Starter」というプロジェクトを選択します。
選択すると、「Welcome to Webflow」というポップアップが表示されます。「Let’s go」をクリックすると、Webflowの説明が表示されます。「☓」ボタンをクリックするとポップアップが閉じます。
説明を終了すると、レスポンシブWebサイトを構築するためのエディタ画面が表示されますので、構築を開始することができます。
コメント