採用サイト構築

「これならできそう」を伝えるWebマニュアル、開発中です。

Webマニュアルの編集画面に表示された仮画像とalt設定の指示

はじめに

現在、当社では「ノーコードで更新できる採用サイト」の紹介用として、
別途Webマニュアルを制作中です。

このマニュアルは、採用サイトに組み込まれた機能ではなく、“導入を検討している方に、使いやすそうだと感じてもらう”ための販促ツールです。

よくある操作マニュアルやFAQとは異なり、

「見ただけで使えそう」「安心して任せられそう」
と感じてもらえることを大切に、構成や見せ方にこだわっています。


小規模だからこそ、わかりやすく

このマニュアルは、数十人規模の開発チームで作るような“本格的な業務システム”ではありません。

私たちが目指しているのは、月額9,800円で導入できる採用サイトに見合った、ちょうどよいサイズのガイド。

  • 自分で更新できるか不安な人にこそ見てほしい
  • サポートを受けずに“触ってわかる”を体感してもらいたい
  • 見た目の安心感も含めて「これならできそう」と思ってもらう

そんな想いで、小さく、わかりやすく、でも確実に伝わる構成を心がけています。


現在の進捗と、つまずいたポイント

今回のマニュアルでは、以下の3つの改善ポイントを最初に実装しました。

1. アクセシビリティ対応（UI/UX向上）

  • Tabキー、Enter、矢印キーによるナビゲーション操作
  • aria-live領域によるスクリーンリーダーへの対応

2. モバイル体験の最適化

  • スマホでのページ切り替えをタッチスワイプで実装
  • スクロールの感度を調整して“気持ちよく動く”操作感を実現

3. パフォーマンス最適化

  • 画像をすべてWebP形式に統一し、遅延読み込み（lazy load）を適用
  • 不要なCSSルールを削除し、描画負荷を削減

…しかし、実はこの「3. パフォーマンス最適化」の実装が、予想外のバグを引き起こしました。

  • 表示されるはずのコンテンツが別の画像が表示される
  • 検索機能が表示されない。

一通りの機能を組み込んだ後のバグチェックでこの不具合が発覚。


バグチェックの結果、「原因はCSS最適化だった」

見た目の表示崩れやスクロール停止といった重大なバグは発生しませんでした。
ですが、想定と微妙に異なる挙動や、描画タイミングのズレが生じていました。

  • ページ読み込み後のレイアウトの遅れ
  • モバイル端末での細かなズレ
  • スクロール位置が初期化されないタイミング

これらの原因を調べたところ、CSSでの調整とWebPの遅延読み込みが複雑に絡んでいたことが判明。
結果として、安定性を優先し、一度ロールバックする判断をしました。


実際に使っていたCSSの一部をご紹介

以下は、実際に調整していたコードの一部です：

/* カードの表示と高さ制御 */
.manual-card {
  height: auto !important;
  overflow-y: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
/* 表示構造の親要素 */
.detail-panel {
  display: block !important;
  visibility: visible !important;
}

これらは軽量化や遅延表示との兼ね合いで追加していた指定ですが、描画順やスクロールタイミングとの干渉が発生。
細かく見れば見える人にはわかる「想定と異なる動き」になっていました。


HTML側では以下のように画像を記述していました

<img src="images/example.webp" class="manual-image" loading="lazy" alt="マニュアルカバー画像">

この loading="lazy" の指定により、画像の読み込みは軽くなる一方で、初期表示とのタイミング管理が難しくなるという面もありました。

JSはバグの主因ではなかったため、JSについては今回のリセット対象ではありません。


まとめ：一度戻して、また進める

今回のパフォーマンス最適化は、「やってみたけど、少し違った」結果に終わりました。正直CSS程度でつまずくとは思いませんでした。

でもこれは、小規模開発だからこそ試せるチャレンジであり、
ロールバックしてやり直せる柔軟な構成だったからこそできた選択でもあります。Gitの履歴をロールバックし、一度シンプルな構成に戻して仕切り直す判断をしました。

今後は再度安定性を重視しながら、段階的に最適化を組み込んでいく予定です。


最後に

まだ仮画像も残っていて、開発中の余白はたくさんあります。
でも、こうして途中のつまずきや工夫も含めて発信していくことで、
「無理のない導入」や「わかりやすさ」の裏側も伝えていけたらと思っています。
どうぞ引き続き、ご覧いただければ嬉しいです。

ブログ一覧へ