1日1WEBサイト デザイン分析 #16 "オーエイチアーキテクチャー"

こんばんは。WEBデザイナー目指して勉強中のかいもちです。
今日は、グリッドレイアウトが特徴的なページを見ていこうと思います。
というものも今、CSSグリッドを使ったLPを目下作成中(そして躓いている...)でして...。🤣

"オーエイチアーキテクチャー"

目的・ターゲット

目的
・近況報告、進捗報告、事業のポートフォリオとして活用。

ターゲット
・ファーストミートではなく、あくまで二次的なアプローチとしてこのページを活用している(だろう)
→ この会社の存在を知っていて、なんらかの関わりがある人。

配色

・無機質、落ち着いた、クールな・・・そんな印象を与える配色。

・建築設計のデザイン事務所...ということで、コンクリートを思わせるグレーが基調。

 

フォント

・"游ゴシック体 Pr6N M" (日本語)
→ モリサワフォントの游ゴシック。スタンダードで読みやすく、いい意味で特になんの印象も残さない。

・Century Gothic (英字)
→ Mono Type社製。Adobeフォントで設定可。
　weightは細め、丸い部分がしっかり丸く、ちょっとだけ横長。丸っこいが、かわいい印象というより、スタイリッシュな雰囲気になるのが不思議。
　よく見かけるフォント。

ファーストビュー

・トップビューから急に記事一覧。
　なんの会社のページなのか、ひと目見ただけではわからない。とりあえず記事を読み進めてみると、ふむふむなるほど、建築を扱っている会社なのかな・・・とわかる程度。
→ ということから、この会社さん初めまして ! という人をターゲットにしたページではなく、ある程度関係性のある人に向けてのページであることがわかる。

・グリッドは、様々なパターンがありつつ、gapが等間隔になるよう指定されているため、整然とした印象を与える。

コンテンツ

・上部ヘッダーと左右ナビゲーションは固定。

・こんな感じで、かなり縦長にズラーっと記事紹介が並ぶ。

・記事紹介はマウスホバーで透明な黒幕がかかり、view more の文字が浮き出てくる。クリックできることが伝わる。

感想

　「自分が何者か」ということを最初に述べないページを初めてみた気がする。(いや、多分、そんなことはないんだけど、意識して見たのは初。)
　
　グリッドは、大きさがまちまちでも余白を揃えることで、整った印象も与えられることがわかった。

全然関係ないけど...
創業者お二人が出身大学の先輩たちでした。なんか嬉しいなーーー ! (単純)