【UIトレース】#2-SmartNews
初めまして！
UIトレース頑張るマンです！
UIデザインの研究と分析のために、UI Trace（UIトレース）を始めていきたいと思います。
UI Trace（UIトレース）に関して
<目的>
1. デザインの基本原則の理解
・優れたUIデザインのレイアウト、余白、階層構造を実践的に学ぶ
・色使い、タイポグラフィ、コンポーネントの使い方を体得する
2. デザイン感覚の養成
・プロのデザイナーの意図や判断を読み取る力をつける
・優れたUIパターンをストックしていく
＜効果的な学習のためのルール＞
1. 対象の選定
・信頼できる企業のウェブサイトやアプリを選ぶ
・自分の現在のスキルレベルに合った難易度から始める
・モダンでベストプラクティスとされているデザインを選ぶ
2. トレース方法
・まず全体のレイアウトと構造を分析する
・細部の実装前に大きな要素から取り組む
・可能な限り正確な数値（フォントサイズ、余白など）を再現する
3. 振り返り
・オリジナルとの違いを細かくチェックする
・なぜその設計になっているのかを考察する
・学んだテクニックをメモに残す
①実際のUI
普段よく使用しているSmartNewsのUIを見てみることにしました。
カラーや記事など、すごく情報量が多いのにも関わらず、とても見やすくて使いやすいのはすごいなと感じています、、、。
②UIトレース画面
気になったところをピックアップします。
search barのこだわり！！
search barに色々な工夫がありました。アプリを開いた最初の画面で一番大きいフォントサイズ！
placeholderのフォントサイズが16pxでした。これまで制作してきた中で、search barやinputの中はそこまで重要ではないという認識であったため、16pxは使用したことはありませんでした。
ただ、アプリを最初に開いた状態、かつ、下にスクロールしないという状況においては、ただただニュースを眺めたいという人ではなく、ニュースを検索する行動の可能性が高いと思われます。そのため、このように少し目立つようなデザインを採用しているのではないかと推測しています。スクロールしたら消える！
1.にも記載した通りですが、下にスクロールしていく人はただただニュースを眺めたい人であると仮定しているからこそ、非表示にする設計になっているのではないかと推測します。
タブのこだわり！！
5pxの高さの差と3pxのborderによって、どこのアイテムを選択しているかが一目瞭然です！各記事のコンテンツのこだわりがすごい！！
めちゃくちゃ細かく設定されてるぅ！と思いました。
・「」、などの文字詰めは-6px分
・テキスト14px・line-heightは140%であったが、画像をそのまま置くだけではテキストと画像の上端は揃わない→画像のフレームのpaddingを設定している？
今回、若干仮定や推測が多く、謎解きしている感覚でした！笑
すごくこだわりが詰まったUI画面だと感じました。だからこそ、情報量が多くても見やすいのだなと、、、。
相違やご指摘があれば、それらの意見も大募集です！
よろしくお願いいたします！