要望から選ぶ
「写真をたくさん見せたい」写真ギャラリー
料理・店内・施術例・作品など、写真が多いお店に。1枚目を大きく見せ、押すと画面いっぱいに拡大します。
- 操作
- 押して拡大。左右の矢印キーで送り、Escで閉じる。スマホは左右にスワイプ
- 枚数
- 3〜12枚。枚数に合わせて並びが変わり、最後の行に穴が空かない
- ファイル
gallery/snippet.html・gallery.css・gallery.js
写真を押すと大きく見られます。
写真はAIで作成したイメージです（見本5件の写真と、その一部を切り出したもの）。
写真ギャラリーのコードを見る
コードを読み込んでいます…「電話やLINEで予約を受けたい」予約・問い合わせ
電話・LINE・予約サイトのある店に。いま営業中かをページが計算し、営業中は電話、時間外は予約とLINEを先に出します。
- 時刻
- 日本時間で計算。曜日ごとの営業時間・昼休み・定休日を書ける
- 送信
- フォームは持たない。外の予約ページ・LINE・電話へつなぐだけ
- ファイル
contact/snippet.html・contact.css・contact.js
予約・問い合わせのコードを見る
コードを読み込んでいます…「場所が分かりにくいと言われる」地図
来てもらう店すべてに。Google マップを埋め込み、スマホの地図アプリで開くボタンと道順のボタンを添えます。
- 読み込み
- 画面に近づいてから地図を読み込む。APIキーは要らない
- 差し替え
data-queryとリンクのquery=に住所か店名を書く- ファイル
map/snippet.html・map.css・map.js
地図のコードを見る
コードを読み込んでいます…「メニューと料金を載せたい」メニュー・料金表
飲食店の品書き、美容室・整体の料金に。分類をタブで切り替えます。写真のある品だけ大きく見せる形と、文字だけの形があります。
- 形
- 外側のクラスを
fhp-menu--photoかfhp-menu--textにする - 税
- 価格は税込で書き、分類の横に「税込」と出す
- ファイル
menu/snippet.html・menu.css・menu.js
メニュー・料金表のコードを見る
コードを読み込んでいます…「ボイスサンプルを聞けるようにしたい」音声・ボイスサンプル
声優・VTuber・歌い手・音楽教室に。ページの中で再生でき、1つ再生すると他は止まります。波形を押すと、その位置から聞けます。
- 音声
- mp3 を
<audio>に入れる。波形の形はdata-peaks（無ければ一定の高さ） - 操作
- ボタンで再生と一時停止。波形にフォーカスして左右キーで位置を変える
- ファイル
voice/snippet.html・voice.css・voice.js
-
自己紹介ボイス
はじめましての方へ。短い自己紹介です。
0:00 / 0:03
-
シチュエーションボイス
雨の日の帰り道、という設定の一場面です。
0:00 / 0:06
-
歌ってみた（抜粋）
サビの部分だけを抜き出しています。
0:00 / 0:06
見本のため、声の代わりに合成した音を入れています。
音声・ボイスサンプルのコードを見る
コードを読み込んでいます…「同じ質問を何度もされる」よくある質問
予約・支払い・駐車場など、電話でよく聞かれることがある店に。押すと答えが開きます。
- 仕組み
<details>をそのまま使うので JS は要らない。ページ内検索でも答えが見つかる- ファイル
faq/snippet.html・faq.css
席の予約はできますか？
ふだんは予約を受けていません。6名以上でお越しのときは、前日までにお電話ください。
カードや電子マネーは使えますか？
現金のほか、交通系ICカードとQRコード決済が使えます。
クレジットカードは使えません。
子ども連れでも入れますか？
はい。子ども用の椅子が2脚あります。ベビーカーは入口の横に置けます。
駐車場はありますか？
店の駐車場はありません。近くのコインパーキングをご利用ください。
よくある質問のコードを見る
コードを読み込んでいます…「休みや新作を知らせたい」お知らせ
臨時休業・新メニュー・イベントをよく出す店に。新しい順に並べ、2週間以内のものに「新着」を付けます。古いものは畳みます。
- 書き方
- 1件ずつ日付（
timeのdatetime）を付けて足すだけ。順番は自動で並ぶ - ファイル
news/snippet.html・news.css・news.js
-
秋のクリームソーダ「ぶどう」を始めました
巨峰のシロップで作る、紫のクリームソーダです。
-
店内の点検のため、臨時でお休みをいただきます
-
モーニングを11時まで延ばしました
-
コーヒー豆の量り売りを始めました
-
店内を全席禁煙にしました
-
ホームページを新しくしました
見本のため、日付は開いた日から数えて入れています。
お知らせのコードを見る
コードを読み込んでいます…「何を載せればいいか分からない」聞き返し
要望がまだはっきりしない相手に。4つの質問に答えると、合う部品の組み合わせを理由つきで出します。送信はせず、相談のメールを開くリンクだけ出します。
- 提案
- いちばん見てほしいものに合う部品を「まず入れる部品」として先に出す
- ファイル
hearing/snippet.html・hearing.css・hearing.js
この組み合わせがおすすめです
あわせて入れると便利
メールのアプリが開き、答えと組み合わせが本文に入ります。送るかどうかは、中身を見てから決められます。宛先は info@freehp.jp です。
聞き返しのコードを見る
コードを読み込んでいます…使ってよい範囲
- 無料で使えます。お店や仕事のサイト（商用）にも使えます。
- 書き換えても、配り直しても、自分の商品に組み込んでもかまいません。
- 作者名の表記や、こちらへの連絡は要りません。
- 使ったことで何か起きても、作者は責任を負いません。
正式な条件は MIT No Attribution（MIT-0） です。MIT ライセンスから「著作権表示を残す」決まりだけを外したものです。
見本の写真はAIで作った架空のお店の写真です。見本や仮置きには自由に使えますが、実在するお店の商品の写真としては使わないでください（条件は架空の商店街の素材と同じです）。音声は声の代わりに合成した仮の音です。