UIトレースで学んだこと♯2 note

はじめに

UIトレース２回目です。
情報系のウェブサービスに興味があったため、
今回はnote  https://note.com/ です。

初回は学習のため網羅的に記載しましたが、
今回からはポイントに絞って書いていきます。

0. 全体を通して

カラー：アクセントカラー（#2BB696）
＆グレーだけの流石なミニマルデザイン。

フォント：system-ui

前回の任天堂ではフォントを指定していたので、
webサービス系と宣伝系のwebページでは優先順位が異なると思われる。

webサービス系⇨アクセシビリティ優先（system-uiなど総称フォント指定）

宣伝系⇨ブランディング優先（特定のフォントファミリーを指定）

不明点：画像サイズなど任天堂は一般的な比率（黄金比など）を意識していた印象でしたが、noteではそれが見受けられませんでした。

自分の知識が足りないのか、それとも、webサービス系ならではのサイズの思想があるのかはこれから要勉強です。

1. リンク要素

・テキストリンク
グレー⇨ブラックがベース

・記事リンク
ホバーすると背景に#F6F9F9(ライトグレー)のボックスが出てくる仕様でわかりやすい。

2. レスポンシブ対応（カラム設計と合わせて）

３段階のブレイクポイント設定。３カラム⇨２カラム⇨１カラムと変化していく。
webサービス系のページだとUI向上のためより細かく設定している印象を受けます。
（2段階のブレイクポイントだった宣伝用の任天堂HPと比べて）

・第1ブレイクポイント:940px
2カラムへ。左カラムのカテゴリーを上部メニューへ変更

・第2ブレイクポイント：770px
1カラムへ。右カラムのイベント情報やおすすめ記事がそのままなくなった！？無理やり入れるのではなく必須ではない項目は省く、という発想も必要ということでしょうか。

・第3ブレイクポイント：440px
左右余白が急激に狭くなる。
文字サイズ:タイトル20px 本文14pxへ変更。

3. 文字

タイトルと本文共にかなり詰めの字間調整がされている印象。
タイトル　-84   本文  - 109

文字情報が重要（かつユーザーは文章を読むことが前提となっている）なので、最大限文字情報を表示することを優先しているということかと想像しました。

「ユーザーが何を求めているか」によってデザインを最適化させることが重要ということですね。

まとめ

UIトレース２回目ですが、「ユーザーが何を求めているか」によってデザイン思想が全く異なることが実感出来ただけでも学びが大きかったです。

メディア系・機能サービス系などなど目的をグルーピングした上でトレースしていくと学びが深まるように感じました。