2案件を同日納品した日：コーポレートサイトと福祉サービスサイト、並行制作の現場記録
ロゴ演出の実装からPlaywrightによる不具合の自動検証まで、1日で2つのクライアント案件を並行で仕上げた日の作業を、そのまま公開します。
「ホームページ制作って、1件ずつ丁寧にやるものでは？」と思われるかもしれません。もちろん、品質を落として数をこなしたわけではありません。むしろ、同日納品だからこそ見えた「段取りの型」がありました。美容室やサロンなど店舗ビジネスのオーナーさまが制作会社に依頼するとき、「この会社、ちゃんと自分の案件に集中してくれるのか？」という不安を感じることがあると思います。今回の記事は、その疑問に正面から答える現場記録です。
—
1. オープニング演出の設計：タイピング→ロゴ浮上→本編への3ステップ実装
1件目はコーポレートサイトの案件です。会社ロゴをヘッダー・フッターに導入するだけでなく、サイトを開いた瞬間の「オープニング演出」にもこだわりました。
具体的には、以下の3ステップで演出を構成しています。
1. **タイピング文字が打ち出される** — 社名やキャッチコピーが1文字ずつ表示される
2. **ロゴがふわっと浮かび上がる** — タイピングが終わると同時に、会社ロゴがフェードインで登場する
3. **本編コンテンツへ自然に遷移する** — 演出が終わるとシームレスにトップページ本体へ切り替わる
美容室やサロンのサイトに置き換えると、お客さまがスマホで店名を検索してサイトを開いた「最初の3秒」に当たる部分です。この3秒でお店の雰囲気や世界観を伝えられるかどうかが、予約ページまで進んでもらえるかの分かれ目になります。
graciautoが設計時に注意したのは「演出が長すぎて離脱されないこと」です。見た目の気持ちよさと、情報にたどり着くまでの速さ。この2つのバランスを、実機でタイミングを何度も調整して決めました。秒数の正解はサイトごとに違うので、「一般的には◯秒がいい」という話ではなく、そのクライアントのユーザー層を想定して判断しています。
—
2. 納品zipに「AIの痕跡」を残さない——クリーニングの線引き基準
コーポレートサイトの最終工程は、ファイル納品でした。ここで欠かせないのが「納品前クリーニング」です。
制作過程ではAIツールを補助的に使う場面があります。コードの下書きやテキストの叩き台など、効率化の手段として活用すること自体は珍しくありません。ただし、**納品するファイルにはAIが生成した痕跡を残さない**というのがgraciautoの線引き基準です。
具体的にクリーニングする対象は以下のとおりです。
- **コード内のコメント** — AIが自動挿入した説明コメントや、生成時に残るパターン化された記述を削除・書き換え
- **テキスト表現** — AIツール特有の言い回しや不自然な敬語がないか目視で確認し、クライアントのトーンに統一
- **ファイル構成** — 不要な中間ファイル、テスト用のデータが混在していないかチェック
美容室オーナーさまにとってイメージしやすい例えで言うと、「仕込みの道具や切りくずをお客さまの目に触れる場所に置いたまま営業しない」のと同じ感覚です。裏側の工程がどうであれ、お客さまの手に届くものはきれいに整っているべき。その考え方をファイル納品にも徹底しています。
—
3. 高齢者向けサービスサイトに「その他のサポート」セクションをイラスト付きで追加した理由
2件目は福祉サービスのサイトです。こちらでは、既存のサービス紹介ページに「その他のサポート」というセクションをイラスト付きで新たに追加しました。
なぜこのセクションが必要だったのか。理由は明確で、**メインサービスだけではカバーしきれない相談が実際に来ていた**からです。
福祉サービスの利用者さまやそのご家族は、「こんなことも頼んでいいのかな？」と遠慮しがちです。テキストだけで「お気軽にご相談ください」と書いても、高齢者やそのご家族にとっては心理的ハードルが高い。そこで、イラストを添えて「買い物の付き添い」「書類の手続き補助」といった具体的な場面を視覚的に見せることで、「ああ、こういうことも頼めるんだ」と直感で伝わるようにしました。
この考え方は美容室やサロンのサイトにもそのまま応用できます。カットやカラーといったメインメニュー以外に、「ヘッドスパだけの利用」「前髪カットだけ」「相談だけでもOK」といった"ちょっとしたこと"をイラストや写真で見せておくと、来店のきっかけが増えます。文字情報だけでは伝わりにくい「気軽さ」を、ビジュアルの力で補うわけです。
—
4. メール相談ボックスが消える不具合の原因と恒久修正の手順
この福祉サービスサイトでは、作業中にメール相談ボックスが特定の条件で画面から消えてしまう不具合が見つかりました。
原因を調べたところ、ページ内の他セクションのCSS（見た目を制御する設定）が干渉して、相談ボックスの表示領域がゼロになっていたことが判明しました。特定のスクロール位置や画面幅の組み合わせで発生する、いわゆる「再現条件が限られるバグ」です。
修正の手順は以下のとおりです。
1. **再現条件の特定** — どの画面サイズ・どの遷移経路で発生するかを洗い出す
2. **原因箇所の切り分け** — CSSの優先度を1つずつ確認し、干渉している記述を特定
3. **恒久修正の適用** — その場しのぎの上書きではなく、構造から見直してスタイルを再設計
4. **他ページへの影響確認** — 修正が別のページやセクションを壊していないか全ページをチェック
美容室の予約フォームでも、「スマホで見ると送信ボタンが押せない」「特定のブラウザだと入力欄が表示されない」といったトラブルは珍しくありません。こうした不具合は、お客さまが無言で離脱する原因になります。大事なのは、**見つけた不具合を「とりあえず動くように」ではなく「なぜ起きたかを理解したうえで根本から直す」**ことです。
—
5. Playwrightで複数遷移経路を自動再生して修正を実測確認するまで
修正後の確認には、Playwrightというブラウザ自動操作ツールを使いました。
Playwrightを使うと、「トップページからサービス一覧に移動して、そこから相談ボックスを開く」「直接お問い合わせページにアクセスする」といった複数の遷移経路を自動で再生し、画面の表示状態を機械的にチェックできます。
人の目だけで確認する場合、「さっき見たときは大丈夫だった」という思い込みが入りやすく、特定の経路だけチェック漏れするリスクがあります。自動テストを走らせることで、**修正が全ルートで有効かを実測値として確認できる**わけです。
これは言わば、美容室で新しいメニューを導入したあとに「実際にお客さま目線で予約→来店→会計の流れを一通り試してみる」のと同じことです。頭の中で「たぶん大丈夫」ではなく、実際に動かして確かめる。この一手間が、納品後のトラブルを防ぎます。
今回は2案件の同日納品というスケジュールだったからこそ、手動確認だけに頼らず自動テストを併用する判断が活きました。
—
6. 2案件並行納品から学んだ：店舗サイト制作で品質を落とさない段取りのコツ
今回のセッションサマリーとして、2つのクライアント案件を並行で仕上げた1日から得た段取りのポイントを整理します。
① 作業を「種類」ではなく「集中モード」で分ける
「A案件のデザイン→B案件のデザイン→A案件のコーディング…」と案件単位で切り替えるのではなく、**「演出実装の時間」「不具合修正の時間」「納品整備の時間」**というモード単位でまとめた方が、頭の切り替えコストが減ります。
② 納品前チェックリストを案件横断で共通化する
ファイルクリーニング、表示確認、フォーム動作テストなど、どの案件でも必ずやる項目はリスト化しておきます。案件ごとにゼロから考えると、忙しい日ほど抜け漏れが出ます。
③ 自動テストは「余裕がある日」ではなく「忙しい日」にこそ使う
手が足りないときほど確認工程を省略したくなりますが、そこで自動テストを回すことで、品質の底を守れます。
美容室やサロンの経営に置き換えると、予約が立て込んだ日ほど「施術前のカウンセリング」や「仕上がりの最終確認」を省略したくなるけれど、そこを省いた日に限ってクレームが出る——という経験に近いかもしれません。忙しいときこそ仕組みで品質を担保する。これがgraciautoの考え方です。
—
よくある質問（FAQ）
Q1. 2案件同時に進めると、自分の案件がおろそかにならないか心配です。
graciautoでは、案件ごとに納品前チェックリストと自動テストを必ず通しています。並行作業であっても、各案件の品質確認工程を省略することはありません。むしろ、共通のチェック基準があるからこそ、複数案件でも品質のばらつきを抑えられる仕組みになっています。
Q2. サイトのオープニング演出は美容室にも必要ですか？
必ずしも全店舗に必要というわけではありません。ただし、ブランドの世界観を大切にしているサロンや、他店との差別化を意識している店舗にとっては、最初の数秒で印象を残せる有効な手段です。演出の長さやデザインはお店の客層に合わせて設計するのが前提です。
Q3. サイトの不具合を自分で見つけたとき、まず何をすればいいですか？
まずは「どの端末・どのブラウザ・どのページで起きたか」をメモしてください。スクリーンショットや画面録画があるとさらに助かります。原因の切り分けと修正は制作会社が行いますが、再現条件の情報があるだけで解決までの時間が大きく変わります。
—
*サイトの演出設計や不具合の根本修正など、「なんとなく気になっているけど、どこに相談すればいいかわからない」ということがあれば、graciautoまでお気軽にお声がけください。*