見出し画像

Webサイトトレース

Miyazawa_wiz

こんにちは！
大阪でUI/UXデザイナーとして働いているミヤザワです。

今回はデザイン力UPのために、Webサイトトレースをしたので、
サイト分析と学びを書いていこうと思います！

サイトトレースの目的

  1. 「見る力」を鍛えるため。

  2. デザインツールの「理解」を深めるため。

  3. なぜこのデザインなのか「意図」が読めるようになるため。

見る力とは何か、下記の記事を参考にさせていただきました。


サイト概要

今回のトレースしたサイトは、NUTIONさんのブランドサイトになります。


トレース結果

今回はfigmaで作成しました。

左：見本　右：トレース後

カラー

  • ベースカラーは白と少し濃いグレーが使用されており、メインカラーは真っ黒ではない黒（＃212121）で、全体的にシンプルな配色になっている。

  • 大きめのロゴマークが、グラデーションだったり、写真や所々カラフルな色が使用されているためベースはシンプルな配色になっていると考えられる。

  • アクセントカラーはタグや写真の箇所で使用されている、明度が高めの青・赤・黄が使用されている。
    背景が少し濃いグレーのセクションでは、メインカラーより少し明度が落ちら青・赤・黄が使用されており、視認性などが考慮されていると考えられる。

フォント

  • 使用しているフォントは3種類。基本的にYugothicを使用しており、画像部分で手書きフォントとNotoSansを使用していると思われる。

  • 大きめのタイトルは90~110px、小見出しは30~48px、本文には15~20pxのフォントサイズを使用している。
    タイトルと本文に差が出ており、コントラストがしっかりできているなと感じた。

  • シンプルなフォントで全体的に読みやすいフォント。

  • フォントカラーはブラックではなく、明度が低めの無彩色（#212121）が使用されていた。

余白

  • PCのセクション余白は規則性はあまり感じられなかったが５の倍数が多い。
    オブジェクト間の余白の規則性はないが、縦のガイドラインはしっかり決められてデザインされていた

  • SPも規則性はないが、縦のガイドラインが外側の余白が18px、内側が36px取られており、テキスト同士の余白も18pxが多かった。

  • サイト全体的に余白は十分取られているため、見やすく感じる。

良いと思ったポイント

  • 余白がとても綺麗に取られている。こんなにたっぷり取られていても
    違和感を感じない。
    →英語のタイトルは2行、日本語のタイトルは3行などに分けられているのでこれも余白を作るために敢えてなのかなと思った。

  • Selected Worksのセクションでも画像を敢えてずらして配置しているので
    余白を作っているのと、あとは視線の動きを意識した配置なのかなと思う。

  • KVのロゴのグラデーションが綺麗。ぱっと見で目を惹かれる。

  • セクション間で余白が多く取られているところもあるが、アニメーションが多く使われているサイトなので、そんなに余白を多く感じない。


学び

  • 余白を上手に取る上で、メリハリをつけることが大事だと感じた。
    →このサイトで言うとアニメーションや英語の画面いっぱいのスクロール

  • CTAボタンが結構シンプルな感じに見えるが、矢印が工夫されていている。

  • Our Membersのところは、矢印ボタンだけでどのタイミングで切り替わるかわかるのが良いと感じた。

  • 外側のガイドライン（余白）もしっかり決めて作られているんだなと思った。

  • ブランドサイトのため1つ1つのセクションがしっかり作られている。
    （だから余白もこんなに生かされているのかなと感じた）

この記事が気に入ったらサポートをしてみませんか？