Framerの紹介
Peel & reveal mikan’s Design Talk
こんにちは、mikanでデザイナーをしています、テラです。
同じく、mikanのデザイナーのみかみ・とうたです。
この番組は、英語アプリみかんを運営するデザインチームによるポッドキャストです。
デザインプロダクト開発、組織や働き方に関して、
ちょっと役に立ったり、役に立たなかったりするよもやま話を配信します。
本日は、Sotaさんに最近ハマっているFramerについて聞いてみたいと思います。
じゃあ、Sotaさん、今日はよろしくお願いします。
はい、お願いします。
早速、本題に入っていきたいんですけど、
Framerって、ざっくり言うと、どのようなものなんですか?
Framerはですね、最近僕がハマっているツールで、
国内ではスタジオが似たツールになるかなと思っています。
いわゆる、ノーコードでサイトをデザインして、
実装できて、リリースまでできるよっていうサイトビルダーですね。
Sotaさんは使ったことありますか?
使ったことあります。
それは、サイト制作でですかね?
あ、そうだ。使ったことあるのはスタジオの方かと思って答えちゃった。
ああ、スタジオの方か。スタジオは国内で人気ですよね。
そうですね。
サイト制作の方でって聞いたのは、
Framerが結構ピポッとしているツールで、
この話をするにあたって調べたんですけど、結構歴史あるんですよね。
もうすぐ10年になるみたいで。
そんなことなんですね。
そうそう。もともとはそれこそ、
Figmaのようなデザインツールの頃もあったし、
プロトタイプの文脈で力を入れていらっしゃった時もあったし、
アニメーションに強いなっていう認識で、
4年前くらいに日本でもいくつかバグってたことがあるんですけど、
プロトタイプでFigmaよりもリッチに作りたい、
2Cチームにはいいかもねみたいな形でちょっと流行ったことがあったりだとか、
でもここ2年くらいの間には、
Framerサイトっていうまず名前で、
サイトがリリースできますよっていう形になった後に、
フレーマーサイトからフレーマーっていう名前に戻って、
フレーマーそのものがサイト制作ツールになっているようです。
フィグマとの比較
そうなんだ。10年って結構の歴史ですね。
使ったことあるかな?
知らない間に使ったことある説はちょっとあるかもしれない。
知らない間に使ったことあるかもしれない。
エンジン屋さんと話してると、
フレーマーモーションって名前とかも時々出てきます。
それはロッティとか、デザイナーが頑張ってロッティ作るのと別でというか、
エンジン屋さん側でフレーマーモーションでアニメーション作るみたいな手段もあるみたいですね。
なるほどなるほど。
ちなみになんですけど、
今出てきたようにスタジオとかウェブフローみたいなもの、
似たようなツールって複数あると思うんですけど、
何でフレーマーにハマったんですか?
やっぱり僕らフィグマー使うじゃないですか、普段から。
フィグマーに一番近いのがフレーマーかなと思ってるんですよね。
UI見た目からですけど、操作するこのキャンバスが、
他のツールですと、
コードを書いて実装して、
それをブラウザで開いて確認しているようなUIで作っていくのが、
他社のツールだと多いと思うんですけど、
フレーマーの場合はフィグマー感がすごくあって、
広いキャンバスの中にデスクトップのUI、タブレットのUI、モバイルのUIと横並びに置かれていて、
そのフレームの周りには自由にメモとかを含めて置くことができて、
だけどデスクトップ用のフレーム、タブレット用のフレーム、モバイル用のフレームの中で作ったものが
ウェブサイトになりますよっていう設計。
かつショートカットは色々気になるところがあるんですけど、
操作できる種類としてはフィグマに相当寄っているので、
違和感なく使えるし、その楽さ加減がフィグマに近いので、
僕は触って楽しいなと思っているんですよね。
なるほど、触りやすいっていうのは結構いいんですよね。
導入としてやっぱり早いというか。
新しいツール感はないです。
フィグマに慣れすぎているのでフィグマとの差分にちょっとあれって思うことはあるんですけど、
でも音つきやすいなとは思いました。
なるほど。
ちなみになんですけど、
結構フィグマと似てるっていう話だったと思うんですけど、
ここは違うみたいな具体的な、ここすごくいいなと思う機能みたいなのってありますか?
やっぱりサイトを作れるところなので、
サイト制作にあたっての強みがあって、
どういうことかというと、フィグマはいわゆるプロトタイピングツールなので、
作ってみてテストしてそれを実装してっていう流れですけど、
フレームの場合は作ったものがそのままサイトになるものですと。
ということはサイトとしてローディングのアニメーションとか、
スクロールの時のインタラクションとか、ホバーのインタラクションとか、
ウェブサイトに必要な表現の幅がかなり用意されていて、
まだ多分全部の機能知れてないんですけど、
コミュニティとかでフレームで作ったウェブサイトの実例とかを見て真似したりして作るのがすごい楽しいなと思って最近遊んでます。
価格設定と改善点
いくつかサイト作ったりしてるんですか?
そうですね、Zoomで今録画撮ってるので、
ポッドキャストの方には見せれないんですけど、いくつか作ってます。
特に表現の幅をためたいなと思ってて、
最近はこういう形で少しずついろんな表現をためて、
それをまとめるサイトを作っていってます。
これクリックすると見れるんですけど、
例えばこれは、フレームで作ると無限スクロールこんな感じだよ、スライドして作れるよとか、
フレームならではだなと思うので言うと、
例えばこれかな、ダークモードとライトモードのテーマを持つことができるんですよ。
こういうスイッチャーのコンポーネントを用意したりしたら、それによってちゃんと変わるし、
本当のポッドキャストを聞いている方には分からないんですけど、
カーソルをカスタムできるので、
すごい!カーソルも!
こういう丸い円を作って追従させるようにできたりとか、
オファーした時のスタイルを変えたりとかができますね。
すごい!カーソルにコメントが表示されたりとかもできるんですね。
動画だと再生ボタンを出したりとかもできるんですね。
できます。
これドラッグとかもできるんですよ。すごくない?
すごい!
こういう表現できます。
置いた時にちょっとした傾きみたいなのとかもできるんですね。
そうですね、これはマジで何でもできて、そういう意味だと。
すごいな。クリックを離した時のアニメーションの細かさみたいなところまで表現できるんですね。
素晴らしい。いいですね。
かつ、まだ僕ちょっと作ったこと慣れてないからチャレンジしきれてないんですけど、
いわゆるXYZのZ、奥行きというか3D表現も作れて、
今それこそ触っていたこれですと、
このホバーした時に斜めに傾いているものを平面、水平の面に直すっていうのをやってますけど、
これをさらに斜めに、奥行きを持たせて斜めにする。
斜めにして立体的に本みたいにするとか、
そのZ軸のあれを活かして、本のオブジェクトをホバーすると本が開くアニメーションを作るとか。
おーすごい。
そんなんもできるので。
なかなかないですよね。Z軸をできる、こういうウェブサイト制作のツールって。
アイデアとして考えるのも難しいから、優先度を下げられがちなのかなと思ったりしたんですけど、
いろいろな表現の可能性を感じられるので、いっぱい作って引き出し増やしたいなと思っていたりします。
いいなーこれ。これ使ってボートフォリオサイトとか作ってみたいな。
そう、なんか作りたいんですよね。
なんか普通に仕事で使えるチャンスをずっと探しておいてますけど、
やっぱりちょっと高いんですよね、他のツールと比べて。
1サイトとして個人で作る分には大して問題ないんですよ。
今、スレーマーの価格のページを出しているんですけど、
1サイトだったらもちろんフリーから始められて、
小さければ月5ドルだし、大きくなったら30ドルみたいな形で、
この値段自体は普通かなっていう感じはするんですけど、
これをチームでマネージしようとした時にちょっと困って、
サイト単位での課金に加えて、チームオーガニゼーション単位の課金も発生するんです。
それは編集者1人当たり20ドル、または高いプラント40ドルかかってくるので、
10人デザイナーいて、10人でみんなで使えますってなったら、
サイト1つだけなのにそれでも400ドルプラスサイト1つの課金が必要なんで、
結構コストかかるなと思ってて、個人で使う分には楽しいけれど、
組織系の導入のしづらさがちょっとなぁと思ったりするんですけど、
でももう1つサイトビルダーとして世界有名なWebflowさんは、
Webflowさんも同じような課金体系で、サイト単位プラス組織単位の課金があるし、
それでいうとWebflowさんの方がちょっと高いので、
一応世界的には良心的な価格設定っぽいんですけど、
でも、でも高いなって思う。
そこそこしますね。なるほどなぁ。
このページもなんか綺麗ですね。
そうですね。さすがにフレーマーさんもフレーマーで作ってるはず。
フレーマーサイトで作ってる。
本当だ。完全にこれ、映像ありきの会話をちょっとしちゃってるんですけど。
映像ありきの会話ですから、ぜひ皆さんフレーマー.comに行って見てみてください。
ちなみに、なんかもうちょっとこうなったらいいなぁみたいなのってあったりしますか?
やっぱり今言った値段のところがまず1つですけど、
結構難しいんだろうな、値段を下げるのは。
できることもね、結構多いですもんね。
十分安いとは言えるんだよなっていう。
すごい高いわけではない。
もう一つは、ちょっと頑張ってらっしゃる方が理解してるんですけど、
なんかヘルプというか、フレーマーでこういう表現作りたいなと思って検索するじゃないですか。
フレーマー、例えばパラダクス、アニメーションとか。
それで調べた時に、ドキュメントがあんまり出てこない印象があって。
一応、フレーマーっていうツール自体のヘルプサイトはしっかりしてるんですよ。
価格体験はこんな感じですとか、CMS使うならこうやって使ってねとかはあるんですけど、
デザイン表現って意味ではあんまり持ち情報が出てこなくって。
この代わりに、動画はいっぱい出てきます。
YouTubeとかに上がってるんですか?
そう、フレーマーユニバーシティが公式かな。
フレーマーの基本情報
フレーマーユニバーシティって公式のYouTubeチャンネルがあったりとか、
有志の方々がたくさん上げてらっしゃるので、動画で検索はできるんで、
動画で見たらいいんですけど、文字で見る方が早いなって思う時もケースによったらあるので。
そうですよね。あとあれですね、これ基本英語ですよね。
それはしゃあないですね。英語はそうですね。
英語って意味だと、慣れはしますけど、フレーマーのサイト自体ももちろん英語なので、
日本語化があると少なくとも国内のユーザー増えるはずなのになと思ってはいますね。
でも僕は英語で使ってる方がかっこいいなと思うから、
フィグマが日本語化した時も英語のまま使い続けているやつですね。
確かに私も英語のまま使い続けてるの。
慣れたら気にならないですよね。ショートカットとか覚えちゃえば。
慣れたら気にならないです。
あとクイックアクションする時とか、日本語の方が時間かかるし。
そうですね、確かに。
いいツールなんで、もうちょっと自分で実験して遊んで知識つけた状態で、
社内の授業で使うチャンスを見つけたいなと思い続けてますね。
確かに、颯田さんの熱い思いのプレゼンをしたら通るかもしれない。
最近も一つあったんですよ。これフレーマーだったらできますよってあったけど、
ちょっとスタジオで頑張ります。スタジオさんも好きなんでいいんですけど。
いいですね。入れていきたいですね。
ちなみに、機能以外で気に入ってる部分って何かありますか?
機能以外で気に入ってる部分か。
そうですね、なんだろう。
結構、フレーマー自体は長い、10年近くやってるツールではあるものの、
ウェブサイトにできるフレーマーっていうもの自体はまだ若いので、
コミュニティ盛り上がってるなと思ってて。
フレーマーコミュニティかな。
さっきのYouTube動画もそうですね。
ユーザーの人たちがいろんな使い方、チップスとかをYouTubeに上げてくださってるのもそうですし、
フレーマーはリミックスっていう概念があるんですけど、
個人とか自分が作ったもの、いわゆるリプリケート、
複製して自分のドラフトに置ける機能がFigmaにもあるように、
フレーマーはそれをリミックスって概念で使われていて、
いろんな人がフレーマー作ったサイトにリミックスリンクを置いてくれていて、
このリミックスを置くとそれが自分のところにコピーされます。
そこではどういうふうに作られているのかを探索することができる。
なるほど。
フレーマーもコードを書いてコードコンポーネントを使ったりできるんですけど、
そのコードを自分で書くのも大変だし、
AIに聞いて作ったりするのも完成度をどこまで上げられるかは結構難しいところがあるので、
綺麗に書いてくださっているコードを拝借することができて、
いいですね。
自分のタイプに活かせるのはいいなと思っています。
多分フレーマーが上手なのはこのリミックスリンクの仕組みが面白くて、
リミックスリンクからフレーマーに登録して、
新しいユーザーがフレーマーを使い始めて、そこで課金すると、
1年から、半年から、ちょっと忘れちゃいましたけど、
一定期間リミックスリンクを作った人にアフィリエイトリンクが払われる仕組みになっているんですよ。
なので、無料で作ったとしても、
リミックス用のファイルが有料販売しなくても、
たくさんリミックスリンクを発行して、
いろんな人からのトラフィックを集めて、
そこからフレーマーを使い始める人がいたら、
作った人も嬉しいという仕組みになっているので、
みんな積極的に作って発信してくれるのかなと思って、
この文化いいなと思っています。みんな嬉しいので。
フレーマーの多言語対応とUI
面白いですね。
使いたい。私も使おう。
仕事欲しい。
確かにな。普通に業務の中で使いたい。
CMSも結構気持ちいいですよ。
さっきコードも見やすかったなと思って。
どこ行ったかな。
これか。
コード。
ちゃんと色も分けられているし、
インデントもちゃんと。
これは自動で入るだけな。
自動で入る。
自動でインデント入れるようになっているし、
普通にリターン触っている感覚になりますよね。
素晴らしい。
嬉しそう。
コンポーネントを作る用のコードと、
オーバーライトといって、
フレーマーの中に描画しているテキストとか、
オブジェクトに対して上書きする。
上書きしてフレーマーにない機能を当てることができる。
オーバーライトといいますが、
その2種類があって、
今画面で見ているんですけど、
コンポーネントだとこっちでプレビューができたり。
本当だ。
コードがわかるなら、この上で書いて修正して、
このウィズスを100%だけど、
これを50%にしようとかしたら、
また変わるのかな。
この大きさを変えようと思ったら、
変えたりとか。
変わったかな。
変わったかな。
ここで変えながら作ることができますが、
僕はどこまでコードが詳しくないので、
基本的にAIに聞いて、
それをこっちに持ってきてコンペして、
直らなかったからここを直して、
みたいなことを言いながらコードを書いています。
なるほど。
面白いな。
見てください。
この辺スタイル登録してるじゃないですか。
はい。
テキストスタイル、ヘディングボディ、
自由に名前付けられますけど、
例えばヘディング位置を指定して、
そこにスタイルに対してブレークポイントを
付けると。
デバイスサイズがデスクトップ、
ラージとフォームの2種類がある際に、
このヘッダー1っていうタイトルは、
サイズLのときはフォントサイズを80にするが、
スマホのサイズのときはフォントサイズを
80じゃなくて32にするみたいなことをすると、
そこも勝手に変わる。
カラーも、例えばバックグラウンドカラーを
ここで定義するとして、
バックグラウンドカラーを定義するとして、
ダークモードのときは、
ライトモードのときは000だけど、
ライトモードのときはFFにするみたいにすると、
これが勝手に変わってくれますよね。
すごい。
分かりやすいですね。
分かりやすいです、分かりやすい。
もう1個せっかくなので紹介すると、
感動したのはこれですね。
多言語対応も簡単で、
課金必要なんですけど。
めちゃくちゃいいですね、それ。
Set Default LanguagesでEnglishにして、
AdvocateでJapanese設定して、
そうするとここに今使われているテキストが
自動で出力されますと。
なるほど。
ここに対してEnglishはリキッドだから、
これはカタカナでリキッドにするみたいにしたとして、
ここのコピーはコピーにするとかってしたとして、
なるほど。
で、戻りの今度ここでボトムのところで
EnglishとJapaneseを切り替えると変わる。
本当だ、素晴らしい。
これちなみにフォントファミリーも変えられるんですか?
言語によってですか?できるのかな?
それはちょっと分からないな。
それもできたらすごい最高ですね。
めっちゃいいですね、それは。
素晴らしい。
面白いですね。
いいんですよ。
本当にFigmaっぽくないですか?この雰囲気。
ここが公開されているところで、
ここはその周りに置いているやつ。
最近アップデートされたUIにも似てて。
ああ、確かに。
この下にフローティングしてるやつ。
下にね、フローティングしてますしね。
確かにこれは今のFigmaライクだ。
意図して合わせてるのか気になるところだけど。
というフレームワンの面白さでした。
ポッドキャストを聞いている人には分からないかもしれないですけど。
映像ありきな話をしてしまいました。
ぜひ皆さん、フレームワン.comに行ってサイトを見るか、
僕のX.comスラッシュソーターアンダーバーみかみに行っていただいて、
フレームワンでこんなことできるんだを見ていただく等々で、
フレームワンの良さを知っていただけると幸いです。
あれかな、ポッドキャストの今回の概要欄にリンクを。
貼っときますか。
貼っときましょうか。
気になった方はそちらからアクセスしてみてください。
というわけで、本日の内容はいかがだったでしょうか。
番組の内容が面白いと思ったら、
ぜひポッドキャストをフォローしたり、
SNSで感想をシェアしていただけると嬉しいです。
それでは本日の放送はみかんのステラと、
みかみがお届けしました。
ありがとうございました。
ありがとうございました。
