ウェブサイトのデザイン分析: 特別なウェブページのデザインについてどう思いますか?

トピックを理解する - 特定のテーマに関するトピックなので、導入部は不可欠です。このような導入部はすべてのトピック ページで見ることができます。長くても短くてもかまいませんが、内容が深く、目を引くものでなければなりません。

ページの特徴：商品ページはシンプルで使いやすく、特集ページは華やかな視覚効果が印象的です。

ページデザインでは、商品ページ（Facebook、Weibo、Twitter、Weiboなど）のデザイン。機能性とインタラクションに重点を置き、デザインではユーザーの長期的なブラウジング体験を考慮する必要があります。視覚的には、間隔、レイアウト、ボタンとロゴ、アイコンのスタイルに重点が置かれます。標準と視覚的アイデンティティに焦点を当てます。スタイルは通常シンプルで使いやすく、派手な要素が少なく、視覚的なインパクトを重視していません。

特別トピックページの適時性には制限があります（ほとんどの特別トピックにはプロモーションとアクティビティの時間制限があります。この時間が過ぎると、そのページを再度訪問する人はほとんどいません）。そのほとんどは、イベントプロモーションとユーザー誘致のためのコンテンツです。限られた時間内にできるだけ多くのユーザーを引き付けることによってのみ、強力なプロモーションを形成できます。ユーザーを引き付けるには、強力な視覚効果と興味深いブラウジング体験が必要です。仕様、レイアウト、さらにはインタラクションに関しても、要件を適切に緩和できます。

目を引くビジュアルでユーザーを引き付け、深い印象を残すことがテーマデザインの第一の目的です。

目を引くビジュアルでユーザーを引き付け、深い印象を残すことがテーマデザインの第一の目的です。

従来の製品ページは簡潔で、機能やアイコンなどの視覚的なデザインに重点を置いています。

トピックページは視覚効果を強調し、豪華で豊かです

Weibo トピックは主に、さまざまな Weibo アクティビティやプロモーション コンテンツ向けに設計されています。コンテンツ量が多いため、ヘッダー画像などのメインビジュアルをデザインすると同時に、大量のコンテンツや列のレイアウトにも気を配る必要があります。トピックのビジュアルデザインの特徴に焦点を当てることによってのみ、実際に優れたページを作成できます。

デザイントピック

UE を確立し、要件を伝えます。

需要者のUE案（製品資料）は特殊設計の前提であり、設計者と需要者間のコミュニケーションが必要となります。デザイナーは早い段階で特別なニーズに対する独自のアイデアとソリューションを提案することができ、その後、需要側が UE ドラフトを作成します。デザイナーは下書きに基づいてデザインを作成します。トピック設計には専用のインタラクティブ設計サポートがないことが多いため、多くの場合、UE ドラフトではトピックで提示されるコンテンツのみが明確にされ、設計者は UE 自体にインタラクティブな調整と最適化を行う必要があります。 (UE の最適化設計は、多くの場合、トピックの設計プロセス全体にわたって段階的に実行され、トピック UE 全体を一度に改修する必要はないことに注意してください)。

トピックの構造

ほとんどのトピック構造は、ヘッダー画像部分とコンテンツ部分に分けることができます。従来のトピックには通常、メイン ページが 1 つしかありませんが、複雑なトピックは、トピックの規模に応じて、複数のセカンダリ ページで構成されます。一部の特別トピックには、フラッシュで作成されたミニサイトなど特別な表示方法があり、一部の特別トピックにはさまざまな形状があります。どのような構造を採用するかは、誰がニーズに最もよく応えられるかによって決まります。

ヘッダー画像が表紙となり、トピックの体験が本をめくるのと似ている、特別に構造化されたトピック

トピックのサイズ

Weibo のトピックには通常多くのコンテンツが含まれるため、ページの高さが高くなりすぎます (多くのトピックの高さは最大 3000 ピクセルです)。デザインする際には、列間隔を適切に短くし、ページの高さをできるだけ小さくする必要があります。トピックページの幅はWeiboメインサイトと同じ950PXです。この幅は、最も広いディスプレイ解像度（1024px*768px）に対応するために採用されています。ただし、トピックのデザインは視覚効果を重視しており、多くの若いユーザー（若いユーザーはトピックのコアユーザーであることが多い）の表示解像度はすでに1024pxを大幅に超えているため、トピックのメインビジュアルとコンテンツを950px以下に抑えることが多く、ヘッダー画像の実際のデザイン効果は幅1600pxで最もよく表示されます。

600px は、私たちが定義する Weibo トピックの最初の画面の高さであり、ほとんどのユーザーが最初の画面で見ることができる領域です。この領域では、ヘッダー画像の比率を通常 280px ～ 400px 程度にします。これは、トピックのメインビジュアルを強調しながら、ユーザーが最初の画面でトピックコンテンツの一部を閲覧できるようにするためです。 (通常、商品ページのヘッダーの高さははるかに小さく、商品ページ自体の特性によって決まります。)

ヘッダー画像のデザイン

構造が確立されたら、ヘッダー画像のデザインを開始します。優れたヘッダー画像は、特別なトピックデザインの魂です。

ヘッダー画像をデザインする際に最初に考慮すべきことは、ヘッダー画像のデザイン スタイルです。さまざまなテーマに応じて、さまざまなスタイルのビジュアル デザインを選択する必要があります。一般的には、事前に紙や頭の中で大まかなアウトラインを描きます。トピックによっては具体的な視覚的要素がないものもあるので、トピックのテキストから始めます。本当に面白くない場合は、まずキャンバス上でトピックに関連するいくつかの要素をつなぎ合わせてから、さまざまな組み合わせを試します。しばらくすると火花が散るかもしれません。

ヘッダースタイル

Weiboトピックのヘッダー画像のデザインスタイルは、大まかに、リアリズム、漫画イラスト、目立つ見出しなどに分けられます。リアルなヘッダー画像には、著作権に関わるキャラクターの登場が求められることが多いため、このタイプのスタイルは比較的珍しく、ほとんどが後者の 2 つです。クライアントがデザインスタイルを承認した場合は、自分で描いたビジュアル要素をヘッダー画像のデザインに取り入れ、素材の使用を最小限に抑えるようにしています。

ほとんどが人物で構成された、リアルなスタイルのヘッダー画像。

漫画描きクラスのヘッドイラスト。

メインタイトル付きのヘッダー画像。

ヘッダー画像の構成

特別なヘッダー画像のデザインは、ある意味では、より大きなバナーに少し似ていますが、違いもたくさんあります。下の内容とどのように巧みに繋げるかを考える必要があり、サイズは大きく、詳細を多くし、構成に変化を持たせる必要があります。定型的な構成を常用すると、トピックが単調で退屈に見え、視覚効果も悪くなります。

円弧状のカッティングヘッドとコンテンツ領域の構成

ヘッダー画像のタイトル

優れたトピック ヘッダー画像では、洗練された視覚的要素に加えて、メイン タイトルを強調する必要があります。そのためには、通常、デザイナーがフォントの変形や特殊効果を作成するために特別な労力を費やす必要があります。優れたフォント効果は、実際にはトピックのメインビジュアル、最も目を引く部分、そしてトピックのテーマを反映する最も直接的な方法になることもあります。

手描きの見出しデザイン

一般的なヘッダー画像のデザインはトピックの視覚的な要素を反映するだけですが、一部のヘッダー画像にはトピックの内容自体が含まれており、トピックの内容とニーズによって異なります。それでも、スタイルの美学には注意を払う必要があります。

ヘッダー画像自体がコンテンツ機能を持つ

ヘッダー画像のデザインはトピック全体の焦点であり、最も強調する必要があるハイライトでもあります。ヘッダー画像によってトピック全体のトーンを確立できます。

優れたヘッダー画像は、トピックの内容と密接に関連し、美しく、ユーザーを引き付けて留まらせるものでなければなりません。

テーマ別コンテンツエリアの設計

多様な形態、巧みなつながり

コンテンツ領域とヘッダー画像の接続は巧妙なものとし、唐突にならないようにする必要があります。フォーマットはさまざまな方法で変更でき、トピックの全体的な視覚要素と組み合わせたり、ヘッダー画像の視覚要素を継承してさまざまなスタイルをデザインし、コンテンツ領域をより鮮明にしたりできます。トピックページの視覚効果をより統一感のあるものにしましょう〜！

テーブルクロス メニューを使用して、ダイニングのテーマを組み合わせた部分を作成します。

壁紙はヘッダー画像をサポートし、コンテンツの背景にもなります。

明確なコンテンツと合理的なレイアウト

ビジュアルスタイルを強調した特別なデザインではありますが、ユーザーが特別なコンテンツに集中できるようにすることが基本です。ヘッダー画像のデザインに重点を置くあまり、油断してはいけません。ラスタライズの理論に従う必要はありませんが、通常はその後の制作の都合上、間隔は5pxの倍数にします。視覚的に間隔が一定であれば、個々のケースで例外を設けることができます。いくつかの「PK 性質」の特殊モジュールに加えて、モジュール列の配分の重みに注意を払い、主要なコンテンツと二次コンテンツを明確にし、配置を論理的に関連付ける必要があります。

視覚的に目立つ注目のモジュール

重要なポイントを強調するモジュールは、唐突にならないように目立つように、他の列モジュールとは異なるデザインにする必要があります。

タイトルバーやモジュールの詳細も視覚効果に重点を置く必要があります。製品ページと比較すると、いくつかの変更を加えることはできますが、主な焦点を覆い隠してはなりません。

優勝したモジュール用に別のスタイルを作成します。

タイトルバーもテーマに合わせて細かくデザインできます

トピックのセカンダリページとトピックシリーズ

通常、セカンダリ ページのヘッダー画像はホームページから再利用されますが、各ページに特定の区別をつけるために適切な視覚要素を追加することも必要です。ヘッダー画像の存在が乱雑に見えるため、追加するスタイルは複雑になりすぎないように注意してください。

異なるセカンダリ ページごとに異なる視覚要素をデザインします。

一連のトピックを作成する必要がある場合は、同じロゴタイトルや、シリーズ感を強調するための統一されたビジュアルスタイルなど、再利用可能な要素の計画と設計に注意を払う必要があります。これにより、一連のトピックに対するユーザーの印象と理解が強化されます。

一連のトピックのロゴ要素を再利用し、スタイルを統一しています。

特別なデザインの細部に注意すべきいくつかのポイント

• ヘッダー画像はスケーラブルである必要があり、ワイドスクリーン解像度での表示特性に注意する必要があります。

• テーマ別のインタラクションの詳細、ボタンやページめくりなどのインタラクティブ要素のさまざまな状態を設計することで、より良いエクスペリエンスが得られます。

• トピックのポップアップ ウィンドウ、ダイアログ ボックスなどの詳細なデザインを含む、トピック自体のビジュアル デザインの拡張と統一。

• 成果物の仕様。テーマ別のレイヤーは多数あります。トピックの設計が完了し、フロントエンドの同僚に引き渡されたら、レイヤーをグループ化する必要があります。ファイルサイズが大きい場合は、不要なレイヤーを削除するか非表示にします。

• 特別なデザイン案を提出する際は、デザイン案の模擬コンテンツを、異なる画像やさまざまな数のテキストに置き換えてみてください。これにより、見落としていた問題 (テキストの過剰なオーバーフローなど、さらに間隔を調整できる) を発見できる場合があります。重要なのは、オンラインに公開される実際のページのように見え、デザインの最終的な外観をよりよく示すことができることです。時には冗長で非効率的に感じるかもしれませんが、それによって私たちはよりプロフェッショナルに見えるようになります。

• 良好なコミュニケーション：デザイナーはより良いスタイルの提案や視覚的な創造性を思いつくことができますが、需要側のプロモーションニーズを満たすことが前提条件です。したがって、良好なコミュニケーションを通じてトピックのニーズへの理解を深めることで、トピックのニーズをより正確に把握し、やり直しなどの問題を回避することができます。

• フォントの問題。ブラウザの制限により、Weiboトピックの主なフォントサイズは現在14ポイントと12ポイントのSongti（デバイスフォント）です。

基本的に本文として使用する場合は明瞭性と鮮明性を確保できますが、タイトルバーとして使用する場合はそれほど美しくありません。この時点で、需要側とフロント側とのコミュニケーションをとる必要があります

同じ部門の同僚とコミュニケーションを取り、コピーを頻繁に変更せずに画像を使用してタイトル バーのテキスト効果を作成し、目的の視覚効果を実現してみてください。

• フロントエンドの仕様と制限。複雑な丸い角や半透明のページ効果が必要な場合、最も安全なアプローチは、高レベルと低レベルのブラウザに適応する 2 セットのビジュアル ソリューションを設計することです。条件が許さない場合は、フロントエンドの同僚のブラウザ サポート戦略に依存します。一般的に、デザイナーとして、フロントエンドの実装の問題の解決を積極的にコミュニケーションし、促進する必要があります。 (これには、トピックがオンラインになった後のフォローアップ フィードバックも含まれます。)

優れたトピック デザインは、創造的で、全体的な効果に調和があり、ユーザーに印象を与え、コンテンツを効果的に伝え、視覚要素の継続性と継承性を備えています。ページ全体がシームレスに接続されています。デザイナーは頭を使って巧みに構想し、開発する必要があります。締め切りが迫っていて、すべてを完了することが不可能な場合もあります。また、自分が書いた内容に従ってトピックを設計することもできません。

しかし、だからといって、それを目標として捉え、それに近づくことを止めることはできません。 「卓越性を目指せば、成功は自然とついてくる」 - 『3 Idiots』

袁芳さん、どう思いますか？

著者 Weibo UDC

ホリデープロモーションのトピックを素早く構築し、まずはコピーライティングからインスピレーションを得ましょう

原題: ウェブサイトデザイン分析: 特別なウェブページデザインについてどう思いますか?

キーワード: 特別なウェブページ、特別なウェブページのデザイン、あなたの意見、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化