完成例：日本語の見出しと説明文がある1ページ
ツールインフォの制作作業として、Framerの新規プロジェクトに日本語の見出し、説明文、記事へ戻るリンクを配置しました。テンプレートやコードは使わず、通常の文字編集で作成しています。検証日は2026年9月8日です。
操作はAIアシスタントがブラウザー上で行い、実際のFramer画面を記録しました。編集者本人が手作業したレビューや、AI生成の品質比較ではありません。ワークスペースには「Out of credits」（AIの利用枠が残っていない状態）と表示され、AI生成は試していません。追加の有料契約も行っていません。
完成例は、文字の表示を試す最小限のページです。問い合わせフォーム、CMS（お知らせなどを管理する機能）、独自ドメイン、翻訳、実機スマートフォンでの表示、検索順位、表示速度は今回の検証に含みません。
必要なお金：この試作では追加購入はしていません
今回の文字入力とFramerのURLでの公開では、追加購入の操作はありませんでした。公開ページにはFramerのバナーが表示されています。
仕事用に自分専用のURL（独自ドメイン）を使う場合は、有料のサイトプランとドメインの費用・条件を確認します。まずは編集が自分に合うか試してから、契約を検討しましょう。
公式情報：Framer公式料金 ↗
自分のサイトに必要な機能と、公開の費用を確認しましょう。
Framerのプランと機能を確認する作り方1：文字を置き、日本語の書体を選ぶ
Projects（プロジェクト一覧）でNew Project（新規作成）を選び、空のHomeページにText（文字）を置きました。見出しは「小さなチームの仕事を、もっと軽く。」です。本文には長めの日本語を入れ、最後に記事へ戻るリンクを置いています。
テキストを選択し、右側のStyle（見た目の設定）からFont（書体）を開き、「Noto Sans JP」で検索して選択しました。見出しはBold（太字）、本文はRegular（標準）に設定。AccessibilityのTag（文章の役割）は、見出しをh1、本文をpにしています。
Desktopはパソコン用の画面です。今回の横幅は1200px（ピクセル）。見出しのSize（文字サイズ）は48px、Line（行の高さ）は文字サイズの1.2倍（1.2em）、本文は20px・1.8emです。テキストの幅は900pxから始めました。
作り方2：スマホ用の画面を追加する
Desktopの横にある＋からPhone 390（横幅390pxのスマホ用画面）を追加しました。この時点では、Desktopの幅900px・左位置120pxを引き継いだ文章が、Phoneの右側ではみ出しました。
今回の原因は、日本語が入力できないことではなく、狭い画面に対してテキストの固定幅と位置が大きすぎたことです。Phoneを追加した後も、各テキストの設定を確認する必要がありました。
作り方3：スマホの余白と文字サイズを直す
Layers（配置した文字などの一覧）でPhoneの中にある見出し・本文・リンクをそれぞれ選び、Position（位置）のL（左）とR（右）を24pxにしました。Desktop側のレイヤーと取り違えないようにします。390px幅では、左右24pxを除いたテキスト幅が342pxになりました。
見出しは32px・1.5em、本文とリンクは18px・1.8emに変更。Height（高さ）はFit Content（文章量に合わせる）にして、折り返した行の高さを確保しました。幅を入力した後、LとRの両方が24pxで残っているかを再確認しています。
| 設定 | Desktop | Phone |
|---|---|---|
| 検証幅 | 1200px | 390px／320px |
| 左右の位置 | 左120px・幅900px | 左24px・右24px |
| 見出し | 48px／行高1.2em／Bold | 32px／行高1.5em／Bold |
| 本文 | 20px／行高1.8em／Regular | 18px／行高1.8em／Regular |
| 文字の高さ | Fit Content | Fit Content |
作り方4：小さな画面でも、最後まで読めるか確認する
Preview（公開前の表示確認）上部のW（横幅）を320に変更して確認しました。左右24pxを残した幅に文章が折り返され、今回の見出し・本文・リンクは全文が表示されました。
ただし、見出しは「仕事」などの語の途中で折り返されました。横にはみ出さなくても、読みやすい区切りになるとは限りません。実際のサービスページでは、原稿を短くするか、幅ごとの改行位置をさらに調整する余地があります。
このサンプルは位置を数値指定した構成です。文章を増やしたときに後続の要素が自動で下がる構成は検証していません。長文や更新の多い本番ページに、そのまま流用できる完成テンプレートではありません。
応用例：サービス内容と料金を載せる
文字表示のテストをもとに、サービス紹介の原稿を載せた別ページを作りました。架空の資料づくりサービスを題材に、できること、料金例と含まれる作業、相談から完成までの流れ、よくある質問を掲載しています。
料金の15,000円は原稿の書き方を示す架空の例で、実際の見積もりや相場ではありません。申し込みを受け付けるページではなく、問い合わせ先をどこに置くかを説明する構成サンプルです。
スマホ側は文字を縦に並べるStackという配置にし、左右に24pxの余白を設けました。幅390pxと320pxのプレビューで折り返しを確認しています。デザインの完成テンプレートではなく、自分の事業の原稿を考えるための一例としてご覧ください。
どんな人に向く？本番に使う前の確認
文字や配置を自分で少しずつ直しながら、まず1ページを試したい人には、この方法が出発点になります。一方、画面の調整をせず全自動で完成させたい人には、今回の作り方は向きません。
日本語の小さなページを試したい人には、まず同じように見出し・本文・リンクだけで検証する方法が使えます。AI生成、フォーム受信、CMS（お知らせなどを管理する機能）、独自ドメインが必須なら、それぞれを別の確認項目にしましょう。
- Fontで日本語フォントを選べるか確認する。
- Phone内の各テキストを選び、L・Rと幅を確認する。
- 文字の高さはFit Contentにし、全文を読む。
- 390pxだけでなく320pxでも、欠け・重なり・改行位置を見る。
- 公開後に実機でも確認してから、本番の利用を判断する。
公式情報：Framer公式料金 ↗
自分の条件に合うか、公式で確認。
必要な機能と請求条件を確認してから、試用・契約を判断してください。
Framerのプランと機能を確認する 現在のリンクは、報酬が発生しない通常の公式リンクです。参照した公式情報
確認日：2026年9月8日。価格・提供範囲は変更されることがあります。