キッチンやインテリアのサイトを作るとき、意外に難しいのが「写真を見てもらった後」の設計です。
施工写真は見てもらえる。けれど、サービスの内容まで読まれない。問い合わせページにも進んでもらえない。そんなときは、写真の枚数を増やす前に、ページの流れを見直す余地があります。
どのような依頼に対応しているのか。掲載されている事例では、何を工夫したのか。自分の家について相談するには、何を用意すればよいのか。訪問者が知りたいことを順番に説明できると、サイトは仕事の相談につながる窓口になります。
Cocinaは、キッチンやインテリア関連の事業向けに検討できるWordPressテーマです。開発元は、キッチンの設計やリフォームなどを想定したテーマとして紹介しています。
導入を検討している方は、この記事で紹介する確認項目と、GPLWPPassに掲載しているCocinaのテーマ情報を見比べながら、自社のサイトに必要な構成を整理してみてください。写真の雰囲気だけで決めるより、必要なページや更新作業を具体的にイメージできます。
ここではGPLWPPassの編集視点から、施工事例を中心としたサイトの作り方と、導入前に確認したい点を解説します。公開情報を基にした評価であり、実機での速度測定や長期運用の結果ではありません。
最初の準備：掲載する施工事例を3件選ぶ
テーマをインストールする前に、サイトの中心となる施工事例を選びましょう。
完成写真がきれいな案件だけを集めるのではなく、受けたい仕事の幅が伝わる組み合わせにすると、ページを構成しやすくなります。
たとえば、次のような選び方です。
- 限られた面積で収納を改善したキッチン
- 家族の使い方に合わせて動線を変更したキッチン
- 素材や造作家具にこだわったインテリア
それぞれについて、依頼内容、担当した範囲、設計上の工夫を書き出します。公開する情報や写真は、必要に応じて施主の了承も確認しておきます。
この準備をしておくと、デモの空欄を埋めるために文章を考える必要がなくなります。伝えるべき情報を先に用意し、それに合うレイアウトを選べるようになります。
手順1：テスト環境にテーマを導入する
既存サイトを変更する場合は、バックアップを取得し、ステージング環境で作業を進めます。
WordPress管理画面で、次の順に開きます。
「外観」→「テーマ」→「新規追加」→「テーマのアップロード」
インストール用のZIPファイルを選び、アップロード後に有効化します。
ダウンロードしたパッケージに説明書や関連ファイルが含まれている場合は、その中にあるインストール用テーマを確認してください。外側のパッケージをそのままアップロードすると、エラーになる場合があります。
テーマを有効化したら、同梱の説明書に沿って必要な設定を行います。プラグインの導入が案内される場合も、必須か任意か、何のために使うものかを確認してから進めましょう。
手順2：デモを使ってページ構成を把握する
Cocinaの公開説明には、デモインポートやレイアウトのカスタマイズが案内されています。具体的な操作は、使用するバージョンのドキュメントで確認してください。
デモを取り込む目的は、完成形をそのままコピーすることではありません。どの部分に情報を配置できるかを理解し、制作の土台を用意することです。
読み込み後は、次の順番で整理すると作業しやすくなります。
- 会社名と連絡先を置き換える。
- 使用するページを決める。
- 不要なメニューを削除する。
- 写真と本文を差し替える。
- 色、余白、文字サイズを調整する。
デモに含まれる画像については、利用条件を確認し、自社の写真に置き換える前提で準備しておくと安心です。
また、仮の口コミや実績数は、そのまま公開しないようにします。実際の情報がない項目は、無理に残す必要はありません。
手順3：施工事例を「写真と説明のセット」にする
施工事例ページでは、訪問者が写真を見ながら工事の内容を理解できる構成を目指します。
冒頭で依頼の背景を説明する
最初に、何に困っていたのかを短く記載します。
たとえば、実際の案件に合っているなら、「収納が少なく、調理台に物が集まってしまうことがご相談のきっかけでした」と説明できます。
この一文があるだけで、その後の写真を見る視点が変わります。訪問者は、単に仕上がりを眺めるだけでなく、課題がどう解決されたかを確認できます。
工夫した部分を写真の近くに置く
収納の写真には収納の説明を、通路の写真には動線の説明を添えます。
説明をページの最後にまとめるより、写真の近くに配置したほうが、読者が内容を結び付けやすくなります。
「使いやすくしました」という表現だけで終わらず、何を変更したのかを書きましょう。ただし、寸法や性能などの数値は、確認できるものだけを掲載します。
最後に関連する相談へつなげる
ページ末尾では、その事例に関心を持った人が次に進めるようにします。
収納改善の事例なら、「収納や作業スペースについて相談する」といった案内が考えられます。リンク先には、内容に合うサービスページや相談フォームを指定します。
手順4：トップページに情報を詰め込みすぎない
トップページは、会社のすべてを説明する場所ではなく、必要な情報へ案内する入口として設計します。
最初の画面には、サービス内容、対応地域、次の行動が分かる情報を置きます。
その後は、代表的な施工事例、サービスの概要、相談の流れという順番が一つの選択肢です。
各セクションの文章は、見出しだけでも内容が分かるようにします。
「私たちのこだわり」だけでは内容を想像しにくい場合、「収納計画から考えるキッチン設計」のように、実際の方針が伝わる見出しへ変えてみてください。
テーマの装飾を増やす前に、読み進めたときに説明が重複していないかを確認するほうが、ページを整理しやすくなります。
手順5：公開前に「相談する人」として操作する
制作中は、管理画面からページを確認することが多くなります。しかし、訪問者はサイトの構成を知りません。
公開前には、スマートフォンで初めて訪れたつもりになって操作してみましょう。
「対応地域を確認して、似た施工事例を探し、相談する」という流れを最後まで試します。
このとき、次の点を確認します。
| 確認項目 | 見るポイント |
|---|---|
| ナビゲーション | 目的のページを迷わず開けるか |
| 写真 | 重要な部分が切れていないか |
| 本文 | 文字が小さすぎず、読みやすいか |
| 問い合わせ | 入力項目が多すぎないか |
| 送信後 | 完了表示とメール受信が正常か |
フォームは、必ず実際に送信してください。見た目が整っていても、通知先やメール設定に問題があれば相談を受け取れません。
Cocinaの評価：デザイン以外に見るべき点
Cocinaを候補に入れる理由は、キッチン関連の事業を想定していることです。ただし、自社に向いているかどうかは、実際の素材を入れて確認する必要があります。
特に重視したいのが、公開後の更新です。
施工事例を追加するたびに複雑な操作が必要なら、運用の負担になります。最初の事例ページができたら、同じ構成で2件目を作ってみてください。
写真の差し替え、文章の追加、一覧への表示までを試すと、日常的な更新にかかる手間が分かります。
また、予約やオンライン決済などが必要な場合は、その機能をテーマがどこまで担当し、どこからプラグインや外部サービスが必要になるのかを確認しましょう。
「できそうに見える」と「自分の環境で必要な形に設定できる」は、分けて判断したいところです。
採用を決める前に、小さな完成形を作る
テーマを評価するときは、すべてのページを作り込む必要はありません。
まずは、トップページ、施工事例1件、サービス紹介、お問い合わせを完成させてみましょう。
その状態で、社内の担当者や制作に関わっていない人に見てもらいます。
どのような会社か分かったか。頼める仕事の範囲が伝わったか。相談するまでに迷うところがなかったか。具体的に聞いてみると、修正する場所が見えてきます。
Cocinaを使う場合も、最終的に大切なのは、自社の仕事を無理なく伝えられ、公開後も更新を続けられることです。実際の施工写真と説明を入れた小さなサイトを作ることが、その相性を判断する一番具体的な方法になります。