はじめにノーコード制作ツールは、コーディングの知識がなくてもウェブサイトやアプリケーションを簡単に作成できるツールです。従来のプログラミングに比べて、より直感的で使いやすく、スピーディーに作業を進めることができます。ノーコードのweb制作ツールはたくさんありますが、今回はその中でもSTUDIO、Webflow、Framerの3ツールを使って、実際に同じ様相のWebサイトを3つ作成し、PageSpeed Insights(https://pagespeed.web)でページスピードを計測しました。また、それぞれのツールの特徴や、実際に触ってみた感想についてまとめました！作成したサイトについてはWordPressのテンプレート(https://themeforest.net/item/business-chat-live-chat-theme-for-businesses)を使用しましたので、WordPressも合わせて比較検証していきます！※当社が独自に比較検証を行った結果を基にしていますが、記載内容には更新が必要な情報が含まれる可能性があります。ご了承ください。3サービスの実際のサイトと検証結果実装条件今回の検証では、以下のルールで3つのサイトを制作しました。TOPページのみの実装各サービスの無料ドメインを使用レスポンシブはPC、スマホ版のみ再現結果ツール名公開サイトスマホ版パフォーマンス点数PC版パフォーマンス点数STUDIOhttps://yurulica-test2024-studio.studio.site3886Webflowhttps://pagespeedjian-zheng.webflow.io8298Framerhttps://ancient-signposts-774602.framer.app8094WordPresshttps://yurulicatest.com6278公開し、ページスピードを計測すると、このような結果になりました！※実装の組み方やコンテンツ数でページスピード結果は変動するので、あくまで参考として受け取っていただければ幸いです。それぞれのツールの特徴と感想できること・できないこと一覧STUDIOWebflowFramer同時編集◯×◯プレビュー機能◎◯◯Figmaからのインポート◯×◎class指定(特定のスタイルの統一)×◯△CMS記事内表◯××記事の表示順並べ替え×◯◯独自ドメイン接続◯◯◯画面幅に応じたテキストサイズ×◯◯webツール(ラッコキーワード等)での見出しタグの抽出×◯◯価格STUDIOWebflowFramerサイト公開0円0円0円独自ドメイン接続980円/月〜14ドル(約2000円)/月〜5ドル(約740円)/月〜カスタムコード980円/月〜14ドル(約2000円)/月〜5ドル(約740円)/月〜複数人編集0円23ドル(約3400円)/月〜20ドル(約3000円)/月〜詳細比較ここからは、、それぞれのツールのエディタについてCMS機能アニメーションの自由度コミュニティや検索結果の充実度使ってみた感想について詳細にまとめていきます！STUDIOSTUDIO公式サイト【エディタについて】マウスで直感的・見たまま操作できるSTUDIOは、マウス操作でオブジェクトの配置や移動が簡単にできます。クリックで階層を潜っていき、調整したいものを選ぶことができます。並べる方向や並びかたを、視覚的に見たまま再現できるUIになっており初心者でも扱いやすいです。組み方の特徴STUDIOで配置するオブジェクトは基本的にボックス要素です。FlexBoxで親ボックスを作りその中に要素を並べていくイメージです。そのため、レスポンシブでの組み方の変更が容易です。レスポンシブ調整これは、筆者がSTUDIOで一番便利だと感じる仕様です。レスポンシブで配置やサイズを変更したものに関して、設定したブレイクポイントより小さいブレイクポイントにその設定が受け継がれます。例えば、PC→横並び、タブレット→縦並びに設定したとします。すると、モバイル版も自動で縦並びになってくれます！他のツールではタブレット版、モバイル版それぞれで縦並びの設定をする必要があるため、STUDIOのこの機能はレスポンシブ調整においてかなり助かる仕様です。プレビュー機能こちらもSTUDIOの特徴であり便利な機能です。作成したサイトを公開せずにプレビューで確認することができます。また、QRコードを読み込むことでタブレットやスマートフォン実機での確認ができます。エディタで変更したものはすぐにプレビューに反映されるため、プレビューを実機で見ながら微調整ができ、とても便利です！日本語のUIノーコード 制作ツールのほとんどは海外製で英語メインのものが多いです。しかし、STUDIOは日本製のツールなので、違和感のない日本語のメニューや説明になっています。そのため、クライアントにサイトの運用をお任せしやすいです。アニメーションSTUDIOアニメーションは、出現・ホバーをトリガーに、スケールや透明度を設定しアニメーションを付与することができます。スクロールアニメーションやパララックスはデフォルトの機能では実装できないため、カスタムコードを書く必要があります。【CMS機能】公開設定記事ごとに公開/非公開を選ぶことができます。STUDIOの特徴として、エディタの公開(更新)と記事の公開(更新)が別になっています。そのため、デザイン調整中で公開したくないけど記事は更新したい！という時に、記事のみ公開サイトに反映させることができます。記事の並び順STUDIOのCMS記事の並び順は基本的に公開日の新しいものが上に来る仕様になっており、その並び順は公開日を変更することでしか変えることができません。。しかし、CMSの機能「コレクション」を使えば記事の並び順を自由に入れ替えることができます。表の実装がある今回比較した3ツールの中で唯一、CMS内記事にデフォルトで表を入れることができます。表を画像化する必要がないので、とても便利な機能です。【SEO対策】ページスピードが上がりづらいボックスモデルを採用している仕様上、どうしても階層が深くなってしまいます。そのため、ページスピードが上がりづらいです。今回の検証でも点数は一番低く出ています。webツール(ラッコキーワード、SARCH WRITE等)で見出しタグが抽出されないSTUDIOで設定したh1、h2などの見出しタグは、webツールで抽出されません。そのため、webツールを使ってキーワード等の詳細な解析をしたい際には少し不便です。しかし、googleのクローラーにはきちんと読まれているので安心してください。【コミュニティ・サポートについて】日本語コミュニティの充実STUDIO公式コミュニティ(https://community-ja.studio.design)のほか、日本人のSTUDIO利用者が多いため、実装方法が不明なものなどは検索したらヒットする確率が高いです。サポートについてコミュニティの充実のほか、有人チャット(https://studio.design/ja/contact)でいつでも問合せすることができます。【使ってみた感想】STUIOの良さはとにかく日本製のツールであることだと思います。クライアントも運用しやすく、実装のTipsも豊富です。そのため、英語が苦手でもストレスなく使用することができます。画像をたくさん入れ込むとスピードが出なくなること、派手なアニメーションがデフォルトで実装できないことなどから、ノーコード で制作を始めてみたい初心者の方画像少なめのサイト派手なアニメーションが必要ないサイトクライアントに運用をお任せするサイトに向いていると感じました！WebflowWebflow公式サイトーーーーーーーーーーーーーーーー【エディタについて】組み方の特徴3ツールの中で、デザインを組んでいく感覚がコーディングに一番近いのが、Webflowだと感じました。そのため、今までコーディングでサイト作成をしていた方、コーディングに慣れている方は扱いやすく感じるのではないかと思います。class指定が可能Webflowでは、それぞれのテキストやオブジェクトにclassを付与することができます。そのため、統一した余白やサイズ・スタイルの一括調整が可能です。アニメーション3ツールの中で1番、カスタムコードを書かずに細かなアニメーション設定ができるのはWebflowです。テキストサイズ3ツールの中で唯一、文字サイズにrem・emを指定できます。レスポンシブ時のフォントサイズ変更が不要なため、非常に便利です。日本語入力は不安定Webflowは日本語対応していないため、日本語入力の挙動がおかしくなる時があります。(かなりの頻度であります)日本語の文字をたくさん使用するサイトの場合、実装時にストレスになってしまうかもしれません。UIについてSTUDIO、Framerと比べてUIが古いです。自由度が高い分一度に表示される情報が多かったり、ボタンなども小さく押しづらかったりするため、もう少し改善して欲しいところです。ズームできないデザインエディタを拡大縮小することができません。そのため小さなモニターでの作業は大変だと感じました。【CMS機能】編集機能cmsの自動保存機能がありません。記事を編集したら毎回セーブボタンを押して保存する必要があります。入力欄が小さいSTUDIO、Framerに比べてcmsの入力欄が小さめです。STUDIOやFramerのcmsに慣れていると不便に感じてしまうかもしれません。表・目次表や目次がデフォルトの機能でありません。カスタムコードを書く必要があります。【SEO対策】ページスピードが速い今回の検証で一番ページスピードが早かったのがWebflowです。ページスピードが早いことで、SEO的に良い評価を受けることができるでしょう。【コミュニティ・サポートについて】公式コミュニティ(https://university.webflow.com/)の充実公式コミュニティに様々な動画が上がっているほか、日本人利用者も多く、不明点を検索するとヒットする確率が高いです。サポート公式サポートはこちら(https://university.webflow.com/support)で、英語で質問する必要があります。【使ってみた感想】WebFlowはデフォルトの機能でまかなえる実装の幅がかなり広いのが特徴です。その分、メニューが多かったり複雑な操作が必要なため、ノーコード 中級者〜上級者向けだと思いました！ただ、日本語入力の挙動が安定しないのは日本向けサイトを作る上でかなり障壁になるので、早く入力できるようになることを願います😢ノーコードで幅広いアニメーションや細かな調整をしたい中級者以上の方元々コーディングでサイト作成をしていた方英語メインのサイトに向いていると感じました！FramerFramer公式サイト【エディタについて】組み方の特徴(FrameとStack)Framerの特徴として、「Frame」と「Stack」があります。「Stack」を親にすることでpadding、gap、並び替えの調整ができます。「Stack」は、figmaのオートレイアウトに似ています。他にも、操作パネルの配置が似ていたりと、figmaと操作感が似ているのもFramerの特徴です。Figmaからの要素インポートの精度が高いSTUDIOにもfigmaからのインポート機能はありますが、精度としてはあまり高くないです。(階層が深くなったりフォントが反映されなかったりする)しかし、Framerのfigmaインポート機能は精度がかなり高く、要素をほぼそのまま持ってくることができます。しかし、持ってきた要素は基本的に絶対配置(position:absolute)で配置されるため、レスポンシブを考えるとそのまま使うことはできません。そのため、「Stack」に組み直す必要があります。レスポンシブ調整Framerは、ブレイクポイントごとの画面が横並びに配置されます。STUDIOのように拡大縮小で切り替えという形ではないです。横並びでそれぞれのレイアウトを確認したい場合にはいいでしょう。STUDIOとは違い、ブレイクポイントが大きいものから小さいものへレスポンシブ設定が引き継がれるということはないため、注意が必要です。プレビュー機能framerにプレビュー機能はありますが、エディタで変更してからプレビューに反映されるまで、10秒ほどのタイムラグがあります。そのため、プレビューを見ながら微調整することは難しいです。画面幅に応じたテキストサイズframerの大きな魅力であるのがこの機能です。テキストサイズに%を指定でき、画面幅に応じてテキストサイズを可変させることができます。スタイルの統一Framerでは、テキスト・リンクのスタイルを保存できます。レスポンシブした時のサイズも込みで保存できるので便利です。カラーの保存地味ですが便利だなと思う機能です。Framerでは、カラーに名前をつけて保存できますSTUDIOではカラーの保存はできますが名前をつけることできないため、似た色が何色かあると分からなくなってしまうことがありました。アニメーションframerでは、コンポーネントを作成し、それぞれにvaliantという変化後のスタイルを作成することで、アニメーションを実装できます。また、スクロールアニメーションもデフォルトで可能で、valiantを使ってスクロール時のheaderのスタイルなどを制御できます。position:stickyを使った効果も簡単に実装できます。ずらしデザイン画像のようなずらしデザインの実装は少し不便でした。そもそもFramerにはマージンがなく、マイナスマージン をかけることができないためです。STUDIOやWebflowなら、ネガティブマージンをかけてずらすことができるのですが、Framerは決まった大きさのフレームを作り、その中で絶対配置で配置する方法しかないです。ギャップframerのstackには、縦横で違うギャップの値を指定できません。stackをいくつか作って調整できる静的なリストなら問題ないですが、動的なリストを実装したい際、縦横でギャップを変えられないためデザインの幅が狭まってしまいます。【CMS機能】記事の並び順記事の並び順を柔軟に変えることができます。CMS画面でドラッグ&ドロップするだけで、公開日関係なく記事の並べ替えが可能です。フィルターが充実CMSのフィルター機能が充実しており、カテゴリ分けはもちろん、公開月などでもフィルターをかけることができます。パンくずリストが作れない記事にカテゴリを振った場合、記事ページ＞カテゴリ情報 といった具合に遡れないため、記事に直接カテゴリ名を入れてパンくずに表示させる必要があります。CMS記事内(Contents)に表がないこちらはFramerでかなり困った点です。ブログ記事などを入稿する際、表(table)を作ることができません。表は別ツールで画像をして書き出し、貼り付ける方法しか今のところなさそうです。【SEO対策】ページスピードが早い画像ををたくさん使っても、表示速度があまり落ちない印象です。webツール(ラッコキーワード、SARCH WRITE等)で見出しタグが抽出されるSTUDIOで設定したh1、h2などの見出しタグは、webツールで抽出されません。そのため、webツールを使ってキーワード等の詳細な解析をしたい際には少し不便です。しかし、googleのクローラーにはきちんと読まれているので安心してください。【コミュニティ・サポートについて】公式コミュニティ(https://www.framer.community/c/announcementshttps://www.framer.community/c/announcements)がありますが、比較的新しいツールなため、質問数が少なく、未解決のものも多めです。Framer academy(https://www.framer.com/academy/)は、Framer初心者向けに動画解説がアップされており、動画を見て学ぶことができます。【使ってみた感想】Framerは触っていてもかなり軽く、サクサク動くためストレスが少なかったです。UIもシンプルで可愛らしく、触っていてテンションが上がります😀しかし、記事の実装(表やスタイル設定の自由度)は、もう少し充実していると嬉しいです。また、比較的新しいツールのため、公式以外のガイドや説明が少なく、学習コストは高めだと感じました。デザインでFigmaを使っている方画像多めのサイトスクロールアニメーションを実装したいサイトメディアサイトよりもコーポレートやLPに向いていると感じました！まとめ今回は、実際のサイト制作を通して、「STUDIO」「Webflow」「Framer」の3サービスを比較しました！一言でノーコードWeb制作ツールといっても、その特徴や使い勝手などは、非常に多岐に渡ります！それぞれの用途や目的にあったサービスを利用することができると良いでしょう！👍