No.08「DIGITALIST」＃サイトレビュー
▼概要
・ 働き方をゆるやかに進化させるウェブマガジン、DIGITALISTのwebサイト
▼目的
・読者の日常にアイディアを提案し、充実した生活を送ってもらうため
・日常にわずかなアイデアをプラスして、働き方をゆるやかに進化させるウェブマガジン（ディスクリプションより）
▼ターゲット
・世の中の最新情報や、日常に役立つ情報を集めている人
▼全体の印象
・メインビジュアルの宇宙のような背景と、ゆるいイラストに目を惹かれた
・ぱっと見、コーポレートサイトかと思った
・シンプルでホワイトスペースが広くとられており、テキストが読みやすい
・「最新の記事」を見ると難しそうな記事ばかりに見えるが、ゆるいイラストでリラックスしてサイトを見れた
・硬さと緩さのバランスが良いなと思った
▼メインビジュアル
<ヘッダー>
・左にロゴ
・右にナビゲーション、検索ボタン、ログインと会員登録ボタン、運営会社のサイトへリンクするロゴのボタン
→ナビはホバーすると黄色になる
→検索、ログイン、会員登録ボタンはホバーすると透過する
・スクロールすると背景が白になる
→上部固定となるが端ギリギリではない
→TOP：8px、padding：0 0.5vw
<メイン>
・背景は宇宙のイラスト
→情報は数多くある、ということを表している？
・メインキャッチは一文字ずつ画像になっている
・サイトの目的が左揃えで記載
・「DIGTALISTについて」をクリックするとAboutページへ飛ぶ
・4体の猿〜人間のイラストはそれぞれ別々のimgになっている
▼コンテンツ
<Articles 最新の記事>
・一番最新の記事はwidth:100%表示
・そのほかの記事は3カラムで表示
・青文字でカテゴリー分類されている
・記事タイトルの下にはハッシュタグでキーワードがある
<Features おすすめの特集>
・imgがwidth:100%でスライドショー
<Workstyle 部門別業務効率化の記事>
・最新の記事はwidth:100%ではなく、ほかの記事と同じく3カラム表示だが、画像の左上に斜めの「NEW」アクセントがある
・青文字でカテゴリー分類されている
・記事タイトルの下にはハッシュタグでキーワードがある
<Trends 最新のデジタルトレンド>
・青文字でカテゴリー分類されている
・画像は円形で表示、ホバーするとズームする
・2カラムで表示
・このセクションのみ背景がグレー
<フッター>
・背景は青で、上部に月面と人間のイラストがある
・左側にヘッダーの内容と、SNSボタンが追加されている、ログインボタンがテキストになっている
・右側にはContents、Category、Keywordがありホバーすると半透明になる
<ホバー共通>
・記事の画像にホバーすると、画像がズームして枠の上下が変形する
・四角いボタンはホバーすると、ボタンがアップする
<コンテンツ幅>
・1000px（1440pxの場合）
▼カラー
▼フォント
・hind
・Noto Sans JP
▼フォントサイズ
・ナビゲーション：13、15px
・タイトル：56px
・サブタイトル：12px
・コンテンツ：28px、14px、12px
▼レスポンシブ
・メインビジュアルが中央揃えになる
・ヘッダーにはロゴ、会員登録ボタン、ハンバーガーのみ
・ナビはハンバーガーメニューへ格納される
・コンテンツは1カラム、縦積みになる
・フッターのContents、Category、Keywordはプルダウンに格納される
・コンテンツ幅：345px（375pxの場合）
▼レビューをしてみて
・メインビジュアルが画像で作成されていると思ったが、メインキャッチとイラストが一つずつ分かれていてびっくりした