Framerでメール、電話、SMSリンクを追加する方法

ウェブサイトでメールアドレスや電話番号をクリックした際にすぐに開くように設定しておくと、ユーザーが連絡先により簡単にアクセスできます。Framerではわずか数ステップでそのようなリンクを簡単に追加できるので、このガイドにしっかりと従ってください。

メールリンクの作成

1. リンクを挿入する要素を選んでください。

2. 右側のプロパティパネルでLinkの隣にある+アイコンをクリックしてください。

3. Link Toフィールドにmailto:メールアドレスの形式で入力し、Enterを押してください。

電話番号リンクの作成

1. リンクを挿入する要素を選んでください。

2. 右側のプロパティパネルでLinkの隣にある+アイコンをクリックしてください。

3. Link Toフィールドにtel:電話番号の形式で入力し、Enterを押してください。

SMSリンクの作成

1. リンクを挿入する要素を選んでください。

2. 右側のプロパティパネルでLinkの隣にある+アイコンをクリックしてください。

3. Link Toフィールドにsms:電話番号の形式で入力し、Enterを押してください。

注意: メール/電話/SMSリンクはPreviewモードでは正常に動作しない可能性があります。正確な動作を確認するには、サイトをPublishした後に実際の環境でテストしてください。

よくある質問(FAQ)

Q. リンクを画像やボタンにも適用できますか？

• はい。FramerのLinkプロパティは、テキストを含むすべてのレイヤー（Frame、画像、ボタンなど）に適用可能です。

Q. Previewモードで正常に動作しないのはなぜですか？

• Previewは実際のブラウザ環境ではないためです。メール/電話アプリと連携する動作は、Publish後に実際のデバイスでテストする必要があります。

Q. クリック可能なリンクのスタイル（下線、色など）をカスタマイズできますか？

• はい。Framerはテキストレイヤーそのものにスタイルを適用する方式のため、基本スタイルが強制されません。色/ホバー効果/アニメーションなど、基本テキストと同様にすべて自由にカスタマイズできます。

この記事はFramer公式ブログの『How do I add clickable email & phone number links』を翻訳・アレンジしたコンテンツです。