📖 10分ぐらいで読めると思います。
Framerで多言語（locale）を使う機会がありました。そこで日本語をメイン、サブに英語を使用した今回の使用感をお伝えできればと思います。
localizationの紹介ページ（英語）
💡 早めの結論（@2025/10現在）
レイアウト・デザインを共通化出来るので、多言語展開の重要度が高いサイトには、良い機能だと思いました。descriptionなどSEOなども翻訳し最適化出来るのでおすすめです。
特に記事の運用とサイトの構築が別れている場合は、localeの機能を使用した方が良いと思います。運用側は記事などのコンテンツ編集と翻訳作業に集中出来るからです。
ただし、細かな点では不便さもやはりあります。その辺りもお伝えしていきたいと思います。
🌍️ localeの使い方
Framerでのlocale、翻訳とレイアウト・デザインでの使い方についてご紹介します。
Localesを追加する
ヘッダの地球儀アイコンからlocaleを開始します。続いて表示されるAdd Localeをクリックし、表示されるモーダルで翻訳対象の言語やslug（サブ言語のURLパス）を指定します。
左サイドバーの各言語から設定モーダルを開いて内容を確認することが出来ます。設定内容は難しいところはないと思います。
今回は使用していませんが、AI Styleで翻訳のスタイルを指定できるようです。
翻訳する
Framerでの翻訳は、Reactなどのフレームワークではおなじみの、i18nをGUIに落とし込んだような作りになっています。主となる言語の各テキストに、別言語のテキストを指定する方法です（図1）。
例えば、メニュー項目に日本語で「会社概要」がある場合、localization画面で会社概要に対応する英語訳を入力します。Framerが提供するAIによる自動翻訳も選択可能です。
同じテキストの場合、まとめて翻訳を反映もしてくれます。
Framerはサイトで使用しているテキストを網羅してリストアップします。ですので、ヘッダとフッタで同じリンクテキストがある場合は、それぞれ翻訳テキストを指定する必要があります。Framerでは同じ元テキストの場合、翻訳テキストを流用するかサジェストしてくれます。
図1：言語の対応一覧
CMSなどからは···メニューから絞り込みすることが出来ます。localization画面でもフィルターを入力することが出来ます。（CMSエディタ内で完結できれば完璧ですね）
デザインエディタでの確認
翻訳されたテキストは、主言語のテキストが入っているテキストボックスに自動で反映されます。
翻訳されたページをデザインエディタ上で確認したい場合は、下部にあるツールバーの言語切替で確認出来ます。ただし、主言語以外でのデザイン編集は出来ません🤔。
Framerで良く使うコンポーネント＆変数の場合、変数に設定したテキストが翻訳されてコンポーネントに渡されます。
エディタでの言語の切り替え
言語切替ボタンの作成
言語の切り替えボタンは用意されたコンポーネント、もしくは自身でinteractionsを設定します。
interactionsからSet Locationで切り替えたい言語を選択するだけです。クリックすると設定した言語にサイト全体が切り替わります。サイト内リンクなども設定で指定したslugが自動で付与されます。
言語切替のinteractios
👍️ 良いところ
主言語でレイアウト＆デザインしていれば、多言語は別管理なので切り分けがはっきりしています。Site Descriptionなども対応しているので、多言語展開が必要な場合は安心して使用出来ます。オフィシャルでの対応なのでハック的な事も必要ありませんし、Framerのアップデートが有ったとしてもイレギュラーな対応は起きないと思います。
公開サイトはちゃんと多言語サイト
当たり前ですが、公開されたサイトは多言語サイトとして機能します。FramerなどノーコードサイトはSEOにも強いので、多言語展開するサイトには強力な機能だと思います。
Framerがオランダ製だというのも心強いです。欧州などは多言語展開が当然だと思うので、SEOなどはしっかりと対応していると思います。
🤔 気になるところ
今回は日本語と英語をサイトで使用したのですが、デザインの細部にもこだわると気になる部分があります。また、これはある意味仕方ないとは思いますが、後から追加された機能なのでUIが洗練されているとは言えません。そして金額も悩ましいところです。。。
✒️ デザインする時に気になった、フォントは共通
デザインをする時に、これが一番困ったところです。英語とオランダ語などであれば、共通のフォントでも問題ないかもしれませんが、日本語と英語ではフォントを変えたくなるでしょう。また、サイズ調整も必要になることが多いのではないでしょうか。
Framerには共通のStylesという便利な機能があります。CSSクラスのように同じスタイルをテキストに適用出来ます。ですが、このStylesには言語毎の切り替えはありません。メディアクエリの切り替え毎に、テキストスタイルを変更（デスクトップとスマホでフォントサイズを変更するなど）出来るのですが、言語毎のスタイル変更は出来ません。これが出来るとかなり嬉しいです。
今回対応した方法
今回のサイトでは英語用フォント（Framerは独自の欧文フォントなどもあり使いたい）を使用したかったので、やや力技ですが言語でのテキストスタイルの変更を実装してみました。
Framerでは色々と条件分岐が出来るのですがlocaleも使えます。一番シンプルな方法はlocaleを使ってテキストボックスを、日本語の場合は表示、それ以外の場合は非表示にすることです。
しかしこれだけだと、２つテキストコンポーネントを配置しないといけません。それぞれに同じ日本語のテキストを記述し、翻訳画面でそれぞれ翻訳する必要があります。２重管理でちょっと気になりますよね。
そこで、言語によってスタイルを変更したい時は、コンポーネント化してvariablesでテキストを受け取る方法を使いました。翻訳するテキストはコンポーネントに渡すテキストのみです。スタイルの変更はコンポーネント内にvariablesを指定した２つのテキストコンポーネントに、それぞれ違うスタイルを設定します。表示条件にlocaleを指定すれば完成です。
表示条件が増えるので、バリエーションなどを使っているとコンポーネント内が複雑になります。不要な複雑性なので、出来れば機能として提供してもらえると良いですね。
🎨 UIが使いにくい
これは、今後良くなっていくとは思いますが、現状では使いにくいです。レイアウト＆デザインと翻訳が分けれるのは利点でもありますが、折角の使いやすいデザイン画面でのデザイン作業が、多言語だけ切り離されます。CMSも同様で、現状翻訳はLocalizationのリスト上での作業のみになっています。
💰️ ちょっと高い
追加の１言語につき2,054円/月です。もちろんサイトの意図や別言語の重要性、ちゃんとした多言語サイトを構築する費用などを考えれば適切なのだろうと思います。ただ、英語版も有ったほうが良いよね、という感覚だとちょっと高いなと感じます。
また、ページ数は少ないけど、日本語、英語、中国語、韓国語など複数展開したい場合は、コスパはかなり悪いと思います。この場合は簡易対応の方が現実的だと思います。翻訳テキストが少ない場合のエントリープランのような選択肢もあると、もう少し使ってみようと思う人も増える気がします。
（そもそもですが、Framerは全体的に他のローコードツールと比べて安くはないと思います。円安もあるかもですが。。。）
最新の公式プライスは下記からご確認ください
☁️ 簡易対応の多言語サイト
気になるところ、にも書いたのですが、ページ数が少なく翻訳言語が１つ以上というシチュエーションが以前ありました。その際に採用した方法は、シンプルに別言語用のページを作るです。
例えば/engとlocalizationの時と同じようにサブディレクトリを切ります。なるべくパーツをコンポーネント化し、主言語と同じように各言語のテキストでレイアウト＆デザイン作業を行います。コンポーネント化することで、デザインの変更になるべく対応出来るようにしました。
大きなデメリット
この方法の大きなデメリットは、サイトの言語設定（lang=ja）が主言語のままになるということです。ですので、この方法では各言語向けのSEOなどは期待出来ません。FramerのCodeComponentなどで強制的に切り替えたとしても、SPAサイトと同じくSEO的には無意味になります。
🗒️ まとめ
今回の案件では公開後、更新作業を主にクライアントで行うこともあり、localization機能を採用しました。簡素なサイトであれば簡易版でも問題ないのですが、CMSも使用するのでオフィシャルに沿った作りにした方が良いと思ったからです。
記事内にも書いたのですが、英語＆ドイツ語など欧文フォントを使う言語切替であれば気にならない事も、日本語＆英語などの切り替えだと気になる部分が出てきます。ただし、そういった場面でもFramerであれば、少し力技にはなりますが、なんとかする方法があるのがFramerの長所だと感じています。さらにFramerはアップデートが高速なので、今回書いたことも早い時期に解決されているかもしれません。
ただ、これまで使用してきた経験から、金額とマルチ言語圏へのUX対応は期待出来ないかもしれません。。。
localizationを使用する機会は少ないと思うので、折角なので記事にしました。
機会があれば、これからもFramerの記事を書いていきたいと思います。
最後までお読み頂きありがとうございます！
ASTRSK(astrsk.co.jp)は、スタートアップ・新規事業開発に強いシステム開発会社です。サービスやシステムの構築を得意としており、開発をはじめデザインやUXにおいても優れた経験と技術を有しています。
Discussion