← しおり住まい工房のサイトに戻る

しおり住まい工房 制作メモ

しおり住まい工房は、ホームページ制作の見本として作った架空のリフォーム会社です。実在の会社ではなく、お客様から頼まれた案件でもありません。社名・住所・施工事例・金額・従業員数は、すべて見本のために決めた値です。このメモには、誰に向けて、どんな理由で組み立てたかと、何をどう測ったかを書いています。

想定した依頼主と利用者

依頼主として思い浮かべたのは、地域で長く続く従業員9名ほどの工務店です。見に来るのは、キッチンや浴室の交換、間取りの変更を考え始めたばかりの人。相場、工期、どんな順番で進むのか、営業を受けずに相談できるのかを知りたいはずだと考えました。

題材は、ココナラの公開依頼の分類から選んでいます。直近90日の、店舗や小規模事業者の新規制作・リニューアル95件のうち、会社・事務所のサイトが23件、来店予約型が19件でした（2026年10月9日の集計）。この見本は前者、もう一つのピラティスの見本は後者にあたります。

設計の方針

• 工事ごとの工期と費用の目安を、表にして最初から出しました。「工事一式」とまとめると、比べたい人が離れてしまうと考えたためです。ただし、表の金額は見本として置いた値で、実際の相場を調べた根拠はありません。実在の会社の制作では、その会社の見積実績に差し替えます。
• 施工事例の1件目は、写真ではなく、工事前と後の間取り図で見せています。素材写真を並べると、施工していない家を施工したように見せてしまうからです。2件目のキッチンは素材写真で、施工事例の見出しのすぐ下に「掲載写真は素材写真です」と書きました。
• 電話番号と郵便番号は載せていません。適当に書いた番号が、実在の会社のものと重なるのを避けるためです。相談はフォームで受け、電話を希望する人にはこちらから折り返す、という前提で作っています。
• 藍をブランドの色、木の茶を補助の色にして、橙のボタンは「相談する」場所にだけ使いました。スマホでは、画面の下に「費用の目安」と「見積りを相談する」を固定し、最初の画面と相談フォームの欄では隠します。
• お客様の声は載せていません。実在しない人の感想を作ってしまうことになるため、「差し替え枠」と明記した空きを置きました。
• 紫から青へのグラデーション、絵文字、影つきカードの連続、英語の飾り見出し、丸いボタンは使わない、と先に決めています。どのサイトにもある型に見えてしまうからです。

見た目で工夫したところ

「費用の目安」と「会社案内」の上端には、大工の物差しを思わせる目盛りの罫線を引きました。間取り図は、画面に入ったときに撤去する壁の点線が先に見え、そのあとで「工事後」が現れます。OSの「視差効果を減らす」設定がオンの場合、動きは止まります。

WordPress版のテーマも、同じ見た目で別に作りました。お客様が自分で更新するのは、施工事例とお知らせだけの想定です。動作は手元の確認環境だけで見ていて、レンタルサーバーでは確かめていません。

計測結果

測定日：2026年10月15日。Google Chrome 154（ヘッドレス）、Lighthouse 12.8.2（モバイル設定・通信と処理速度は模擬）、axe-core 4.14。自分のPC上のサーバーで配信して測ったため、実際のサーバーや回線では値が変わります。

数値は、公開前の自己点検のために測ったものです。最初の主要な画像の表示（LCP）は、Google が目安とする2.5秒以内です。前の版では届いていませんでした（2.6秒）。測ってみると、時間の大半は画像の読み込みではなく、最初の描画の前の計算でした。効いたのは、書体の指定から端末にない和文書体の名前（Hiragino・Yu Gothic など）を外したこと、画面の外の欄の描画を後回しにしたこと（content-visibility）、書体の読み込みを描画のあとに回したことです。CSSを本文に埋め込む試しは、かえって遅くなったのでやめました。測定は通信が遅い設定で、圧縮をかけない簡易サーバーから配信して行っています。HTMLの検査には html-validate を使いました。

今後の課題

• 実案件ではありません。実際の現場の取材も、お客様とのやりとりもしていません。
• 施工事例は2件とも架空です。写真8枚は、住宅・工事中の室内・道具・素材を撮った素材写真で、この会社が手がけた現場ではありません。人が写るのは「工事中のこと」の2枚（電動ドリルを構える腕と手元、床材を貼る手元）だけで、どちらも顔は写っていません。写真には、すべて「素材写真（イメージ）」か「イメージ写真（素材）」と添えています。写真は、制作者が各素材サイトの写真ページを自分のブラウザで開き、公式のダウンロードボタンで保存したものです（2026年10月）。
• お客様の声や施工件数の代わりに、「対応している工事（ほかへご紹介する工事も）」「工事中のこと」と、よくある質問を3つ足しました。どれも作った実績ではなく、工務店が最初に説明する内容です。
• お客様の声、スタッフの写真、建設業許可の番号はありません（差し替え枠か、「見本のため省略」と書いています）。
• ページは1枚だけで、施工事例の個別ページやお知らせの一覧は、静的版にはありません（WordPress版にはあります）。

素材の出所とライセンス

修正履歴

• 2026年10月12日：架空の市名が、実在する作品の市名と重なっていたため、「千草ヶ丘市」「橘ヶ浜町」「白梅野市」に置き換えました。あわせて、公開前の仕上げ（共有用画像の絶対URL化、canonical の追加、読み上げ用の領域名の付け直し）、施工事例への「架空のサンプル事例」の表示、差し替え枠、目盛りの罫線と間取り図の動き、この制作メモの追加を行いました。
• 2026年10月15日：写真を8枚にし、「工事中のこと」に工事中の室内と職人の手元の写真を足しました。