ページ構造をテンプレート化して、効率的にページを作成する方法
![ページ構造をテンプレート化して、効率的にページを作成する方法](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/668dd744e2c29bf1e9bc613f_Blog-Thumbnail-20240710.avif)
Webflowの最新アップデートにより、ページテンプレート機能が追加されました。この機能を使うことで、ブランドの一貫性を保ちながら、ページ作成を大幅に効率化できます。この記事では、ページテンプレートの使い方とそのメリットについて解説します。
これまでのページ作成の課題
Webflowではこれまでウェブサイト上の統一感を出すために、各ページで同じ構造とスタイルを適用する必要がありました。そのため、新しいページを作成する際には既存のページを複製し、不要な要素を削除してから、新たに構築していました。この作業は、時間と労力を要するだけでなく、ミスが発生するリスクも高まります。しかし、Webflowのページのテンプレート化に関するアップデートが行われたことにより、そのようなリスク回避をすることが可能となりました。
このアップデートの詳細については以下のページをご覧ください(英語表記のみ)
https://webflow.com/updates/page-templates
ページテンプレートの活用で作業効率アップ
ページテンプレートは、あらかじめ作成したページ構造とスタイルを保存したものです。新しいページを作成する時に、このテンプレートを適用すれば、一から構造を構築する必要がなくなり、大幅な時間短縮が可能です。ページテンプレートは全てのサイトプランで利用できるので、デザイナーの方はぜひ活用してみてください。
ページテンプレートの使い方
ページテンプレートを作成するには、以下の手順に従います。
1. テンプレートの作成
![Webflow テンプレートの作成画面](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a1728e51dbbb3e862766_AD_4nXexCKG6IuzO468nV-MA7LFNUXBl0gkMVyAvwt9S312KKEcGkH2v9xb1zf-NTmIWmHgzlb8YJETmdeYKS3WmwQsMFuktZlDosqEnwEtP-WAQYGU3qNEtiSMu37MiYmK8NwYd7i9tW9ccxERg3i4FPTfvmH2x.avif)
左パネルの「Pages」から「Create New Page」をクリックし、2段目の項目にある「Create Static Page Templete」を選択します。
2. テンプレートネームの作成
![Webflow テンプレートネームの作成](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a172d55b7a32a84ef9e8_AD_4nXcuzOG9epWmzVBJA-F02uGi3XLRF0A2V4GWKxnrXbQGJPCzigWeK7GYsLkgVBmKcXAPNyOPnwarRUgs8pA25ugf84gMPumQuwjdansVy0-PT_5bB_BC729VH5t2mrCcA8RY4b4RiuZjHYuIXzlC7czz2XJx.avif)
テンプレートの名前とすぐ下にある「Discription」にテンプレートの使い道などの説明文を入力しましょう。入力が終わったら「Create」をクリックします。
※今回はテンプレートネームを「Fixed Page Template」とします。
3. 構造の構築
![Webflow レイアウト画面](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a172f16060687aa53c70_AD_4nXcK6w9qeOOpdX3VMPECAjuBdZuigj1HVmBedoRvTh6Z2feygGahqV0lcEK7hB5EEzDBtJmFOVJeaHYVEcK_xTsGNCv0cHe-4SuYjsg7F4zGMALsO4Eaw_W7N9hTuSJOSFKEIvkOph4331cZdi7NU00tItER.avif)
テンプレートネームを作成し、「Create」をクリックすると空のページが作成されます。
![Webflow 空ページ](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a172b175e7ef73d2a9ee_AD_4nXeufzQqEolJ1sHjTm9MAK57-S9wOhuXkG-CsIEek_9ok1AQyb1Csyr9zWNVncoNH1IghaQgq1AptBe-EVsa2-QmPXiDrCMX9oB-6MPWD23_BGu20W1QOIawJH63f9-cSzaRS9KOdqazB718ESWgwTa3V54.avif)
まずbodyの中に、ページの構造となる要素を配置していきましょう。
![Webflow ページの構造となる要素](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a173f105ae802d0869d1_AD_4nXc9nVo_ER6r03ptAwY1ibRyLxsP_XUE7dl55xc7UWrZTLQy4ppNl8awC9bwBOxA131jMs45ugSdCHq1aWtbHg3KK-Kjz7iZTl3n8Cpx-Yv64xyh6uQfrYKaGhaRe199BgDjy8bVptOJdwutAcyVm7Ew_zk-.avif)
page-wrapperの中にコンポーネント化しているそれぞれのパーツを配置します。画像上の緑色のコンポーネントのように共通のパーツは事前にコンポーネント化しておくと、テンプレートの作成がよりスムーズになるのでおすすめです。
![Webflow構造要素 page-wrapper Navbar Footer](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a17381d39e08b3cca267_AD_4nXebj9fcQ_QDAWT8W-DIVgcC9T2i6MjFZ95Gh50D_agRQvvQStalUaD4GU1PHevstHc5xvSvOD1Iaf_rpFbULsKe9AvNWDrJhaSwzdEuPzoxpUtiAwWjlPuI-mU8zQxWCprkapptymjIfkE9fjMjUGCdTCsL.avif)
画像のようにpage-wrapperやNavbar、Footerなどを配置すればテンプレートの構造は完成となります。
ページテンプレートを使ったページ作成について
作成したページテンプレートをもとに、以下の手順で新しいページを作成します。
1. 新しいページの作成
![Webflow 新しいページの作成](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a1728ceff74e2b3a4727_AD_4nXcFDymLSN6a98VGyQmdwEncVlPzNRHt5PQuyXSOKCOACV2aGkrrPmDCvked4jbbI324xCODrUe_J8EXyWJ_s6KE8cOTKj5hkIcoqB_Adtyt8SJfQ6pBAR4Y4F3Bt5COWNiB2XAx6oLd9brtgMnO4Up0gzw.avif)
左パネルの「Pages」から「Create New Page」をクリックします。
2. テンプレートの選択
![Webflow テンプレートの選択](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a1723e9d65740dc3558d_AD_4nXf23e-Jy8g6bXLsF0jK6jzL81AE24gI5awmu4N8WOiUluoCysDKI9Pg6xJoUz0EbmgVU2BOhnVMCttVvDbjsI1daAppzZ5sgwW3j3lSl7uomdoMUIyyuNPpq2Yff3AiOY5xRrDu-Udtq8c3Iji7tFb0ARXn.avif)
ページネームを作成し、その下にあるテンプレートの項目にあるセレクトボックスをクリックすると、先ほど作成したページテンプレートである「Fixed Page Template」が表示されるので、それを選択する。
※今回のページネームは「Page sample」とします。
このようにページテンプレートが表示されます↓
![Webflow ページテンプレート画面](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a1743f7fc4a737abdc9e_AD_4nXcHgGqE1A5JXT9k630BnbPZUmoIALotrqd18xTZeCVDc6DVXj6NdXz33WiW8jcYXAeEuW-6dlBokcxybIyETCOohpcAgaq7qtUn-5N1ebXGruHC-xveDjlsWvvGTPiu3j0FHZK-oyeT0Vo5cjQzBDO-GzWf.avif)
「Page sample」のページが作成され、構造も先ほど作成したページテンプレートになっています。
3. ページの作成
![Webflow 作成したページテンプレートの追加](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a17253b782ca2f322bfe_AD_4nXdcX6woXGOIypYJs6_kn2_8ZB2GgqCmYccmUf10mGWTBPACYhBHxCL19OkPip7ziKy42TlQ5qAqTI3DZG-6QwEN22yCdGjU1Yo5tR8iOgP81ARJXg9f70OzgHmAo2O3rQKZdaomCVW2AoFaUs2SAMrAp559.avif)
「Create」をクリックすると、先ほど作成したページテンプレートの構造がそのまま反映されます。ページテンプレートの編集をしたい場合は、左パネルの「Pages」から「StaticPageTemplate」の中のページテンプレートをクリックすると、編集が可能になります。
ただし、この画面でテンプレートを編集しても、その前に作成していたページテンプレート(Page sample)の構造には反映されないので注意が必要です。
SEO設定もテンプレート化可能
![Webflow SEO設定のテンプレート化](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a173da2440cb038c8032_AD_4nXduXJU10YCqH1wcThXhel_uW0ZTxJxDdjA5NkMXkKOnOGeWxWFmfUvmnvIqzw7zvRB5Edf9Ye7e7SWzGlfqfn32R6dkFO6o_98IiijE3H2H02S5IdX2wRvYYxYqkJMZQhd3TulHYx7PkbUmmS1vYJ-dUq6F.avif)
![Webflow Graphic Image URLの確認画面](https://cdn.prod.website-files.com/65dec6ef42b2729fc9d06211/6687a172acc462b061ba1830_AD_4nXeULqLmCYSWRmzPZiv5Dsg0y5weW3lo0L7PFLrWybMyEmXcQSXJGaObiw4gHFkssliSRTY1dPYl75XFCmnsgbX5lcGuCZUmnP5jVdmXvE4WahfzCgcSNjnVQeOcKCwLg-B1tJ450u6-08oeZd8OuD97epbD.avif)
ページテンプレートでは、SEO設定もテンプレート化することが可能です。例えば「Open Graphic Image URL」を設定した状態で新規ページを作成します。
そして、テンプレートの項目であらかじめ作成しておいたページテンプレートに設定すれば、「Open Graphic Image URL」に事前に設定しておいたSEOの情報が反映されるようになります。
まとめ
ページテンプレート機能で作業時間を大幅に短縮
Webflowが最新のアップデートでページテンプレート機能を追加しました。このページテンプレートの使用で、ユーザーはブランドの一貫性を維持しつつ、ページ作成を大幅に効率化することができます。SEOの情報も反映することができるので、再度ゼロから作成する必要はありません。Webflowの技術、そして知識が浅いユーザーに対しても、より簡単にページ作成を実現できるため、積極的に活用しましょう。
もし、ページテンプレートを作成する上で不明点が出てきた場合などは、Booos7までお問い合わせください。