こちらは練習で、既存サイトを模写をしたものです。
【分析】
・Webサイトの目的とターゲットの想定
目的
サイバーエージェントという会社の紹介
サイバーエージェントのサービスや採用について理解してもらうことが目的
ターゲットの想定
サイバーエージェントに仕事を依頼したい、業務提携がしたいなどサイバーエージェントと関わりを持ちたい企業
新卒の就活生や転職活動中の求職者
・色の特徴(比率、このジャンルにはこの色など)
緑色、黒色、白色、グレーが使われている。
会社のロゴが緑色メインなため、トップ画面から他の画面へ遷移ができる箇所にアクセントとして緑色が使用されている。
濃い緑色には「信頼」という意味がある。
セクションごとのタイトルは黒色で統一されている。
白6割、黒3割、緑1割
・文字の大きさや行間
セクションのタイトルは文字が大きく、目を引く。
セクションのタイトルからセクション内の要素との余白が大きく取られている。英字の下の日本語の文字サイズは細く小さいため英字が目立つ。
・フォントの種類
ヒラギノ角ゴPro N
YuGothic
CA Sans
会社独自のフォントが使われている。フォントの雰囲気から堅苦しくなく、フランクな社風が想像できる。
ゴシック体が使われており、読みやすい。
・要素と要素の間の余白
セクションとセクションの間の余白がしっかり取られていてわかりやすい。同じセクション内の要素同士はセクション同士の余白よりも狭くとられているので、一目で同じグループの情報だとわかる。
・コンテナ(全体の内容が入る幅)のサイズ
1403px
・画像や写真の共通点、特徴
人が写っている写真が多い。
真剣な表情と笑顔の写真がある。
真剣な表情の写真では仕事に対する覚悟や真摯さが伝わる。笑顔の写真からは和気藹々とした遊び心がある職場の雰囲気が感じられる。
・レイアウト(配置)
上から下へとスクロールするようになっており、情報量が少ない。「CyberAgent Way」と「service」の構成が同じ。四原則の反復が使われている。
・ヘッダー、フッター部分の共通点や特徴
ヘッダーの会社のロゴに目が引かれ、印象に残る。
ヘッダー フッターに会社名が表示されている
どちらもコンテンツへのリンクが横並びに表示されている。