支給構成をWebの表示ルールへ翻訳し、採用情報を多画面で届けるサイト制作

採用メッセージである「一流の技術者」を軸に、働く姿や成長の道筋を就活生が具体的に想像でき、親しみを持てるサイトにすることが求められました。土木と建築を対等に扱うこと、UDフォントやロゴ、表記のルールを守ること、見出しやメニューを画像ではなくテキストで構成することなど、ブランドとアクセシビリティに関わる条件もありました。

閲覧の中心がスマートフォンである一方、PCは最大1280px、768pxまではリキッド表示とする要件があり、単純なPC／SPの切り替えだけでは対応できません。メガメニュー、追従ヘッダー、カルーセル、インタビューのキービジュアルなどの動きも含め、画面幅ごとに読みやすさと操作性を保つ必要がありました。また、構成・素材・遷移先・公開ディレクトリが段階的に確定する進行に合わせ、確定済みの範囲から制作を進められる柔軟性も求められました。

支給された構成をそのまま画面化するのではなく、まず全ページで再利用する文字、余白、見出し、ボタン、画像、ナビゲーションのルールセットを整理しました。そのうえで、会社を知る、仕事を知る、人を知る、働き方を知る、採用情報という閲覧目的ごとに、情報量が違っても同じサイトとして読めるレイアウトへ統一しています。

モバイルファーストの前提から、スマートフォンでは情報の順序とタップ領域を優先し、タブレット幅では単に縮小せず、カラム、余白、メニューの切り替えを個別に調整しました。一次公開時に非表示となるコンテンツは、公開範囲を切り替えられる構造で準備。社員インタビューや座談会など人物中心のページには、写真とコピーの関係を崩さず、閲覧体験を高めるアニメーションを実装しました。支給資料の更新時は変更点をページ単位で照合し、メタ情報、パス、リンク、ヘッダー・フッターまで一貫して反映しています。

採用サイト全体を通じて、技術力のある企業としての力強さと、就活生が人や働き方に親しみを持てる柔らかさを両立させました。企業広告でも使用されるUDフォントやロゴガイドラインを守りながら、写真、見出し、色、余白の組み合わせでコンテンツごとの個性を出しています。

特に、土木と建築を対等に見せること、社員や職種の違いを比較しやすくすること、長い情報でも次に読む場所が分かることを重視しました。トップページ、インタビュー、座談会、育成、福利厚生では必要な情報量や写真比率が異なりますが、共通のルールセットを基準に調整することで、ページを移動しても視線の流れが途切れないようにしています。支給構成の意図を保ちながら、Web上で成立する見せ方へ具体化しました。

PC・タブレット・スマートフォンの境界でレイアウトが破綻しないよう、固定的な二段階切り替えではなく、768pxまでのリキッド表示を含めて各パーツの振る舞いを設計しました。メガメニュー、ハンバーガーメニュー、追従ヘッダー、カルーセル、スムーススクロール、ホバー表現など、操作方法の異なる機能を画面幅と入力手段に合わせて実装しています。社員インタビューのキービジュアルには、白から画面が現れ、写真が穏やかにズームアウトする演出を加え、コンテンツへ自然に視線を導きました。

静的なページ群でも更新・確認しやすいよう、共通パーツとページ固有部分を分け、後から確定したディレクトリやリンク、メタタイトルを反映しやすい構造にしています。画像書き出し時の影や余白は表示上の寸法へ影響しないよう調整し、人物写真はトリミングの変化にも配慮。段階公開で一部コンテンツを非表示にする条件も含め、表示確認の対象を整理しながら実装しました。