プロトタイピング作成ツール「Framer」を利用する

プロトタイピング作成ツール「Framer」について解説しています。

■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にボタンなどを配置し、デザインしていきます。