静的ページテンプレートの活用方法

Webflowの静的ページテンプレートが便利だったので、具体的な活用方法をご紹介いたします。

静的ページテンプレートの作成方法については以下の記事をご参照ください。

静的ページテンプレートを作成する方法

静的ページテンプレートとは？

「静的ページのテンプレート」はその名の通り、静的ページをテンプレート化するWebflowの機能です。を作成することができます。

テンプレートを使用することで、サイト上で一貫したスタイルと構造を作成することができます。

静的ページテンプレートとCMSの使い分け

「サイト上で一貫したスタイルと構造を作成」と聞くと、CMSを思い浮かべる方もいるかもしれませんが、CMSと静的ページテンプレートにはそれぞれ得意な使いどころがあります。

CMSほどがっつり構造化できない、または構造的な変更が頻繁にある場合には、静的ページテンプレートの方が適しています。

例えば、以下のようなページです。

• ランディングページ（LP）
• サービスページ
• 料金表ページ など

一方で以下のようにデータベースを活用して情報を構造化しやすいコンテンツは、CMSを使うと良いでしょう。

• ブログやニュース
• 製品一覧ページ
• FAQページ など

‍

静的ページテンプレート使ってみる

実際に弊社の料金表を静的ページテンプレート化してみます。

テンプレートの作成

画面左ペインから、Create page templateをクリックします。

テンプレートの名前と説明を入力します。

サイトプランを契約するとテンプレートへのアクセス制御を行うことが出来ます。

今回はアクセス制限なし(Public)で設定します。

SEOの設定もテンプレートに設定できます。共通して設定するSEO設定や例文などがあればここで設定すると便利そうです。

OGの設定も可能です。

サイトの検索結果に表示される情報も設定できるようです。

カスタムコードもテンプレート化できるようです。共通的に入れるプログラムがある場合に便利ですね。

Createをクリックすると画面左ペインのStatic page templatesに追加されました。

テンプレートデザインの作成

画面左ペインのStatic page templatesから先ほど作成したテンプレートをクリックすると、テンプレートの編集画面に遷移します。

ここは通常のページ編集の画面と同じUIになっていますね。

通常のページ編集画面と同様にCtrl +Cで要素をコピーすることが出来ます。

今回は弊社の料金表ページの要素をコピーしました。

料金表に1行テスト用の行を追加してみました。通常のページと同じように編集することが出来ました。

テンプレートから新しいページを作成

先ほど作成したテンプレートを使って新しいページを作成していきます。

いつもと同じようにページの作成を行います。

ページ作成画面で先ほど作成したテンプレートを選択します。

その他の設定はいつも通り任意で設定し、Createをクリックすると先ほど作成したテンプレートのデザインでページが作成されます。

あとはいつもと同じようにページの編集が行えますので、自由に修正することが出来ます。

CMSと違い構造を変更したり、特定の箇所だけデザインを変更したりと自由な変更を行えることが静的ページテンプレートの良いところですね。

‍

以上、Webflowの静的ページテンプレート機能をご紹介しました。
静的ページテンプレートを活用してWebflowをうまく運用していただけたら嬉しいです

‍