サイトトレース（2022.01.10）
トレースしたデザイン
気づいたこと
MVの画角はヘッダーに高さがあったり、下にニュースのエリアがあることによりあまり広く取られていないが圧迫感を感じない。右側に半円があることでヘッダーとニュースとの境目が曖昧になり抜けができているため、画面に広がりを感じるのだなと思った。また半円の上にコピーが載っているのも画像と白い部分に繋がりを感じる要因となっている。
ピックアップニュースの記事の下のバーが記事よりも左に配置されているが、これは記事をドラッグした時に画面全体に記事が並ぶため画面に対してセンターに配置しているんだなと思った。自分はいつも一番最初の記事の真下につけるため必ずしも下でなくてもいいことに気づいた。
また赤枠部分の余白は全て同じ数値になっている。余白をできるだけ統一しているから綺麗に見えるのかなと思った。
「いいオフィスジャーナルをご紹介」のエリアは、今回一番なるほどな！と思った箇所。
このサイトでは記事のサムネの上にカテゴリタグと日付を配置し、サムネの下にタイトルとハッシュタグをつけている。
全て縦積みにするのではなく画像を挟んで要素を分けることでごちゃごちゃして見えないのはとても勉強になった。
他だとマハラハワイのサイトとか。カテゴリタグやハッシュタグ、記事を書いた人、日付など入れる要素が多い時に画像の上下で要素を振るのはすごい使えるな〜と自分の引き出しになった！
サムネは画像を複数組み合わせたものになっており、このように組み合わせて複雑にすることで作り込みが高く見え、サイト全体がシンプルでも簡素に見えないようになっている。
ニュースは入れる画像によってデザインが破綻しやすい。こうしたテンプレがあれば更新する人が非デザイナーでも一定のクオリティが保たれるため、サイトを作る時に用意してあげるのは手だなと感じた。
またこの部分、ハッシュタグと遷移ボタンを合体させるのも「詳しく見る」って書かなくても伝わるし、すっきり見えてなるほどな〜と思った。
タグは「全て」だけ左右の余白が広めに取られている。また「全て」と「コーポレート」間の余白は他のタグ同士の余白に比べて若干広くとられている。自分がデザインするときできるだけ見た目が均等になるように揃えていたが、タグの役割に応じて差をつけるやり方もあることが分かった。
一般的なサイトだとニュースはコンテンツ幅を狭くしてコンパクトにしたり、記事のサムネをつけて見栄えが立つようにするが、このサイトではコンテンツ幅が広く要素はテキストのみである。
にも関わらず簡素な印象を感じないのは下に白い背景を敷いて面として見せることで重さを出しているからだと思った。
背景のグレーと色のメリハリも出ているため、シンプルながらも絵として成立していると感じた。
また右下に矢印を設置することで記事のタイトルが短くても空きすぎた印象を感じない。こういう小さい要素1つがデザインにかなり効いているなと思った。
この広くとった余白がモダンさ、洗練さを生んでいるなと感じた。
これまでコンテンツ幅が1100pxだったがここで幅が800pxに変わる。大きく画角を変えることで画面にメリハリが生まれている。日本っぽくない（＝モダン）見せ方だなと思った。かなり縦に長いが一枚の画像のように見せると成立することが分かった。
こうした表現は壌というメディアサイトにも見られる。こちらはメディアサイトということや上のサイト名とも相まって雑誌の表紙のように見える。
画像や遷移ボタンなどサイト全体を通して角丸が使われているが、採用情報とお問い合わせの内側の部分も微妙に角丸になっていた！（アイコンも角が丸い）こういう細かい箇所まで統一させることで洗練されていくんだなと思った。
このサイトではフォントにボールドが使われておらず、見出しがすごく細い。細い線だけで構成しているのもモダンに見える要因なんだろうなと思った。
日本語フォントはNoto Sans、欧文フォントはOpen Sansを使用。Noto Sansはウェイトが7種類ある。Open Sansも2021年3月にバリアブルフォントに更新されている。ウェイトが豊富なフォントを使うことで要素ごとに細かく調整可能なことが分かった。
まとめ
アイコンなど細かい箇所まで角丸にすることで統一感が生まれ、洗練さに繋がる。
矢印ボタン、要素を線で囲って面として見せるといったことが簡素に見えない要因になっており、ちょっとしたパーツがかなりデザインに効いている。
フォントにボールドを使わない、縦長の画角などの普通の日本のサイトで見ない、海外っぽい要素がモダンな印象を与えている。
この記事が気に入ったらサポートをしてみませんか？