UI検証 : プロダクトのランディングページ

自分はwebデザインの素人だ。とはいえ、今後はプロダクトのwebデザインに手をつける必要がありそうだ。なので最近のwebページのレイアウトをざっくりトレースしてみた。トップページのみ。

7f5ac2bee11666b789256577bf50651b


最近のwebプロダクトのランディングページは驚くほど画一化が進んでいる。少ない情報でざっくりサービス内容を伝えて、スクロールで詳細を見せるタイプだ。使い古された手法とはいえシンプルで作りやすく汎用性も高い。知っておくと役に立ちそう。とりあえず構成を調べて、それっぽいものを作ってみた

Big UI / Low Density / Long Page

このスタイルは「Big UI / Low Density / Long Page」といわれるらしい。大きなUIに粗密なレイアウト、そして長いスクロール。Pinterestで「web layout」とかで検索すると、参考になるものがたくさん出てくる。

プレゼンシートみたい

作っていて感じたのは、とにかくスピードと分かりやすさを重視したスタイルであるということ。プレゼンシートを作っているような感覚だ。元来スタートアップから発生したレイアウト手法らしいので、まあそういうことなんだろう。

内容

内容も大体お決まりのパターンがあるらしい。
<ヘッダにロゴとログインボタン>
<メインの写真とサービス名>
プロダクトのメッセージを一見して伝えるインパクトの強い写真が背景においてある。最近は動画を流しているものも多い。

<サインアップフォーム>
サインアップフォームはまず一番最初に目につく場所に置いてある。ただし、スクロールして全ての情報が閲覧された後に、もう一度配置してあるケースも多い。

<プロダクトの魅力や使い方>
とにかく簡単に理解してもらえるように工夫が凝らしてある。写真、イラスト、紙芝居風、3点に絞った表現など数秒で理解できるようになっている。

<対応プラットフォーム>
大抵デバイスの写真と一緒に表示してある。iOSデバイスなんかはAppleが公式のものを提供してる。

<メンバー紹介>
これよくあるけどなんだろう?野菜の「〜〜さんが作りました」みたいな感じかな。

<他ページへのリンク>
企業情報、採用、価格構成、開発者情報、ブログなどなど。

まとめ

・最近のwebデザインを把握するために、代表的スタイルをトレースしてみた。
・「Big UI / Low Density / Long Page」と呼ばれるこのスタイルは目的を明確にもっていた。
・素早く、簡単に、プロダクトの魅力を伝えるということ。つまりプレゼンと同じ。
・それ以外の要素は排除されており、とても合理的なスタイルだった。

2015-05-28 | Posted in デザイン, 開発No Comments » 
Comment





Comment