# 採用サイト構築 > タイムリーに編集できる美しい採用サイトを、安心料金・安心管理で --- ## 固定ページ - [お問い合わせありがとうございました。](https://recruit.shiny-co.jp/thank-you): お問い合わせありがとうございました。 こ... --- ## 投稿 - [第4回：採用チャットの初期設定とカスタマイズ](https://recruit.shiny-co.jp/archives/315): 採用チャットに“らしさ”を持たせる初期設... - [第3回：大手のAIチャットを試して見えた“現実”](https://recruit.shiny-co.jp/archives/309): 実際のAIチャットボットの精度はどうなの... - [第2回：ChatGPTなら完璧だと思った。でも精度の壁にぶつかった](https://recruit.shiny-co.jp/archives/300): ChatGPTを使って採用チャットを設定... - [モバイルファーストで逃げたけど──iPad Pro問題を超えて3モードUIに再挑戦した話](https://recruit.shiny-co.jp/archives/288): “3モード設計”と言いながら、実質は2系... - [iPad Proのレイアウト、悩んだ末に“モバイルファーストで逃げました”](https://recruit.shiny-co.jp/archives/266): 現在制作中のWebマニュアルでは、レスポ... - [第1回：「いろいろ試した。でも残ったのはChatGPTとGeminiだけだった」](https://recruit.shiny-co.jp/archives/283): はじめに：採用サイトにAIチャットを入れ... - [Webマニュアル制作中に“脱線”ペルソナ風UIをつくってみたら、意外にアリだった話](https://recruit.shiny-co.jp/archives/253): Webマニュアルを作っていると、地味な作... - [「これならできそう」を伝えるWebマニュアル、開発中です。](https://recruit.shiny-co.jp/archives/246): はじめに 現在、当社では「ノーコードで更... - [Webマニュアル制作の裏側：AIで仮キャラを作ってみた話](https://recruit.shiny-co.jp/archives/240): 現在進行中の「ノーコード採用サイトのWe... - [Webマニュアル、ついに中身づくりへ。](https://recruit.shiny-co.jp/archives/230): 進行中の開発画面に“あの猫”が登場中？ ... - [Webマニュアル、まずは“表紙”から作っています【使い方ガイド制作中】採用サイトの更新マニュアル、まずは表紙が完成！](https://recruit.shiny-co.jp/archives/215): ― ノーコード採用サイトを「使いやすそう... - [「誰でも更新できる」を伝えるために、見せる用マニュアルを作っています](https://recruit.shiny-co.jp/archives/101): ― ノーコード採用サイトは“触ってイメー... - [ノーコードで更新できる採用ページを中小企業のために作った理由](https://recruit.shiny-co.jp/archives/99): ― なぜ“誰でも運用できる”ことが重要な... --- # # Detailed Content ## 固定ページ シャイニー株式会社へのお問い合わせへは、下記のフォームにて承ります。お気軽にお問い合わせ下さい。 お問い合わせの種類 --選択してください--見積り依頼お仕事のご相談その他お問い合わせ 0. 00 お名前（よみがな） Eメールアドレス Eメールアドレス（確認） 電話番号（数字のみ入力） 貴社名 部署 見積り依頼・お問い合わせ ご連絡・ご相談事項 お問い合わせ内容 「プライバシーポリシー」に同意の上送信します。 ご提供いただきました個人情報は、お問い合わせへの回答のみに使用いたします。 必須項目を全て入力してください。 送信内容を確認 入力内容の確認 個人情報保護のため、送信後にお送りするメールには以下の内容を一部記載いたしません。必要な方はこの画面を保存してください。 お問い合わせの種類: お名前: お名前（よみがな）: Eメールアドレス: Eメールアドレス（確認）: 電話番号: 貴社名: 部署: お見積り依頼・お問い合わせ: ご連絡・ご相談事項: お問い合わせ内容: プライバシーポリシーに同意する : はい 戻る 送信する --- お問い合わせありがとうございました。 この度は、弊社お問い合わせフォームよりご連絡をいただき、誠にありがとうございます。 お問い合わせ内容を確認させていただき、後ほど担当者よりご回答をさせていただきます。 また、ご入力いただいたメールアドレス宛に自動返信メールをお送りいたしました。 内容のご確認をお願いいたします。 --- --- ## 投稿 採用チャットに“らしさ”を持たせる初期設定の考え方 今回は、実際に採用チャットとしてリリースするために行った初期設定やカスタマイズについて、可能な範囲でご紹介します。ただし細かい設定やプロンプトの中身までは非公開とし、あくまで“考え方”と“雰囲気”の共有です。 キャラクターの口調や性格をどこまで調整するか チャットの口調やトーンは、ユーザー体験に直結する重要な要素です。今回は「真面目すぎず、フレンドリーすぎない」バランスを意識し、特定の話題には答えないよう制限を設けたり、距離感を調整したりしました。このあたりの微調整が、“なんとなく好感が持てる”チャットになる鍵だと感じました。 「答え→補足→リンク」の順番を意識する 最近のチャットボットでは、すぐに「詳しくはこちら」とだけ返してくるパターンが多く見られます。でも、テスターからは「それじゃ検索の方が早い」との意見も。そこで今回は、まず答えを文章で出し、その後にリンクを添える構成にしました。 実際の応答例から見る“らしさ” 以下は、実際のチャット応答の一例です。 質問：応募に必要な書類は？回答：応募フォームに履歴書を添付していただいた場合、そのまま書類選考に進みます。また、ご応募前のお問い合わせ・ご相談も受け付けております。（PDF形式で添付できない場合は、「お問い合わせの種類」で「お問い合わせ・ご相談」を選択してご連絡ください。）詳しくは、こちらをご覧ください: https://recruit. shiny-co. jp/demo/entry ▲ 実際に採用サイトで動いているチャットボットの回答画面（質問：応募に必要な書類は？） 大手のチャットボットと比較して気づいたこと 大手企業のサイトでもチャットボットをよく見かけますが、驚いたのは「実はそこまで便利ではないこと」でした。たとえば「店舗の営業時間を教えて」と聞いても、「○○のページをご覧ください」とだけ返され、そこから数回のクリックをしないと答えにたどり着けないことも。もしかすると、月に何十万アクセスもある大手では、AIの負荷を避けるために、あえて情報を絞っているのかもしれません。 中小企業だからこそできるチャット体験を 逆に言えば、個人で運用する私のような立場では、もっと“人間らしい対応”に近づける工夫ができるということでもあります。「ひとりでやってるからこそ差... --- 実際のAIチャットボットの精度はどうなの？ 前回は、最終候補としてChatGPT系とGemini系の2つに絞ったところまでを書きました。今回は、あえて自分が開発しているAIチャットと比較するために、大手企業が導入しているAIチャットをいくつか実際に使ってみた体験についてまとめます。 ある大手電機メーカーの公式サイトで「店舗の営業時間を教えて」と質問してみました。すると返ってきたのは、「こちらのページをご覧ください」というリンク付きの返答のみ。リンクをタップすると公式サイトのトップページに遷移し、さらにそこから何ページもクリックしないと目的の情報にたどり着けませんでした。 正直、「これならGoogleで“◯◯ 店名 営業時間”って検索した方が早いのでは？」と思ってしまいました。チャットというインターフェースを使ったはずなのに、むしろ手間が増えてしまったという印象です。 もちろん、企業のチャットボットがそういう設計になっているのには理由があると思います。正確な情報をFAQに誘導し、ユーザーに自己解決を促すスタイルとしては筋が通っています。 ただ、今回自分が作っているのは採用チャットであり、利用者が欲しいのは「答えそのもの」です。サイトを回遊させるより、その場で直接答えた方がずっと効率がよく、ストレスもありません。 たとえば「応募に必要な書類は？」という質問に、「履歴書と職務経歴書の2点です」と即答する。そういった“即答型”のチャットの方が、明らかに使い勝手がいいと感じました。 とはいえ、精度の面ではこちらが一方的に勝っているとも思っていません。実際、社内で使ってもらったテスターからは「文体がやや硬い」「聞き方を変えると返答がブレる」といった声もありました。そこでMarkdown形式のプロンプト、JSONベースの定義、日本語／英語混在パターンなどを試行錯誤しながら改善を重ねてきました。 それでも思ったほど精度は安定せず、最終的には「大手でもこのレベルなんだな」と、少しホッとしたのが正直なところです。 次回は、実際に採用チャットとして公開するために行った初期設定や、各種カスタマイズについて（可能な範囲で）紹介します。とはいえ、あまりに詳細に書くと誰でも真似できてしまうので、雰囲気だけお伝えできればと思います。 --- ChatGPTを使って採用チャットを設定していた私たち。最初は「これだけ優秀なAIなら、きっと完璧に応答してくれるだろう」と期待していました。 ところが実際に質問を投げてみると、少しずつ違和感が出てきました。 たとえば「応募後の流れは？」と質問すると、一部の情報は返ってきますが、後半の説明が抜けていたり、質問の表現を変えると答え方が変わってしまったり。 “答えは間違っていないけれど、どこか物足りない”──そんな印象でした。 そこで、プロンプトの設計を工夫し始めました。Markdown形式でルールを書いたり、英語で命令を与えてから日本語で答えさせるようにもしてみました。それこそ何十通りものパターンを試しました。 一時的に少し良くなったように見えても、安定しない。違う業種、違う質問になると、またブレが出てしまう。 「もっと精度上げられないかな？」開発担当の技術者にそう伝えてみたことがあります。そのとき返ってきたのは、意外な一言でした。 「正直、大手でもここまで精度出すのって難しいですよ。」 その言葉でハッとしました。「もしかして、自分たちだけが苦労しているんじゃないのかも」と。 それまでは、「うまくいかないのは設定のせい」だと思っていました。でも、技術者の冷静な視点からすると、“AIチャットに求めすぎていた”のかもしれません。 こうして私たちは、視野を広げることにしました。他の企業のAIチャットはどうなのか？本当に採用サイトのチャットのAIが劣っているのか？それとも、今はまだ「そういう時期」なのか？ 次回は、実際に試してみた大手企業のAIチャット体験と、そこから再浮上した「Gemini」の話に入っていきます。 ▶ 第3回：「他社のAIチャットで迷子に。そこから見えた“ちょうどよさ”とは？」 --- “3モード設計”と言いながら、実質は2系統。そこにこだわった理由。 モバイルファーストで“逃げた”その後──3モードUIへの再挑戦 前回、iPad Proの横画面レイアウトに苦戦して「PC以外はモバイルファーストで統一」という方針に落ち着いたとお話ししました。 当時は「逃げた」と感じる部分もありましたが、実際には合理的で安定した判断だったと思っています。 ただその後、実運用とフィードバックの中で、次の課題が見えてきました。 PCで見ると「物足りない」 画面が広いのに1カラム表示は情報密度が低く感じる 補足画像や演出が活かしきれない PCユーザーが多いなら、専用の見せ方をした方が効果的 そうして、もう一度UI設計を見直すことにしました。 3モード制御、でもUIは2系統で再設計 今回採用したのは「PC」「タブレット」「モバイル」の3モード判定をベースにしながらも、レイアウトは“PC専用”と“タッチ端末用”の2系統に分ける方式です。 ブレークポイントと判定方式 CSSではメディアクエリで以下のように分岐しています： PC：画面幅 1401px 以上 タブレット：769〜1400px モバイル：768px 以下 JavaScriptでは DeviceDetector. js を使い、以下のように判定しています： isDesktop：PC isTablet：タブレット isMobile：モバイル isMobileOrTablet：タッチ端末全般 また、±16pxのヒステリシス処理と100ms以内の変化無視を入れて、安定した切り替えを実現しています。 レイアウト構成の違い PCモードでは： 左右2カラムの“見開きレイアウト”を採用（. book-spread-container） 左に本文、右に補足画像や図解 固定のサイドメニューも常時表示 アニメーションや演出を含めたフルUI タブレット・モバイルモードでは： 単一カラムの縦スクロール型レイアウト（. detail-panel） 補足画像や演出は省略 メニューはフッターからオーバーレイで開く方式 スクロール中心のシンプルで軽量な設計 コンテンツの表示方式 PCでは showDetailCards を使って、1枚ずつ章を切り替える形式を採用しています。切り替えは400msのフェード効果で、没入感を意識した静かな演出です。 モバイ... --- 現在制作中のWebマニュアルでは、レスポンシブ対応も進めています。PC・スマホそれぞれの見え方を意識して設計していた中で、地味に厄介だったのが 「iPad Proの横画面」の扱いでした。 PCに見えるけど... 中身はタブレット iPad Proの横画面って、見た目はほぼPC。だから当初は「PCモードのレイアウトにしよう」と考えていました。 ですが、やってみると想像以上に複雑でした。 タッチ？マウス？Mac？iPad？... ... 判定が難しすぎる iPadのSafariはMacのようなユーザーエージェントを返してくる CSSやJavaScriptの判定だけでは完全に区別できない そもそも 「見た目はPCでも、操作性はタブレット」 というギャップが大きい PCレイアウトを適用しても、タッチでは小さなボタンが押しにくく、ホバーが効かず、スクロール感度も違和感が出てしまいました。 結論：「PC以外はモバイルファーストで統一」 最終的にはこう判断しました。 完璧な分岐はやめて、PC以外はすべてモバイルファーストで統一。 タップ前提の縦スクロールUI ホバーなしでも迷わず操作できる設計 スマホ〜タブレット間で統一感のあるレイアウト iPad Pro専用の細かい調整は潔く諦め、全体最適を優先することにしました。 開発ツールでのiPad Pro横画面表示。見た目はPCのように表示されるが、操作性や実装上の挙動はモバイルに近く、レイアウト判断が難しかった。 スマートフォン（iPhone 12 Pro）表示では、モバイルファーストの縦長レイアウトが適用され、操作性と視認性を重視した設計になっている。 「逃げた」ようで、実は合理的だったかも もちろん「逃げた」という気持ちも少しあります。でも実際は、開発コスト・保守性・UIの一貫性を考えたら、むしろ最善の判断だったと感じています。 iPad Proユーザーもいる。でも、読みやすさを保てばOK アクセス解析を見ると、確かにiPad Proからのアクセスもあります。だからといって、そのためだけにPCレイアウトを維持するのは現実的ではありません。 読みやすさと操作しやすさが保たれていれば、デザインの方向性はシンプルでいいと考えました。 まとめ “逃げた”ようで、実は最も安定した解決策だった iPad Proのレイアウトは見た目と実態がズレ... --- はじめに：採用サイトにAIチャットを入れてみたかった 応募者の「ちょっと聞きたい」に、すぐ応えられる採用サイトをつくりたい。 その想いから、AIチャット導入を検討し始めました。よくある質問（FAQ）を自動応答できれば、問い合わせ対応の工数も減らせますし、応募前に不安を解消できるなら、コンバージョン率にも良い影響があるはず。 「じゃあ、どのAIを使おう？」ここから、“AIチャット選びの旅”が始まりました。 まずは気になるAIを手当たり次第にテスト 社内で検討したAI候補は以下のとおりです： ChatGPT（OpenAI） Claude 3（Anthropic） Gemini（Google） Grok（xAI / Elon Musk） Notion AI（社内ツール連携） Bing Chat（Microsoft） それぞれのAIに、以下のような質問を投げて回答を比較しました： 「会社の休日制度はどうなっていますか？」「応募から面接までの流れを教えてください」「エントリーフォームに添付できるファイル形式は？」 実際にやってみて分かった、“使えるAI”と“惜しいAI” 最初に分かったのは、日本語での自然なやり取りに強いAIは限られているということ。 Claude → 長文は得意だけど、固有情報の理解に弱い Bing Chat → 会話がWeb検索に寄りすぎて脱線しがち Grok → API非公開のため実装が困難 Notion AI → チャットボット用途としては不向き また、使いやすさや柔軟性、実装の現実性も踏まえると実用レベルで採用サイトに“本当に使える”と思えたのは、2つだけでした。 テストを重ねた結果、最後まで候補に残ったのがこの2つ： ChatGPT（GPT-4） Gemini（Google製AI） どちらも自然なやり取りができ、高性能で、導入実績も豊富。特に日本語でもかなり安定した応答が得られ、操作性やカスタマイズ性にも信頼感がありました。 以下は社内評価の一部です： テストを重ねた結果、最後まで候補に残ったのがこの2つ： ChatGPT（GPT-4） Gemini（Google製AI） どちらも自然なやり取りができ、高性能で、導入実績も豊富。特に日本語でもかなり安定した応答が得られ、操作性やカスタマイズ性にも信頼感がありました。 社内で評価した際の印象としては、... --- Webマニュアルを作っていると、地味な作業が続くことも多い。構成を整えて、表紙を作って、画像のalt属性をつけて、ボタンの挙動を調整して... 。そんな中、ふとした瞬間に「ちょっと遊んでみたくなる」ことってありませんか？ 今回ご紹介するのは、制作の合間に生まれた“寄り道UI”の話です。真面目なマニュアル作りの途中で、完全にノリでペルソナ5風のインターフェースを作ってみました。動画サイズは11MBあります・・・・・5秒ぐらいからカットインアニメーションが始まります。 なぜペルソナ風だったのか？ 理由は単純です。ゲームもやっていたんだよね。ペルソナシリーズ大好きだったのと、キャラ選択メニューっぽいパネル構成を組んでいたから。 その時ふと、「これ、P5っぽくできるんじゃ？」と思って試しに作ってみたところ、想像以上にハマってしまいました。 UIの工夫ポイント 背景にはP5らしい赤と黒のスラッシュ柄を再現 フォントはやや角ばったスタイルで、緊張感を演出 メニューに入るたびにキャラのカットインがスライドイン アニメーションはCSS＋JavaScriptで制御、GSAPで動かす設計に こう書くとがっつり作ったように見えますが、あくまで「息抜きとしての試作」です。実際のマニュアルにはまだ採用していません（少なくとも正式には... ） 社内ではウケなかったけれど... 正直なところ、このUIを社内で見せたときの反応は... 微妙でした。 「これって何の意味があるの？」「かっこいいけど、使いにくそう... 」 確かに、実務で必要な情報にたどり着くには、派手すぎるUIは逆効果になる場合もあります。そのため、**この案は“お蔵入り”**にすることにしました。 ちなみに、このUIで表示されているキャラクターは、学生時代の自分の写真をAIに読み込ませて「ペルソナ5の主人公風にして」と指示したものです。完全にネタですが、個人的には妙にしっくりきて気に入っています。 遊びは無駄じゃない 実際にこうした脱線作業は、本来の制作にも良い影響を与えることが多いです。 UIパターンを増やす練習になる アニメーションの実装テストができる そして何より、モチベーションが回復する 「息抜きがそのまま本番に活かせることもある」— これは、小規模開発やノーコード導入支援の現場では特に感じることです。 最後に：もし“裏... --- はじめに 現在、当社では「ノーコードで更新できる採用サイト」の紹介用として、別途Webマニュアルを制作中です。 このマニュアルは、採用サイトに組み込まれた機能ではなく、“導入を検討している方に、使いやすそうだと感じてもらう”ための販促ツールです。 よくある操作マニュアルやFAQとは異なり、 「見ただけで使えそう」「安心して任せられそう」と感じてもらえることを大切に、構成や見せ方にこだわっています。 小規模だからこそ、わかりやすく このマニュアルは、数十人規模の開発チームで作るような“本格的な業務システム”ではありません。 私たちが目指しているのは、月額9,800円で導入できる採用サイトに見合った、ちょうどよいサイズのガイド。 自分で更新できるか不安な人にこそ見てほしい サポートを受けずに“触ってわかる”を体感してもらいたい 見た目の安心感も含めて「これならできそう」と思ってもらう そんな想いで、小さく、わかりやすく、でも確実に伝わる構成を心がけています。 現在の進捗と、つまずいたポイント 今回のマニュアルでは、以下の3つの改善ポイントを最初に実装しました。 1. アクセシビリティ対応（UI/UX向上） Tabキー、Enter、矢印キーによるナビゲーション操作 aria-live領域によるスクリーンリーダーへの対応 2. モバイル体験の最適化 スマホでのページ切り替えをタッチスワイプで実装 スクロールの感度を調整して“気持ちよく動く”操作感を実現 3. パフォーマンス最適化 画像をすべてWebP形式に統一し、遅延読み込み（lazy load）を適用 不要なCSSルールを削除し、描画負荷を削減 ... しかし、実はこの「3. パフォーマンス最適化」の実装が、予想外のバグを引き起こしました。 表示されるはずのコンテンツが別の画像が表示される 検索機能が表示されない。 一通りの機能を組み込んだ後のバグチェックでこの不具合が発覚。 バグチェックの結果、「原因はCSS最適化だった」 見た目の表示崩れやスクロール停止といった重大なバグは発生しませんでした。ですが、想定と微妙に異なる挙動や、描画タイミングのズレが生じていました。 ページ読み込み後のレイアウトの遅れ モバイル端末での細かなズレ スクロール位置が初期化されないタイミング これらの原因を調べたところ、CSSでの調整とWe... --- 現在進行中の「ノーコード採用サイトのWebマニュアル」。実はまだ中身のページは鋭意制作中なのですが、その仮の“見せ方”も含めて試行錯誤しています。 その中でも、ちょっとした遊び心として取り入れてみたのが、社内AIサーバーで生成した「うちの愛猫」をベースにした、ペルソナ5風のキャラクター画像です。 最初に作ったのがこちら こちらは、愛猫の写真をAIに渡して、コミック風に変換した試作版です。やわらかいタッチと、実際の毛並みをうまく反映した仕上がりになりました。でもちょっとリアルすぎるんだよねー。なんかペルソナ5？って感じじゃないような・・・・ もう少しインパクトを出したい → 黒マスクバージョンへ とはいえ、もう一歩パンチが欲しいし、もっとかわいくしたい！！！！ということで、最終的に生成したのがこちら。これは前のブログでも紹介したものです。細かなところがうまくいかなかったので、社内デザイナーに手伝ってもらったやつです。 赤×黒の背景と、怪盗風のマスクで、印象的かつ目を引くデザインに。 この画像はあくまで仮画像ですが、見る人に「なんだこれ？」と思ってもらえることも狙いのひとつです。 なぜ仮でも「見せる画像」が大事なのか？ Webマニュアルは、操作説明だけではありません。とくに私たちが目指しているのは、**「見て使ってみたくなる」**マニュアル。 だからこそ、最初の段階から 親しみがある 雰囲気が伝わる 記憶に残る そういった“印象設計”も大事にしています。 これから中身を整備していきます 現在はまだ、仮画像＋構成テンプレートの状態ですが、今後は以下のような実用的なコンテンツを順次追加予定です。 【職種の追加方法】スクリーンショット付き解説 【画像の差し替え方法】ステップごとの説明付き 【よくある質問】Q&A形式でまとめた実例集 最後に 今回ご紹介したAIキャラ画像は、社内のAIサーバーで社内メンバーが生成したもの。あくまで「今だけの仮キャラ」ですが、こうした過程も含めて“マニュアルが手作りで進んでいること”を知っていただけたらと思います。 引き続き、制作の進捗もブログで共有していきますので、どうぞお楽しみに！ --- 進行中の開発画面に“あの猫”が登場中？ 表紙が完成してから、いよいよ中身の制作フェーズへ 先日公開した「採用サイトの使い方ガイド（Webマニュアル）」の表紙ページに続き、現在は中身のコンテンツ制作を進めています。 とはいえ、すべてのページが完成しているわけではなく、構成を整えて、本文を入れる準備をしている段階です。 そんな中でも、開発中の雰囲気を少しでも楽しんでもらいたくて、ページによっては“仮画像”を入れてデザインを進めています。 今回の「仮画像」は愛猫をAIでペルソナ風にしたものです たとえば、こちらが現在作成中の「スタッフの声の登録方法」ページです： ※画像はイメージです。本番では実際の管理画面スクリーンショットに差し替える予定です。 赤と黒のビジュアルに包まれているのは、AIで生成した愛猫の“怪盗風イラスト”。 ちなみにこのイラストは、社内のAIサーバーで愛猫の写真をもとに生成し、社内のデザイナーに頼んでちょっと加工したものです。仮とはいえ、「中身の構成が進んでいること」と「ちょっとした遊び心」が伝わればという思いで配置しました。じつは、現在制作中のマニュアルはこのように、ページごとにレイアウトやガイド構成を調整しながら仕上げている最中です。 なぜ仮画像？そしてなぜ猫？ 完成を待ってからでないとブログを書けないのはもったいない 「どんな感じで進んでるか」を見せるだけでも、お客様に伝わることがある せっかくなので、ちょっとした遊び心も盛り込みたい　→ ということで「愛猫 × ペルソナ風」のイメージをネタ画像として採用しました 実際に見ていただくと、「ちゃんと作り込んでる」「本当に公開準備中なんだな」と伝わるかと思います。 このあとは本格的な解説パートを順次追加していきます 今後は以下のような中身を、順次アップしていく予定です。 【職種の追加方法】投稿画面のスクショ付きで手順説明 【画像の差し替え方法】実際の管理画面を見せながらステップ解説 【よくある質問】Q&A形式でまとめて掲載 どのページも「見るだけで操作の流れがつかめる」ことを意識して構成していきます。 最後に このWebマニュアルは、「導入前に実際の使い方をイメージしてもらう」ことが目的です。 見た目の親しみやすさ、情報の分かりやすさを両立させながら、今後も更新していきますので、ぜひ引き続きご覧いただけ... --- ― ノーコード採用サイトを「使いやすそう」に見せるために ― 現在、ノーコード採用サイトの紹介用として、Webマニュアルを制作中です。まだ中身はこれからですが、ひとまず“表紙だけ”は完成しました。 この表紙は、サービス資料でも操作動画でもない、**「使い方の雰囲気が伝わるページ」**として制作したものです。 なぜWebマニュアルに“表紙”が必要なのか？ マニュアルと聞くと、一般的にはPDFや操作手順書を想像されると思います。でも今回私たちが作っているのは、宣伝用＝見せるためのWebマニュアルです。 つまり、 操作方法を詳しく説明するのが目的ではなく **「本当に誰でも使えそう」「見た目も親しみやすい」**と感じてもらうことが目的 そのため、「最初に出てくる表紙」がとても大事だと考えました。 表紙で伝えたい3つのこと 制作中の表紙には、次の3つのメッセージを込めています。 誰向けかがすぐわかること　→「埼玉県の中小企業向け」「50名以下の会社専用」と記載しており、対象が明確です。 価格と安心感を伝えること　→「月々￥9,800〜」と大きく表示。価格の透明性が“相談しやすさ”につながります。 操作のしやすさをイメージできること　→「使い方を見る」ボタンを設置し、閲覧者が“自分でもできそう”と思えるようにしています。 Webマニュアル、現在ここまでできています 「誰でも更新できる採用サイト」を目指して制作中のWebマニュアル。現在はまだ表紙のみブログでの紹介ですが、内部の構築も少しずつ進んできました。 特に最近は、見た目や使い心地に関する調整に力を入れています。 表示速度や軽量化の工夫も ページ表示のパフォーマンス向上のため、画像はすべてWebP形式に統一し、**遅延読み込み（lazy load）**にも対応する予定です。また、不要なCSSルールも整理・削除し、表示の安定性を高める予定。 ユーザー体験をなめらかに 誰が見ても「わかりやすい」「操作しやすい」と感じてもらえるよう、以下のような改善にも取り組んでいます： アクセシビリティ対応 Tabキーや矢印キーによるナビゲーション操作 スクリーンリーダー向けの aria-live 領域の導入 モバイル向けの操作性 スワイプでページを切り替えられる機能（スマホならではのUI） スクロールの感度調整によって、指の動きに気持ちよく... --- ― ノーコード採用サイトは“触ってイメージできる”ことが大事 ― 現在、採用サイトのサービスを案内するために、Webマニュアルを制作中です。 これは、納品後の操作説明用ではなく、**サービスを検討中のお客様に「実際どれくらい簡単に更新できるか」を見てもらうための“宣伝用マニュアル”**です。 なぜ「使い方マニュアル」が必要なのか？ ノーコードで構築した採用サイトは、WordPressの投稿画面から誰でも職種を追加したり、画像を差し替えたりできます。ですが、そう聞いただけでは「本当に簡単なの？」「うちのスタッフでもできる？」という不安が残ることも事実です。 実際、こういった声をよくいただきます： 「WordPressって難しそう」 「更新って、外注しないと無理だと思ってました」 「操作画面を見ないとイメージできない」 そこで今回、“見るだけで安心できる”使い方マニュアルをWeb上で誰でも見られる形にまとめています。 マニュアルで伝えたいことは「感覚」 このマニュアルでは、以下のような画面を画像つきで紹介しています。 募集職種の追加手順（実際の投稿画面） よくある質問の修正方法（ブロック編集UI） 画像を追加する流れ スタッフの声の登録　等 これを通じて、「実際の管理画面でどんな操作をするのか」を感覚で理解できるようにしています。 PDFではなく、ブラウザでサクッと見られる 制作しているマニュアルは、いわゆるPDF資料ではありません。LP（ランディングページ）に組み込めるような軽量なWebページ形式で、スマートフォンからでも簡単に確認できます。 スクロールしやすく、カテゴリ別に整理 簡潔な見出し＋画像（またはGIF）で直感的に理解 営業トークの代わりになる“動く提案書”のような役割 「使いやすそう」に見えることが信頼につながる 採用サイトの導入を検討している企業にとっては、デザインや機能だけでなく、「使えるかどうか」が導入判断の分かれ目です。 その判断材料を、わかりやすいUIで先に提示しておくことで、会話の主導権をこちらが握ることができます。 実際、営業前にマニュアルを見てもらうと「これならいけそうですね」と安心してもらえるケースが増えてきています。 まとめ 「ノーコードで更新できます」と言葉で説明するよりも、実際にその画面を見せる方が何倍も伝わる。 そのために、現在進... --- ― なぜ“誰でも運用できる”ことが重要なのか ― 「採用がうまくいかない」これは、私たちが中小企業の経営者の方々とお話しする中で、非常によく聞く言葉です。 実際に多くの企業で、採用ページが一度作られたまま更新されずに放置されているというケースが見受けられます。その理由は明確で、社内で自力で更新・運用できる仕組みが整っていないからです。 中小企業に多い“更新できない”採用サイトの現実 以下は、私たちが実際に現場で聞いた声です。 「制作会社に頼まないと文言ひとつ直せない」 「担当者が辞めた後、更新方法がわからない」 「内容が古くて、実際の待遇とズレている」 このように、情報が更新されないまま放置されているサイトは、求職者の信頼を失ってしまう可能性があります。つまり、「作っただけの採用ページ」は、いずれ“機能しないページ”になってしまうのです。 誰でも使えるように、ノーコード化が必要だった 私たちは、中小企業でも社内の担当者が簡単に運用できるように、ノーコードで管理できる採用サイトを設計しました。 具体的には以下のような構成を採用しています。 WordPress＋Elementorで、ページの見た目を保ったまま編集可能 JetEngineで「募集職種」「よくある質問」「インタビュー」などをカスタム投稿として管理 投稿画面から文章や画像を追加・修正するだけでページに反映される仕組み この構成により、ITの専門知識がなくても、社内の誰かが簡単に情報を更新できるようになります。 よくある質問（FAQ） Q：本当に社内で更新できるようになりますか？A：はい。WordPressの投稿画面から直感的に更新できる設計にしているため、Web制作経験のない担当者でも扱えます。 Q：ノーコードで運用することでデザインが崩れたりしませんか？A：事前にデザインテンプレートを設定してあるため、通常の操作ではレイアウトが崩れることはありません。 Q：セキュリティの面は大丈夫でしょうか？A：ユーザーごとの権限設定や更新範囲の制限を行っているため、安全に社内運用が可能です。 まとめ：更新できることが“強い”採用サイトの条件 採用ページは、作ること以上に「続けて使えること」が重要です。社内で誰でも更新できる仕組みを持っている企業は、タイムリーな情報発信ができ、それだけで信頼性が上がります。 私たちはこれか... --- ---