HiPro [ハイプロ] / #38ch_SiteReview

サイト概要

私たちは
「雇用によらないはたらき方」という新たな選択肢を、
サービスを通して発信します。

HiPro [ハイプロ]

---

ファーストビュー

• フルスクリーンのムービー

• ブランドの目的と短い説明文が中央配置されている。
  flexboxで配置。

• ヘッダーにメニュー固定。
  NEWS ROOM、MEDIA、BRAND、SERVICE、TOP MESSAGE、PERSOL GROUP

• スクロールを促すアイコンが置かれている。
  配色が回転するアニメーション。
  

構成

• ファーストビューに続いて、NEWS、MEDIA、BRAND（ブランド説明）、SERVICE、代表メッセージ、グループ会社説明
  下層にNEWSページ、代表メッセージ
  MEDIAからブランドブログ、SERVICEから各サービスのサイトへ遷移。

• ファーストビューでブランドの目的を端的に説明、NEWSとMEDIAで現在進行形であることを示し、ブランドの目的をしっかりと説明。その後にサービス内容を伝えている。

• ブランド説明が長文だが、最後にBRAND MOVIEを配置している。
  配色、写真の雰囲気でブランドイメージを表現している。

• パララックスデザインでスクロールのしがいあるページになっている。
  js「locomotive scroll」が使用されている。
  

フォント

種類
欧文フォント：Trajan Pro
和文フォント：Noto Sans CJK JP
BRAND説明フォント：DNP Shuei Mincho Pr6N

Trajanから受ける印象は「高級、厳粛、伝統的、偉大、堅実、信頼、固い」といったイメージ。(あくまで、僕の感じ方ですが)
厳格な印象を与えたい時に、僕はロゴや見出しの部分によくTrajanを使います。文字詰めをして並べるだけで、ビシっと印象をひきしめてくれるので、とても頼りにしています:)

ローマの歴史ある曲線美に酔いしれろっ…!!英文フォント「Trajan」の魅力 #LOVEFONT

「秀英明朝」は、書籍の作り手と読者の双方から高い評価を得てきた本文用書体で、秀英体独特の連綿を持ち、目に優しい黒みを備えつつ、明るく整った落ち着いた雰囲気の組みができるのが特長です。

秀英明朝 M | 書体見本 | モリサワのフォント | 株式会社モリサワ

サイズ・太さ
h2：24px（本来h3に当たるのでは？と思われるところは32px）
p：18px

配色

白、黒、グレーのほかに青系を使用。

stylifyme.com調べ

レスポンシブ対応

@media(max-width:767px)で対応。

フロントページのサムネイル