初心者向け｜知っておきたい！Framer全体像

Framerとは、Webサイトのデザインから公開までを一貫して行えるWebサイト制作ツールです。

「デザインして、コーダーに渡して、サーバーを借りて、公開して……」という従来の制作フローを、Framerのみで完結させることができます。
コードを書く必要もなく、サーバーを別途契約する必要もありません。
感覚としては「Figmaでデザインしたものが、そのまま動くWebサイトになる」というイメージに近いかもしれません。

Framer Japan Community運営のゆうごさんはこう表現しています。

「頭の中にあるイメージやビジュアルを、パパッと思いついた瞬間に作って、実際に"絵"じゃなくて"動くもの"として作れる。それがFramerの一番好きなところです」

思考の速さでデザインできる。 この感覚を一度味わうと、他のツールには戻れなくなるという人が多いのも納得です👀

>>> Framerはこんな人に向いています

• デザインにこだわりたいクリエイター・デザイナー

• 素早くアイデアを形にしたい初心者

• デザインから実装・公開まで自分でやりきりたい人

「ノーコードツールはたくさんあるのに、なぜFramerが注目されているのか？」
その答えを、ビジネス視点とクリエイター視点に分けてみてみましょう。

◾️ビジネス視点から見たFramerの強み

まず大きいのは、制作のすべてがFramer上で完結する点です。デザイン・実装・公開・CMS更新・アクセス解析まで、ツールを切り替えることなく一気通貫で行えます。

アクセス解析はとくに便利で、「どこから流入してきたか」「PCかモバイルか」「リアルタイムで今サイトを見ている人数」といったデータが、何も設定しなくても見られます。Googleアナリティクスを別途入れなくても基本的な分析ができるのは、スピード重視の現場で重宝します。

また、デザイナー主導で制作が完結するというのも見逃せないポイントです。「デザインを作ってエンジニアに渡す」という工程が不要になるため、修正のたびにやりとりが発生する…という手間がなくなります。

◾️クリエイター視点から見たFramerの強み

クリエイター目線で見たとき、Framerの魅力はひとことで言うと「できないことが少ない」こと。

コーディングなしでインタラクティブなアニメーションが作れて、デザインの自由度は他のノーコードツールと比べて格段に高い。「これFramerでできるの？」と驚くようなサイトが、実際にFramerで作られていたりします。

何よりゆうごさんが強調していたのが、アップデートの多さです。

「本当に毎月、時には毎日アップデートがある。ユーザーを楽しませようとしているのが、SNSや公式YouTubeからひしひしと伝わってきます」

使い続けるほど出来ることが増えていく。そんな「伸びしろのあるツール」であることも、Framerが選ばれている理由のひとつです。

では具体的に、Framerで何ができるのかを見ていきましょう。

① UIと操作感はFigmaにそっくり

Framerを初めて開くと「あれ、Figmaみたい」と感じる人が多いはずです。それもそのはず、エディターのUIデザイン・ショートカットキー・コンポーネントの思想まで、Figmaに非常に近い設計になっています。

たとえばショートカットキーは、「F」でフレーム作成、「T」でテキスト追加など、ほぼFigmaと同じ。Figmaに「オートレイアウト」という機能がありますが、Framerでは「スタック」という名前で全くシステムが使えます。

「意外に難しそうに見えて、すごく簡単」とゆうごさんが言うように、エディターは左パネルと右パネルだけで完結するシンプルな設計。Figmaユーザーなら、触り始めて数時間で感覚をつかめると思います。

② スクロール・ホバー連動のアニメーション

「動きのあるサイトを作りたいけど、コードは書けない」
そういう方にとって、Framerのアニメーション機能は強力な武器になります。

スクロールに連動して要素が動くパララックス、ホバー時のインタラクション、クリックでコンテンツが切り替わるタブ…。これらがコードなしで実現できます。更に、画面遷移時のアニメーションや、無限に流れ続けるテキストのtickerなど、「これってコーディング必要じゃないの？」と思うような表現も純正機能でカバーされています。

後の事例紹介でいくつか実例を紹介しますが、「Framerでここまでできるのか」と驚くはずです。

③ CMS（スマホからも更新できる）

CMSとは、ブログや実績紹介など、繰り返し更新するコンテンツを管理・追加できる仕組みのこと。多くのノーコードツールにCMS機能はありますが、Framerのそれには他にはない特徴があります。
スマホアプリから更新できるのです。

「Framerで個人ブログを作っているんですけど、出先とか電車の中でふと書きたくなったとき、PCを開かずにスマホからパパッと書けるのがすごく好きです」（ゆうごさん）

クライアントへの納品後も「PCを開かないと更新できない」という制約がなくなるため、運用ハードルが大きく下がります。

また、CMSの表示速度も非常に速く、コンテンツが多くなっても快適に動作します。
さらに最近のアップデートで、CMSの記事本文の中に、あらかじめ作っておいたコンポーネントを差し込めるようになりました。たとえば記事内に料金プランの比較表を埋め込んだり、問い合わせフォームを差し込んだりといったことが可能に。「CMSでできること」の幅が、WordPressに近いレベルまで広がっています。

④ コンポーネント機能

ボタン・カード・セクションなど、繰り返し使うパーツを「コンポーネント」として登録しておくことができます。こちらも、Figmaのコンポーネントと同じ考え方です。

一度作ったコンポーネントを使い回すことで、デザインの一貫性を保ちながら効率的に制作できます。それにより、ページ数が多い大規模なサイトでも管理しやすくなります。

また、世界中のFramerユーザーが作ったコンポーネントを、「リミックス」という機能（⑦で詳しく紹介します）で取り込んで使うこともできます。

⑤ 無料・人数無制限の共同編集

Figmaの場合、複数人でリアルタイムに共同編集するには有料プランへの移行が必要になることがあります。Framerでは人数無制限・無料で共同編集が可能です。

リアルタイムで他のメンバーのカーソルも表示されるため、チームで同時に作業する感覚はFigmaとほぼ同じ。チームでの制作はもちろん、クライアントを招待してフィードバックをもらいながら進めるといった使い方もできます。

⑥ レスポンシブデザイン対応

「PCではいい感じなのに、スマホで見たら崩れていた…」なんて経験、ありますよね？

Framerでは画面サイズごとにレイアウトやデザインを個別に調整できます。
特徴的なのは、表示するテキスト量も画面サイズで出し分けられる点です。「PCではこの説明文を表示するけど、スマホでは省略する」といった細かい制御が可能で、モバイル体験にこだわった設計ができます。

⑦ リミックス（URLでデザインを共有・再利用する文化）

Framerには独自の「リミックス文化」があります。

自分が作ったデザインやコンポーネントをURLで共有 → 受け取った人がそのURLをFramerのキャンバスにペーストするだけで、デザインがそのまま自分のプロジェクトに展開されるという仕組み。

「カルーセルの作り方がわからない」「こんなアニメーション実装したいけど難しい…」というとき、XなどのSNSで検索するとFramerユーザーが作ったコンポーネントがたくさん見つかります。海外では、オリジナルコンポーネントを販売してマーケットプレイスで収益を得るクリエイターもいます。

「勉強にもなるし、自分が作れないものは誰かのを借りればいい。Framerはその文化が根付いているんです」（ゆうごさん）

⑧ プラグインによる機能拡張

Figmaと同様、Framerにもプラグイン機能があります。誰でも開発・公開でき、マーケットプレイスでの販売も可能です。

活用例としては、AIによるパーツの自動生成、ECサイト機能の追加、NotionをCMSとして連携させるプラグインなどがあります。「純正機能でできないことをプラグインで補う」という使い方で、Framerの可能性をさらに広げることができます。

改めて、Figmaユーザーへ向けた情報になりますが…。
Framerは「Figmaでできることの上位互換」ではありませんが、Figmaユーザーが入門する際のハードルは非常に低いです。UIが似ているだけでなく、設計思想レベルで共通点が多いため、「どこで何ができるか」を探すストレスが少ない。
ゆうごさん自身も、今では仕事の多くをFramerで完結させているそうです。

「慣れてくると、最初からFramerで作る方が早い。ファーストビューだけFigmaでバリエーションを検討して、そこから下のセクションはFramerで直接組んでいく…というワークフローが自分には合っています」

「Figmaで作ってエンジニアに渡す」という工程が不要になることで、デザイナーとして仕事の幅が広がるのは、ゆうごさん自身が実感していることでもあります。

実際にFramerで作られた国内サイトを見てみると、「ノーコードでここまでできるのか」と驚いてしまいます👀
セミナーでゆうごさんが紹介してくれたサイトに共通していたのは、「動き」へのこだわりでした。

• スクロールに連動したパララックスアニメーション

• ホバー時にカーソルの形が変わるインタラクション

• ページ遷移時の滑らかなアニメーション

• 左右のコンテンツが連動して切り替わるUI

• 無限に流れ続けるtickerテキスト

• カウントアップアニメーション

• 日本語・英語の言語切り替え

• カスタムフォントの使用

また、CMSを活用したイラスト素材のダウンロードサイトも紹介されていました。 一覧表示・タグ絞り込み・ダウンロードボタン設置まで、Framerだけで実装されているとのこと。「素材配布サイトもFramerで作れるのか」と驚いた方も多かったのではないでしょうか。

Framerで作られた日本語サイトのギャラリーコレクションをゆうごさんが公開しているので、ぜひ参考にしてみてください。

「触ってみたいけど、どこから始めればいいかわからない」という方のために、おすすめの方法を3つ紹介します！

① Chrome拡張機能でUIを日本語化する

Framerのエディターは基本英語ですが、Framer社の日本人社員の方が個人で開発したChrome拡張機能を使うことで、UIをそのまま日本語表示にできます。

英語が苦手な方はまずこの機能を入れましょう！ 「どこに何があるか」がぐっとわかりやすくなります。

② Framer公式noteを読んでみる

Framer日本担当の方が更新している公式noteには、初心者向けの基礎解説から、アニメーション・CMSの使い方、最新アップデート情報、英語記事の日本語訳まで幅広くカバーされています。
体系的に学びたい方は、まずここから読み進めるのがおすすめです！

③ Framer日本コミュニティ（Slack）に参加する

Framer公認の Framer日本コミュニティ に参加するのもおすすめ。主にSlackで活動しており、700名以上が参加する国内最大級のFramerコミュニティです。

>>> 主なコンテンツ
・定期的なオンライン勉強会・交流会（木曜21時ごろ不定期開催）
・質問チャンネル（わからないことを気軽に聞ける）
・仕事依頼チャンネル（フリーランスの方にも）
・過去の勉強会アーカイブ視聴

独学に行き詰まったとき、使い方を相談できる場所があるのは大きな安心感につながります。
フリーランスの方が多く参加しているため、仕事につながる縁が生まれることもあるようですよ👀

「思考の速さでデザインできる」── ゆうごさんがFramerを語るとき、繰り返し使われていた言葉です。 頭に浮かんだビジュアルを、「実際に動くもの」としてすぐ形にできる。コーディングの知識がなくても、デザインから公開まで自分でやりきれる。そういった体験の積み重ねが、案件の幅を広げ、制作の楽しさを変えていくはずです。
まずは無料で使い始められるので、気になった方はぜひ一度触ってみてください！