見出し画像

UIデザイン20時間で学ぶ4日目

4日目 フォント強化

・トレースのリザインの参考

すごく丁寧に分析しており、お手本にしたい。

余白も大事なのか。Pinterestのアプリの素敵なリデザインをされていました。

・フォント学習

・手抜き

 プラグインを使えば手抜きでフォントがわかる機能がある。素晴らしいテクノロジー!

 MIMICのプラグインを使ってグリコのサイトから要素の抽出を実際にしてみた。

スクリーンショット 2020-06-14 21.51.55

入力して、一瞬で終わったので特にフォントは参考にして作ってみてもいいかもしれない。

こういう抜け道を見つけてしまうのはネットサーフィンの弊害ですかね。ありがたい!

ウェブサイトなら出来るが、もしかしてスマホアプリの分析は出来ないのかもしれない。悲しいです。

・フォント自体の学習=タイポグラフィー

https://sinap.jp/blog/2016/01/iosui.html

 このサイトによると、日本語はこの4つのフォントのみがiOSに標準搭載されている。

ヒラギノ角ゴProN W3

ヒラギノ角ゴProN W6

ヒラギノ明朝ProN W3

ヒラギノ明朝ProN W6

*明朝やゴシックの違いは筆ペン風かマーカー風か

*ちなみにNはいくつかの漢字が旧字体風なのを表している

*ちなみに”W数字”は文字の太さの違いを表している


 アルファベットは結構大量にあるのと、アルファベットのフォント(英字のみ対応)専用の検索サイトが多くヒットしたので、今回学習は保留。日本語のフォント検索は見つからなかった。

・フォントは奥深い

フォントについて、学習する余地はまだまだあるが、今度本で体系的に学ぶことにしてここではいったん保留します。


・今日の作業

地図アプリの2大強の”Google マップ”と”Yahoo!JAPANの乗り換え案内”のトレース分析とオリジナルの地図アプリをデザインするプロジェクトを行いたい。


そこで、本日はトレースを少し行った。

スクリーンショット 2020-06-15 20.28.33

ピタッとフォントがはまりました!Google  mapの検索窓の部分です。

ヒラギノ角ゴシックでピタッとはまりました!

日本語文字はゴシックか明朝なので見分けがしやすい。

でも数字はなかなか苦戦中です。


・今日のまとめ

プロジェクトを進めるのにあたり、フォント(細かい部分)より構成(全体)を注目すべきなのだろうか。


以上

今日は4時間学習(フォントついてに約3時間調べていた時間を含む)

累計約10時間



 そういえば、こんなフォントだらけの複雑な世界になったのは、スティーブ・ジョブズがMacに美しさを取り入れてくれたからなのか。点が線になるスピーチで言っていた気がする。感謝すべき進歩か…悩みの種となるか(フォントについて勉強が必須になってしまったので…)


サポートしていただける発信ができるよう、頑張っていきたいと思います。