Xwriteのデザイン選び｜パターン・共通パーツと原稿の準備

本記事はアフィリエイト広告を含みます。

Xwriteのデザイン選びでは、サイト全体の見た目と、ページに置く部品を分けると作業が進みます。先に来店・問い合わせ・記事閲覧のどれへ案内するかを決め、その目的に近い完成例を選びましょう。

デザイン選びで迷ったら、全体の色や見出し、ページ内の配置、複数ページで使う共通案内を分けて考えます。この記事では、店舗・ブログの完成例を自分の原稿へ当てはめ、公開後に直す場所まで決める方法を説明します。

選んだ例の写真を、自分の長い見出しや手元の写真へ替えた状態を考えます。枠を埋める情報が足りなければ、その区画は減らして構いません。説明に必要な部分だけを残す方が、公開までに用意する素材も明確になります。

この選び方は、2026年9月15日に確認した公式パターンライブラリを基にしています。完成例の掲載情報を使った検討方法で、自分のサイトへコピーして操作したレビューではありません。

デザインを見る前に「読者の次の行動」を決める

最初に「このページを読み終えたら、読者に何をしてほしいか」を一文で書きます。「近くの人に来店してほしい」なら、メニューと価格に続けてアクセス案内へ進める構成が候補です。

目的を決めないまま完成例を丸ごと使うと、不要な実績欄や料金表まで埋めることになります。たとえば予約を受けないカフェなら、予約区画は外し、営業時間と地図への導線を残すだけでも目的に合います。

たとえば、個人ブログなら、サイトの説明、最初に読む記事、カテゴリ、新着記事が基本の候補になります。予約を受ける店舗なら、営業時間、場所、予約方法の方が先です。

個人ブログと事業サイトで必要な原稿は違う

公式一覧には、ファッションメディア、ライフスタイルマガジン、カフェ、会計・税理士事務所、ポートフォリオなどの例があります。名称が一致しなくても、情報の並べ方が近ければ候補になります。

表は制作準備の例です。テーマの導入だけで予約システムや問い合わせ管理まで完成するわけではありません。外部サービスやプラグインが必要な機能は別に確認します。

スキン・ページのパターン・個別設定は分けて考える

サイト全体の色や見出しを整える設定と、ページ内のブロックの配置は役割が異なります。まず全体の見た目を決め、その後に完成例の必要な区画を原稿へ当てはめると、同じ場所を何度も直さずに済みます。

サイドバーやアイキャッチなどには、カスタマイザーの全体設定より記事投稿画面の個別設定が優先される項目があります。「このページだけ違う」ときは、テーマを入れ直す前に個別設定を見ます。公式：記事投稿画面の設定

XwritePR

作りたいページに合うXwriteのデザインを選ぶ

原稿と写真を用意でき、Xwriteで編集する方針が決まったら、使いたい機能と契約方式を選べます。公開デモの閲覧は無料ですが、テーマを導入して編集するには有料契約が必要です。

公式サイトで料金・利用条件を確認

Xwriteのデザイン例と契約条件を見る

利用前に対象サーバーのテーマ特典がある方は、単体購入を進める前に利用条件を確認しましょう。

完成例から文章と画像の準備を逆算する

デモを一つ選び、各区画に「見出し・説明・画像・リンク先」を当てはめます。空欄が残る区画は、素材を用意するか、公開時には外すかを決めます。この作業で制作に必要な量が分かります。

事業サイトなら問い合わせ前に必要な実績や料金情報、個人ブログなら記事へ進む分類が優先されます。デモを選ぶ前にこの入口を決めると、見栄えだけのための不要な画像や装飾を増やさずに済みます。

ボタンは「詳しくはこちら」だけで済ませず、「メニューと価格を見る」「アクセスを確認する」のように行き先を書きます。読者が押した後を想像できる言葉にすると、案内の役割が明確です。

カフェのパターンでは、料理写真のほかに店名、営業時間、定休日、住所、メニューの内容が必要です。ポートフォリオなら、公開できる実績と自分の担当範囲をそろえましょう。

デモの文字数に合わせるために、料金の条件や営業時間を削る必要はありません。見出しを短くして本文へ分ける、横並びを縦へ変える、不要な枠を減らすなど、情報が読める配置に直します。

画像も、写真の中心に重要なものがあるか、横長・縦長の切り抜きで困らないかを見ます。デモ素材をそのまま商用利用できると決めつけず、自分で利用条件を確認した素材を用意してください。

公式はパターンをコピーし、WordPressの編集画面へ貼り付ける方法を案内しています。完成例を閲覧することと、Xwriteの利用環境で編集することは分けます。カフェパターンの案内

カフェの完成例を自分の店舗へ替える場合

公式のカフェパターンを候補にするなら、最初の画面へ置く言葉を「店名・エリア・どんな店か」の一組で用意します。次にメニューと価格、最後に営業時間・住所・来店方法を並べると、来店を判断する順番を作れます。

これは原稿の組み立て例で、掲載順がテーマで固定されているという意味ではありません。

予約を受け付けていない店なら、予約ボタンはアクセス案内へ変更します。ボタンのラベルだけでなくリンク先も差し替え、お客様が店舗までの経路へ進めるかを一度通して確かめましょう。

料理写真、メニュー、営業時間を一組用意してからデモと照合すると、「今の素材で公開できる枠」と「公開後の更新が必要な枠」を具体的に選べます。

スマホで読む順番と操作を確認する

スマホでは、写真・説明・ボタンを上から順に読んで意味が通るかを確認します。ボタンの直前に、その行動に必要な価格や条件があるかも見てください。PCで隣にある情報が、スマホでは離れる場合があります。

公開デモを見るときは、次の動きを自分のサイトの目的に合わせて試します。

開閉するメニューや補足は、開いた後に閉じられるか、本文を隠さないかも見ます。装飾が動くことより、読者が迷わず進めることを優先してください。

購入前に無料で見られるのは公開デモの構成と表示です。自分の原稿を入れて編集する試用とは異なります。制作時はまず下書き1ページに当てはめ、PCとスマホで文章の折返しとボタンの順番を整えます。

同じ案内を使うなら、同期する範囲を先に決める

営業時間のように全ページで同じ内容を保つ案内は、元を変更すると挿入先も変わる同期パターンが候補です。店舗ごとに違う紹介文は、挿入先を個別に編集できる非同期パターンが向きます。公式：同期・非同期パターン

Xwriteの共通パーツも、複数ページで同じ案内を管理する方法です。共通パーツブロックやショートコードで呼び出す場合と、非同期パターンとして挿入する場合では、後の変更が反映される範囲が違います。案内を一つだけ試作し、別の下書きへ挿入して変更範囲をつかむと、公開後の一括変更を誤りにくくなります。公式：共通パーツの呼び出し方

選んだデザインを無理なく更新できるか

公開後に変わる情報には、更新する人とタイミングを決めます。営業時間や料金は変更時に直し、実績は追加できたときに掲載する、と分けると無理なく続けられます。

少人数で運営する場合は、更新頻度が高い情報をまとめて管理し、変化しない説明と分けると負担を抑えられます。載せる情報が少ないうちは、完成例のすべての枠を使わなくても構いません。

デザイン候補が決まったら、Xwriteの機能と向き不向きで必要な編集機能を確認し、料金と無料特典で購入の要否を判断します。

• Xwriteの機能と向き不向き
• 料金と無料特典

まず完成例を一つ選び、最初の画面に入れる見出し・写真・リンク先を用意しましょう。素材がそろったら、一括で変える情報とページごとに変える情報を分けます。この順で決めれば、見た目と更新のしやすさを同時に選べます。