#08 メガメニューも見やすく、参考になったコーポレートサイト

こんにちは！今日も１日１サイト研究していきます(^ ^)

今日もこちらの記事を参考にさせていただいて、Webサイト研究します！
https://note.com/arasunatomoyuki/n/nbe9189dfb926

今日はこちらのギャラリーサイトさん「Straight Line Bookmark」 http://bm.straightline.jp からです。

「川重商事」さんのコーポレートサイト
https://www.kawasakitrading.co.jp/

モノトーン＋寒色を使った、クリーンな印象で整理されたWebサイトですね。なんだか、「信頼できそう！」って思わせるようなサイトだと感じました✨そういう風に思わせるコーポレートサイトは、かなり役割を果たしているのでは✨
情報量が多いコーポレートサイトは、見ていてかなりデザイン設計の勉強になります。特にこちらのWebサイトのメガメニューが見やすくて真似したいと思いました！

以前勉強として、ある企業のコーポレートサイトをリニューアルするならという仮定で、デザイン案だけ考えたことがありました。ページ数が多くて、見やすくかついろんなページに飛んでもらえるように設計するのが難しかったです。
私のWebサイトの制作経験はBtoCのみで、BtoBとしても考えているであろうコーポレートサイトも、もっともっと勉強したいと思っています。



それでは研究していきます！

☆リンク要素のルール
・View Moreのリンクはボタン。矢印がついてる＋カーソルを載せると色が変わる
・グローバルナビのリンクは、カーソルを載せると背景の色が変わる＋メガメニューが出てくる
・事業内容のリンクは写真。カーソルを載せると少し動く
・そのほかのリンク（おそらくli要素）はカーソルを載せると下線がつく


☆王道サイズ、形のセオリー
・ヘッダーの高さは80px
・ニュースなどの文章やli要素は15px
・見出しは70〜90px
・小見出しは20pxくらい
・コンテンツごとの上下のpaddingは60px


☆薄い色は何色あるかをつかむ
・ニュース欄の記事ごとの区切りや、影として使われるグレーが一色


☆コンテンツの横幅、グリッドのルール
・コンテンツごとに横幅やグリッドのルールを変えている。１カラムのコンテンツもあれば２カラムのコンテンツもある。
　→それによってスクロールしていっても単調にならず、各コンテンツへ視線誘導しやすい
・会社紹介の「About Us」のセクションは、完全あ２カラムではなく少しズレがある＋文字がセクションからほんの少しはみ出てる
　→崩した方が人間味があるような印象で、会社の熱意？理念？を伝えるには崩したレイアウトが良いのかも。
　　対してその他の事業内容や新着情報などは整列させて、キリッとした印象をもたせてる。


☆写真や図や比率のルール
・写真は横長
・グローバルナビの要素の中で、メガメニューが出てくる要素には印をつけている！わかりやすい！


☆レスポンシブの変化のセオリー
・上が左へ、下が右へ、のルール
・pc用で15pxの文字が11px〜13pxくらい、70px〜 90pxの見出しが40px〜50pxくらい


☆配色のルール
・背景色は白
・コンテンツの背景は、黒→写真→黒→写真と交互
・使われている写真は青や緑の寒色、グレー多め


☆読みやすい文字量
・ul要素のようなリストやリンク部分は10字程度が読みやすそう
・文章はline-heightを大きくしている。読みやすい！



川重商事さんのWebサイトは、セクションごとにレイアウトのルールを変えていました。同じルールで統一しがちですが、ルールを変えた方がかえって見やすくなる、という発見のあった今日の研究でした！
レイアウトが変わっても、トンマナやフォントの統一によって、統一感のあるサイトになっていると思いました。

最後までお読みいただきありがとうございました(*^ ^*)



#Webデザイン #Webデザイナー #Webサイト研究 #コーポレートサイト #メガメニュー