こんばんは、マイです。
急に思い立ってまた個人サイトを作りたくなりFramerで作っていましたが、せっかくなのでStudioでも同じことがどこまでできるか試しに作ってみました。
操作してみた所感を書いていこうと思います。
はじめに
最初に制作したサイトの趣旨と注意事項を。
- デザイン学習以外で作ったものを置いておくサイトです
- みんなに見てもらう前提ではないので、AboutなどWebサイトとして不足している要素が多々あります
- 片方は実際に運用してしまっているので、CMSのアイテム数が異なります
- どちらも無料プランで制作しています
- Studio実装は今回が初めてです
- 調査・知見不足のため、実際にはできることをできないと判断している場合もあります（間違いがあればご指摘ください）
上記点をご留意いただき、温かい目でサイトを見ていただけると幸いです。
初めてFramerを使ったときの記録も置いておきます。内容の重複あるかもですがご了承ください。
Framer版サイト
最終的にFramerを採用したので、実際に運用しているのはこちら。
Studio版サイト
ちゃんとした比較情報はこちらを参考にしていただくと良いです。とてもわかりやすい。
それと、Framerの無料プランは公式の情報が少ない気がするので、こちらを見ると良いかも。（山下さんの情報が本当にありがたい…）
Framerの良いところ
ということで、ここからはまだ実務経験もしてないペーペー以下のワタクシが触った所感、特にいいなと感じたところを書いていきます。
- スマホやタブレットからもCMS投稿可能
- 使用できるコレクション数、アイテム数が多いので、カテゴリーやタグ分類が細かくできる
- CMSアイテムの表示ルールが細かく設定できる
- ページ表示速度が、体感的にStudioより速い
- カテゴリーなどの割り込み追加が柔軟（スラッグまでその場で指定できる）
- CMSの日付を任意で指定できる
- UIがほぼFigma
スマホやタブレットからもCMS投稿可能
個人的に、これは本当に大きい。
企業さんのメディアや収入目的のきちんとしたブログであればPCで書くとは思うので、そこまでStudioより優位性ないかもしれないです。
私の場合は個人サイトで、かつ気軽に運用したかったので、スマホから投稿できるのはポイント高いです。
Studio、タブレットならワンチャン…？と思ってアクセスしてみたらダメだったので悲しい。
使用できるコレクション数、アイテム数が多いので、カテゴリーやタグ分類が細かくできる
FramerかStudioどちらか触ったことある方でないとピンとこないかもしれません。
Studioで言うと、コレクション＝アクティブモデル、アイテム＝公開アイテム です。
| Framer | Studio | |
| コレクション数 （アクティブモデル数） | 10 | 3 |
| アイテム数 | 1000 | 100 |
Studioだと、記事用/カテゴリー用/タグ用でいっぱいになってしまいますが、Framerだともう少し細かくジャンル分けできます。（作りすぎも運用しにくくなりますが）
ちなみに私のサイトの場合、Studioの方は作りたかった分類分けでアクティブモデルを2つ使ってしまったので、タグは無理やり記事のプロパティを追加して見た目だけのものにしました。なのでタグ用の動的ページはありません…。
CMSアイテムの表示ルールが細かく設定できる
CMSを紐付ける際にフィルタリングやら変換やらできるのですが、結構選択肢があります。
参考ですが、こんな感じで指定します。
現在表示しているカテゴリーだけ背景にグレーを追加、それ以外は色なし設定です。CMSのフィールドと呼ばれるプロパティから指定できます。
これはStudioだと条件付きスタイルの現在のページで指定できるので、Studioの方が簡単かもしれません笑
この条件付けのパターンが豊富という点が、Framerの利点です。色もスタイルを作ればダークモードにできます！（実際にFramerはダークモード適用させているので、よかったらご確認ください。）
ページ表示速度が、体感的にStudioより速い
これはいろんな方が仰ってるので、表示速度はFramerが速いと思います。実際にサイトを確認していただく方が早いですね。（見てね）
Studioはリンクボタン押した後、若干表示ラグが発生する気がします。
カテゴリーなどの割り込み追加が柔軟（スラッグまでその場で指定できる）
これは利点だと思ってるの、私だけかもしれない…。
タグでよくありがたさを実感するのですが、新しいタグを指定したいとなったときに、記事を書いている状態から割り込んで新規タグを追加できるのです。
しかも割り込み中にスラッグも指定可能、公開できる状態（Undraft）にもできる。
CMSのコレクションを移動する手間が省けて、個人的にとても助かっている機能です。
CMSの日付を任意で指定できる
これStudio触っていて驚いたのですが、日時って後から変更したり始めから投稿日以外に指定することはできないんですね。
プロパティで追加すれば良いのかもしれないですが、作成日や編集日以外で日時の指定ができるのも、Framerの良さに思います。
実際、過去に作ったものの投稿をするときに、この機能があったので簡単に指定できました。
UIがほぼFigma
言わずもがな。
というか、以前投稿した記事にも書きましたね。FigmaユーザーはUIの抵抗が少ないと思います。英語UIではありますが。
Studioの良いところ
- 日本語フォントが豊富
- 日本語UIで操作できる
- リファレンスも豊富、日本語検索しやすい
- CMSの紐付けが直感的
日本語フォントが豊富/日本語UIで操作できる/リファレンスも豊富、日本語検索しやすい
まとめてしまいました。
Studioの良いところは日本製であることです。言語が母国語であるだけでかなり使いやすくなると思います。こと日本においては。
新しいツールを触るとなったときにハードルが下がりますよね。
あとFramerで使えるフォントで日本語フォントがあるのはGoogleフォントくらいなので、自分で追加の必要なくモリサワ等の日本語フォントが使えるのは、本当に良いところです。
CMSの紐付けが直感的
先に書いた通り、Framerは細かくルール設定ができるので、慣れないと少し手間です。
逆にStudioだとCMSの要素と紐付けたいテキストなどをドラッグで繋げることができるのは、直感的でとても操作しやすく思いました。
（スクショうまく撮れなかったな…）
そのほかの、Studioでできなかった機能
結論、Framerの方が自由度が高く、やりたかったことがほぼできたのでFramerで運用しています。
サイトを見てくださった方はわかるとは思いますが、今回制作したサイトデザインをStudioで反映できなかったのは下記です。
- 時計機能
- タグのアクティブモデル化
- ライトボックス機能
Homeの「NEW!」をStudioでも点滅のようなアニメーションをつけたかったんですが、今の自分にはできませんでした。これが仕様でできないのか自分の技術不足か判断できないため、これはできなかった項目から省きます。
時計機能
今回、ヘッダーに時計とアクセスカウンターをつけたいと思い当初デザインしていました。
（アクセスカウンターはCode componentsで作れたには作れたのですが、いろいろ制約があり断念。）
時計は標準機能？としてあったのでそのまま採用。
Studioでもできるかなーと調べてみましたが、どうもできないようで。
諦めてXアイコンとHomeリンクのみのシンプルなヘッダーになりました。
タグのアクティブモデル化
これは先ほども書きましたが、無料プランのアクティブモデル数の制限があり、タグ（分類したい項目の1つ）をモデルとして追加できませんでした。
Framerではタグから一覧ページへ遷移させるようにできていますが、Studioは断念したのでタグ一覧ページはありません。
ライトボックス機能
サイトを作る前に、Framerでライトボックス機能が追加されたと耳にしていたので、ライトボックスを使うようなデザインにしていました。（そもそもFramerで実装する前提で作っていた）
Studioは動的モーダルのページを作ることができるので、それを使って動的ページ（投稿詳細）からモーダルページへ遷移できないかなと考えていました。
が、どうやら動的ページ内でのリンク設定は、リンク先の投稿を指定しないといけないようでした。
というわけで擬似的なライトボックスを作るのは諦めました。
（詳細ページでどどんと自分の描いた絵が表示されるのは恥ずかしい部分もあるので、見たい人だけタップして拡大してくれればいいな〜と思っていたのですが。）
Framer優位っぽいけれど…？
国内ではStudioの方が実務で利用されているのではないでしょうか。
ノーコードツールのジャンル分けがあったギャラリーサイトを見てみましたが、Studioの件数が圧倒的でした。
あとは、Framerは無料のCMSアイテム数は多いですがストレージ容量は500MBらしく、Studioは5GBのようなので、Framer無料プランもそれなりに制限があります。
（Usageを見たらPlan Limit 1GBとあったのですが、これはストレージ容量なのか別の何かなのか…？公式が無料プランの詳細も書いてくれると良いのに。）
月間訪問数の上限も、Framerの方が少ないです。
趣味サイトならFramer全然ありだと思っています。趣味サイトいいよ、満足感すごいよ。みんな作ろう。
まとめ：ノーコードツール楽しいね
早く作りたい、早く運用したい、CMS機能欲しい、だったのでノーコードツール一択だったのですが、コードを直接書くより当然完成が早いので、運用したい〜！の熱量を保ったまま一通り完成させることができました。
Studioももっと操作に手間取るかなと思ったのですが、慣れると早いものです。するする進められました。
デザインメインの方はノーコードツールを使ってどんどんアウトプットするのも有りに思います。
そのうちコードも書きたくなってくる気がするので、次はこのサイトをリニューアルでもしようかなと思います。いつになるかわかりませんが。
ちなみにどうでもいい情報ですが、このサイトを作ろうと思って仮デザインをXに投稿したらバズりました。
絵描きさん方面にバズったっぽいですが、結構作ったものの置き場所をいいなと思ってくださる方がいるんだな〜とほっこりしました。ありがたいね。（通知止まらないのは怖かったけど笑）
ここまでお読みいただきありがとうございました。
それでは、また。
