単機能トップページというデザイン手法が人気急上昇中

目的を1つに絞り込んだトップページというデザインのトレンド。
よろしければこちらもご覧ください

最後にデザインの話題を取り上げてからずいぶん経ったけど、そろそろまた書くべき頃合いだと思う。

今回焦点を当てるのは、レトロ(かなり前から用いられている)でありながら今また勢いを増しつつある(少なくとも僕は人気上昇中だと感じている)デザインスタイルだ。もっと具体的に言うと、目的を1つに絞り込んだトップページのことだ。

最初に、簡単な例を挙げる。GmailやYahoo!メールのメールアドレスを入力すると、そのアカウントに登録されている連絡先(知り合い)を、さまざまなソーシャルネットワークで探してきてくれるSpokeoというサービスだ。

日本語版の編集時点では、トップページのデザインはこの画像とは変わっている。

このデザインの目的はただ1つ、製品の機能を示すためにメールアドレスを入力してもらうことだけで、そのほかのことには目もくれていない。登録ユーザー向けのログインページやブログ、説明ページへアクセスするリンクといった副次的なリンクが少々と、信用度を高めるのに役立つ大手メディアのロゴがいくつか並んでいるものの、根本的に、このデザインには強い意図が見てとれる。

目的を1つに絞り込んだトップページを好む5つの理由

  1. メッセージがすばく伝わる

    見出しと行動喚起の呼びかけが1つずつしかないので、ビジターは、作り手が伝えようとしている重要なメッセージが一目でわかる。もっと長くて複雑なページになると、デザイナーやマーケターは、意図した呼びかけを(意味が伝わるのならばどんな形であれ)実際に目にする人がどの程度の割合になるのか、絶えず心配しなくてはならない。

  2. 情報伝達を簡潔にできる

    このようにメッセージがただ1つであれば、簡潔に情報を伝える表現や言葉を選ぶ必要があり、そうでなければ失敗の危険性がある。簡潔なウェブデザインが成功につながることは何度も繰り返し証明されてきたし、簡潔なメッセージは最も容易に理解でき、口コミで伝わりやすい――まさにマーケターの夢だ。

  3. 重要なものがはっきりする(そして重要でないものはどうでもよくなる)

    人は外部の力に屈したとき、残されたものこそが自分にとって最大の強みだということに気づくものだ。サイトのデザインでも、必要のないものが完全に取り除かれ、ページの目的に役立つ要素(グラフィックス、フォント、レイアウト、リンク、メッセージ)だけが残ったとき、この原理がはっきりと効果を現す。サイトに掲載すべき10の事柄の選択をめぐって言い争いをした経験がある人なら、発想を切り替えて、自社のビジネスの全容を表現できる10の言葉を吟味することを心がけよう(この切り替えで必ず成功するというわけではないが、最終的に良い結果につながる可能性がある)。

  4. 価値あるビジターを選り分けられる

    このようなページにたどり着いたビジターは、そのサービスが自分向きかどうかを即座に理解するだろう。興味を持たなかった人はすぐにページを去るので、実際にマーケティングやターゲティングの対象になりそうなビジターしか残らない。つまり、残ったビジターについて収集/加工のできるデータは、すべて価値があるということだ。ただし、往々にして対象外のビジターから聞こえてくる「雑音」も一掃してしまうという欠点もある。

  5. 「じょうご」の最適化を容易にする

    君がもしA/Bテストや多変量テストを数多く実行しているなら(それから、このドキュメントを読んでもこういったテストを実施すべきだと納得できないのなら、もう望みはない)、このようにごく少数の入力欄とリンクと見出ししかない簡素なページは驚くべきものだ。テストに要する期間は短くなるし、より説得力のある結果がもたらされ、クリック率やコンバージョン率を効率よく改善すべき注力ポイントを示してくれる。これらの比率が少し変動するだけで、売上が数百万ドル変わることも多い(これはたいてい、良い方に変わる)。

目的を1つに絞ったトップページはSEOにとって有効か?

答は「場合による」だ。

サービスの提供に特化していて、そもそも1つの目的しかないようなタイプのサイトなら、SEOにとって理想的なページ形式になるだろう。ブログや宣伝用の記事など、副次的なコンテンツがある場合でも、こういったページに比較的小さくて目立たないフォントでそうしたコンテンツへのリンクを埋め込んでおけば、クローラビリティと優れた情報アーキテクチャを保持できる。

ただ1つ、本当に困った問題になりそうなのは、サイト上にあるバイラル性が高くて製品との関連性が低いページに対して、トップページからトラフィックを送り込む働きが失われるかもしれないという点だろう(その結果としてリンクが少なくなり、ひいてはSEOの機会が失われる)。そうした危険があるなら、こういう形のデザインを採用しないという正当な理由になるだろう。

また、戦略上の目的に合致しない場合も、絶対にこのスタイルを採用すべきではない。メディア会社やブロガー、新聞社、小売業者がこの方向に進みたがることはおそらくないだろう(ただし、内容が深く、焦点を絞ったページにおいてこういったスタイルをヒントにするのは、おそらく賢いやり方だと言える)。

目的を1つに絞ったトップページの実例8選

目的を1つに絞ったトップページの実例8選

URL短縮サービス

URL短縮サービス「j.mp」(運営はbit.ly)のトップページは、周辺の目障りな要素をほとんどなくし、サービスを使ってもらうという1点に集中している。僕が特に評価しているのは、URL入力欄を大きくして常に視線を引きつけるよう工夫している点で、一度j.mpを利用した人は、二度と他の類似サービスを使わなくなるだろう(だからこそ、j.mpが初回訪問時の最初の5秒以内にサービスを利用してもらうことにこれだけ注力できるという部分もある)。

ブログサービス

ブログサービスを提供する「Tumblr」の「ブログを書く最も簡単な方法」(The easiest way to blog)というメッセージは、すばらしくシンプルな登録手続きによって裏打ちされている。また、緑色のボックスに「あなたがTumblrを好きになる24の理由」(24 Reasons Why You'll Love Tumblr)という宣伝文句を入れることによって、文字どおり「1つの目的にしか使えない」という状況を巧みに回避している。

念のために言っておくと、僕はこうしたスタイルをそれにふさわしいタイプのサイトで使うことを支持するが、早い段階で頻繁にテストを実施するよう強く推奨する。このスタイルのすばらしい点は、こうしたページが(ポータルサイトから入るタイプのブログサービスと比較して)テストが簡単なことだ。

ネットショップのホスティング

このサービスも、日本語版の編集時点ではデザインがが変わっている。

ECサイトを開いて運営するための一連のサービスをまとめて提供する「Shopify」は、メッセージを際立たせるために簡潔性さとテキストベースの誘い文句を採用している。このレイアウトは視覚的に僕の好みだが、大きな画像の下にある3つの訴求コンテンツボックスの影響について大がかりなテストを行ったのかは疑わしい。

気象情報

人気の高い気象情報サイトをたくさん見たことのある人なら、そうしたサイトがどれだけひどくごちゃごちゃしたものになり得るのか知っているだろう。「Umbrella Today」は伝統を破り、きちんとした気象情報をチェックするのにこの上なく簡潔な方法を提供している。冴えたサイト名とブランディングも僕のお気に入りだ――新興サイトの個性が大好きなんだ(^^)

目的を1つに絞ったトップページの実例8選(続き)

ソフトウェア

Silverback」は、ユーザビリティテスト用のソフトウェア。このトップページは縦に少し長い形式だが、メッセージはただ1つ――このアプリの働きとなぜ必要なのかを伝えて、ダウンロードボタンをクリックしてもらうことだけだ。

開発チームがすでにテストしたかどうか僕にはわからないけれど、ゴリラの口から出た吹き出しに「このゴリラは何をしてくれるの?(What does Silverback do?)」というセリフを入れたバージョンをぜひ見てみたい。

旅行情報

人気の旅行情報サイト「Kayak」は、厳密に言えば複数の焦点があるが、航空券の値段を調べたいと思わせるトップページの説得力と、長年にわたり(そしておそらくは何百回と繰り返されたテストを通じて)その1点にこだわり続けられたということによって、目的を1つに絞ったトップページのあり方を明確に示している。Kayakはまた、旅行業界の競合相手に比べて異彩を放っている。他の旅行サイトは、特別プラン、契約、提携企業、ニュース、レビューなど、ウェブサイトとビジターのどちらが目指す目的からもずれた無数の要素を売り込むのにこだわっている。

人材採用サービス

Resumator」のサイトを訪問した最初の時点では、今回のリストに加えるべきかどうか確信を持てなかった。それでも、9秒とかからずページのコピーを読んだ後で感銘を受けた。求人情報を掲載し、応募者の履歴書を整理してチェックして採用フローに乗せる。僕はすぐにこのサイトが何をしてくれるのかを理解し、実際SEOmozの人間にResumatorのことを知らせて検討してもらおうと考えたくらいだ(というのも、近いうちにSEOmozが求人を行う予定だから)。

メッセージが1つしかない、そのメッセージがすぐに伝わる、1つのアクションに方向を絞っている、3つの点ですべて合格だ。かなり役に立ちそうな感じがする(^^)

ソーシャル情報統合

Gist」は、Eメールとウェブのソーシャル機能を統合し、受信メールや自分と関わりのある人の情報をわかりやすく整理してくれる。これは非常に優秀なソフトウェアで、特に営業職の人には重宝されそうだ。このトップページは、価値ある提案をすばやく簡潔に伝えるという点でいい仕事をしている。

ウェブ検索

君はたぶん、カリフォルニア州マウンテンビューに拠点を置くこの小さな会社のことを聞いたことがないだろうけど、どうやらなかなかうまくやっているみたいだよ(^^)

目的を1つに絞り込んだトップページのデザインに関して、君の意見はどうかな?

この記事の筆者

この記事は、Daily SEOmoz Blog に掲載された以下の記事を日本語訳したものです。

原文:「Design Trends: The Single Purpose Homepage」 by randfish (2009/09/28 23:41 PDT)

記事セレクション:渡辺隆広株式会社アイレップ
翻訳:株式会社ガリレオ

テーマ別カテゴリ: 
記事種別: