先日Xにポストしたのですが、お盆休みをほぼ使ってノーコードツールFramerでブログを作りました。
デモサイトですが、出来上がったのはこちら。
備忘録として、使っていて感じた点を書いていこうかなと思います。
気になってる方の参考になれば幸いです。
Contents
前提：わたしのスキルレベル
どんな人間が触って感じたことかを明確にしておきたいので、わたしのレベルがわかるものを挙げていきます。
- Webデザイン学習8ヶ月目（うち直近4ヶ月は独学）
- ノーコードツールはほぼ初めて利用
- STUDIOやWixは一瞬だけ触ったことがあるが、サイトをまるっと作成した経験はない
- WordPressでのサイト作成経験あり（本サイト）
- JavaScriptはあんまり詳しくない
- 複雑なアニメーションを実装した経験はない
という感じです。
なので他のノーコードツールと比較ができないのと、ど素人の気づきなので着眼点が基礎の基礎レベルの場合もあります。ご了承ください。
なぜFramerでブログを？
このブログとは役割の違う、インターネット上の自分の居場所（ゆるいパーソナルスペース）を作りたかったからです。
なので、趣味も勉強もごちゃ混ぜのブログにしています。実際に運用してる方は基本的に公開しない予定です。（見たい方がいればDMします）
元々はブロックテーマを試してみたかったのでWordPressで作る予定でしたが、XのフォロワーさんからFramerをおすすめいただき採用しました。
事前にブロックテーマを触った際に時間がかかりそうだと思ったのと、どちらかというとコーディングまでがっつりやるより早く作って運用したい気持ちが強かったのがFramer採用の決め手です。
STUDIOは以前触った印象だと癖あるなーと思いすぐ離脱してしまったのですが、FramerはFigmaとUIが似ているのでそこまで苦手意識もなく進めることができました。
それでも1週間まるっと格闘していたわけですが…。
Framerの使用感について
0.参考にしたサイトや記事
AIに聞きつつも、自分で検索して調べることのほうが多かったです。その中でも参考にしたのはこちら。
あとはZennに投稿されてる記事を見たり、Framerで制作されたサイトを実際見てみたりしていました。
全体的にAIに聞くのも回答がイマイチで、かつ日本語の参考が少なめに感じるのは否めません…。
1.Figma→Framerがスムーズ
今回、デザインはFigmaで制作しました。
何の気なしにFigmaで作っていましたが、いざFramerで実装しようと調べていたらこんなプラグインがあると知りました。
Figma to HTML with Framerというプラグインです。
Figmaでプラグインを使ってフレームやパーツをコピーし、そのままFramerのページに貼り付けるだけ。簡単。
いや、本当に簡単だったんです。
見た目もほぼ崩れないし、オートレイアウトでサイズや余白を指定していればそれも反映されます。もちろんWebフォントであればフォントも。
覚えてる限りでFigmaからコピーされなかったり崩れたりしたのは、
- オートレイアウトのグリッド
- テキストスタイル
- コンポーネント（バリアブル含む）
あたりです。
この辺りSTUDIOなどがどのくらい反映できるのか分かりませんが、簡単なデザインであればそのままコピペできることが分かりました。
2.Figmaに似たUIが触りやすい
Framerの編集画面はこんな感じです。（詳しい画面の説明は参考に挙げたサイトを見ていただくのが良いと思います。）
最初に調べていた通り、確かにFigmaにUIが似ています。
が、基本的に英語です。
一応、Google Chromeの自動翻訳を使えば一部日本語にもなります。
CSSのセレクタと共通する項目は逆に日本語になると分かりづらいのと、プルダウンで選択する項目は翻訳にならないので、全体的に物足りない…。
私は結局英語のままで使用していました。英語は学生の時に学んだ程度ですが、単語だけの部分がほとんどでそこまで苦ではなかったです。
使っていくと慣れていきます。
3.コンポーネントを駆使して実装すると便利
Figmaと同様、コンポーネントの概念があります。
データ整理できてない画像で恥ずかしいですが、複数ページで使うパーツはもりもりコンポーネント作っておくと良いと思います。
ただ、Figmaで作っていたコンポーネントは見た目はそもままコピーできても、自動でFramerのコンポーネントにはならないので、都度作らないといけないかもです。
Framerのコンポーネント編集画面はページと別になっているので、編集しやすいし情報がごちゃごちゃにならずに良いなと感じました。
これ使い方合ってるのかな？と思いつつコンポーネントの画面載せます笑
ただ、CMSのパーツをコンポーネント化するとCMSの情報が消えちゃってリンクが無い！なんてことに多々遭遇しました。
おそらくコンポーネント化すると、一番親のレイヤー部分がStack（Figmaのオートレイアウトが効いてるフレームのようなもの）扱いになってしまうのだろうと推測しています。
CMSのパーツは都度挿入するか、コンポーネント化するならStackで一度囲んでおくのが良さそう…？
とはいえ、CMSは関係ないリンクや固定のパーツなどはコンポーネントを作成しておくととても便利です。
4.CMS
コレクションとフィールドを使って柔軟に作る
CMSはビジュアルの編集画面とは別になっています。
カテゴリーもタグも投稿も全てコレクションとして登録して、そのコレクションの中にアイテムとして個別でカテゴリー名や記事を入れていくことになります。
フィールドと呼ばれる、アイテム内で指定する項目（タイトルや日付など）をコレクションごとにカスタマイズできます。
WordPressみたいに始めからカテゴリーが用意されていないので、カテゴリー用のコレクションを作る必要があります。フィールドは必要な分だけ追加する形で。
ちなみにこれが投稿用に設定したアイテム編集画面です。TitleやSlugがフィールド名です。タグも長文テキストも欲しかったのでたくさんフィールドがあります。
カテゴリーコレクションの場合はこれ。長文テキストなどは不要なのでシンプルに2項目だけです。
FramerのCMSはこの、コレクションとフィールドを駆使して必要な情報を作っていきます。
月別アーカイブと記事数は自動で作ってくれない
WordPressだと月別アーカイブ一覧は結構簡単に作ることができるんですが、Framerだと自動では難しそうでした。
こういうやつです。
Code componentsという、Reactでコードを書いてコンポーネント化する機能もあるんですが、コンポーネント化がうまくいかなかったので今回は手動で作りました。（投稿する時の手間が増えちゃいますが仕方なし…）
あと、記事数カウントも簡単にはできないようでした。Code componentsだとできるらしい…？
シンプルなCMS画面
先ほどもキャプチャを載せましたが、CMSの画面がとてもシンプルです。
WordPressのテーマやプラグインにあるエディターのようなバリエーションはないですが、最低限の機能はあるなと思いました。Hタグももちろんカスタムできます。
用途によってはこれで十分である場合もあるかと思います。私個人で使う分には十分かなと感じました。
色のスタイル登録画面でライトモード/ダークモードがまとめて設定できる
Figmaみたいに使った色の履歴が見れないので、よく使う色を登録しようと画面を見たら、ダークモードの指定もできることを知りました。便利。
今回触った感じだとモードの指定ができるのは色だけだと思います。
背景画像の切り替えもついでにしたかったので、AIを頼りにCode componentsを作ってみて出来たはいいんですが、切り替えが安定しなかったのでダークモードは断念しました。
色だけでモードを変えるなら簡単にできると思います。
プラグインかCode componentsを使ってカスタマイズ性を高くできる？
今回はプラグインは何も使っていないのですが、さまざまなものがあるみたいです。
ページネーションを作りたくて方法を調べていた時にプラグインが出てきたのですが、有料みたいだったので結局使わずじまいになってしまいました。
Framer Marketplaceにはプラグインの他にテンプレートやコンポーネントもありますが、これらを利用するとより早く作れたのかもしれません。
コンポーネントがめちゃ面白い。無限に見ていられる。
反省点：感覚的に使いすぎてしまう
本当にドジなミスをしていたんですが、固定パーツごとのz-indexを把握せずにずっとプレビューでうまくできないと嘆いてたんですよね。
コードを書かないので、どこにどの設定をしたか頭に残りにくいように感じました。
私が感覚的に使いすぎなだけかもですが。
（これは私的メモです）
- CMSの情報を使うページは、CMS Pageを使う
- CMSのフィールド情報をページに載せるには、InsertのFieldから持ってくる（一覧はCollection）
- フィルターやソートを指示するときは、ValueのSet Vatiableを使う選択肢を忘れない
- コレクションを跨いだ一覧は難しいよ、分けようね（もしかしたらできるかもですが）
初めてのFramerは楽しく使うことができました！
思ったことは他にもいろいろあるんですが、WordPress（クラシックテーマ）を前提にデザインを作っていたので出来ないな〜と思ったことが多く、「あれ出来ない」「これ出来ない」ばかりになりそうだったので割愛します。
そりゃノーコードツールのノーコード部分だけで作るのと、PHPで作るのでは自由度が違うよね。
それでもだいたいできちゃったので、単純にノーコードツールすごい！
使っていてとても楽しかったです。
おかげで1週間飽きずにFramerに向き合い続けられました。
アニメーション（Effect）はほとんど使っていないのですが、感覚的に動きをつけることができるので、まずFramerでアニメーションつけてみて、できた設定を見ながらコードも書いていくと学びやすいのではと思いました。
アニメーションを勉強する場所にもしてみようかな。
そのままFramer上でデザインを作ってしまってもいいし、Framerに触れたおかげで可能性が広がりました。
気になった方はぜひ使ってみてください〜！
