Webサイト考察1 ルミネ企業サイト
Webデザインの勉強のために、色々なwebサイトをじっくり見てみると良い、とアドバイス頂いたので、早速やってみました！
こちらの記事を参考に、自分なりに考察してみました。
ルミネのコーポレイトサイトです。
まずはリンク要素の共通ルールから。
リンク要素がhover状態になると、細い線が、左から右へ動くシンプルなアニメーションが使われています。ハンバーガーメニューのところはjavascriptだけど、メインコンテンツ部分はCSSで動きが実装されています。こんなにシンプルな動きなのに、めちゃお洒落に見える。
次はヘッダーのサイズだーと思ったら、このサイトにはヘッダーが無いのです。
ヘッダーがあるときっちりしている印象があるけど、ルミネはお洒落な商業施設だから、きっちりより洗練されたデザインの方が適してるよなぁと思いました。ルミネのサイトがヘッダーからきっちり組まれていたら堅苦しすぎるのかもしれない。
次は色です！
薄い色はこちらの二色が使われていました。パッとサイトを見ただけだと、この色の違いはなかなか分からなかったのですが、並べてみると全然違いますね。h2タグの背景色として左の#ebebebが使われています。アクセントカラーは無く、写真とテキストで構成されていますね。
h1の大きさと、フォントはどんなものが使われいるのか見てみました。フォントサイズは3.77vw,フォントは筑紫新聞明朝 Pr6 Lでした。
筑紫新聞明朝 Pr6 Lは
筑紫書体のシャープで柔らかさを持つデザインが特長の筑紫シリーズの新聞明朝体です。縦80～90％縮小扁平した新聞スタイルが特徴で、端正な骨格はテキスト面にほどよい緊張感を生み出し、新聞はもとより雑誌などで高い品位を醸し出します。
だそうです。コーポレートサイトにぴったりなフォントですね！！
https://fontplus.jp/font-list/tsukunewsminpr6-l
一番上のp要素にも筑紫新聞明朝 Pr6 Lが使われていて、それ以外にはヒラギノ角ゴ ProN W3が使われていました。少ない種類のフォントで、メリハリはありながら、とてもスッキリまとまっていて読みやすいなと思いました。
全体を通して私が感じたのは
「真面目で誠実な手紙を読んでいる気持ちになるサイト」でした。
上品なフォント、多すぎない文字量、読みやすいフォントサイズ、アクセントカラーを使わないデザイン、デザイン考察一回目にして、学びが多すぎました！継続してやっていこうと思います。
この記事が気に入ったらサポートをしてみませんか？