プロジェクト概要

大手情報通信業のA社様の採用サイトリニューアルを行いました。お客様のデザインガイドラインに沿った中で、求職者の採用区分ごとに差別化されたデザインを作成しました。

プロジェクトの背景・課題

1. 会社全体のCI刷新に伴い、採用サイトも新たなCIに合わせてリニューアルする必要がありました。デザインガイドラインに沿った中で、求職者に向けたデザインアプローチが求められました。また、新卒の就職活動開始タイミングに合わせるため、短期間での制作となりました。
2. リニューアル前のサイトと同じWordPressの利用を希望されておりましたが、リニューアル前のサイトを止めずに公開するため、運用中のものとは別に新たなWordPressを構築しました。
3. ユニバーサルアナリティクスの計測終了日（2023/7/1）が近づいており、新しいアクセス解析ツールであるGoogleアナリティクス4の設定と導入が必要な状態でした。
4. グローバル展開している会社のため、国内向けの採用サイトではあるもののコーポレートサイトと同様にアクセシビリティを担保したいご要望がありました。

ご提案・実施内容

1.デザインのコンポーネント化

お客様のデザインガイドラインを元にデザインを作成いたしました。

しかし、ガイドラインに沿った中でも新卒採用・中途採用・障がい者採用などの採用区分を一目で識別できるようにしたいというご要望がありました。

そこで、デザインガイドラインに設定されているカラーパレットの中から採用区分ごとにテーマカラーを決めて使用することで、全体的なデザインの統一と採用区分ごとでの差別化を行いました。

また、新たなページ作成が必要となった際に従来より早く作成を進めるため、ページの様々なパーツをコンポーネント化しました。
このコンポーネントはデザインガイドラインに沿って作成されているため、デザインの統一性も保ちやすくなっています。

2.WordPressの構築

リニューアル前のサイトと同様にWordPressを使用してサイトを構築いたしました。コンテンツの拡充に伴い、イベント情報など新たにWordPressの管理画面にて更新できる箇所を増やし、サイトの更新性をアップしています。

リニューアル前のものとは別のWordPressを新規で構築しましたが、既存コンテンツは入力画面や入力済みデータをそのまま継承することで、従来の使用感と近い運用を可能としています。

3.GA4の基本設定

ユニバーサルアナリティクスからGoogleアナリティクス4へ移行が必要なタイミングであったため、アカウント発行からサイトに設置するまでの基本的な設定を行いました。

その他、別ドメインで運用している関連サイトも含めて行動履歴を取得できる設定や、サイトに埋め込んだYoutube動画の閲覧状況を取得するための設定、コンバージョン設定などの設定も行いました。

4.アクセシビリティ対応

WCAG2.1レベルでAAを目指す方針とし、制作用に用意したコンポーネント一式をまとめたページや、代表的なページのパターンを複数ピックアップし検証を行いました。

WCAG2.1対応の検証シートを用意しました。検証項目ごとに、サイト内で対象の技術が利用されている箇所について検証を行ったり、ツールで検証できる箇所は自動検証を行い、効率的に対応を進めました。

プロジェクト期間

制作期間：約4ヶ月

新卒の就職活動開始タイミングに合わせるため、短期間で百を超えるページの制作が求められました。
そのため、デザインに掛かる時間やサイト内での階層によって作成するページをいくつかのグループに分け、着手する順番を調整しました。

まずはサイトに必要な、基本的なパーツ群であるコンポーネントのデザイン・実装から取り掛かり、次にデザインを作成せずにコンポーネントを利用して展開できる下層ページのグループ、デザイン性を重要視する上位階層ページのグループ、というようにグループ毎に進めました。

そうすることでデザインフェーズと実装フェーズを一部並行して進めることができ、デザイン性を重要視するページの作成に時間を割くことを可能にしました。

また、テストフェーズでは表示・動作確認の他、アクセシビリティチェックも行いました。
前述の通り、検証シートと自動検証ツールを利用し、短期間の中でもアクセシビリティチェックと対応を叶えています。

チームメンバー

成果

1. テーマカラーの使い分けにより、ユーザーが現在閲覧している採用区分が分かりやすくなりました。
   また、デザインパーツのコンポーネント化を行ったことにより、ページが追加になった際にもデザイン作成が従来より短い期間で対応可能となりました。
2. リニューアル前と同じコンテンツはWordPressの入力画面や入力済みデータをそのまま利用しているため、レクチャーせずともこれまでと同様の操作感で運用を継続できました。
   イベント情報等の新たなコンテンツも管理画面での更新が可能な設計としたため、サイト全体の更新頻度が上がりました。
3. 新しいアクセス解析ツールであるGA4にて計測が開始できた他、これまで取得していなかった数値も計測を始めたことで、より詳細にユーザーの行動を追えるようになりました。
4. BA独自の検証シートと自動検証ツールの利用により、短期間の中でもWCAG2.1レベルでAに準拠かつ、AAを一部準拠したアクセシブルなサイトを構築出来ました。