# ANA大阪空港株式会社｜採用のWebデザイン参考

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

- URL: https://www.ana-osaap.co.jp/
- 解説ページ: https://katapick.com/sites/ana-osaka-airport
- カテゴリ: 採用 / 地域: 国内（JP）/ 業種: 空港オペレーション・グランドハンドリング
- テイスト: ブルー基調、写真主体、角丸、カルーセル、マーキー、ライト
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

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

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

## 配色
- #003399 ANA Blue（ロゴ / お知らせ帯）
- #05a9e6 Sky Blue（ボタン / ラベル）
- #e5f9ff Ice Blue（大きな英字 / 淡い背景）
- #ffffff White（背景 / カード）
- #3e4045 Slate（テキスト）
- #888888 Gray（補足テキスト）

## フォント
- 英字: Inter Variable（代替: Inter）
- 和文見出し・本文: Zen Kaku Gothic Antique（代替: Zen Kaku Gothic Antique）

## よくある質問
### ANA大阪空港の採用サイトで使われているフォントは？
英字に Inter、和文に Zen Kaku Gothic Antique が使われています。どちらも Google Fonts で無料で利用できます。

### 搭乗券のようなCTAボタンはどう作る？
白いカードの片側に縦書きラベルの帯を付け、点線（border-style: dashed）で区切ってミシン目を表現します。空港コードとバーコード風の線を添えると、搭乗券らしく見えます。

### どんな業種の参考になる？
航空・空港・鉄道・物流など、現場で働く人の姿を見せたい社会インフラ系企業の採用サイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/ana-osaka-airport からダウンロードできます。
出典: Katapick（https://katapick.com）