デイリーメール: ユーザーエクスペリエンスに基づいた反伝統的なウェブデザイン

著者: Spoon Killer/Product Observer

ローカルデザイン、モバイルインターネット、ユーザーエクスペリエンス、デザインイノベーションに焦点を当て、「テクノロジー-ビジネス-メディア」をリンクするためのデザイン手法の使用方法を研究します。彼は、Leifeng.com、Yingwen.com などでデザインコラムを執筆しており、TEDx の講演者でもあり、デザインおよび非デザイン関連の書籍を数冊執筆しています。新浪微博：李一洲デザイン

[コアヒント] デザインとユーザーエクスペリエンスの観点から、The Daily Mail が** をあっという間に追い抜いて、世界で最もアクセス数の多い新聞オンラインメディアになった理由を説明しましょう。

数日前、Global Entrepreneur の記者の友人から電話があり、The Daily Mail があっという間に The New York Times を追い抜いて世界で最もアクセス数の多い新聞およびオンライン メディアになった理由を、デザインとユーザー エクスペリエンスの観点から説明してほしいと頼まれました。公式ウェブサイトを見ると、現在、毎月 4,000 万の独立した IP 訪問者がいることがわかります。さらに興味深いのは、トラフィックの 3 分の 2 が、新聞が発行されている英国以外からのものであることです。すべてをモデルにまとめる必要のあるこの時代では、成功した人々は何らかのマントラを実践しているようで、人気のあるウェブサイトは特定の市場とデザインの原則に従っているに違いありませんが、The Daily Mail のウェブサイトのデザインは非常に「シンプル」であると言えます。

2013年3月19日午後8時20分頃のホームページのスクリーンショット

質問と回答のウェブサイト Zhihu と Quora では、多くの人が Daily Mail がなぜこれほど成功しているのかを議論しています。私は 1、2、3、4 の長いコメントを読むのが本当に好きではないので、一番下までスクロールして、最も短いコメントをいくつかざっと見てみました。説得力のあるコメントは次のとおりです。

ホームページには広告がないので、ユーザーはコンテンツに集中できます。

「セックス」や「ゴシップ」など、需要の高いコンテンツを獲得します。

高画質の大画面なので、一度に十分見ることができます。

ウォーターフォールフロー、更新プロンプトなし、ユーザーを長時間滞在させるように誘導します。

デイリーメールの強力な魅力を深く感じ取るために、3日間頻繁に利用してみました。コンテンツ、ユーザー心理、検索エンジン最適化、Webデザイン、そしてその背後にあるデザインチームの観点から、私の理解を共有したいと思います。 （たった3日間でこんなに急いで話したのは、私自身が商品を見るときに使った「直感原理」のためです。本当に魅力的な商品には過度な「脳内補完」は必要なく、直感こそがコアバリューなのです）

コンテンツ

私はニュースコンテンツを3つのカテゴリーに分類しています。

エッセンス（繰り返し読む価値のある解説記事）

専門的（ユーザーの仕事や興味に関連する知識と情報コンテンツ）

退屈なもの（ゴシップ、かわいいもの、センシティブなもの、面白いもの、スリラー、ショッキングなものなど、ユーザーの断片的な時間を埋めるコンテンツ）。

一般ユーザーにとっては、読む優先順位に関係なく、3 種類のコンテンツすべてが求められており、最初の 2 種類は、無意識のうちにコンテンツから「キーワード」を抽出し、それをユーザーの「認知モデル」と組み合わせて情報を構築する必要があるため、ストレス リーディングに属します。一言で言えば、それは精神的なプロセスです。退屈なコンテンツの場合、ユーザーは通常、それを刺激して脳内の重要でない情報を置き換えるために使用します。つまり、これは脳を空にするプロセスです。デイリーメールの主なコンテンツは、科学技術セクションの軽いコンテンツである「軽い脳プロセス」と、重くて高解像度で刺激的なさまざまな「重い空脳プロセス」で構成されており、適度な圧力とリラックス感で、ユーザーに快適な体験を生み出します。この究極の体験は、「足洗いとマッサージ」に例えることができます。痛みと幸福です。

プライマリ インターフェースには広告が表示されませんが、セカンダリ インターフェースには大量の広告が表示され始めます。これは単純な戦略です。表面的に情報を探しているほとんどのユーザーにとって、ホームページ上の長いタイトルと大きな画像、そして膨大な量の関連情報（インターフェースは急速に更新される大量の情報を単位領域に詰め込むように設計されています）を見ることで、脳の使用と解放のプロセスがすでに満たされています。ユーザーは写真の内容に惹かれたら、二次ページに移動して、多数の高解像度の写真（通常は 5 ～ 10 枚）を閲覧できます。写真の視覚的な魅力により、ユーザーは隣にある広告の干渉をあまり気にしません。

特徴的な女性コンテンツモジュール「femail」は、コンテンツ貢献とユーザー誘致に大きく貢献したと「言われている」。このコンテンツ モジュールへのトラフィックを判断するための、Daily Mail の直接データはありません。しかし、論理的に分析すると、デイリーメールの全体的なコンテンツの提示は、少なくともこれまでのところは、完全に「女性」と「緊急のニーズ」に向けられているため、ユーザーは各コンテンツモジュールをある程度、ゴシップや爆発的な素材として閲覧することができます。女性向けモジュールは最も平凡なもので、主に美容、ショッピング、食事、母親と赤ちゃんなど、女性ユーザーの直接的なニーズに焦点を当てています。これがウェブサイトのクリックの主なソースだとは思いませんが、このモジュールはパートナーの販売店に直接トラフィックを誘導できるため、宣伝の面で積極的に宣伝されているのも理解できます。

femail モジュールのピンクのテーマ

ユーザーの読書心理学

ユーザー心理は、Web サイトのデザインやコンテンツと切り離せないものです。ここでは、興味深い点をいくつか紹介します。

記事内容の深さを把握する

「**」を例に挙げてみましょう。メディア業界は常にその先導に従ってきました。そのコンテンツの専門的深みと社会的倫理は、業界で間違いなくトップクラスです。そのウェブサイトとモバイル端末のデザインも、最後まで品質を実現しています。フォントやコンテンツの配置間隔さえも非常に洗練されています。その「気質」と「品質」は、説明する必要がありません。 「China Entrepreneur」などの国内メディアも業界では高い評価を得ており、コンテンツの深さは「China Business Weekly」よりも優れていますが、販売量は比べものになりません。もっと極端な例を挙げると、FHM のコンテンツは奥深いと言えるでしょうか? 同様に、** のトラフィックは Daily Mail に容赦なく追い抜かれています。

つまり、読者は質の高いコンテンツを読まなければならないというプレッシャーを感じています。プロの読者は全体のほんの一部に過ぎません。多くの読者は新鮮な情報を素早く入手できるサービスを求めています。「新鮮さと楽しさ」と「客観的な提示」がキーワードです。英国第2位の新聞社であるデイリーメールは、ユーザーに一次ニュースを迅速に提供できるように、世界中のいくつかの都市に新しいオンライン コンテンツ チームを設置しています。デイリーメールの記事を注意深く読むと、多くの暴露や境界線上のコンテンツがあるにもかかわらず、写真を使って語り、基本的な客観的な立場を維持すること（編集者が明らかに左派や右派に偏っていないこと）が常にコンテンツの根幹となっていることがわかります。編集者は、コンテンツの読みやすさを低下させるために、深遠であるふりをしません。

** の Chrome アプリはデザインが優れており、高品質のコンテンツを備えています。

ユーザーレビューについて

** のオンライン版ではコメントは許可されておらず、ソーシャル メディアでのみ共有できます。つまり、私の意見を評価してもらう必要はありません。デイリーメールの記事の下には充実したコメント欄があり、ユーザーは記事を「いいね」したり「キック」したりできます。つまり、不満を言うのは大歓迎です。コンテンツはメインの記事よりも面白いかもしれません。オンラインメディアの標準機能であるシェア機能についてはここでは詳しく述べませんが、デイリーメールの公式Facebookアカウントにログインすると、そのアクティビティのレベルに驚かされます。「不満を言う」ことは、人々が本当に楽しんで参加している脳を鍛える活動であることがわかります。

デイリーメールのコメント欄は私をしばしば怒らせる

同様の例として、「豆瓣」が挙げられます。 Doubanをよく使う友人たちは、こんな経験をしたことがある。面白い投稿に対して、メインの投稿は間違いなく単なるヒューズと苦情の対象で、本当に面白くて才能のあるコンテンツは、下のコメント欄に隠されているに違いない。 UGC はフォーカスの問題に寄与するだけでなく、分散した返信情報からも発生します。これはトレンドになるでしょう。自己成長するコンテンツは、効果的なアルゴリズムと適度な操作を通じて、予期しないユーザー グループを Web サイトに呼び込む可能性があります。

Doubanグループのホットな投稿への返信数は2万件近くに達しており、現在も更新中です。

タイトルは長くなければなりません

Sina や Sohu などのポータルを思い出してみましょう。モジュール分割により、多くのコンテンツ要件を 8 ～ 10 文字に凝縮する必要があり、タイトルとコンテンツを一致させることができないことがよくあります。クリックして閲覧を続けるにはどうすればよいのでしょうか。Daily Mail のタイトルの要件は 1 つだけです。それは「長い」ことです。タイトルは長くなければならず、ユーザーが特定のコンテンツを閲覧しなくても重要な情報を把握できるほど長くなければなりません。これが情報を効果的に伝える方法です。

これは実際には、中国語と英語の文法構造と読み方の習慣の違いに起因しています。中国語は非常に抽象的で比喩的なので、私たちは堂々巡りの会話に慣れています。英語はシンプルでわかりやすいので、要点を押さえて書く必要があります。タイトルでは、同じものを表すために複数の形容詞を使うことがよくあります。スティーブ・ジョブズのスピーチを思い出してみましょう。比類のない、素晴らしい、信じられない、前例のない、といった言葉が繰り返し使われていました。

タイトル＋サブタイトル＋写真で情報が伝わりました。ビキニ写真をもっと見たい方はサブページへどうぞ

検索エンジン最適化

この要素は、技術者以外の人々によって一般的に無視されます。デザイナーである私は、この分野の専門家ではないので、簡単にしか話せません。しかし、実際には、ウェブサイトの運用とデータの観点から、SEOは間違いなく注目に値する核心的なポイントです。 Google はアルゴリズムの調整を続けており、以前の SEO 手法の多くは適用できなくなっていますが、全体的にはいくつかの主要な手法は依然として重要です。

まだ長いタイトルです。

長いタイトルには、最も多くの情報とキーワードが含まれています。これが SEO に良い理由については説明しません。このような長いタイトルは、デザインの原則を満たしている限り、コンテンツと SEO の観点から非常に有利であることを知っておく必要があります。

まだ鮮明**大きな画像

意見を探す必要があるなら、タイムズに行けばいい。オバマ大統領とチャットしたいなら、Google+に行けばいい。選択肢はたくさんあるが、入り口にはほとんど粘着性がない。携帯電話を充電する場所ではなく、より魅力的な割引がある場所を知りたいのと同じです。この点では、ポータルに利点はありません。

しかし、ゴシップの大きな高画質写真を見たい場合、デイリーメールがほぼ唯一かつ最良の選択肢です。これが「厳格な需要」です。同社が公開したデータによると、トラフィックの60%はGoogleやFacebookなどのプラットフォームポータルからではなく、ユーザーによる直接の訪問によるものです。これはかなり印象的です。デイリーメールは Facebook と同様に、主に独立した訪問者に依存しており、ユーザーの粘着性が非常に高いため、Google にクレジットを与えることをほぼ回避できることを意味します。同様に、Google でキーワードを使用して画像を検索すると、多数の結果が Daily Mail につながり、これも Web サイトに大量のトラフィックをもたらします。

ウェブデザイン

最後に、デザインについてお話しします。実際、私の意見では、デイリー メールはデザインの原則に違反していないだけでなく、最近の多くのデザイン トレンドにも準拠しています。

ウェブページにプライマリデザインやセカンダリデザインがない

従来の Web デザインでは、「F」ゾーンの概念がよく言及されます。これは、タイトル バー、左側のナビゲーション バー、および最初の画面上の目立つ位置を、ピクセル単位まで正確に特別に設計する必要があることを意味します。デイリーメールの場合、ページ全体が更新されない長い情報フローになっているため、このような Web ページ上のコンテンツの優先順位は不明瞭です。ユーザーは約 30 画面までスクロールできます。この新しい「ウォーターフォール フロー」レイアウトは、実際にユーザーの読書習慣を「タイトル コンテンツ ページ」モードから「並列情報ブロック」モードに変更するように誘導します。各情報モジュールは独立して存在するため、ユーザーは詳細を参照するためにセカンダリ ページに入る必要がありません。

典型的な「並列情報モジュール」設計

この情報デザインスタイルの最も典型的な例は、Microsoft の Metro UI デザインです。オペレーティング システム レベルではまだ未熟ですが、コンテンツの表示における利点はすでに明らかです。ただ、システムレベルではリアルタイム更新機能を追加できるのですが、Webサイト側ではあまり活用されていません。

もう一つの注目すべきトレンドは、パララックススクロールと呼ばれるもので、HTML5 技術を使用して情報を提示する新しい方法です。コンテンツが豊富なオンラインメディアで、ますます頻繁に使用されるようになると思います。

Spotifyのホームページは視差スクロールで作られており、ユーザーに豊かな感覚体験をもたらします

プライマリ コンテンツとセカンダリ コンテンツの配置を使用して、ユーザーが Web ページの位置の依存関係を形成し、プライマリ ページとセカンダリ ページ間で高度なコンテンツ交換を行えるように誘導します。

これは少し理解しにくいので強調する必要があります。デイリーメールのメインインターフェースのデザインを注意深く観察すると、各メインコンテンツはA（メインコンテンツ）、B（補助コンテンツ）、C（関連コンテンツ）で構成されています。ホームページの比率はおよそ1：2～4：5～7です。

デイリーメールのホームページでのコンテンツ配信

この比率は、セカンダリ ページではさらに誇張されています。多数の補助的な高解像度画像に加えて、1 つのページには、クラス C 関連コンテンツへのグラフィック リンクとテキスト リンクが 200 以上あります。これにより、ユーザーは気が散ったときにいつでも右側のリンクを通じて特定のコンテンツのプライマリ ページに戻ることができるため、「プライマリ ページ - セカンダリ ページ - プライマリ ページ」というユーザーの循環的な読書状況が形成されます。これはデイリーメールのコンテンツガイダンスモデルとデザイン革新の核となるものだと私は思います。 Web ページ、特にセカンダリ インターフェイスの美観の観点から見ると雑然としているように見えるかもしれませんが、非常に効果的です。 Web デザイナーは、ページの美しさだけでなく、使いやすさも考慮する必要があります。

ここで、360 度ナビゲーションについて触れておく必要があります。私の意見では、360 の製品の反復性とユーザー需要の変換率は、同業他社の中でも非常に高いです。特に、360ナビゲーションという製品では、短期間で市場第2位となり、徐々に静的なテキストリンクを「ユーザーの個性に基づいてカスタマイズされたグラフィックとテキストのサイドバー」に置き換えていきました。

もちろん、ここでもアルゴリズムの問​​題があります。たとえば、ユーザーが刺激的なビデオをよく閲覧している場合、ナビゲーションがそのようなタイトルと大きな画像をユーザーのホームページに配置すると、ユーザーは恥ずかしさや怒りを感じる可能性があります。コンテンツを適切に公開する方法についても、慎重に検討する必要があります。

まだ刺激的なテキストや画像情報もありますが、360 ナビゲーションのパーソナライズされたガイダンスはすでに非常に優れています。

すべてはクリックのため

データをいくつかご紹介しますと、Daily Mail の画像の平均サイズは 636 ピクセルを超え、タイトルの長さは 20 文字を超え、メイン コンテンツの横には 260 を超える「ミニ ストーリー」があり、すべての画像コンテンツは無料です。

これらすべてにより、読者がウェブサイトにアクセスすると、クリックし続け、常にホームページに戻ってさらに興味深いコンテンツを発見できるようになります。ユーザーがサイト上で過ごす平均時間は 10 分を超えます。

デザインチーム

デイリーメールのデザインチームはロンドンの Brand42 です。彼らのクライアントは主に大手グローバルブランドと、緊急に変革を必要としているいくつかの従来型メディアです。デイリーメールのウェブサイトの全体的なデザインは、2012 年に最優秀デザイン賞を受賞しました。

Brand42のクライアント

この会社については言いたいことがたくさんありますが、ここでは 2 つだけ述べたいと思います。

1. 一般的な設計会社の標準的な設計プロセスにも従います。グラフィックデザインから転身した国内ブランドデザイン会社らしく、現在のWebサイトやモバイル端末、ブランドのデザインやコンサルティングを行っています。

さまざまなコンテンツ ブロックのビジュアル デザインと全体的なトーン デザインも、Daily Mail のデザインの特徴です。

ただ、彼らの名前の由来である「42」というのはちょっと興味深いです。ダグラス・アダムスの『銀河ヒッチハイク・ガイド』では、生命、宇宙、そして万物に関する究極の問いに対するスーパーコンピューターの答えは「42」という数字です。そのようなビジョンと追求心があれば、彼らがこのようなユニークなデザインを生み出せるのも不思議ではありません。

とても遊び心のある会社紹介。全体の雰囲気はレトロでリラックスしていて、ナンセンスです。

2. デザインにおける定量的研究の重要性について。デザイン研究者として、クライアントや他の分野の同僚にデザインの価値を説明するのに苦労することがよくあります。デザインの多くの側面は直感、感性、長期にわたる仕事の経験に大きく依存しているため、数学モデルを使用してそれらを定量化することは不可能です。しかし、Web デザインは少し異なります。ユーザーから多くの情報を取得できるため、アイトラッキングや Web ページ ヒート マップ キャプチャなどのテクノロジーを通じて、データの観点からユーザーの行動を分析できます。幸運なことに、ロンドンでの研修旅行中に多くのデザインスタジオと交流することができました。Brand42 のデザイナーと定量分析について直接話し合ったわけではありませんが、テクノロジーとインタラクションを統合する方法をいくつか学びました。 Brand42 が The Daily Mail のデザインプロセス中に多くの視線移動実験と AB テストを実施したであろうことは想像に難くありません。最終的なプレゼンテーションは「乱雑」ですが、レイアウトはピクセル単位で正確です。

国内の同僚は私が「データに注意を払わないインターネット企業はどこだ？」と言うと嘲笑するかもしれない。それは本当ですが、デイリー メールのロジックは「デザインがデータを動かす」です。つまり、まずユーザー ロジックと、どのようなコンテンツやデザインが魅力的かを判断し、次にコードとデータを使用して反復して改善するということです。ここでは、デザインの革新、コンテンツ、合理的なプレゼンテーションが常に中心となります。国内の多くのウェブサイトは、まずプロトタイプを立ち上げ、トラフィックを購入してユーザーデータを運用し、そのデータに基づいてウェブページを調整し、運用に合わせて広告スペースを配置しています。最終結果は、Web サイトにはデザインがなく、美観がなく、多くの収束 (購入したデータが他のデータとどの程度異なる可能性があるか) がなくなります。

まとめ

人々は成功した人をモデルに考えるという習慣を持つ傾向があります。そのため、Facebook の成功後、ザッカーバーグと Facebook のデザインを分析した記事や本が数多く出版されました。故喬社長にとってはさらにひどい状況だ。諺にあるように、人の想像力には限りがない。

実際、インターネット製品の成功は、今日のデイリー メールのように、特定の時間と空間における特定の機会に大きく依存しています。これは、Web デザイナーやインターネット アナリストが書く価値のあることではないと思います。ここでそれについて書きますが、転載したり批判したりしていただいて結構です。 AOL、Google、Twitter、Tumblr、Facebook からの攻撃により、トラフィックがこれほど無謀に増加し続けるとは思えません。コンテンツの制限と単一の収益モデルは、将来の発展に役立ちません。対照的に、Facebook などのソーシャル プラットフォームの場合、コンテンツの操作はごく小さなモジュールにすぎず、ソーシャル リレーションシップ、UGC、サードパーティ アプリケーションのためのスペースは膨大です。これは、当面「メディア属性」を解消できないデイリー メールとは比較になりません。

私がもっと期待しているのは、Google Reader の閉鎖後に Page が Google の製品ラインをさらに合理化および統合すること、Facebook がインタラクションの詳細とユーザーのタイムラインを絶えず調整する中でソーシャル属性が変化すること、そして Twitter が時代の脈動として機能し、より優れたコンテンツ アルゴリズムとビッグ データ運用による新しい収益モデルの出現です。

特に明記されていない限り、すべての Geek Observations は Geek Park からのオリジナル レポートです。転載する場合は、元のリンクを明記してください。

元の URL: http://www.geekpark.net/read/view/175379

原題: デイリーメール: ユーザーエクスペリエンスに基づいた反伝統的なウェブデザイン

キーワード: デイリーメール、成功への道、ユーザー、経験、反送信、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化