見出し画像
Photo by akanekofuku

おたりフードサービス リクルートサイトを徹底解剖

26K

マーケティング・コピー・UX・UI・コーディングの視点から見る、「給食業界の常識」を壊すリクルーティングデザイン

はじめに：「原動力、求む」── 給食会社の採用サイトが放つ、異次元の熱量

「湧く沸く　心の内側から出てくる　突き動かされるなにか」──画面を開いた瞬間、目に飛び込んでくるのは、黒い背景にネオンカラーで浮かび上がる、この力強い言葉だ。そして「原動力　求む」という巨大な白文字。これが、長野県小谷村で給食事業を営む「おたりフードサービス」の採用サイトのファーストビューである。

給食会社の採用サイト、と聞いて多くの人が思い浮かべるのは、清潔感のある白を基調としたデザイン、笑顔のスタッフ写真、そして「アットホームな職場です」という定型文ではないだろうか。このサイトは、そうした業界の「当たり前」をことごとく壊している。宇宙空間を思わせるビジュアル、ストリートカルチャーを連想させるタイポグラフィ、そして「給食をカルチャーにする」という野心的な宣言。人口3,000人の小さな村の給食会社が、なぜこれほどまでに攻めたリクルーティングデザインを採用したのか。

本記事では、この異色のリクルートサイトを、マーケティング・ターゲット分析を土台に、コピーライティング、UX、UI、コーディング、アクセシビリティ、SEOの各視点からストーリーとして読み解いていく。制作会社がクライアントに語れる「根拠あるサイト評価」として、この小さな給食会社の大きな挑戦を分析する。

マーケット分析：給食業界という「見えにくい市場」のなかで

3C分析による市場ポジションの整理

おたりフードサービスのリクルートサイトが「なぜ存在するか」を理解するには、まず給食業界の採用市場を俯瞰する必要がある。3C分析のフレームワークで整理する。

Customer（市場・顧客＝求職者）

給食業界の採用市場は、慢性的な人材不足に直面している。厚生労働省の「職業安定業務統計」によれば、調理関連職種の有効求人倍率は継続的に高水準を維持しており、特に地方ではその傾向が顕著である。おたりフードサービスが拠点を置く長野県小谷村は人口約3,000人。白馬村の隣に位置し冬季は観光客で賑わうが、定住人口は限られる。つまり、この会社が採用で競う相手は「同業他社」だけでなく、「都市部の生活そのもの」であり、「地方で働くことへの心理的障壁」でもある。

求職者像は大きく二つに分かれる。一つは地元住民で、家庭との両立を重視しながら安定した仕事を求めるパート・アルバイト層。もう一つは、地方移住や自然に囲まれた暮らしに関心を持ち、「何か新しいことをしたい」という動機を持つ若年〜中堅層である。サイト内のスタッフインタビューには「2023年入社」「2024年入社」と比較的最近の入社者が登場しており、採用は継続的に行われていることが読み取れる。

Competitor（競合）

給食業界の大手としては、日清医療食品、エームサービス、シダックス、LEOC などが全国展開している。これらの企業の採用サイトは、福利厚生や研修制度を前面に出し、安定感と成長機会を訴求する「正統派」のアプローチが主流である。一方、地方の小規模給食会社の多くは、自社の採用サイトすら持たず、ハローワークや求人媒体に依存している現状がある。

白馬・小谷エリアに限れば、宿泊施設やスキー場関連の求人が採用競合となる。これらの職種は季節雇用が多く、通年で安定した仕事を提供できる給食会社には一定のアドバンテージがあるが、そもそもの認知が低いという課題がある。

Company（自社・おたりフードサービス）

2019年3月設立。代表の岡田真樹氏は建築学科の大学院を修了し、建築設計事務所勤務を経て地域おこし協力隊として小谷村に赴任、そこから給食業界未経験で創業したという異色の経歴を持つ。会社概要ページでは「業界経験、ゼロ。常識では無謀とも言える挑戦」と自ら語っている。事業は受託給食（学校・寮・施設向け）、産業給食（企業向け弁当配送）、仕出し・ケータリング、OEM製造受託、惣菜宅配と多岐にわたり、「100％小谷村産のお米」を使用する地産地消の姿勢が特徴である。

コーポレートサイトのキャッチコピー「Food is Action! 食で世の中をもっとよくする！」、リクルートサイトのビジョン「おたりからワクワクを広げる会社」、ミッション「仲間・地域・アイデアで創る宇宙にひとつだけの給食会社」──これらの言葉から、同社が自らを「単なる給食会社」ではなく「食を通じた社会変革企業」と位置づけていることが明確に読み取れる。

ポジショニングマップ

おたりフードサービスの立ち位置を、採用ブランディングの軸で整理すると以下のようになる。

【採用ブランディングのポジショニング】

                 攻めのブランド表現
                       ↑
                       │
                       │     ★おたりフードサービス
                       │
   大手・全国展開 ──────┼────── 地方・小規模
                       │
         大手給食会社●  │
         （安定訴求型） │
                       │
                 守りのブランド表現

大手が「安定」「福利厚生」「キャリアパス」という守りの訴求で採用活動を展開するのに対し、おたりフードサービスは「挑戦」「ワクワク」「原動力」という攻めの訴求で、まったく異なるポジションを確立している。地方の小規模事業者でありながら、採用ブランディングにおいては大手をも凌ぐ独自性を打ち出しているのだ。

ターゲット分析：「原動力」に共鳴する人を、フレームワークで描く

マーケット分析で示した「給食業界の採用市場における異端のポジション」を前提に、このサイトが「誰のために」つくられているかを、ペルソナとカスタマージャーニーで明確にする。

ペルソナ

サイトのコンテンツ・トーン・求人情報から、二つのペルソナが浮かび上がる。

ペルソナA：「チャレンジ志向の移住希望者」

  • 年齢：25〜35歳

  • 属性：都市部在住、飲食業や異業種の経験あり、地方移住に関心

  • ニーズ：自然環境のなかで、自分の経験を活かしながら「何か新しいこと」に携わりたい

  • 悩み：地方の仕事は退屈そう、給料が低そう、キャリアが止まりそう

  • 心理（インサイト）：「ただ暮らすだけでなく、自分の手で何かを変えられる実感がほしい」

  • 行動：SNSや求人メディアで情報収集、企業の姿勢や代表の人柄を重視

ペルソナB：「地元で無理なく働きたい生活者」

  • 年齢：30〜55歳

  • 属性：小谷村・白馬周辺在住、主婦（主夫）、パート希望

  • ニーズ：家庭との両立、生活リズムに合った勤務体系、職場の人間関係の良さ

  • 悩み：年齢的に新しい仕事が不安、未経験だと居場所がないかもしれない

  • 心理（インサイト）：「無理のない範囲で、でも誰かの役に立っている実感がほしい」

  • 行動：知人の口コミ、地元媒体、検索で情報収集

カスタマージャーニー（AISASモデル）

Attention（認知）：SNS・検索・口コミでサイトの存在を知る。ファーストビューの「原動力、求む」「湧く沸く」というインパクトのあるコピーと、給食会社らしからぬビジュアルが「何だこれは？」という注目を集める。

Interest（興味）：コンセプトセクション「前例がないなら自分たちでつくればいい」を読み、業界未経験の代表が立ち上げたストーリーに共感する。仕事紹介の5つのepisode形式の語りで、仕事の具体像が感情的に伝わる。

Search（検索・比較）：「おたりフードサービスについて」ページでMISSION・VISION・VALUEを確認し、会社の本気度を測る。会社概要ページの代表紹介と創業ストーリーで、この会社の「人」を知る。スタッフインタビューで、実際に働く人のリアルな声を確認する。

Action（行動）：「エントリーはこちら」のCTAから求人一覧へ遷移、具体的な求人情報（時給、勤務地、雇用形態）を確認する。

Share（共有）：サイト自体の独自性が話題になり、「こんな給食会社の採用サイトがある」とSNS等で拡散される可能性がある。

このカスタマージャーニーにおいて、サイトは「認知→興味」のフェーズに特に注力していることが読み取れる。「原動力、求む」というファーストビューは、通りすがりの閲覧者を「立ち止まらせる」ための仕掛けであり、ターゲット分析で示した「何か新しいことをしたい」というペルソナAの心理に直接働きかける設計になっている。

コピーライティングの視点：「ワクワク」を言語で設計する

ターゲット分析で示した二つのペルソナ──「チャレンジ志向の移住希望者」と「地元で無理なく働きたい生活者」──に対し、このサイトのコピーはどう語りかけているか。

コンセプトコピーの設計意図：ペルソナAへの求心力

リクルートトップページのメインコピー「原動力　求む」は、一般的な採用サイトに見られる「スタッフ募集中」「一緒に働きませんか」という呼びかけとは一線を画す。「求む」という言い切りの形は、企業が求職者に媚びるのではなく、対等なパートナーとして呼びかける姿勢を示している。

その直前に配置された「湧く沸く　心の内側から出てくる　突き動かされるなにか」という詩的な一節は、おたりフードサービスのVISIONで表明された「ワクワク」の語源を踏まえたものである。Aboutページでは「ワクワクは水などが地中から出てくるさまや物事が急に現われるさまを意味する『湧く』から生まれた言葉」と解説されており、「湧く沸く」というコピーはこのVISIONを凝縮した表現だ。

コンセプトセクションの見出し「前例がないなら自分たちでつくればいい。」は、代表の岡田氏が給食業界未経験から起業したストーリーと直結している。ペルソナ分析で示した「何か新しいことをしたい」と感じている求職者に対し、「ここにはその環境がある」と応答するコピーになっている。

仕事紹介のナラティブ：物語で仕事を語る

仕事紹介セクションでは「episode 1. 創造力」「episode 2. 仕入れ」「episode 3. セントラルキッチンで一括調理」「episode 4. 現地調理」「episode 5. ごはんが旅立つ瞬間」と、一連の業務フローを五章の物語として構成している。「episode」という呼称自体が、ドラマやドキュメンタリーを連想させ、日常の仕事を「物語化」する意図が見て取れる。

たとえば、episode 5の配送業務についてのコピー「ごはんが旅立つ瞬間」「白馬と小谷の山の景色を抜けながら、ごはんは静かに旅立っていく。誰かのもとへ、今日の一食を届けるために。」は、単なる配送作業を「旅立ち」というメタファーで語り直すことで、仕事に意味と感情を与えている。これは、ペルソナAが求める「自分の仕事に意味を感じたい」という心理に応えるコピーである。

スタッフインタビュー：ペルソナBへの安心の提供

一方、スタッフインタビューのトーンは大きく異なる。「無理なく、自分のペースで続けられる職場だと思います」「みなさんとても優しくて安心して働ける環境です」「忙しくても、ちょっとした達成感を味わえる職場です」──これらの見出しは、ペルソナBが抱える「年齢的に不安」「未経験だと居場所がないかもしれない」という心理に直接寄り添っている。

「未経験で始めた私でも、少しずつ自分のペースをつかんで、無理なく続けられる職場だと感じています」「先輩たちが丁寧に教えてくれるので安心して働けています」といった実際のスタッフの声は、メインビジュアルの攻めたトーンとは対照的な、地に足のついた安心感を提供している。

コピー全体のトーンバランス

このサイトのコピーは、「攻め」と「守り」を意図的に使い分けている。ヒーロー・コンセプト・MISSION/VISION/VALUEは「攻め」のトーンでペルソナAを引きつけ、スタッフインタビュー・求人情報は「守り」のトーンでペルソナBを安心させる。この二層構造は、限られた採用市場でできる限り幅広い求職者にリーチしようとする戦略が、コピーの段階で設計されていることを示している。

会社概要ページの代表紹介セクション「"無理だ"と言われる挑戦こそ、俺たちのスタンダードだ」「やるべき時は"今"、やるべき場所は"ここ"」という一文には、代表の一人称に近い熱量の高い口語体が採用されている。「俺たち」という主語は、フォーマルな企業サイトではまれであり、代表の人柄と会社のカルチャーを文体そのもので伝える試みである。

1. UXデザインの視点：求職者の心理に沿った「物語型導線」

コピーの二層構造──「攻め」のコンセプトと「守り」のインタビュー──を、UXはどのような体験の流れで届けているか。

1-1. 情報アーキテクチャ：リクルート専用サイトとしての独立構造

おたりフードサービスは、コーポレートサイト（otari-food.com）とリクルートサイト（otari-food.com/recruit/）を明確に分離している。コーポレートサイトは「事業紹介」「会社概要」「お問い合わせ」を中心としたBtoB（自治体・企業向け）の構成であるのに対し、リクルートサイトは「おたりフードサービスについて」「仕事紹介」「スタッフインタビュー」「会社概要」「お知らせ」「エントリー」という採用に特化した構成になっている。

otari-food.com/recruit/ （リクルートサイト）
├── /recruit/about/     → 理念・事業（MISSION/VISION/VALUE）
├── /recruit/works/     → 職種紹介（5職種）
├── /recruit/#interview → スタッフインタビュー（ページ内アンカー）
├── /recruit/company/   → 会社概要・代表紹介・創業ストーリー
├── /posts/             → お知らせ
├── /job/               → 求人一覧（エントリー）
└── /contact/           → お問い合わせ（コーポレートと共通）

この構成は、求職者がカスタマージャーニーの段階に沿って情報を取得できるように設計されている。「何をしている会社か」（About）→「どんな仕事があるか」（Works）→「実際に働いている人はどう感じているか」（Interview）→「会社の背景は」（Company）→「応募する」（Job）という、認知から行動への流れが情報構造に反映されている。

1-2. ナビゲーション設計：常時アクセス可能なグローバルナビ

全ページに共通のヘッダーナビゲーションが配置されており、「トップページ」「おたりフードサービスについて」「仕事紹介」「スタッフインタビュー」「会社概要」「お知らせ」の6項目が常にアクセス可能である。スマートフォンではハンバーガーメニュー（ピンク色の円形ボタンに「MENU」の文字）として実装されており、視認性が高い。

フッターにはリクルートサイト内のナビゲーションに加え、「ENTRY」「CONTACT」「CORPORATE SITE」へのリンクが配置されている。特に「CORPORATE SITE」のリンクは、求職者がリクルートサイトからコーポレートサイトへ遷移し、事業内容をより詳細に調べる導線として機能している。

1-3. コンバージョン導線：CTAの繰り返し配置

各ページの下部に「ENTRY」のテキストが横方向に連続してスクロールするマーキー形式のCTAが設置されている。この反復的なCTAは、ページのどの位置までスクロールしても「エントリーはこちら」というアクションへの導線が途切れないことを意味している。リクルートトップページ、Aboutページ、Worksページ、Companyページのすべてに同じフォーマットのCTAが配置されており、サイト内のどのページからでもエントリーページ（/job/）へ遷移できる設計になっている。

また、ページ上部には「電話によるお問い合わせ　受付時間 8:00～17:00 土日祝定休」という電話導線も用意されており、デジタルリテラシーの差がある求職者にも対応している。「電話をかける」のリンクは `tel:` 属性で実装されており、モバイルからのワンタップ発信に対応している。

1-4. リクルートトップページのスクロール体験

リクルートトップページの構成は、ヒーロー（湧く沸く・原動力求む）→ コンセプト（前例がないなら～）→ 動画（お弁当ができるまで）→ 仕事紹介（5エピソード抜粋）→ スタッフインタビュー → 会社紹介（宇宙にひとつだけの給食会社）→ お知らせ → エントリーCTA → フッター、というストーリー順になっている。

この流れは、AISASモデルの「Attention → Interest → Search → Action」と対応しており、ページをスクロールするという行為そのものが、求職者のカスタマージャーニーを追体験する構造になっている。

2. UIデザインの視点：「給食会社らしくない」を徹底するビジュアル戦略

コピーが「攻め」と「守り」の二層構造で設計され、UXがそれをストーリー順の導線で届けているならば、UIは「その体験をどう見せ、感じさせているか」という問いに答える領域である。

2-1. カラーパレット：黒×ネオンが生む「非日常」

リクルートトップページのファーストビューは、黒（暗色系）を背景に、ネオンピンク、ネオンオレンジ、グラデーション（ピンク→オレンジ→イエロー）をアクセントカラーとして使用している。これは給食業界の採用サイトとして極めて異例なカラーパレットであり、ストリートカルチャーやミュージックフェスティバルのグラフィックに近い印象を与える。

一方、Aboutページは白を基調にピンクとパープルをアクセントに据え、調理中の鍋や弁当の写真と組み合わせて「明るく楽しい職場」を演出している。Companyページではネオングリーンを背景に宇宙的なビジュアルを配置し、Worksページはクリーンなホワイトベースで職種紹介に専念している。

このようにページごとにカラースキームを変えることで、各ページに異なる「ムード」を与えながらも、ピンクのMENUボタンやロゴ（トマトのアイコン＋「OTARI FOOD SERVICE」）で統一感を保っている。

2-2. タイポグラフィ：5つのフォントが織りなす表情

このサイトでは、Google Fontsから複数の書体を読み込んでいる。確認できたのは以下の書体群である。

  • Dela Gothic One：ファーストビューの「湧く沸く」「原動力　求む」に使用された極太ゴシック。圧倒的な存在感で「力強さ」「衝動」を表現する

  • Anton：「OTARI FOOD」「RECRUIT 2026」などの英字大見出しに使用されたコンデンス体。ポスター的な印象を与える

  • Shippori Mincho：「心の内側から出てくる　突き動かされるなにか」で使用された明朝体。詩的でエレガントな印象を添える

  • Bai Jamjuree：「Service」の筆記体的な表記に使用。手書きの温かみを加える

  • Noto Sans JP：本文テキストに使用。可読性の高いニュートラルな書体

5種類の書体を一つのサイトで使用するのは、デザインの教科書的には「多すぎる」とされるが、このサイトではそれが意図的な効果を生んでいる。「力強さ」「詩的さ」「親しみ」「クール」「読みやすさ」──それぞれの書体が異なる感情を担当し、一枚のポスターのようなレイヤー構造をつくり出している。

2-3. 画像・映像の演出：宇宙と給食の共存

リクルートトップページの中盤に配置された動画セクションでは、代表の岡田氏と思われる人物の映像が、宇宙空間を思わせるオーロラ・星雲のビジュアルとコラージュされている。「FOOD SERVICE OTARI」のテキストが横スクロールするテロップとして流れ、その下には惑星や野菜（玉ねぎの断面、パプリカ、きゅうり）が宇宙空間に浮かぶイラストが配置されている。

この「宇宙×食材」というビジュアルは、会社概要ページの「宇宙にひとつだけの給食会社」というキャッチコピーと連動しており、ブランドのビジュアルアイデンティティとして一貫性がある。Aboutページでは「食の力で人を育て 地域を支える」の見出しのまわりに、トマト、パプリカ、米をちらすことで遊び心を加えている。

2-4. 求人カードのUI：チケットのメタファー

求人一覧ページ（/job/）の各求人情報は、白い背景に黒いボーダー、右上にバーコード風のグラフィック、「VALID FOR 2026」というスタンプが押されたチケットのようなデザインで表示されている。職種カテゴリ（「調理師」「寮の管理人」）のラベル、雇用形態（「パート・アルバイト」「契約社員」）、時給、勤務地が明確に構造化されており、情報の一覧性が高い。

このチケット型UIは、「仕事との出会い」を「チケットを手にする」という体験にメタファーとして変換する試みであり、求人情報という実用的な情報に遊び心を加えている。

2-5. マイクロインタラクション

サイト全体にわたって、AOS（Animate on Scroll）ライブラリによるスクロール連動アニメーションが実装されている。セクションの切り替わりでフェードイン・スライドインが発動し、静的なページに動きと奥行きを与えている。また、「ENTRY」テキストが横方向に流れ続けるマーキーアニメーションは、常に画面の一角で「行動を促す」要素として機能している。

MENUボタンはピンクの円形で固定表示され、スクロールしても常にアクセス可能である。ボタンの周囲に「FOOD SERVICE OTARI」の文字が回転するリングバッジのようなデカレーションが施されており、ナビゲーション要素でありながらビジュアルのアクセントとしても機能している。

3. コーディングの視点：WordPressをベースとした柔軟な実装

UI・ビジュアルの豊かな表現を「どう実現しているか」を、ソースとLighthouseに基づいて論じる。

3-1. 技術スタックの詳細分析

CMS・テーマ: ソースから読み取れた範囲では、WordPress 6.9.4を基盤に、GeneratePress テーマ（子テーマ）を採用している。GeneratePressは軽量で高速なWordPressテーマとして知られ、開発者が自由にカスタマイズしやすい設計が特徴である。ビジュアルの構成にはGenerateBlocksが使用されている。

JavaScriptライブラリの構成: フロントエンドのインタラクションは、jQuery 3.7.1をベースに、用途に応じた専門ライブラリを組み合わせて実装されている。スライダー/カルーセルにはSlick CarouselとSplideの二つが併用されており、スクロールアニメーションにはAOS（Animate on Scroll）、ライトボックス（動画モーダル）にはLity、要素の表示検知にはjquery.inviewがそれぞれ採用されている。

フォント戦略: Google Fonts経由で、Noto Sans JP、Anton、Shippori Mincho、Dela Gothic One、Bai Jamjureeの5書体を読み込んでいる。5書体を同時に読み込むことはパフォーマンスへの影響が大きいが、このサイトのビジュアルアイデンティティにおいて各書体が担う役割を考えると、デザイン上の必然性がある選択といえる。

画像最適化: WebPフォーマットを積極的に採用しており、次世代画像フォーマットへの対応が進んでいる。

3-2. パフォーマンスとLighthouseの結果

PageSpeed Insightsによる計測結果（2026年4月4日計測、Lighthouse 13.0.1使用）は以下の通りである。

リクルートトップページ（/recruit/）── モバイル

  • Performance: 55

  • Accessibility: 90

  • Best Practices: 96

  • SEO: 85

Core Web Vitals（モバイル）

  • First Contentful Paint（FCP）: 12.1秒 ── 赤（不良）

  • Largest Contentful Paint（LCP）: 24.6秒 ── 赤（不良）

  • Total Blocking Time（TBT）: 0ミリ秒 ── 緑（良好）

  • Cumulative Layout Shift（CLS）: 0.052 ── 緑（良好）

  • Speed Index: 12.1秒 ── 赤（不良）

リクルートトップページ（/recruit/）── デスクトップ

  • Performance: 62

求人一覧ページ（/job/）── モバイル

  • Performance: 56

  • Accessibility: 89

  • Best Practices: 100

  • SEO: 92

Performanceスコアは55〜62の範囲であり、要改善の水準にある。最も影響の大きい指標はLCP（24.6秒）で、これはモバイル低速4Gスロットリング環境での計測値であることを考慮しても、基準値（2.5秒以下が「良好」）を大幅に超過している。一方、CLS（0.052）は良好な値であり、レイアウトシフトによるユーザー体験の阻害は少ない。TBT（0ミリ秒）も良好であり、JavaScriptによるメインスレッドの長時間ブロックは発生していない。

3-3. 技術的な特記事項

Lighthouseの「改善の機会」セクションでは、以下の項目が指摘されている。

レンダリングをブロックしているリクエスト ── 推定削減時間 12,380ミリ秒: CSS・JavaScriptの読み込みにより初期表示が大幅に遅延している。複数のGoogle Fontsの読み込み、複数のjQueryプラグインのスクリプトが同期的にロードされていることが主な原因と推測される。

画像配信を改善する ── 推定削減サイズ 1,830KiB: WebPを採用しているものの、一部の画像がビューポートに対して過大なサイズで配信されている。

効率的なキャッシュ保存期間を使用する ── 推定削減サイズ 518KiB: 静的アセットのキャッシュ有効期限の設定が不十分な状態にある。

フォント表示 ── 推定削減時間 30ミリ秒: font-displayの設定に関する指摘。

強制リフロー: JavaScriptによるDOM操作がリフローを引き起こしている箇所がある。

4. アクセシビリティの視点：90点のスコアに潜む課題

コーディングの章で示したように、実装の基盤はWordPress + GeneratePressという堅実なスタックで構成されている。では、その実装が「誰もが使えるものか」を、アクセシビリティの観点から検証する。

4-1. Lighthouseアクセシビリティスコア

リクルートトップページのAccessibilityスコアはモバイルで90、デスクトップで96であり、全体としては高水準にある。求人一覧ページ（/job/）もモバイルで89と良好な数値を示している。

4-2. 構造的なアクセシビリティ対応

すべてのページに「コンテンツへスキップ」リンク（例: `https://otari-food.com/recruit/#content`）が実装されており、スクリーンリーダーやキーボードナビゲーションのユーザーが、繰り返しのナビゲーション要素を飛ばしてメインコンテンツに直接アクセスできる。これはWCAG 2.4.1（ブロックスキップ）の達成基準に対応する実装である。

`html` 要素の `lang` 属性は適切に設定されており（`lang="ja"`と推測される）、スクリーンリーダーが正しい言語で読み上げる基盤が整っている（WCAG 3.1.1）。

4-3. 潜在的な注意点

色のコントラスト: ファーストビューの黒背景×ネオンカラーの組み合わせは、大きな文字サイズにおいてはコントラスト比が十分に確保されている。ただし、ノイズテクスチャが背景に重ねられている箇所では、文字の可読性が低下する可能性がある。小さなテキスト（ヒーローセクション内の価値観一覧）は、文字サイズが小さく行間も詰まっているため、可読性の観点で注意が必要な箇所である（WCAG 1.4.3 最低限のコントラスト）。

アニメーション: AOSによるスクロールアニメーションが多用されている。マーキー形式の「ENTRY」テキストの連続スクロールは、反復的な動きとして、vestibular disorder（前庭障害）を持つユーザーに不快感を与える可能性がある（WCAG 2.3.3 インタラクションによるアニメーション）。`prefers-reduced-motion` メディアクエリへの対応があるかどうかは、ソースから読み取れた範囲では確認できなかった。

画像のalt属性: WebPフォーマットの画像が多用されているが、装飾的な画像（宇宙空間の背景、ノイズテクスチャ等）と意味のある画像（スタッフの写真、調理の様子等）が適切に区別され、代替テキストが付与されているかはLighthouseの90点というスコアからは概ね対応していると推測されるが、完全な監査には個別のチェックが必要である（WCAG 1.1.1 非テキストコンテンツ）。

5. SEOの視点：採用特化サイトのインデックス戦略

アクセシビリティの章で確認した構造的な対応は、そのまま検索エンジンによるクローラビリティにも貢献している。では、この実装が「検索で届くか」を、SEOの観点で検証する。

5-1. LighthouseのSEOスコア

リクルートトップページのSEOスコアはモバイルで85。求人一覧ページ（/job/）はモバイルで92と、トップページよりも高いスコアを記録している。

5-2. メタ情報の設計

リクルートトップページのtitleタグは「お弁当の調理・配送スタッフ募集｜おたりフードサービス｜長野県小谷村」であり、「何を」「どこの会社が」「どの地域で」募集しているかが簡潔に網羅されている。descriptionメタタグは「長野県白馬村・小谷村のおたりフードサービスは、学校給食や施設弁当を提供する、給食サービス・委託調理業務の会社です。調理師・調理補助・盛り付け・配送ドライバーの正社員・パート・アルバイトを募集中。未経験OKの調理の仕事で…」と、求職者が検索するであろうキーワード（調理師、調理補助、配送ドライバー、未経験OK、パート）を盛り込んだ実用的な記述になっている。

各下層ページにも固有のtitleとdescriptionが設定されている。たとえば求人一覧ページは「求人情報 アーカイブ | おたりフードサービス｜小谷村の給食業の求人サイト」と、「求人情報」というキーワードをtitleに含めている。Aboutページは「おたりフードサービスについて ｜おたりフードサービス｜小谷村の給食業の求人サイト」とサイト名とカテゴリを組み合わせた形式になっている。

5-3. OGP設定

各ページにOGP（Open Graph Protocol）のog:descriptionが設定されており、SNSでのシェア時に適切な説明文が表示される設計になっている。攻めたビジュアルデザインを持つサイトであるから、こうしたSNS拡散時のメタ情報の整備は、採用マーケティングの観点からも有効である。

5-4. 見出し構造

会社概要ページのmeta descriptionに `{{post_title}}` というテンプレートタグが出力されている箇所が確認された（「COMPANY {{post_title}} 小さな村から世界を変える」）。これはWordPressのテンプレートエンジンで動的に変換されるべき値が、静的にそのまま出力されている状態であり、SEO上の不備として注目すべき点である。

5-5. コンテンツのインデックス可能性

サイトのコンテンツのほとんどがサーバーサイドでレンダリングされるHTML（WordPress + GeneratePress）であるため、検索エンジンのクローラーがJavaScript実行なしでコンテンツを取得できる。これは、SPAフレームワーク（React/Vue等）で構築されたサイトと比較して、インデックスの確実性が高いという点でSEO上の利点である。

求人情報が `/job/` 配下にカスタム投稿タイプとして構造化されており、職種カテゴリ（`/job/job_category/dormitory/`、`/job/job_category/cooking/`）での分類もURLレベルで実現されている。これは、求人検索における長尾キーワード（「小谷村 調理師 求人」等）での発見可能性を高める構成である。

「おたりフードサービス」の哲学とあり方 ── 食の現場から生まれる採用ブランディングの新しい形

マーケット分析では、おたりフードサービスが給食業界の採用市場において「攻めのブランド表現 × 地方・小規模」という独自のポジションを占めていることを確認した。ターゲット分析では、その攻めの姿勢がペルソナA（チャレンジ志向の移住希望者）を引きつけ、スタッフインタビューの誠実なトーンがペルソナB（地元の生活者）を安心させるという、コピーの二層構造を読み解いた。

UXはこの二層を「コンセプト（攻め）→ 仕事紹介（物語化）→ インタビュー（安心）→ 会社概要（代表の人柄）→ エントリー（行動）」というスクロール体験として設計し、UIは黒×ネオン、5書体の混在、宇宙×食材というビジュアルで「給食会社らしくない」ブランドイメージを徹底した。コーディングではWordPress + GeneratePressという堅実な基盤の上に、AOS・Slick・Splide等のライブラリで演出を実装し、WebP画像の採用や「コンテンツへスキップ」リンクの実装など、基本的なアクセシビリティ対応も押さえている。

このサイトの本質は、「人口3,000人の村の給食会社が、大手企業と同じ土俵で採用を競わない」という戦略的な判断にある。安定・福利厚生・キャリアパスで勝負しても大手には敵わない。だからこそ、「ワクワク」「原動力」「前例がないなら自分たちでつくればいい」というメッセージで、まったく異なる価値軸で求職者を引きつける。そしてそのメッセージを、ビジュアル・UX・コピーのすべてで一貫させている点に、このサイトの設計思想の強さがある。

このリクルートサイトが示しているのは、「中小企業の採用サイトは、大手を真似る必要はない」という事実である。自社の哲学と人柄を、デザインの隅々にまで浸透させること。それが、規模の差を超えた採用ブランディングの一つの解であることを、おたりフードサービスは証明している。

総合評価：リクルートサイトとしての完成度

強み

  1. 一貫したブランドメッセージ: 「ワクワク」「原動力」「前例がないなら自分たちでつくればいい」というメッセージが、コピー・ビジュアル・IA・UIのすべてで一貫しており、サイト全体が一つの「物語」として機能している

  2. ターゲットの二層設計: 攻めのコンセプトでチャレンジ志向の求職者を引きつけながら、スタッフインタビューで地元の生活者を安心させるという、限られた採用市場を最大化するコピー戦略が秀逸である

  3. 業界の常識を覆すビジュアル: 黒×ネオン、宇宙モチーフ、5書体混在、チケット型求人カードなど、給食業界の採用サイトの常識から大きく逸脱したデザインが、結果として強烈な差別化要因になっている

  4. 代表の人柄が伝わる設計: 会社概要ページの創業ストーリー、「俺たち」という一人称、動画コンテンツなど、代表・岡田氏の人柄と哲学がサイト体験に深く組み込まれている

  5. 堅実な技術基盤: WordPress + GeneratePressという保守性の高いスタックを選択し、コンテンツ更新の容易さを確保しながら、プラグインとライブラリで演出を実現している

制作会社への示唆

このサイトは、「中小企業の採用サイトにおいて、ブランドの哲学をどこまでデザインに反映できるか」の極端な成功例として参照に値する。パフォーマンス（Performance 55）には明確な課題があるが、それはデザインの豊かさ（5書体、高品質画像、多数のインタラクション）とのトレードオフの結果でもある。制作の現場において「速さ」と「表現の豊かさ」のバランスをどこに置くかを検討する際の、一つの参考事例となるだろう。

おわりに：「宇宙にひとつだけ」を、デザインで証明する

「宇宙にひとつだけの給食会社」── この言葉は、単なるキャッチコピーではない。このリクルートサイトのすべての要素──黒い背景に浮かぶネオンカラーの文字、宇宙空間に浮かぶ野菜たち、チケットのような求人カード、そして「前例がないなら自分たちでつくればいい」という代表の声──が、この一文を「本当のことだ」と信じさせるために設計されている。

制作会社として持ち帰れるメッセージは明快だ。クライアントの「宇宙にひとつだけ」を見つけ、それをデザインのすべてに浸透させること。規模や予算ではなく、哲学と一貫性が、採用サイトの真の競争力になる。おたりフードサービスのリクルートサイトは、その証明である。

この記事は、2026年4月時点でのおたりフードサービス リクルートサイト（https://otari-food.com/recruit/）を評価したものです。サイトの内容や実装は、今後変更される可能性があります。

いいなと思ったら応援しよう！