https://career-palette.kobe-wu.ac.jp/

今日の分析するHP:神戸女子大学・神戸女子短期大学「キャリアパレット」様
種類：メディアサイト

STEP1：第一印象

見やすく、記事が検索しやすい。明るく楽しそうな雰囲気
・虹色でカラフル
・反復使われている・要素がきっちりと整列していて安心感がある
・卒業生の方の笑顔の写真が多く、親しみが持てる

STEP2：ロゴ・文章・写真からブランド理解を深める

• 柔らかい色味（ペールトーン）の虹色のゴシック体のロゴで、若々しい女性らしさ、明るさ、親しみやすさを感じる。

• ファーストビューに卒業生の写真のスライドを使っていること、虹色のロゴから、「多様性」「様々な可能性」を感じてワクワクする。

STEP3：レイアウト・余白を分析する

機能面：シンプルにコンテンツが上から下に並べられていて迷わない。記事検索やおすすめ記事などいろんな切り口で記事を探せる。
情緒面：角丸の大きさがちょうどよい印象を受けた。余白もまとまりがわかりやすく、メリハリがついていて読みやすい。

STEP4：色味の分析

メインカラー：#ffffff
アクセントカラー：#93C6D9、#FEBE7D、#A3B5E3、#F9AEAD
テキスト・フッター背景：#292f4a1
白ベースの中に

STEP5：フォントの分析

"Poppins" Google font, Adobe fontで提供されている
→ポップでエネルギッシュな印象のフォントです。
デザインに抑揚や賑やかしを出したい時、良い効果を発揮するフォントとなっています。
引用；MUUGMUUG DESIGN

"Noto Sans JP" Google font, Adobe fontで提供されている
→「no more tofu」（コンピュータやウェブサイトがテキストを表示できないときに現れる空白の四角形（⯐）をなくす）を目指して作られた、GoogleとAdobeが複数のフォントメーカー・デザイナーと共同開発したゴシック体（あるいはSans-serif）のフォントファミリー。癖がなく、可読性が高いフォントで、ウェイトが豊富なため見出しにも本文にも使いやすい。
引用；Google Developers Japan

h1:img(67.14286vw)
h2:40px, 24px, 20px
h3:24px
p（セクションタイトル）:36px
本文:18px, 14px
ボタン:18px
セクション間余白：256px, 148px,114px

余白は広めで読みやすい。文字のジャンプ率は低めで落ち着きのある印象。

STEP6：あしらい

流体系シェイプ
→同じ形を繰り返し使っているのでサイト全体で統一感がある。

STEP7：アニメーション

画像：ホバーすると拡大
スライダー：ホバーすると幅が広がり、右下に矢印出現
ボタン：縁のラインが出現
カテゴリ：ホバーで透過
もっと見る：ホバーで矢印が左から右へ、矢印の上の線が現れる。透過
カード：ホバーすると文字色変化、画像拡大
ソリューションセクション：各事業にホバーすると、横幅が広がる