UIトレースで学んだこと♯5 iPhone LP 配色とレスポンシブ対応について

0. はじめに

こんにちは。いつかやろうと思っていたGAFA様にとうとう手をつけます。
ということで今回は、AppleのiPhone LP(ランディングページ)です。

今回は、モノトーンの配色バランス・レスポンシブ対応について学びが多かったためそこにフォーカスします。あと少しフォントについて。

iPhone

1. モノトーン配色

視認性を追求したモノトーン配色の見本ですね。
この画像に全てが詰まっていました。

・背景について

ヒーロー及び最上部のヘッダーを#000000にし、
その間を#0D0D0E（ブルーとホワイトを少量）で領域の視認性を確保。

・文字について（２種類のグレー）

最上部 #CDCDCD 　⇨ホバーで白を濃く
※下部と区別するために、かつメインコンテンツに視線が行くように文字色を変えている。

中間（端末のアイコンがあるところ）#F5F5F7　⇨ホバーでブルー#2C71E3
ヒーロー #F5F5F7

ボタン（CTA） #FFFFFF ⇨CTAにだけ#FFFFFFを使っています。
これが「購入」の文字が浮き出て見える理由ですね。
UIを学ぶ前になんとなく感じていたことのロジックがわかるというのはとても楽しいです。

更にアクセントカラーのブルーも、CTAボタンの方が「さらに詳しく」よりも鮮やかになっています。アクセントカラーと一概にいっても、そこから更に重要度で細分化していくという考えがあるということがわかりました。
流石GAFA様、コンバージョンを追求している感じがたまらないです。

2. レスポンシブ対応について

各ブレイクポイント別に記載
①1068px
余白の調整
②734px
画像自体を縦長に最適化させる場合もあり。
ヒーローは特に効果が高い。
やはりLPにおけるヒーロー画像の理想的対応は、「それぞれに適した画像を用意する」ですね。かっこよさが全然違います。
③453px
スマホに最適化

3. フォントについて

Appleが独自に用意している、San Franciscoフォントについて学びました。

↓Qiitaの素晴らしいまとめ
https://qiita.com/usagimaru/items/da88c0a8793f23633c28

トレースしようとしてどうしても合わないなと感じたのは、
SF proをインストールして使用していたからで、SF pro jpはインストール出来ないからなんですね。。。
watchOS用にもフォントを開発していたりAppleの凄さがフォントというテーマだけでも実感出来ました。上の記事やAppleのサイトでの説明は必見です。

4. 最後に

今回はLPの上部にフォーカスしましたが、それ以外にも注目すれば学べることはまだまだありそうでした。
シンプルなLPをデザインしようとするならば、
トレースする価値は大いにあると思われます。

改めて続きが出来たら、更新します。