ノギク 制作メモ
ノギクは、ホームページ制作の見本として作った架空のピラティススタジオです。実在の店ではなく、お客様から頼まれた案件でもありません。店名・住所・料金・営業時間は、すべて見本のために決めた値です。このメモには、誰に向けて、どんな理由で組み立てたかと、何をどう測ったかを書いています。
想定した依頼主と利用者
依頼主として思い浮かべたのは、駅から歩ける場所で小さなスタジオを開いた人です。見に来るのは、運動が続かなかった経験があり、体が硬いことを気にしている人。「自分でも行って大丈夫か」「いくらかかるか」「通える時間帯はあるか」を、最初の1分で知りたいはずだと考えました。
題材は、ココナラの公開依頼の分類から選んでいます。直近90日の、店舗や小規模事業者の新規制作・リニューアル95件のうち、来店予約型が19件、会社・事務所のサイトが23件でした（2026年10月9日の集計）。この見本はその前者、もう一つの工務店の見本は後者にあたります。
設計の方針
- 最初の画面には、定員3名、体験60分3,000円、予約ボタンを並べました。小さなスタジオの強みは少人数で、迷っている人がまず気にするのは値段だろう、という想定です。
- ボタンの朱色は、予約に関わる場所にしか使っていません。深緑はブランドの色として見出しや帯に回し、「押す場所」が色で分かるようにしています。
- 時間割は表のまま残しました。スマホでは「基本・姿勢・応用」の2文字に縮め、下に凡例を置いています。時間割の文字は14px以上です。
- 予約フォームは、希望日時を2つ書ける形にしました。ただし、この見本のフォームは送信されません。
- 電話番号と郵便番号は載せていません。適当に書いた番号が、実在の店のものと重なるのを避けるためです。予約はフォームだけで、道順は予約確定のメールで送る、という前提で作っています。
- 人が写っている写真は1枚だけです（講師が姿勢を補助する場面）。素材ページでモデルの許諾を確かめられないので、顔が入らないよう肩から下だけを切り抜いて使っています。
- 紫から青へのグラデーション、絵文字、影つきカードの連続、英語の飾り見出し、丸いボタンは使わない、と先に決めています。どのサイトにもある型に見えてしまうからです。
見た目で工夫したところ
ロゴの野菊は、花びらを1本ずつ引いた線画です。長さと角度はあえて揃えていません。料金表の背景にも、同じ花を大きく薄く入れました。動きは二か所だけで、ロゴの花びらが最初に一度描かれること、「体験レッスンの流れ」の線が画面に入ったときに伸びることです。OSの「視差効果を減らす」設定がオンの場合は、どちらも止まります。
計測結果
| 項目 | 値 | 補足 |
|---|---|---|
| Lighthouse 性能（モバイル） | 98 | 3回の中央値。最初に表示される主要な画像（LCP）は 1.8 秒、レイアウトのずれ（CLS）は 0.06、操作の止まり（TBT）は 88ms |
| アクセシビリティ | 100 | Lighthouse の項目。別に axe-core（WCAG 2.0/2.1 A・AA とベストプラクティス）で、幅390と1280のどちらも違反 0 件 |
| ベストプラクティス | 100 | |
| SEO | 66 | 減点は noindex の1項目だけです。見本のあいだは検索に出さない設定にしています。同じページから noindex だけを外して測ると 100（公開前の確認用。実際に外すのは公開の判断のあと） |
| ページの転送量 | 415 KB | HTML・CSS・書体・画像の合計（初回表示） |
| 横スクロール | なし | 幅360・768・1440で、ページ全体のはみ出しを確認 |
測定日：Lighthouse は2026年10月15日、そのほかは10月12日。Google Chrome 154（ヘッドレス）、Lighthouse 12.8.2（モバイル設定・通信と処理速度は模擬）、axe-core 4.14。自分のPC上のサーバーで配信して測ったため、実際のサーバーや回線では値が変わります。
数値は、公開前の自己点検のために測ったものです。最初の主要な画像の表示（LCP）は、Google が目安とする2.5秒以内です。前の版では届いていませんでした（3.1秒）。測ってみると、時間の大半は画像の読み込みではなく、最初の描画の前の計算でした。効いたのは、書体の指定から端末にない和文書体の名前（Hiragino・Yu Gothic など）を外したこと、画面の外の欄の描画を後回しにしたこと（content-visibility）、書体の読み込みを描画のあとに回したことです。CSSを本文に埋め込む試しは、かえって遅くなったのでやめました。書体があとから入れ替わるので、ピラティスでは本文がわずかにずれます（CLS 0.06。目安の0.1未満）。測定は通信が遅い設定で、圧縮をかけない簡易サーバーから配信して行っています。HTMLの検査には html-validate を使いました。
今後の課題
- 実案件ではありません。実際の店舗の取材も、お客様とのやりとりもしていません。
- 写真は7か所で、元の写真も7枚です（1枚を1か所に使っています）。どれも海外のスタジオを撮った素材写真で、日本の店舗で撮ったものではありません。写真は、制作者が各素材サイトの写真ページを自分のブラウザで開き、公式のダウンロードボタンで保存したものです（2026年10月）。
- 7枚のうち5枚は同じ撮影者（Ahmet Kurt）の写真です。残りの2枚は、マシンが並ぶスタジオ全体（Paulina Vargas）と、講師が姿勢を補助する手元（Kampus Production）で、どちらも Pexels の写真です。Ahmet Kurt の5枚のうち4枚は同じ日（2024年1月21日、トルコのヤロヴァ）に撮った1つのスタジオのシリーズで、最初の画面の1枚は Unsplash にある同じ撮影者の写真です（撮影地の表示がイスタンブールで、同じ撮影回かは確かめきれていません）。同じ撮影回には人が写った写真もありますが、モデルの許諾が素材ページで確かめられないので使っていません。「スタジオの設備」の欄は、写真を外して文字の一覧だけにしました。
- 実際に仕事を取っている制作者のサイトが実績の数字やお客様の声を出している場所には、作った数字ではなく「できること・できないこと」「持ち物・服装・設備」「よくある質問」を足して、申し込む前に知りたいことを増やしました。
- 撮影者のいるスタジオには、機器のメーカー名の銘板や、壁の看板が写っていました。写真を使う前に、銘板は周りの色で消し、看板は写らない範囲に切り抜きました。
- 講師の紹介とお客様の声はありません。差し替え枠を置いただけです。見本では作り話を載せないので、空けたままです。
- ページは1枚だけで、料金やレッスンの詳細ページ、ブログのような下層ページは作っていません。
- WordPress版はありません。静的なHTMLだけです。
素材の出所とライセンス
| 素材 | 使った場所 | 出所 | ライセンス |
|---|---|---|---|
| Shippori Mincho（Medium・SemiBold） | 見出し・店名 | Google Fonts のリポジトリ。使う文字だけに減らした woff2 | SIL Open Font License 1.1（全文） |
| Zen Kaku Gothic New（400・500・700） | 本文 | Google Fonts のリポジトリ。同じく文字を減らした woff2 | SIL Open Font License 1.1（全文） |
| スタジオの写真（Ahmet Kurt 撮影） | 最初の画面 | Unsplash | Unsplash License：商用利用・改変が可、クレジット表記は不要。写真そのものの転売や、競合する素材サービスへの収録は不可 |
| タワーつきマシンの写真（Ahmet Kurt 撮影） | 「はじめての方へ」。機器の銘板を消し、掲示のあるドアが入らないように切り抜き | Pexels | Pexels License：商用利用・改変が可、クレジット表記は不要。写真そのものの転売は不可 |
| リフォーマーが並ぶスタジオ全体の写真（Paulina Vargas 撮影） | レッスン「ベーシック」の上 | Pexels | |
| 講師が動きを補助する手元の写真（Kampus Production 撮影） | レッスン「姿勢と肩まわり」の上。顔が入らないよう手元だけを切り抜き | Pexels | |
| 黒い箱と赤いボールのあるタワーの写真（Ahmet Kurt 撮影） | レッスン「ステップアップ」の上。機器の銘板とストラップのロゴを周りの色で消して切り抜き | Pexels | |
| 白い格子の壁のスタジオの写真（Ahmet Kurt 撮影） | 「体験レッスンの流れ」。壁の看板が写る左側を外し、機器の銘板を消して切り抜き | Pexels | |
| マシンが並ぶ床ぎわの写真（Ahmet Kurt 撮影） | 「よくある質問」。下寄りの帯だけを切り抜き | Pexels | |
| 野菊の線画・ロゴ・道順図・図形 | 全体 | この見本のために作成（SVG と CSS） | — |
| SNS共有用の画像（og.jpg） | 共有時のプレビュー | このサイトの最初の画面のスクリーンショット。中の写真は上と同じ | 同上 |
修正履歴
- 2026年10月12日：架空の市名が、実在する作品の市名と重なっていたため、「千草ヶ丘市」「橘ヶ浜町」に置き換えました。あわせて、公開前の仕上げ（共有用画像の絶対URL化、canonical の追加、時間割の文字を大きく、読み上げ用の領域名の付け直し）、野菊の線画、差し替え枠、この制作メモの追加を行いました。
- 2026年10月15日：写真を元の写真7枚（7か所）にしました。マシンが並ぶスタジオ全体と、講師が姿勢を補助する手元の2枚を足しています。すべて制作者がブラウザで保存したものです。
- 2026年10月12日（6回目）：写真を10枚から元の写真5枚（7か所）に減らし、すべて制作者がブラウザで保存し直したものに替えました。「スタジオの設備」の写真3枚を外しました。
- 2026年10月12日（5回目）：スタジオの写真を1つの撮影回にそろえ、自宅でのストレッチの写真を外して12枚にしました。フォントの部分集合を全ページの文字から作り直しました。
- 2026年10月12日（4回目）：ぱくたその人物写真を1枚入れて13枚にしました（モデルの許諾あり、「イメージ写真」と表示）。LCPを3.1秒から1.8秒に縮めました（上の「計測結果」）。
- 2026年10月12日（3回目）：素材写真を6枚から12枚に増やし、「できること・できないこと」「持ち物・服装・設備」の欄と、よくある質問を3つ足しました。画面の外の写真は遅延読み込みです。人物の写真はまだ入っていません。
- 2026年10月12日（2回目）：素材写真を1枚から6枚に増やしました（上の表）。スマホの固定の予約ボタンは、最初の画面と予約フォームの欄では隠し、ほかで本文に重ならないよう、アンカーの停止位置を調整しました。12px未満の文字をなくしました。講師の紹介とお客様の声は、「架空のサンプル」と書いた差し替え枠にしています。