学び
発注の前に、道具の名前を仕事の話へ戻す
プロフィールに書いてある技術を、画面の向こう側の作業に引き戻して説明します。定義の暗記ではなく、「この道具を入れると、月曜の朝のどの作業が減るか」が分かれば十分です。数値を出している箇所は、出典と日付をその場に置いています。
HTML は中身の名前です。見出し、本文、料金表、問い合わせボタン。CSS はその並びと色です。メニュー表の品名が HTML で、紙の余白と文字の大きさが CSS、という分け方で足ります。
レスポンシブは、店の机が狭いときに品書きを縦へ倒すことです。パソコンでは3列の料金、電話では1列。中身は同じです。別サイトを二つつくる話ではありません。
見た目だけ先に決めて、項目名が後から増えると、表がはみ出します。最初に「電話番号は何桁か」「料金は税込か」を決めた方が、CSS のやり直しは少ないです。
| 担当 | 予約サイトでの例 |
|---|
| HTML | 日付、コース名、残席、「予約する」 |
| CSS | 残席が少ないときの色、電話ではボタンを画面幅いっぱいにする |
| 両方ないと | パソコンでは読めて、現場のスマホではボタンが画面の外に出る |
ページを開いたあとで動く係です。HTML が貼り紙、JavaScript が「この欄、空のまま送らないでください」と止める人です。
よくある場面は、予約フォームです。日付が過去、人数が0、電話番号が桁不足。送信前にその場で知らせる。サーバに届いてからエラーを返すだけでも正しいのですが、入力した人は「押したのに何も起きない」と感じます。
もう一つは、画面を切り替えずに一覧を絞り込むことです。スタッフ名で予約表を探す、在庫の色だけ残す。ページ全体を読み直すと、入力途中のメモが消えます。
JavaScript は便利なぶん、止めすぎると困ります。確認のポップアップを三重に出すと、現場は「はい」を押すだけになります。止めるのは、戻すのが面倒な操作に限った方がいいです。
記事や固定ページを、開発者以外が直せる棚です。お知らせ、メニュー、採用情報。更新の担当が社内にいるなら、最初の候補になります。
W3Techs が2026年10月14日に出している数字では、WordPress は調査対象サイトの40.0%で使われ、CMS が分かっているサイトに限ると58.5%です。Shopify は全サイトの5.4%、Wix は4.2%。「サイトの標準が WordPress」という現場感覚は、この偏りから来ています。
プラグインは後付けの引き出しです。問い合わせ、予約、ネットショップ。引き出しを増やしすぎると、更新のたびにどれかが壊れます。必要な引き出しだけにする、が運用の本体です。
W3Techs、2026年10月14日。全サイトに占める割合在庫の引き当てや複雑な権限が本体の仕事なら、WordPress は表紙にして、計算は別の仕組みに置いた方が長持ちします。全部をプラグインで足すと、三年後に誰も中身を説明できなくなります。
実装の前に、画面を紙の代わりに並べる場所です。ボタンの位置、項目の抜け、スマホで親指が届くかを、コードを書く前に見ます。
| Figma で決めること | Figma では終わらないこと |
|---|
| 項目の順番、文言、空のときの表示 | 実際の在庫や権限で、その項目が本当に出せるか |
| 関係者のコメントを同じ画面に残す | 公開後の更新手順 |
| パソコンとスマホの並び | 遅い回線での待ち時間 |
コメントがチャットに散らばると、「どの案が最新か」で一日使います。画面の横に「このボタンは店長だけ」と書いておくと、実装の質問が減ります。
一つのプログラムから、iPhone 用と Android 用のアプリを出します。勤怠のように、現場が自分の電話で打刻する仕事に向きます。店の共有スマホ一台、という運用でも使えます。
同じ見た目でも、通知の許可、写真の保存、戻るボタンの位置は OS で違います。そこを片方だけで試すと、もう片方の初日に止まります。
ストアの審査もあります。社内だけで配る方法と、誰でも入れられる公開は、手続きが別です。勤怠なら社内配布で足りることが多いです。
勤怠アプリの説明用画像です。実在の納品画面の写真ではありません。予約、顧客、勤怠、管理画面。名前は違っても、やっていることは「紙や表計算で二人が同じマスを触っている」のをやめることです。
| 台帳 | 紙のままだと起きること | 画面で先に決めること |
|---|
| 予約 | 同じ枠に二人入れる | 枠を押さえた瞬間に、他の人へは満席と出す |
| 顧客 | 電話番号が二行に分かれる | 同じ番号は一人にまとめる |
| 勤怠 | 打刻の直しが口頭 | 誰が、いつ、理由つきで直したかを残す |
| 管理画面 | 店長とアルバイトが同じ権限 | 売上と個人情報は、見る人を分ける |
CRM は顧客台帳の少し欲張った呼び方です。検索、メモ、前回何を買ったか。そこまでで足りる会社は多いです。営業の点数管理まで最初から入れると、入力されずに終わります。
厨房とホールが、伝票で注文を渡すやり方です。画面と画面が、決まった用紙(住所と項目)でデータを渡します。人がコピペする隙間を減らすためのものです。
| 伝票の種類 | 予約の例 | 失敗したとき |
|---|
| 取得 | 明日の空席を聞く | 空席なのに「不明」と出る。再試行か、窓口へ回すかを決めておく |
| 登録 | 予約を1件書く | 二度押して2件入る。一度だけ通す工夫が要る |
| 更新 | 人数を変える | 古い画面の内容で新しい予約を上書きしない |
| 削除 | キャンセル | 消したあとに領収の記録まで消えないようにする |
API は魔法の連携ではありません。相手のサービスが止まった夜に、予約を紙で受けるかどうか。そこを決めてない連携は、本番の初日に止まります。
台帳の本体です。表計算との違いは、同じ顧客を二箇所に書かないことです。予約の行には顧客番号だけ置き、名前や電話は顧客の側に一回だけ書きます。電話番号が変わったとき、予約を全部開かずに済みます。
バックアップは「昨夜の台帳が引き出しにある」状態です。更新の直前に無いと、誤って消した日の復旧ができません。検証環境は、本番の台帳を触らずに試す別冊です。この二つが無いシステムは、修正のたびに本番で賭けをします。
カード番号の処理は、決済会社の窓口に任せます。自社のデータベースに番号を置きません。置くと、漏れたときの範囲が予約台帳ごとになります。
通知は、予約の成立、前日、キャンセルをメールやショートメッセージで出す係です。文面と、送らなくていい人(スタッフのテスト予約)を先に決めます。テストのたびに客へ飛ぶ通知は、信頼を一気に減らします。
外部サービス連携の説明用画像です。特定の店舗の画面ではありません。文章を読んで、抜き出す、短くする、仕分ける、下書きする。これが今の使い方の中心です。社内の規程や過去の見積を渡して、その範囲で答えさせるやり方を RAG と呼びます。インターネット全体の記憶で答えさせるのとは違います。
| 作業 | 向く例 | 人が見ること |
|---|
| 抽出 | 請求書の PDF から日付と金額 | 桁と税区分 |
| 要約 | 長い議事の要点 | 決まっていないことを、決まったことと書いていないか |
| 分類 | 問い合わせを「予約」「苦情」「採用」へ | 境界のあいまいな文 |
| 検索つき回答 | 自社マニュアルの中だけを見て答える | マニュアルに無い質問を、それっぽく埋めていないか |
IPA「DX動向2026」(2025年度の調査)では、AI を導入した企業の効果として「業務が効率化したり迅速化した」が91.6%です。一方で「売上や利益が向上した」は3.9%です。社内の手間は減りやすく、売上の話はまだ別、という調査結果です。導入の説明を売上の約束から始めると、三か月後に話が合わなくなります。
参照してよい資料と、入れてはいけない資料(顧客の個人情報、未公開の価格)を分けるのが、モデルを選ぶより先です。
サイボウズの、業務アプリを自分たちで組めるサービスです。項目(フィールド)、1件の記録(レコード)、誰が見て誰が直せるか(権限)を、アプリごとに持ちます。日本の会社で、表計算の隣に置かれていることが多い棚です。
標準の入力フォームで足りるなら、そこで止めます。足りないときだけ JavaScript で画面を足し、他システムとは REST API でつなぎます。最初から全部をカスタマイズすると、担当が辞めたあとに直せなくなります。
| 棚のまま | 手を入れる |
|---|
| 日報、備品、簡単な顧客メモ | 他の予約システムと在庫を同時に動かす |
| 部署ごとの閲覧制限 | 入力の途中で外部の料金を引いてくる |
プログラムの変更履歴です。「火曜の夕方、料金の計算を誰が変えたか」を残せます。GitHub は、その履歴を複数人で置く場所です。コメント付きで直して、問題なければ本番側へ合流させます。
発注側が見るべきなのは、画面の差分だけではありません。検証環境で一度見てから本番へ出しているか。バックアップはあるか。引継ぎのとき、履歴が個人のパソコンにしか無いと、そこで切れます。
一つの仕事に戻す
予約サイトを頼むとき、道具はこう分かれます
| 順番 | 道具 | 決めること |
|---|
| 1 | Figma | 項目と、スマホでの並び |
| 2 | HTML / CSS / JavaScript | 客が見る画面と、空欄の止め方 |
| 3 | WordPress か専用の画面 | 誰がお知らせを更新するか |
| 4 | データベースと API | 二重予約をどう止めるか |
| 5 | kintone など既存の棚 | 社内の台帳を新しく作り直す必要があるか |
| 6 | 決済・通知 | カード番号を自社に置かない。テスト予約を客へ送らない |
| 7 | Git | 直した理由が残るか |
出典: W3Techs, Usage of content management systems, 14 October 2026。AI の効果は IPA「DX動向2026」図表3-14(2025年度調査)。 業界側の人数と予算の話は 一般知識 に分けてあります。
スキルシートを見る