フレンドファンディングアプリ、polcaのLPをトレースして気づいたこと。

polcaのLPをトレースして気づいた事を備忘録的にまとめました。

トレース結果

文字について

トレースした目的の一つに有名サービスのLPはどのようにタイポグラフィを定義しているのかを知りたいというのがありました。

今回のケースでは、14pxをhtml全体のフォントサイズの基準として、emでその他のフォントサイズを決定しているようでした。Sketchでトレースしていてなんかテキストがうまく重ならないな、というときはフォントサイズが小数点になっていないかブラウザの開発者ツールで調べてみるといいと思います。

色について

メインのテキストカラーは#333ですが、情報の優先度を落としたい場合に、#666を使用していました。例えば、注釈のテキストよーく観察してみると、米印と数字の部分は#333なのですが、そのあとに続く文章は#666になっています。また、例外的にフッター部分だけは#000が使用されていました。

そして、個人的に面白いなと思ったのが、LPの最後に唯一出てくる赤色（#F64744）です。

アプリへの導線、シェアボタンの近くにこの強い赤を置く事で、polcaの目指す世界観、サービスに対する情熱をユーザの感情に訴えかけて、アプリのダウンロードやシェアしてもらう事を狙っているのかなと感じました。

余白について

余白もフォントサイズ同様14pxを基準としてemで指定されているようでした。具体的には、大見出しの上下には42px(=3em)、小見出しの上下には21px(=1.5em)をマージンを設けるなどのルールが確認できました。自分でLPをデザインしていて、見出しと本文のマージンを何pxにしたらいいのだろう、と根拠に迷ったときは見出しのフォントサイズを一つの目安にするといいのかもしれません。

まとめ

どうしても単調な作業になりがちなトレース作業ですが、自分がデザインする時の根拠となる考え方を盗むぞ、という目的意識を持ってやるとかなり違いますね。トレース前にアウトプットを明確にして置く事の重要性を再認識しました。さて、次は何をトレースしてみようかな。