見出し画像

【レイアウト】最近出会ったMV/ナビゲーションレイアウト100👀

Tomicha🍏

こんばんは、Tomichaです👗

前回のデザインの学びは生意気にも量より質みたいな投稿でしたが、やはり私は圧倒的にインプットが足りない！ということで今回は質より量!量!!と完全にきりかえて取り組んでみました。（毎回取り組み方が定まらない）

今回は１００サイトに目を通してそこからレイアウトのパターンを知り、最近の傾向を学ぼう、という思いつきで初めてみました。

１００という数字に、論理的根拠は１つもありません！

ただ、良質だと評価されているギャラリーサイト（いつも見ている５サイトが選出している）１００サイトを見ると、大体の傾向を知ることができるだろうと、１００サイト見て体感的にそこに共通するものを知ることができるれば今年のサイトの潮流やセンスを感じられると思い取り組みました📚

駆け出しデザイナー故に、いざデザインするとなるとオロオロ何からどのレイアウト参考にしよう、どうするのがいいんだろうと彷徨っている自分の少しでもヒントになればという願いもあったり、なかったり笑

学習経過

まずは１００サイトを選び、パシャリ📷

経過　およそ90サイト

ヘッダー１００

普段アタライ前にシンプルであるが故に見下ろしがちですが、このパーツ１つでもパターンやコア割が詰まっていました。

レイアウトももちろん、常にどのページでも出てくるパーツ。
動かした時に変化があるのも、面白いところ👀

スクロール

スクロールすると背景の色が変わるパターン、
シンプルな帯状の形で、画面上部に固定されたり、背景色にガラスっぽく見せるデザインや背景と同じ色を使ってサイトに溶け込んでいるパターンまた背景色なし・すっきりとした印象になります。テキストが読みづらい場合は、背景色に応じて文字色が変化することもありました。

角丸

角丸で中央配置、丸感が強めだと、可愛らしい、先進性、元気
角丸が強くないと、落ち着き、安心感の印象を受けました。

ハンバーガー

基本ロゴは左上。ビジュアルが大切時はハンバーガー
ハンバーガーが2本と3本の時があるけど、2本の時には太い、もしくは長くなり目立たせている。サイトの印象を受けたユニークな形に変形している　ものも多くて可愛らしものも！
右にハンバーガーが多いが、左上の場合もある、その場合には右上により優先度の高いボタンが配置されている。

多様なメニュー

日本語のメニュー最大でも、７~8セクションに分かれている。
メニューそのものがボタンとなっていたり、縦置きのメニュー　お品書き的な印象、コンテンツをより大胆に見せられる。
縦書きだとより、落ち着いた印象、日本語独自の空気感がある。
文字のみで、画面のハジ下に置かれているメニューもある。

今回参考にしたギャラリーサイトにはモバイルファーストのデザインはなかったのですがその場合のメニューもまた異なった印象のデザインになるので引き続き学んでいきたいです📖

今回は、PCのレイアウトのみだったのでレスポンシブのデザインも学ばないとな😶😐

今回の驚きは、メニューがないサイトもわずかですがありましたLPのようなもの、内容量がそこまで多くないものに関しては特に商品やブランドの紹介のようなものはグローバルゲーションが無いものもあるんだなとかなりレアですが、面白い　発見！

グループ分け

大まかですがグループにも分けてみました！
・割とスタンダードパターン
・ボタンパターン
・左右によっているパターン
・縦パターン
・文字なし、何もなしパターン
・センターパターン
・ハンバーガーパターン

はっきり分けきれないところもありますがこんな感じかなと。（載せておいて見えにくくてすみません(~_~;)）

MV１００


 サイトの印象を左右する顔！
レイアウトの分類やパターンは似ているものはあるものの、（中央揃え、左側に文字を置くもの、大胆なタイポグラフィーなどなど）100見ると😵‍💫

文字組

そして文字組のバランスが印象を左右する！文字組について手を動かしていましたので、文字に対する学びもありました！！

複雑な形や色を使ったものでなくても、大きさの代償、サンセリフ、セリフ体の組み合わせ文字の長さ、大きさ、派手な演出よりも管理印象を左右する
カーニングなどの文字組も意識して文字を置き１つ１つに様々な文字組が利用されている。文字組偉大👑

レイアウトの気づき


・レイアウトを作成して思ったことは、フルスクリーンのメインビジュアルでインパクトのあるビジュアルを提供することでユーザーの注意を引き付けていること。

・動画やアニメーションを取り入れた動的なメインビジュアルも。

・シンプルで効果的なテキスト、視覚的に美しく、メッセージを明確に伝える方法として人気です。

・ホワイトスペースを効果的に使用することで、デザインに余裕。

・大きくて大胆な見出しフォントが、ユーザーの注意を引き、重要なメッセージを強調。

・異なるフォントを組み合わせることで、視覚的な興味を引き、デザインに深みを持たせています。

そのほか気になったこと

右下に角丸でニュースや情報を、ボタンを持ってくるものもいくつか
左中心の英字が多い印象


写真を使ったものにかんしては、、、最近Xでも参考にさせていただいていた（＠AndHA _design）ものとも照らし合わせてみるとなるほどやはりこの１６パターンに当てはまるもの多々ありました👀

自分でデザインする際にも、一気に色々試してみるのではなく、まずはこの基本パターンを意識してみよう_φ(･_･




振り返り

だいぶ面白い、学習でした。ツールにも触れることができましたし、取組む前にこれは意味があるのかふと過りましたが。

それでも、考えている時間がもったいないので意味があったかどうかはこの先の私が教えてくれるはずだと思って、今は誰よりも経験も知識もすく兄からこそなんんでも挑戦してみようと今回の学習に臨みました🪄✨

良いサイトを浴びるように見るのは気持ちが良かったです😏

最近見たサイト似なるのでこのパターンが全てでは無いですし、他のパターンもインプットとしつつ、制度高く自分の中で分類してせいりできるところまでできていないので今後も引き続きインプットは続けて引き出しを増やして行きます🔥

ここまで、みていただきありがとうございます🍀

またお会いできたら嬉しいです🎆

いいなと思ったら応援しよう！