「Webサイトを制作してみたいけど、プログラミングの知識がないから難しい」「もっと質の高いWebサイトを作成したいけど、サイト制作にかける時間がない」
このようなお悩みをお持ちの方も多いのではないでしょうか。一般的に高いプログラミング知識が必要というイメージが強いWebサイト制作ですが、近年はノーコードでWebサイトを作成できるツールも多く登場しています。
その代表例として挙げられるのが、Framerです。Framerはデザインの自由度が高く、プログラミングの知識がなくても質の高いWebサイトの作成が可能となります。
当記事では、Framerの特徴やメリット・デメリットを詳しく解説します。
すはらめちゃくちゃ便利なんですけど・・・
そもそもFramerって？
まず、Framerはどんなツールなのか詳しく解説します。Framer(フレーマー)とは、プログラミングの知識がなくても、デザイン性の高いWebサイトを作成できるノーコードのWebサイト制作ツールです。
当初はプロトタイピングツールとして開発されましたが、現在はWebサイト制作も可能なツールに進化しました。
ノーコードで直感的な操作でWebサイトのデザインを作成できるのが、Framerの最大の強みです。ドラッグ＆ドロップで要素を配置し、レイアウトを簡単に変更できます。
また、アニメーションやインタラクションも手軽に追加できるため、Framerを用いることで、プログラミング知識がなくても訪問者を引きつける質の高いWebサイトを作成可能です。
Framerを利用する5つのメリット
ノーコードのWeb制作ツールとして注目されるFramerですが、利用するにあたってどのようなメリットがあるのでしょうか。
ここではFramerを利用する5つのメリットをご紹介します。
ノーコードで質の高いWebサイトが作れる
これまでご紹介してきたように、Framerはノーコードツールのため、HTMLやCSS、JavaScriptの知識がなくてもWebサイトを作成できます。
従来必要だったデザインとコーディングのスキルも必要なく、直感的にWebサイトを作成可能です。
直感的な操作で自由度の高いデザインを作成できる
Framerはドラッグ＆ドロップ操作で要素を追加・編集ができるため、プログラミング知識がない方でも自由度の高いデザインが可能です。
そのため、自身のWebサイトはデザイン重視したいという方にFramerはおすすめです。
操作パネルは極直感的
画像の様な操作パネルになっており、
・左側が各固定ページや、ツリー構造で階層が確認できる
・右側で各セクション・パーツの詳細な編集が可能
といった大まかな説明になります。
Figmaユーザーに朗報！
これは個人的な見解ですが、操作した感じはFigmaに非常に似ている、と感じました。
例えば、スペースキーで、ドラッグしたりとか、altキーでコピーしたりとか、何かと非常に似ています。
そして、制作者にとって、非常にうれしいのが、プラグインが用意されていて、FigmaのデザインをそのままFramerへ落とし込めるプラグインが用意されているので、デザイナーだって制作ができてしまう！
アニメーションやインタラクションを簡単に追加できる
従来はアニメーションやインタラクションを追加するには、JavaScriptやCSSなどに関する知識を身に付ける必要がありましたが、Framerを用いればこれらを簡単にWebサイトに追加することができます。
スクロール時に要素がフェードインする動きや、ボタンのホバーエフェクトなどもクリック操作だけで追加できるため、Webサイトに動きをつけたい際もFramerは大いに役立ちます。
すでに画像の様に
・ホバー
・ループ
・ドラッグアンドドロップ
・スクロールアニメーション
・スクロールトランスフォーム
などが用意されていて、コード無しでリアルなアニメーションが実装可能！
豊富なテンプレートを利用できる
ノーコードの直感的な操作によるWebサイトの作成だけでなく、豊富なテンプレートを利用できるのもFramerのメリットです。
洗練されたデザイン性の高いテンプレートが多く用意されているため、初心者でも質の高いWebサイトを作成することが可能です。
SEO対策がしやすい
FramerにはSEO対策機能が搭載されているため、SEO対策がしやすいこともメリットの一つです。
独自ドメインの設定やGoogle Analyticsなどのツールとの連携によるアクセス解析も簡単に行うことができ、検索上位に表示されるよう自身のWebサイトを最適化できます。
Framerを利用する3つのデメリット
プログラミング知識がなくても、質の高いWebサイトを作成できる点が大きな魅力できるFramerですが、利用するにあたってはいくつかのデメリットもあります。
ここでは、Framerを利用する際に気をつけたい3つのデメリットをご紹介します。
日本語対応が不十分
FramerはFacbookの元メンバーが開発したアムステルダム発のツールです。開発されてからまだ日が浅いこともあり、チュートリアルやマニュアルのほとんどが日本語未対応となっています。
そのため、英語が苦手な方はFramerの操作を理解するのに時間がかかってしまうことでしょう。
サポートが充実していない
Framerは日本語対応が不十分であるため、何かトラブルが発生した際のサポートも充実していません。公式からのFAQや解説などもまだ少ないため、トラブルは自力で解決するしかないことも珍しくありません。
その一方、近年利用者が増加しているツールのためコミュニティの動きが活発であり、このコミュニティに所属することで、思わぬトラブルの解決につながる可能性も高いです。
最近では、AIツールも進化しているので、翻訳で対応するのもおススメです！
無料プランに制限がある
Framerには無料プランが用意されていますが、
・無料プランでは独自ドメインが使用できない
・公開できるページ数に制限があるなどのデメリットがあります。
そのため、本格的にWebサイトを運用する場合は、有料プランへの移行が必要となる点にも注意が必要です。
ですが、無料ですごいノーコードツールが自分のサイトとして公開できる、っていうのも凄いですがね・・・
まとめ
当記事では、ノーコードのWebサイト制作ツールとして注目を集めるFramerに関して、メリット・デメリットも含めて解説しました。
Framerは開発されてまだ日が浅い海外発のツールであるため、日本語対応やサポートの不足などのデメリットはあるものの、プログラミング知識がない方でも、アニメーションやインタラクションを追加したWebサイトを作成できるのは非常に魅力的ですね。
そのため、制作経験がなくでも自分で満足のいくWebサイトを作ってみたい！という方はぜひFramerを活用してみてください。
