見出し画像

77.株式会社VOYAGE GROUP #1日1サイトレビュー

【印象】
・シンプル、かっこいい印象
【ファーストビュー】
・画面横幅いっぱいに写真を表示、中央に社員を1人ずつ写している
・左側にブログの見出し文を白字で表示。社員の顔部分と文字が被ってしまっているので、少しずらすと良いと思った
・画面上部に白背景の角丸四角でヘッダーを表示。左側にロゴ、右側に日本語表記のテキストリンクでメニューを配置している
・メニューはホバーで小項目が表示される
【コンテンツ】
・全体的に黒白灰色の無彩色を使用しているのでシンプルでかっこいい印象を持った
・「WHO WE ARE」セクションでは本文の背面に英字が右から左へと流れるアニメーションを配置している。キャッチコピーが「360°スゴイ」なので動いている様子や広がりを見える意図からと思われる
・「SERVICES」「NEWS」セクションでは白背景のカードを表示しており、ホバーで背面にシャドウがつく
・「SERVICES」セクションでは強調部分に水色、黄色、緑の帯を敷いている。セクションの背景色はコンテンツの途中まで「WHO WE ARE」と同じ色を使用しているが、カード中央部分辺りで薄い灰色に切り替わっている
・「RECRUIT」セクションでは文字を黒、背景色を白で表示。ホバーで文字が白に変更になり、背景に動画が流れるようになる。動画には細かい水玉のフィルターが重ねられている。サイトに動画を埋め込むと通常だと画質が落ちてしまうが、フィルターによって画質についてわかりにくいようになっている
・下層ページへのリンクボタン、SNSへのアイコン共に背景色無しで枠組みのみのボタンになっている。ホバーで背景色がつきテクストやアイコンの色が変わる
・フッター部分はコンテンツを中央揃えにし、上下の余白を多めにとっている
【カラー】
・黒、白、灰色、水色、黄色、緑
・テキストカラーは黒#1f1f1f、白#ffffff、一部に薄い灰色#999999
【フォント】
・Yu Gothic
・英字にMontserrat
【レスポンシブ】
・FVの写真を縦長に表示し、写真下部に見出し文を配置。SP版では文字と社員の顔が被らないようになっている
・ヘッダーは中央にロゴ、右側にハンバーガーメニュー(3本線)を表示。開くと白背景で黒文字のメニューが画面全体に広がる。小項目はアコーディオンメニューで格納されている
・「RECRUIT」セクションはPC版だとホバーで動画表示となっていたが、SP版では常に動画が表示されている