この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Webサイト及びプロトタイピング用のインタラクティブなデザインツールである「Framer」は、マーケティングサイトやランディングページ、オンラインキャンペーンサイトの構築に非常に便利です。ビジュアルモックアップからインタラクティブなプロトタイプまで、デザインプロセスのあらゆる部分をサポートします。
Framerでは、この特色を生かしたデモ動画が「App Tour」として公開されています。当エントリではその動画を参考に、実際の環境で試してみた手順を紹介していきたいと思います。
「Framer App Tour」実践
まず初めに、Framerの画面デザインをダークモードに切り替えておこうと思います。Framerにログイン後、画面左上のユーザーアイコン傍のメニューから[Day Mode/Night Mode]を指定する事で切り替えが可能となっています。
トップページに表示されている[Get Started]配下に学習用のコンテンツが配置されています。その中にある[App Tour]を選択。
無地のキャンバスが表示され、画面下部の再生ボタンを選択。するとYouTube動画が流れ出します。
その動画がこちら。以降の手順はこの動画に従って進めていきます。
画面左上Framerアイコンメニューから[File]→[New]を選択。
テンプレート選択画面に遷移。ここから任意のテンプレートを選びます。ここはデモ動画と同じ[SaaS]を選択。
選択した内容は別途プロジェクトとして作成されます。画面上部に名称設定部分があるので、個別にリネームし直します。
テンプレートそのままの内容で良ければ、もうこの時点で公開(Publish)可能です。試しに画面左上の[Publish]ボタンを押してみましょう。
ものの数秒もしないうちに以下のような形で、Framer管理下のサイトに情報が公開されました。あっけなさ過ぎるくらいあっさり出来てしまいました。
公開後のサイト設定ではドメイン周りの設定等色々行えるようです。
指定されている公開ページのURLにアクセスしてみます。こちらも問題無く外部にサイトが公開されていますね。すごい。
コンテンツは複製も非常に簡単に行えます。コンテンツメニューから[Dublicate]を行うだけ。
複製したコンテンツを実際に編集してみましょう。任意のオブジェクトを選択すると以下のように設定パネルが諸々表示されます。ノーコード・コードレスで思い描きたい内容に要素の編集・作成が可能になっています。ここはシンプルに文字色を変えてみています。
要素の切り貼りや移動も特に意識せず行えます。
作業内容を保存後、[Publish]を再度実行。先程公開した内容を再度確認してみると変更も反映されている事を確認出来ました。
コンテンツはパブリッシュする前に[プレビュー]で内容を確認する事が出来ます。編集エリア上に再生ボタンが表示されているのでそれを押下すると、
指定の内容・レイアウト・設定でのプレビュー内容を表示してくれます。
まとめ
という訳で、Framerの操作感が分かるデモコンテンツ「App Tour」の実践内容の紹介でした。
コンテンツ自体は非常に短い内容でありましたが、Framerの手軽さ、簡単さが分かる内容でもありました。
幸い学習コンテンツは豊富にありますので、時間を見て実際にインプットしていこうと思います。