■Free（フリー・無料）プランを利用する

まずは「Framer: A Free Prototyping Tool for Teams（https://www.framer.com/）」にアクセスします。

アクセスすると、「Sign up for free」ボタンがありますので、こちらをクリックします。

クリックすると、「Framer Login」ページが表示されます。「Create Account（アカウントを作成する）」と書かれていますので、アカウントを作成しますが、アカウント作成にはGoogleアカウントで作成するか、Emailを利用してアカウントを作成するかの2つあります。今回はGoogleアカウントで作成しますので、「Sign up with Google」ボタンをクリックします。クリックする前に、Googleアカウントを取得し、Googleにログインしておく必要があります。

クリックすると、「ログイン – Googleアカウント」のページが表示されますので、取得したGoogleアカウントを選択します。

選択すると、「Framer Login」ページに戻ります。「Firstname」、「Lostname」を確認し、メールアドレスが表示されていますので、Googleアカウントを取得する際に使用したメールアドレスかを確認します。確認後、「What kind of work do you do?（あなたはどんな仕事をしていますか？）」をクリックし、メニューの中から該当する回答を選択します。今回は「Other」を選択しています。

選択後、利用規約（https://www.framer.com/support/accounts/terms-of-service/）とプライバシーポリシー（https://www.framer.com/support/accounts/privacy-policy/）をGoogle翻訳などで翻訳し確認します。確認後、「I agree to the Terms of Service and Privacy Policy（利用規約とプライバシーポリシーに同意します）」のチェックボックスをチェックを入れます。

チェックを入れた後に「Send me prototyping tips via email. Unsubscribe any time（メールでプロトタイピングのヒントを送ってください。）」にチェックを入れるか、外すかを選択し、最後に「Finish」ボタンをクリックします。

クリックすると、「Welcome to Framer」というポップアップが表示されます。「Start Tutorial（チュートリアルを開始）」か、「Dismiss（退出）」のいずれかを選択します。「Start Tutorial（チュートリアルを開始）」ボタンをクリックすると、Framerのチュートリアルが確認できます。

これでアカウントの作成は完了となります。

■新しいプロジェクト（ドラフト）を作成する

完了後、新しいプロジェクト（ドラフト）を作成するために、「Recent」の項目にある「＋New」ボタンをクリックします。

クリックすると、「Create Project」というポップアップが表示されますので、「Drafts」が選択されているかを確認し、「Create」ボタンをクリックします。

クリックすると、「Start with a Frame」と表示されたウインドウが表示されますので、今回は「Desktop」をクリックします。

クリックすると、Device（デバイス）が「iMac」のFrameが作成されます。作成後、Frameにボタンなどを配置し、デザインしていきます。

■フリープランを利用する

まずは「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サイトを構築するためのエディタ画面が表示されますので、構築を開始することができます。