プロトタイピング作成ツール「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にボタンなどを配置し、デザインしていきます。

コメント

タイトルとURLをコピーしました