Framerで存在しないURLにアクセスされた際、デフォルトの英語エラー画面ではなく、自社ブランドに合わせたカスタム404ページを表示する設定手順です。離脱を防ぎ、サイトの信頼性を保つための3分でできる設定方法を解説します。
リンク切れでユーザーを逃していませんか？
リンク切れやURLの打ち間違いで、突然英語のエラー画面が表示されたら、訪問者はどう感じるでしょうか。せっかく獲得した見込み顧客が「このサイトは運営されていないのかも」と誤解し、そのままブラウザを閉じてしまうケースは少なくありません。Framerなら、わずか3分の作業でブランドの世界観を壊さないオリジナルの404ページを構築できます。実際に弊社でテストしたところ、エラー画面からトップページへの回帰率が大幅に向上しました。ユーザーを迷わせない親切な導線を、今すぐ構築しましょう。
Framerでカスタム404ページを作成する3ステップ
ステップ1：Pagesパネルから「New 404 Page」を追加する
まずはFramerのエディタ画面を開きます。左サイドバーにある「Pages」アイコンをクリックしてください。パネルが開いたら、右上にある「+」アイコンをクリックし、ドロップダウンメニューから「New 404 Page」を選択します。これでFramerが自動的に専用の404ページを生成し、プロジェクトに関連付けてくれます。
⚠️ 日本人特有の落とし穴：FramerのUIはすべて英語です。レイヤーを操作する「Layers」パネルと混同しやすいため、必ず「Pages」パネルが開いていることを確認してください。また、全角入力モードのままキーボードショートカットを押すと、予期しない挙動になることがあります。操作時は半角英数入力に切り替えておくのが安全です。
📸 [ここに：Framerの左サイドバーで「Pages」パネルを開き、「＋」ボタンから「New 404 Page」を選択する箇所を赤枠で囲んだスクリーンショット画像を挿入]
ステップ2：日本語テキストとデザインを調整する
自動生成された404ページには、デフォルトで英語のテキストが配置されています。これを「お探しのページは見つかりませんでした」といった日本語に書き換え、ブランドのトーン＆マナーに合わせたデザインに調整します。トップページへ戻るリンクボタンも忘れずに配置してください。
⚠️ 日本人特有の落とし穴：Framerのテキストエディタで日本語を直接入力する際、全角文字の変換確定のためにエンターキーを押すと、文字が確定されると同時に改行されてしまう現象がよく発生します。ストレスなく作業するために、テキストは事前にメモ帳などで作成し、コピー＆ペーストで流し込む方法を推奨します。
📸 [ここに：作成された404ページのデザインエディタ画面で、英語テキストを日本語テキストに書き換えている様子を赤枠で囲んだスクリーンショット画像を挿入]
ステップ3：サイトを公開して表示テストを行う
デザインが完成したら、いよいよ本番環境への反映です。画面右上にある「Publish」ボタンをクリックして、サイトを公開設定しましょう。公開が完了したら、実際に存在しない適当なURL（例：yourdomain.com/this-page-does-not-exist）をブラウザのアドレスバーに入力し、正しくカスタム404ページが表示されるか検証します。
⚠️ 日本人特有の落とし穴：ブラウザに古いキャッシュが残っていると、新しく設定した404ページではなく、Framerのデフォルトエラー画面が表示され続けることがあります。テストを行う際は、Google ChromeのシークレットウィンドウやSafariのプライベートブラウズ機能を使用し、キャッシュの影響を受けない環境で確認するのが確実です。
📸 [ここに：ブラウザのアドレスバーに存在しないURLを入力し、作成したカスタム404ページが実際に表示されているテスト画面のスクリーンショット画像を挿入]
補足：公式の最新情報
Framerの仕様は頻繁に更新されるため、最新の英語公式ヘルプも併せて参照することをおすすめします。
404ページの設定を怠るリスクと次のステップ
せっかくSNSや広告からアクセスしてくれたユーザーを、不親切なエラー画面ひとつで逃してしまうのは非常にもったいない選択です。設定ミスによる機会損失を防ぐためにも、公開前のテストは必ず実施してください。もし「Framerのデザインは得意だけど、SEO対策やドメイン設定に不安がある」「プロの手を借りて最速で成果を出したい」という場合は、弊社の「高品質でSEOに強いホームページを最速で始める」サービスにご相談ください。専門スタッフが、集客に強いサイト構築をトータルでサポートします。
