― 白金高輪「鶏 新すみ」様のホームページ制作
白金高輪に2026年10月20日にグランドオープンした焼鳥店「鶏 新すみ」様のホームページを制作しました。
ご依頼をいただいたのは8月の下旬、お店がまだ工事中の頃です。
このサイトは生成AIを活用して作り、作業を始めたその日のうちに、第一版をネット上でご覧いただける状態にしました。
開店前のお店は、内装の工事、メニュー、仕入れ、予約の準備と、決めることが山ほどあります。
ホームページを「全部の情報が揃ってから作る」のではなく、最初に形にして、お店の準備と一緒に育てていく。今回はそういう進め方をとりました。
当ブログではこれまでに、生成AIが作ったHTMLを題材にした記事を2本書いています。
今回は、実際にご依頼いただいたお仕事で、生成AIをどう使ったのかをご紹介します。
なお、この記事は鶏 新すみ様のご了承をいただいて書いています。
目次
静的なHTMLを、1枚も作らなかった
最初からWordPressとして書く
生成AIでホームページを作るとき、よくある流れは次のとおりです。
- 生成AIに、デザイン案のHTMLを1枚作らせる
- そのHTMLを、WordPressのテーマに変換する
今回は、HTMLを1枚も作らず、最初からWordPressのテーマとして書きました。
- 参考サイトから取り入れたいのは構成と余白の取り方で、HTMLそのものではありません
- 文言はすべて、お店の方が管理画面から書き換えられる形にします。HTMLに書いた文章は、どのみち最後に差し替えることになります
- HTMLをテーマに変換する手間（クラス名の付け直し、書き換えられる箇所の差し込みなど）が丸ごと要らなくなります
生成AIでサイトを作ろうとした方がつまずきやすいのは、「できたHTMLをWordPressにする」ところです。
実際の制作では、その変換の工程自体を持たないほうが、早くて確実でした。
初日にかかった時間
| 工程 | 時間 |
|---|---|
| サーバーの下見（WordPressの版、PHPの版など） | 約5分 |
| 親テーマ（弊社の共通部品）の設置 | 1分未満 |
| 子テーマの設計と実装（PHP 493行・CSS 404行） | 約6分 |
| 配置・有効化・トップページの設定 | 約2分 |
| 表示の確認（スマホ・PC） | 約3分 |
合計で20分足らずです。
この速さのおかげで、ご依頼の翌日には、お店の方に実物のサイトを見ながらご検討いただけるようになりました。
参考サイトは「業態の見本」として読む
いただいた参考サイトは、都内の焼鳥店などのサイト3本でした。
3本に共通していたのは、暗い背景・明朝体・金色の差し色と、予約を外部の予約サービスに任せていることです。
そこで色は、お店の写真を見る前に決めました。墨の黒、生成りの白、金茶、そして予約ボタンにだけ使う炭火の朱です。
あとからいただいた内装の完成予想図（木・石・金色の間接照明）に、この配色はそのまま合いました。
参考サイトを「この見た目を真似する」ために見るのではなく、「この業態のお客様は、こういう佇まいを期待している」という見本として読む。そうすると、素材が揃う前の段階でも方向を決められます。これは生成AIが得意な作業でもあります。
構成は、ごあいさつ・お知らせ・店舗情報・ご予約・アクセスの、縦に長い1ページにしました。
高級店のサイトは、情報を詰め込むより、一つひとつを落ち着いて見せるほうが似合います。
開店前でも、すぐにご覧いただける形に
完成予想図で組み、実際の写真に差し替える
工事中のお店なので、最初にお預かりした画像は内装と外観の完成予想図でした。
これを使ってサイトを組み、画像のそばに「※掲載の画像は完成予想図です」と添えました。
開店が近づいて実際の写真が届いたら、管理画面で画像を入れ替えるだけで差し替わる作りです。
写真が明るくても暗くても店名の文字が読めるように、文字の後ろの陰影も最初から調整してあります。実際の写真に替えたときも、レイアウトを直す必要はありませんでした。
決まっていない項目は、空欄でも崩れない
営業時間、定休日、予約のURL、Instagramなど、開店前には決まっていない情報がたくさんあります。
そこで、空欄の項目はその行ごと表示しない作りにしました。決まったものから管理画面に入れていけば、その場で表示に反映されます。
ご予約のボタンも、状態に合わせて表示が変わります。
| 状態 | 表示 |
|---|---|
| ボタンの文言が空 | ボタンを出さない |
| 文言あり・予約URLなし | 「準備中」のボタン。押すとご案内が開く |
| 文言あり・予約URLあり | 予約サービス（TableCheck）へのリンク |
予約URLが決まった日に管理画面へ入れるだけで、「準備中」が本物の予約ボタンに切り替わります。
ご要望を、お店の意匠からかたちにする
制作の途中でいただいたご要望は、どれもお店の世界観を大切にしたものでした。
組子の柄は、お店の建具から
「画面の両側に、組子の柄を」というご要望をいただきました。
完成予想図を拡大してみると、お店の入口のガラスの内側に、同じ系統の組子が描かれています。
そこで、柄はその建具から読み取って描き起こし、お店に入ったときと同じ柄が、サイトでも目に入るようにしました。
幅は2cmほどというご希望でした。ただ、このサイトは広い画面で写真を大きく見せているため、パソコンの画面幅によっては柄が写真に重なります。
そこで画面の余白に合わせて幅が変わる作りにしました。広い画面ではご希望どおりの幅、余白が少ない画面では細く、スマホでは右端にだけ細く表示します。どの画面でも写真の邪魔をしません。
濃さは3段階の案をご覧いただき、選んでいただきました。
紋も、ロゴの横に
お店の紋もお預かりしました。六角形を細かな格子で割った意匠です。
小さく表示すると格子がつぶれて見えなくなるため、実際に何通りもの大きさで並べて確かめ、格子が読み取れる大きさでロゴの左に置いています。
「鶏・野菜・技」に写真を
トップ画面には「全国から選び抜いた鶏／旬の野菜／職人の技」の3行があります。
この3つに写真を添えたい、というご要望をいただき、写真を3枚並べる区画を用意しました。スマホでは横にめくって、タップすると大きく表示できます。
料理の写真は開店後に撮影されるので、それまではこの区画を表示しない設定にしてあります。写真が届いたら管理画面から入れるだけで、区画が現れます。
公開の日に、安心して切り替えられるように
見本の写真は、公開と同時に自動で消える
サイトは早い段階から、検索に出ない状態でネット上に置き、お店の方に実物を見ていただきながら進めました。
「鶏・野菜・技」の区画は、レイアウトを確かめていただくために、生成AIで作った見本の写真を仮に置いていました。
ただ、実在しない料理の写真がそのまま公開されては困ります。飲食店では、実物と違う料理の写真は景品表示法の問題にもなりえます。
そこで、見本の写真は「検索に出ない状態」のときだけ表示するようにしました。
検索に出る状態に切り替えた瞬間に見本は消え、本物の写真が無ければ区画ごと表示されなくなります。公開の操作そのものが、見本の片付けを兼ねるので、消し忘れが起きません。
動きは付けても、本文は必ず見えるように
スクロールすると文章がふわっと現れる動きを付けています。
こうした動きは「最初は透明にしておき、プログラムで表示する」作りが多く、プログラムが止まると本文が見えなくなってしまいます。
今回は、プログラムが動かない環境では最初から全部見えている作りにしています。
外国のお客様のための翻訳ボタン
英語と中国語に切り替えられる翻訳ボタンを付けました。
自動翻訳は店名まで訳してしまう（「鶏 新すみ」が「Chicken Shinsumi」に）ので、店名と電話番号は訳さない設定にし、住所は外国の方に分かりやすいよう訳す側に残しています。
お問い合わせフォームは、全角で入力された電話番号でも送信できるようにしてあります（前回の記事でご紹介した対処と同じです）。
開店の前日に公開
| 時期 | 出来事 |
|---|---|
| 8月下旬 | ご依頼。初日に第一版をご覧いただける状態に |
| 8月下旬 | ロゴ・ごあいさつ文・営業時間・予約URLを反映 |
| 9月 | 組子の柄、写真の区画、紋を追加 |
| 10月 | 実際の写真に差し替え |
| 10月19日 | 正式公開 |
| 10月20日 | グランドオープン |
お店の準備が進むたびに、サイトもその日のうちに更新し、グランドオープンの前日に正式公開しました。
まとめ
生成AIを活用したことで、コードを書く時間はほとんどかからなくなりました。 今回の第一版は20分足らずです。
その分の時間は、
- 参考サイトから、お店に合う佇まいを読み取ること
- お店の建具や紋といった意匠を、サイトに映すこと
- 情報がまだ決まっていなくても、崩れずに見せられる作りにすること
- 公開の日に、安心して切り替えられるようにしておくこと
に使うことができました。生成AIで速くなった分を、お店の想いをかたちにする部分に回せる。それが、私たちが生成AIを使う理由です。
開店前のお店のホームページ、生成AIで作りかけたサイトの仕上げなど、お気軽にご相談ください。
生成AIで作ったサイトの公開と運用の代行については、こちらのページでもご案内しています。
自己紹介
インディーズでミュージシャンをやっていたのですがいつのまにか…
とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。
「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。
現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。
宮崎県 都城市 出身。東京都 葛飾区 在住。現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。
コメントを残す