出版社のウェブサイトへのデザインアプローチ

公開: 2020-12-17

「デジタル出版社のウェブサイト」とは何ですか？ 毎日たくさんの記事を出すことに焦点を当てたウェブサイトです。それは「ブログ」より上のレベルです。これは基本的に、BuzzFeedのようなニュースサイトまたはバイラルパブリッシングプラットフォームです。

このようなWebサイトのデザインアプローチは、製品の販売、ビジネス、個人のブログ、またはその他の種類のWebサイトとは異なります。そのレイアウトは「雑誌」スタイルとしてよく知られています。これは、テーママーケットプレイスでも非常に飽和度の高いカテゴリです。

buzzfeedスクリーンショット

出版社のウェブサイトの違いは何ですか？

出版社のウェブサイトとより通常のウェブサイトの間には2つの大きな違いがあります。

最初の明らかなものは、コンテンツの量です。もちろん、巨大なWebサイト、特にAmazonやeBayなどのeコマースWebサイトには、はるかに多くのコンテンツが含まれている可能性がありますが、これらはサイトユーザーからコンテンツを取得するプラットフォームです。出版社には、スケジュールに従ってコンテンツを制作するためにフルタイムで働く編集チームがあります。新聞のように。

他の大きな違いは収入源です。コカコーラのような会社のウェブサイトは、サイトから収入を生み出すのではなく、製品から収入を得ています。ほとんどの企業のWebサイトは、単にデジタルプレゼンスになるという目的を果たしています。

これを知っていると、出版社のウェブサイトの収入がサイト自体から来ていることはおそらく明らかです。どうやって？ 広告！ これは、GoogleやFacebookが収入の大部分を生み出す方法とほぼ同じです。

広告は、最も確実に、Webを実行し、多くのWebサイトの最優先事項です。彼らのコンテンツは、彼らが彼らのレイアウトで広告を見ることができるように、できるだけ多くの読者を連れてくることに焦点を合わせています。

デザインの観点から、これは出版社や雑誌のウェブサイトの最優先事項です。

たくさんのコンテンツでウェブサイトをデザインする

バラエティのようないくつかの大規模な出版社を見てみましょう：

バラエティホームページ

最初に目にするのは、上部にある大きな広告です。その前に、コンテンツのレイアウトについて詳しく説明します。多くのリンクを含む大きなヘッダー–上部にハンバーガー、検索、行動を促すフレーズ、さらに多くのメニュー項目。目標は、コンテンツのすべてのカテゴリに簡単にアクセスできるようにすることです。これは、10ページ未満（ブログページを除く）の多くのビジネスサイトとはまったく対照的です。

その後–メイン記事用の大きな箱。これは良い設計上の決定です。それはあなたの訪問者が何をすべきかを決めるのをより簡単にします。同様に重要な要素が10個ある場合、どちらかを選択するという精神的な負担により、一部のユーザーがページから飛び出す可能性があります。重要なアイテムから重要でないアイテムまでの明確な視覚的階層により、デザイナーはユーザーをWebページに長くとどまらせることができます。

右側–別の広告と「最も人気のある」ウィジェット。これはほとんどのユーザーが見たいものです。たくさんのコンテンツに収まるように、Varietyはそれをスクロール可能な領域にすることにしました。

これは、大規模な発行元で主に使用するタイプのレイアウトです。

buzzfeedホームページ

BuzzFeedは、大量のテキストを処理するために作成されたレイアウトのもう1つの例です。ここでは、鮮やかな色と注目を集める形（右上隅の3つのボタンなど）でデザインがより遊び心があります。

右側のトレンドの1、2、3、「速報」ニュースの真っ赤なラベルなど、より多くの「ランキング」があります。同様のデザインの主な傾向の1つは、ユーザーの注意を引くことです。ただし、同じように重要な2つの項目に分割したくない場合は、注意を向ける必要があります。

これは、すべてがトップになろうとする間違ったアプローチの例です。

私たちは目的が完全に異なり、上記のサイトが実際に良い利益をもたらす可能性があることをよく知っていますが、それは「あなたの注意を引くことを試みるすべて」の原則をよく示しています

デジタル出版社と広告

広告を中心としたデザインは、出版社にとってもう1つの主要なトピックです。それが主な収入源であることを考えると、それは最優先事項でもあります。デザイナーがここで考慮すべきことがいくつかあります。まず、これらの広告の要件と機能をよく理解しているAdOpsチームからフィードバックや優れた情報を入手することです。

この例は、広告サイズです。 300×250、300×600、728×90、300×50があります。

画面の片側にくっついて、さまざまなポイントをスクロールできるものもあります
自分の小さな隅にとどまる人もいれば、常にページの上に固執する人もいます。
他のものは、2つの300×250または1つの720x90pxのペアで表示されます。

これらすべてについてどのように知っていますか、そして要件は何ですか？

そうです、ステップ1は、そのすべての情報を収集することです。それを見るより簡単な方法は、レイアウトの観点からです。パブリッシャーの目標に応じて、1つの投稿に複数のレイアウトを設定できます。広告が少ない場合もあれば、多い場合もあります。広告は、負荷が異なるとサイズが変わる場合もあれば、一定のままである場合もあります。新しいトレンドやルールが出てくると、それはすべて急速に変化する可能性があります。多くの場合、毎日！

覚えておくべき重要なことのいくつかは次のとおりです。

高さのある広告が読み込まれる場合があります。これは、コンテンツが押し下げられ、スクロールせずに見える範囲の特定のウィジェットに合うように作成されたデザインが失敗することを意味します。
広告には背景が必要な場合があります。これは、画面の隅に触れている、広告を囲む明るい灰色の背景である可能性があります。
多くの場合、偶発的なタッチを避けるために、広告の周囲に間隔を空ける必要があります。広告間の距離は20〜30ピクセルが適切です。
広告プロバイダーにもっとアピールすることを目的として、前後に「広告」ラベルを追加することをお勧めします。
広告が多すぎてはいけません！このためのスイートスポットは、AdOpsチームが特定のパブリッシャー、特定のページ、さらには特定のトラフィック（Facebook、Snapchatなど）を把握するために取り組むものです。

出版社のウェブサイトのパフォーマンス

パフォーマンスの低下の主な原因は、8つ以上の広告が他の大量のスクリプトをロードしようとしているセットアップです。すべてがコードに含まれているのに、なぜこれが設計者の懸念事項なのですか？開発者はそれを最適化することはできませんか？ええ、そうですが、それはそれ自体でほぼフルタイムの仕事であり、デザイナーが手伝うことができます。これらすべてを理解するには、まずブラウザについて少し理解する必要があります

ソース

ブラウザは、フロントエンド開発者から特定の要素をコーディングする方法に応じて、マシンのCPUまたはGPUを利用できます。アニメーションやホバー、プレスでのインタラクションなどのアクションは、CPUまたはGPUを利用する場合があります。たとえば、アニメーションがCPUを使用している場合、ラグが発生する可能性が非常に高くなります。GPUの場合、パフォーマンスが向上する可能性があります。設計者の要件は、2つの違いかもしれません。

ここにいくつかの一般的なヒントがあります：

影をほとんどまたはまったく使用しないでください。シャドウは、特にローエンドのモバイルデバイスやラップトップでレンダリングするには非常にコストがかかります。
背景フィルターやぼかし（またはフィルター）も非常に高価なので、使用しないでください。
追加の計算を減らすために、形状をできるだけ単純にしてください。
レイアウトに影響を与える要素（他の要素）のアニメーションを要求しないでください。可能な限りその周りに設計します。重複するもの、またはポップアップであるものはすべて、より適切な選択です。
画像は比較的小さくしてください。これにより、開発者はより小さなサイズの画像をロードできるようになり、サイトの重量を節約できます。
特にサイトの負荷では、アニメーション全般を最小限に抑えます。同じことがレイアウトシフトにも当てはまります。最初のロードは、すべてのJavaScriptが適用されているときに、Webサイトで最もCPUを集中的に使用する時間です。

ソース

設計の優先順位

サイト運営者のサイトのトラフィックの大部分はモバイルから来ています。したがって、すべての詳細を磨くのに最も費やされた時間はそこに行くべきです。モバイルでも、デバイスの大部分がハイエンドのフラッグシップではなく、200ドルから300ドルのスマートフォンであるため、ほとんどの最適化も必要になります。

モバイルでは、明確な方法で広告を表示しながら、コンテンツを読みやすくすることに重点を置いています。クリック可能な要素と広告の間の距離を大きくして、広告の偶発的なクリックを排除します。可能であれば、サイトのスナップ感を低下させる可能性のあるアニメーションやオーバーレイを減らします。

概要

出版社は多くのコンテンツと多くの広告に焦点を合わせています。トラフィックは他の広告から記事に直接アクセスすることが多いため、一般に、ランディングページとアーカイブは単一のビューよりも優先度が低くなります。デザイナーとしてのあなたの焦点は、広告を出すための最適な方法を見つけ、適切な間隔を追加し、それらをメインコンテンツから十分に分離して、すべてを読みやすく、使いやすくすることです。

複雑なUI要素を最小限に抑えて、速度のパフォーマンスを向上させ、要求するアニメーションをできるだけ少なくします。すべてをうまく把握するために、パブリッシャーは、AdOpsの経験が豊富な開発機関と協力し、最新のトレンドを追跡し、DevriXなどのビジネスの技術スタックを追跡する必要があります。