目次
目次
このドキュメントは、Framerを学ぶ日本のユーザーが日本語の資料の不足により経験する困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framerを使用する皆様に少しでも役立てば幸いです。
テンプレートの開き方と探し方
Framer Marketplaceは、ウェブプロジェクトを始めるための無料/有料テンプレートを提供しています。料金別のテンプレートの使い方は以下を参考にしてください。
無料テンプレート: 該当プラグインの
Use for Freeボタンを押すと、すぐにワークスペースに追加されます。有料テンプレート: 購入後、メールで
Remixリンクが送信され、このリンクをクリックすると、プロジェクトが自動的にワークスペースに複製されます。
ダッシュボードにプロジェクトが表示されない場合
サイトをリフレッシュしてみる
ブラウザを変更したり新しいアカウントの場合、リンクを再度クリックしてみる
レイアウトを理解する
編集を始める前に、テンプレート構造を確認するのが良いです。
左側のパネルで全てのページとセクションの構造を見られます。
Assetsパネルでは、グローバルなカラーやテキストスタイルを確認できます。最初にブランドカラーやフォントを設定しておくと、その後にサイト全体が自動的に更新され、作業効率が向上します。テンプレートにCMSが含まれていれば、ブログ記事や商品リストのような繰り返されるコンテンツを管理できます。どのセクションがCMSデータとリンクしているかも確認する必要があります。
コンテンツのカスタマイズ
テンプレートに慣れてきたら、次は自分のものとしてカスタマイズする段階です。ほとんどのユーザーはテキストと画像の更新からカスタマイズを始めます。
テキストの修正: ダブルクリック後、希望のテキストに置き換えることができ、フォント/サイズ/配置は右のプロパティパネルで調整可能です。
画像の置き換え: 画像をダブルクリックして
Swap機能を試してください。カラーの更新: グローバルカラーを修正するとサイト全体に反映されます。
ページの削除: 左側のパネルのページ名を右クリック後、
Deleteで削除できます。ただし、削除する際にはナビゲーションメニューも必ず一緒に修正する必要があります。
Note: 一部のテンプレートにはLayout Templatesが含まれています。ナビゲーション/フッター/バナーのような共通要素を一度修正すると、全ページに適用されるので、管理が非常に楽になります。
コンポーネントの編集
コンポーネントは、プロジェクトタイルやフッター、FAQセクションなど、サイト全体で使用される再利用可能な要素です。Framerテンプレートは、全体的なレイアウトの一貫性を維持するためにコンポーネントを使用しています。
マスターコンポーネントの編集: マスターコンポーネントのロゴや色を変更すると、そのコンポーネントが複製されているすべてのページに同時に反映されます。
単一インスタンスの編集: 一部のコンポーネントは
Variableで詳細属性を異なるように調整できます。例えば、FAQアイテムのタイトルだけを変えたり、ボタンのカラーだけを変更する方法などで使用できます。
CMSを活用する
ブログ記事やポートフォリオプロジェクトなど、繰り返されるコンテンツを管理する必要があるページにはCMSが含まれています。各ページを毎回編集する代わりに、これをCMSに一度登録しておくと、リンクされたすべてのページが自動的に更新され管理されます。
CMSを初めて扱う場合はCMSアカデミーチュートリアルを参考にすると役立つでしょう。
連絡フォームの設定
多くのテンプレートには、連絡やニュースレター購読を助ける問い合わせフォーム(Contact Form)が含まれています。これらのフォームはデフォルトでは動作せず、送信先を指定する必要があります。
UIでFormを挿入するレイヤーを選択する
右のプロパティパネルで
Send toフィールドにメールアドレスやエンドポイントを入力する。
このプロセスを経ることで、送信されたメッセージが実際に自分のメールボックスに届けられるようになります。
サイトの設定
ページタイトル、メタ説明、ソーシャルメディアプレビューでサイトが表示される方法を詳細に調整するには、サイト設定部分を活用してください。
右上の角にあるSettingsをクリックして修正できます。
サイトの視認性を高めるために、SEOフィールドを埋めて検索露出を改善してみてください。
Google Analyticsのようなサードパーティツールを使用する場合、指定されたフィールドにトラッキングIDを入力してください。
サイトのパブリッシュ
デザインとコンテンツが完成したら、“Publish”を押してサイトを公開することができます。詳しくはユーザー指定ドメイン接続ガイドを参照してください。
無料サブドメイン: Framerが提供するサブドメインでサイトをテストまたは共有できます。
カスタムドメインの接続:
Settings → Domainsに移動し、ユーザー指定ドメイン接続ステップを確認してください。Framerプランに応じてDNSレコードを更新するか、レジストラがサポートする場合は自動接続オプションを使用する必要があるかもしれません。
追加情報
追加情報が必要な場合は、以下の資料を参照してご活用ください。また、テンプレート関連の質問はcreators@framer.comへメールでお問い合わせください。
Framer Academy: レイアウト、インタラクションなどに関するチュートリアル情報を提供
Framer Support: 公式サポートチームに問い合わせて進捗を共有
Framer Experts: 専門家を雇ってカスタムサポートを受ける
この記事は、Framer公式ブログの‘Just bought a template, what’s next?’を翻訳・アレンジしたコンテンツです。
