RecruitJapanPicked 2026.09.26

ANA大阪空港株式会社

採用のWebデザイン参考 — 空港オペレーション・グランドハンドリング

出典: ana-osaap.co.jp

Editor's note — 編集部の視点

採用情報の入口が、搭乗券のデザインになってる。

ANA大阪空港株式会社の採用サイトは、「ITM・UKB ✈ WORLD」と刷った搭乗券型のカードをFVに置き、空港で働く日常の延長に応募への導線を用意している。

BrunoStructure & IA

FVのコピーをABOUT USでもう一回、今度は理念の文章つきで出し直してるんだよね。写真で感じさせてから言葉で納得させる。この二段構えの順番がうまい。

1FVは青みをかけた現場写真とコピーだけ。機体と制服の青が、そのままブランドカラーになる
2業務は01〜07の番号付きリストで一覧に。空港の仕事の広さを、スクロールせずに一息で見せる
3社員の写真は楕円の枠で斜めの帯に沿って並べる。左下から右上へ、視線が離陸するように流れる

Color

ANA大阪空港株式会社の配色

Typography

使用フォントと無料の代替

英字

Aa あア

使用: Inter Variable
代替: Inter

和文見出し・本文

Aa あア

使用: Zen Kaku Gothic Antique
代替: Zen Kaku Gothic Antique

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型16px · — · 500
見出しKatapick 型16px · — · 500
本文The quick brown fox — 参考を型にする15px · 1.85 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にANAロゴと社名、右に6項目のナビと水色の「採用情報」ボタン。
02
ヒーロー
青みをかけた空港の現場写真のスライドに「私たちの想いが、世界を動かす」と英文、番号と一時停止ボタン。左下にお知らせの帯、右下に搭乗券型の「ITM・UKB ✈ WORLD 採用情報はこちら」カード。
03
ABOUT US
青いグラデーションの地に、FVと同じコピーと理念の文章を中央揃えで置き、「私たちについて」へ誘導する。
04
OUR BUSINESS
「空港という社会インフラを支える」の見出し。左に角丸の写真、右にグランドハンドリングから人事までの01〜07の業務リスト。
05
OUR TEAM
青地の斜めの帯に、楕円フレームの社員写真を3枚並べ、「働くひと一覧へ」の丸いボタンを添える。
06
CAREER・ENVIRONMENT
写真の上に白いカードを重ねた2つの入口。水色の縁取りで囲む。
07
ギャラリー
淡い水色の「…PORT TO THE WORLD ✈」の大きな英字の下に、空港作業や機体の写真を横に並べる。
08
採用情報・フッター
機体を誘導する写真に「採用情報はこちら」のバナー。フッターに本社・神戸事業所の住所、ナビ、関連サイトへのリンク。

Interaction

アニメーション・インタラクション

FVは Swiper のスライダー。番号の進捗表示と一時停止ボタンが付いている
「PORT TO THE WORLD」の英字と写真の列は、横方向の無限マーキーで再現可能
スタックに WebGL があり、背景のグラデーションや写真の切り替えなどに使われていると思われる
OUR TEAM も番号表示と一時停止ボタン付きで、社員写真が切り替わるスライダーと思われる

スクロールのコマ撮り400–45000ms

検出された技術:SwiperAstroWebGL

Reproduce

再現するときのポイント

01写真に青のオーバーレイ（半透明の青や mix-blend-mode: multiply）を掛け、ブランドカラーでトーンをそろえる
02採用CTAは搭乗券のモチーフに。点線のミシン目（border-style: dashed）、バーコード、空港コードを組み合わせる
03ボタンやラベルは #05a9e6 の水色、ロゴ周りと帯は #003399 の濃紺と役割を分ける
04写真は角丸と楕円で柔らかく抜き、白いカードを重ねて入口にする

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

ana-osaka-airport.katapick.md

1---
2title: "ANA大阪空港株式会社 再現用デザイン仕様書"
3source: https://www.ana-osaap.co.jp/
4katapick: https://katapick.com/sites/ana-osaka-airport
5category: 採用
6region: 国内 (JP)
7tags: [ブルー基調, 写真主体, 角丸, カルーセル, マーキー, ライト]
8launched: 2026-06
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# ANA大阪空港株式会社 — 再現用デザイン仕様書
17 
18> 採用情報の入口が、搭乗券のデザインになってる。ANA大阪空港株式会社の採用サイトは、「ITM・UKB ✈ WORLD」と刷った搭乗券型のカードをFVに置き、空港で働く日常の延長に応募への導線を用意している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22