Cozies編集部
「ウェブサイトを制作したいけれど、プログラミングの経験がない」「素人感のある簡素なウェブサイトを卒業したいけれど、知識と技術を磨く時間がない」といった悩みを抱えている方はいるのではないでしょうか。
ウェブサイト制作の経験が無い方、凝ったウェブサイトにしたくても時間をかけられない方には、Framerというノーコードツールがおすすめです。プログラミングの経験や知識がなくても、スタイリッシュなウェブサイトを簡単に制作できます。
この記事では、ウェブサイト作成ツールであるFramerの9つの特徴やメリット、他ツールとの比較や料金プラン、使い方を解説します。
目次
画像引用元：https://www.framer.com/
FramerはUIデザインツールやプロトタイピングツールとして知られています。UIデザインツールとは、ウェブサイトやアプリの画面を操作・デザインするためのツールのことです。
プロトタイピングツールとは、ウェブサイトやアプリケーションソフトの試作品（プロトタイプ）を作成するためのソフトウェアのことです。操作画面上での使い勝手や操作の流れを確認し、ユーザー視点で開発することができます。
この記事で解説するのは、Framerのうち、Framer Sitesというウェブサイトの作成・公開機能をもつツールです。Framer Sitesはノーコードでウェブサイトを制作・公開できるため、手軽にスタイリッシュなウェブサイトを作成することが可能です。
Framerの特筆すべき点は、その背景にもあります。FramerはFacebookの元デザイナーによって創業された会社で、海外では高い評価を得ており、UIデザインやプロトタイピングの分野で一目置かれる存在となっています。Framer Sitesもその一環として、多くのユーザーに支持されています。
Framerはノーコードツールですが、そもそもノーコードとは何なのかを紹介します。
ノーコードとは、裏回りの難しいソースコードを書かずに、直感的に操作を進めることができる技術です。これにより、頭の中にあるアイディアを簡単に形にすることが可能です。ウェブサイトの実装に詳しくない人でも運用を手軽に行えるため、チーム単位でウェブサイトを制作・運用する際も効率よく進められます。
ノーコードの最大のメリットは、IT人材不足の世の中においても、デジタル分野を盛り上げることができる点です。コードを用いて開発するには、IT人材の確保や育成が必要です。しかし、ノーコードであれば、IT人材が不足していてもウェブサイトを運営できます。そのため、今までウェブコンテンツに手を出していなかった会社も、初期投資を抑えながら効率的に新境地を開拓できます。
これまでの説明で、「Framerならプログラミングに詳しくなくてもウェブ周りを操作できる」ということがお分かりいただけたのではないでしょうか。
とはいえ、ウェブサイト制作と一口に言っても何ができるか実感がわかないという方も多いかと思います。そんな方向けに、ここではFramerの特徴的な機能を9つ紹介します。
画像引用元：https://www.framer.com/features/design-layout/
Framerでレイアウトやデザインを作成する際は、「この部分を〇〇のようなデザインにしたい場合は、〇〇のようなソースコードを書いて...」といった複雑な作業は必要ありません。ドラッグ＆ドロップといった直感的な操作で実現できます。
リアルタイムで変更を確認しながら効率よく進められる点もポイントです。
画像引用元：https://www.framer.com/features/cms/
直感的な操作性は、ウェブサイトの作成時だけでなく、コンテンツを管理する際にも重宝します。さらに、コンテンツ管理システム（CMS: Content Management System）を使えばテキストや画像、動画もスムーズに編集・管理できるため、簡単にウェブサイト全体の構造やデザインを統一できます。
画像引用元：https://www.framer.com/features/forms/
フォームの制作も簡単に行えます。ビジネスやコンテンツの種類によっては、「お問い合わせ」「資料請求」「購入」などのフォームをウェブサイトに設置したい場合もあるでしょう。
Framerでは、あらかじめ用意されたフォームテンプレートを使用することで、必要なフォームを迅速に作成できます。
画像引用元：https://www.framer.com/features/seo-performance/
サイトの作成で手一杯という人にも嬉しい、SEO対策も充実しています。
例えばページにタイトルや、ページの説明を入力すると、Framerが検索エンジンの最適化を処理し、検索結果に表示される情報を簡単に追加・管理出来ます。また、ウェブサイトを訪問した人や検索エンジンに、そのWebサイトにどのようなページが存在するかを伝えるためのページやファイルの作成をサポートしてくれます。これにより、検索順位の向上が期待できるでしょう。
SEO対策について詳しく知りたい方は、「SEOとは？今日からできる対策と基本となる考え方」をご覧ください。
画像引用元：https://www.framer.com/features/site-management/
Framerでは、サイト履歴が自動的に保存されます。これにより、万が一、誤って変更したものを公開してしまっても、過去のバージョンに簡単に戻すことができます。そのため、安心して編集を行えます。
保存する動作を挟む必要がないため、手間が減り、開発にも集中できるでしょう。
画像引用元：https://www.framer.com/features/localization/
Framerは、テキストや画像のローカライズ機能も提供しています。つまり、利用者が母国語しか使えない場合でも、多言語対応のウェブサイトを簡単に作成できるのです。これはテキストだけでなく、画像にも同様の働きをしてくれます。
地域ごとに最適なコンテンツを提供できる状態にしてくれるため、さまざまな地域を視野に入れてビジネスを展開することが可能です。
画像引用元：https://www.framer.com/features/ai/
AI技術を活用して、複雑な機能も効率的に追加できます。
例えば、文章をより良いものにすることができます。ウェブサイトの雰囲気や、コンテキスト、無視する単語などを設定します。あとはAIが、それらの指示に従って文章を書き換えます。
画像引用元：YouTube：Framer Update: New Effects
Framerでは、アニメーションやエフェクトのデザインも簡単に行えます。
視覚的に魅力的なウェブサイトを作成するためのツールが豊富に揃っており、ユーザーの注目を引くウェブサイトを構築できます。こういったやや複雑で動きのある設定は、ユーザーにとってだけではなく、開発者にとっても楽しい要素になるのではないでしょうか。
画像引用元：https://www.framer.com/features/navigation/
Framerでは、リンク設定をスムーズに行えるため、サイト導線を簡単に設計できます。
サイト導線とは、サイト内でユーザーに動いてほしい順序やルートのことです。リンクを活用してサイト導線を設計することで、ユーザーにとって使いやすいナビゲーションを提供することができます。場合によって、検索エンジンからの評価ポイントとなりえます。
ここまで、Framerで実現できる9つのことを解説しました。
ここからは、ノーコードツールでFramerをおすすめする理由として、Framerを使うことでユーザーにもたらされるメリットを解説します。
FramerのAI機能を活用することで、ウェブサイトのUX（ユーザーエクスペリエンス）を大幅に向上させることができます。UXとは、ユーザーがサイトを利用する際の体験を指します。使いやすさやデザイン性、コンテンツの内容などが主な要素です。
例えばFramerのAI翻訳機能を利用することで、ページを多言語に対応させることができます。日本国内だけでなく海外のユーザーも視野に入れたビジネス展開を計画している企業にとっては、嬉しい機能と言えるでしょう。
さらに、テキストやスタイル、レイアウトといった、気づきにくい・調整しにくい要素もAIが自動で最適化してくれるため、ユーザーの満足度が高くなる、見やすく使いやすいサイトが簡単に作成できます。AIの介入により、これらの最適化作業が自動化されるため、時間を大幅に節約することができます。
UXの向上は、ウェブコンテンツで成果を出したい方にとっては重要です。ユーザーにとって使いやすいサイトは、検索エンジンの評価も高くなるため、検索順位が上がることが期待できます。FramerのAI機能を活用することで、効率的に高品質なウェブサイトを構築し、ビジネスの成長をサポートすることができるのです。
Framerは、レイアウトやデザイン性の高さでも評価されています。
その一つの理由は、レスポンシブデザインに対応している点です。レスポンシブデザインとは、デバイスの画面サイズに依存せず、あらゆるデバイスで最適に表示されるウェブサイトを構築する手法です。現代では、ユーザーがスマホ、パソコン、タブレットなど複数のデバイスを使い分けることが珍しくないため、あらゆるデバイスに対応することは、UX向上と検索エンジンからの高評価を目指す場合は重要になります。
また、豊富なテンプレートやアニメーション機能も充実しており、簡単にスタイリッシュなデザインを作成できます。高度なデザインができあがっていく過程を自らの手で体験できることも魅力の1つと言えます。
このように、Framerを活用することで、見た目が美しく、使い勝手の良いウェブサイトを効率的に構築でき、UXの向上に大きく貢献します。
画像引用元：https://www.figma.com/ja-jp/
Framerでは、デザインツールのFigmaで作成したデザインを、そのままウェブサイトとして完成させることができます。具体的には、Figmaでデザインを作成した後、Framerにインポートするだけでウェブサイトが構築できるのです。インポートをしたあとは、publishボタンを押すだけで公開が可能です。
これには、Figmaプラグインをインストールする必要がありますが、一度インストールしてしまえば、Figmaで作成したデザインを簡単かつ素早くウェブサイトに公開できます。これにより、デザインと公開のプロセスがスムーズに進み、プロジェクトの効率化が図れます。
このように、機能も充実していて使いやすいFramerですが、検討する際に知っておきたい懸念事項もあります。
Framerは新しいサービスであるため、公式・非公式ともに解説やFAQがまだ少ない状態にあります。そのため、利用していて知りたいこと、分からないことがある場合でも、解決方法が分からず、つまずいてしまう可能性も否めません。
ただ、企業・サービスともに勢いがあるので、今後もユーザーが増えて、解説やリファレンスなどが充実することは期待できます。
また、現在でも利用者コミュニティは活発であり、そのコミュニティに積極的に参加すれば、疑問点やトラブルも自力で解決できるかもしれません。
先述した通り、Framerは海外のツールであるため、日本語設定で利用することはできません。公式が公開しているチュートリアルも、スピードはかなりゆっくりですが、すべて英語です。そのため、英語が苦手という方は苦労する可能性があります。
とはいえ、Framerはブラウザで使用できるツールであるため、ブラウザの拡張機能で翻訳しながら使用すれば、英語が苦手でもチュートリアルを利用できます。
ここまでFramerの特徴について解説してきましたが、中には他ツールとの比較で悩んでいる方もいるかと思います。実際、ノーコードツールは、Framer以外にもwebfolowやSTUDIOなどが存在します。
この章では、Framerの利用を検討しやすいように代表的な他ツール2つを紹介しながら比較します。
画像引用元：https://webflow.com/
まず1つ目はWebflowです。世界中で多く使われているノーコードツールで、Framer同様日本語対応はしていません（英語のみ対応）。
Webflowはノーコードツールではあるものの、htmlやcssなど、コード編集をしている感覚で作業する形になります。そのため、プログラミング経験者の方などは使いやすいかと思います。
Webflowの特徴は、機能が豊富なことです。そのため、使いこなせればプロ級の高度なウェブサイトを完成させられますが、ウェブ周りに詳しくなければ、ツールを使いこなすまで時間がかかる可能性があります。
加えて、その豊富な機能を使いこなすには高額な料金プランを契約する必要があります。Framer同様、ウェブサイトとは別にワークスペースにも料金が発生するため、安くツールを利用したい方には向かないかもしれません。
また、Framerではできる共同作業も、Webflowではできません。
画像引用元：https://studio.design/ja
2つ目のツールは、日本のサービスであるSTUDIOです。日本語で展開しているサービスのため、使いやすさや学習ハードルの低さが利点です。
特徴は、画面がスッキリしていて操作しやすいこと、テンプレートが豊富なことです。初心者にとって優しいツールと言えます。一方、複雑なアニメーションの実装など難易度の高いことをしたい場合には、込み入った作業が必要になります。そのため、凝ったウェブサイトを簡単につくることは難しいでしょう。
料金は、これまで紹介した2つのツールと比較して安価なプランとなっています。また、ワークスペース料金を支払う必要もありません。
Framerの利用を本格的に検討している方は、かかる費用も気になるかと思います。
Framerには、サイト運用のための料金とは別に、ワークスペース料金という、チームの参加人数単位でかかるものの2つに費用を支払うことになります。
幅広い料金プランが用意されているので、どのようなレベルや用途をもつ人にも利用をおすすめできます。
▼サイトの料金プラン
▼ワークスペースの料金プラン
※24年07月時点の情報です。詳しくは公式サイト（Framer「Start for free and upgrade to unlock more features.」）の情報もご確認ください。
ここまで、Framerというツールそのものの説明をしてきました。この章では、実際にFramerを使ってみたい、どのような操作でサイトを作成するのか気になる方に向けて、具体的な使用感をもってもらうために、サイトを作成する過程を説明します。
なお、今回はサイト作成にクローズアップした実際の事例を紹介します。
まずFramerのサイトにアクセスし、右上の「Start for free」という青地に白色で書かれたボタンをクリックしてアカウントを作成します。すでにアカウントをお持ちの場合は、左の「Login」からログインします。
画像引用元：https://www.framer.com/
ログインすると以下のような画面になります。これがサイトのデザインやレイアウトなどを作成できるページです。
赤枠で囲った部分を押すと、コンテンツを管理するCMS編集画面へと移動します。
下記画像がCMS編集画面です。新しくページを作成したい場合は、左上の「New Item」（赤枠で囲っている部分）をクリックします。
続いて、以下のような画面に移ります。
右側に、新規作成したいページの編集画面があるので、タイトルや本文など必要事項を入力していきます。
標準テキスト、h2、h3などテキストの種類を変更したいときは、該当箇所をドラッグして、下記画像赤枠で指定します。h2であれば「Heading2」、標準であれば「Paragraph」を選択します。
画像を挿入したい場合は、赤枠の「Upload media」という部分をクリックして、自身のファイルから該当画像を選択します。「Resolution」は解像度、「Alt text」は記事タイトルを指します。
記事の必要事項を入力し終わり、問題がなければ「Publish」を押して公開します。Savedが表示されているように、Framerでは自動で履歴が保存されているので、手動で保存する必要はありません。
ウェブサイトを実際に訪問し、「Publish」を押して反映されたページを確認してみましょう。
Framerはノーコードのウェブサイト制作ツールです。プログラミングの知識がなくても、直感的な操作で簡単にウェブサイトを作成できるため、初心者にも優しいツールと言えます。また、SEO対策機能が備わっているため、検索エンジンでの評価を向上させることも可能です。
操作に慣れれば、コードを書かずにウェブサイトを制作できるので、初期コストを抑えてまずは試してみたいという方にも最適です。デザインと機能を両立させたウェブサイトを効率的に作成できるFramerを、ぜひ試してみてください。
Framerは、ノーコードのウェブサイト制作ツールです。プログラミングの知識がなくても、直感的な操作で簡単にウェブサイトを作成できます。
ウェブ周りの初心者でもサイト運用に関わることができるため、効率的にウェブサイトを作成できます。
Framerの特徴は、Figmaとの連携にあります。Figmaでサイトのデザインさえできていれば、それをFramerで簡単に形にすることができます。両者は操作性も似ているため、Figmaとの併用はおすすめです。
そのほかにも、AI機能によるウェブサイトの最適化や、クオリティの高いデザインやレイアウトが使用可能です。
