制作ツール

Studio

第一印象

オレンジとゴシックのインパクトがすごい。

→フォントの大きさとウェイトの比率がそうさせてる。

力強さを感じる。

ビビットなカラーをたくさん使用しているのにやかましくない。

ターゲット

難民人材に興味を持っている企業担当
目的

難民人材を採用してもらうこと

KPI→資料請求

使用フォント

メイン…ゴシックMB101 22px

サブ…ゴシックMB101 16px

英語…Anton 36px→153px

配色

白…#FAF9F2

トップページ構成

- トップビュー

カルーセルで顔を大きく。笑顔のインパクト。

- ビジョン/メッセージ

装飾は最小限にし、力強いゴシック体でメッセージを伝える。

- タレント紹介
   - インタビュー
   - タレントの種別
- CTA
- ナビゲーション
   - 会社のストーリー
   - 職種一覧
   - 事業内容
- 実績紹介
- CTA

デザインポイント

ビビットなオレンジと太いゴシック体で力強さを演出している。→難民という暗めなイメージを払拭し、エネルギーを感じさせる。

フォントウェイト→400 で統一されている

文字詰め → -0.04em

縦長のフォントだから詰めても窮屈に感じない?

◎フォントサイズによるメリハリ

:太いゴシックはサイズの違いで結構メリハリが出る。

ドライブラシのあしらい

→ビビットなカラーをペンキに見立てて、ドライブラシのあしらいとマッチしてるし、世界観を際立たせている。

長文の文字詰め

16pxの時

字間:デフォルト

行間:1.61em
実装ポイント

トップビューやアイキャッチに使う大きい文字はsvg画像を配置。→文字組をきっちりできる。

レイヤーを多用したアニメーションでStudioの安っぽさを全く感じさせない。