ウェブサイト分析: ウェブページのコアコンテンツが視覚的なパフォーマンスに与える影響

「情報の最適化と洗練は常にデザインの第一歩です。」これは、Baidu Alliance User Experience Center のバナーにある一文です。私自身がウェブデザインを行う過程で、この種の要約についての個人的な経験とアイデアがどんどん増えてきました。もちろん、この簡潔な文章には、実のところ多くの内容が含まれています。個人的には、少なくとも次の 4 つの側面が含まれていると考えています。1. ウェブサイト全体の魅力の観点から、ウェブサイトの魅力をよりよく実現するために、ウェブページにどのような情報を配置する必要がありますか。どのような情報を保持する必要がありますか。また、どの情報を他のページに配置、または単に破棄する必要がありますか。2. ページに配置することを決定した情報について、機能性と視覚的な美しさの完璧な統一を実現するために、どのようにテキストを書き、画像を選択すればよいですか。3. 情報の重要性を区別し、どの情報が重要で強調する必要があるか。また、どの情報がそれほど重要ではないか。4. 一次情報と二次情報を区別した後、レイアウト、色、サイズ、つまり視覚的にどのように強調して表現すればよいですか。

これら 4 つのパートにはそれぞれ議論すべきトピックがほぼ無限にあるため、この記事では、4 番目の側面、つまり Web ページ上のコア コンテンツと視覚表現の関係についてのみ、私の理解を整理して要約します。私が検討したすべての内容を書き留め、私の視点を説明するためにいくつかの具体的な例を示して、皆さんがよりよく理解できるように最善を尽くします。

1. コアコンテンツがページレイアウトに与える影響

下の写真はWordPressウェブサイト構築を提供する会社です。ホームページには、上からナビゲーション、ロゴ、スローガン、作品展示、当社を選んだ理由、お問い合わせフォーム、ログリスト、メール購読、Twitter情報、著作権情報などの情報が表示されます。最初のビジュアルは、間違いなく会社のスローガンと仕事の展示であり、このウェブサイトのホームページの核となるコンテンツです。なぜなら、Webサイト構築会社として、自分たちが何をしているのか、どのようにそれをしているのかを直感的にお客様に知ってもらうことが、お客様が最も知りたい内容であるはずだからです。では、コアコンテンツについてはどのような視覚的配慮がなされているのでしょうか?

プロモーションスローガンでは、デザイナーが「wordpress」という単語の文字サイズを非常に大きくし、他のテキストと区別するために濃い灰色を使用して、会社がバックエンドとして特に WordPress を使用して Web サイトを構築していることを強調していることがわかります。宣伝スローガンの下の作品展示画像のサイズは非常に大きく、幅は540ピクセル、デザイン全体の幅は1000ピクセルです。ホームページ上のこのような大きなサイズの展示画像により、お客様は作品の本来の姿を非常に鮮明かつ直接的に確認することができ、会社の制作レベルを直感的に感じることができます。このような大規模な作品展示は、実はウェブサイト全体のレイアウトを漠然と決定づけているのです。考えてみてください。画面の左上の領域に幅 540 ピクセル、高さ 460 ピクセルの長方形を配置した後、次の領域にはどのような情報を配置すればよいでしょうか。実際には、積み木を配置するのと同じで、重要度に応じて 1 つずつ配置するだけです。もちろん、これが唯一のレイアウト方法ではありませんが、どのようなレイアウト方法を使用する場合でも、機能的な考慮に基づいて考える必要があります。私たちは創造性を持つことができますが、創造性と、既成概念にとらわれない純粋な創造性との違いを理解しなければなりません。

上記のページレイアウトがまだ標準的な感じがするのなら、下記のホテルのホームページのレイアウトは斬新な印象を与えるかもしれません。このデザインでは、大きな料理の写真を背景に使用し、ナビゲーションとメインコンテンツ領域がページ全体の高さの3分の1を占めるだけなので、背景の写真を広い領域で表示できることがわかります。上記のデザインと同様に、このレイアウトの目的は単に違いや視覚的な美しさのためではなく、ホテルの特徴はケータリングの側面にある可能性があるため、コアコンテンツを際立たせるために、レイアウトに適切な考慮が払われました。下のレストランもメインビジュアル部分でおいしそうな料理を強調していますが、両者はまったく異なるレイアウト手法を採用しています。情報アーキテクチャーにおける配慮はそれぞれ異なりますが、同じコアコンテンツを表現する異なるクリエイティブ手法と捉えることもできます。

2. コアコンテンツが配色に与える影響

Lofter は NetEase が提供する軽量ブログ サービスで、情報の種類は主に画像、音楽、テキスト、ビデオの 4 つのカテゴリに分類されます。 Loferのテンプレートデザインについて、Mugouは「LOFTER Light Blog Template Design」という記事の中で、主に写真を表示するテンプレートについて、次のようなデザイン上の考慮事項を挙げています。「このテンプレートは通常、写真ユーザーを満足させるように設計されています。写真表示領域は十分に大きく、十分にクールである必要があります。テンプレートのホームページは、1つの画面に複数の写真を表示できます。背景は暗くして現在の写真を際立たせます。境界線のデザインは、写真をより目立たせたり、写真をより精巧にしたりします。」このデザインのアイデアを分析して理解すると、写真表示領域は十分に大きくする必要があり、これは前述のレ​​イアウトの考慮事項であり、背景は暗くする必要があることがわかります。これは、ここで議論したい配色への影響です。

Puppetの完成作品から、デザインのアイデアに従って作られたグレーの背景は落ち着いていて控えめで、白い絵の縁と背景と鮮明なコントラストを形成し、グレーと白の配色はカラフルな絵と衝突しないことがわかります。絵がどのように変化しても、グレーと白と合わせることができます。そのため、カラフルな絵は白い背景と縁に対してより目を引くようになり、写真などの重要な情報を視覚的に十分に表現することができます。

もう 1 つの例は、韓国の検索エンジン サービス ウェブサイトである Naver です。記事「効率的なデザインの視覚化」で、liuman0722 は Naver のデザインについて次のように書いています。「韓国の有名なポータル/検索エンジン サイトである Naver が所有する Naver Shopping は、商品検索サービスとして位置付けられています。商品名を検索すると、ほぼすべての韓国の大手電子商取引サイトが提供する商品リンクを商品カテゴリ別に一覧表示できます。そのため、インターフェイスでは、検索機能とナビゲーション領域 (ページ左上隅の緑色の領域) を強調するために、強いコントラストの色調が使用されています。視覚的な誘導を通じて、ユーザーはコア コンテンツと視覚の焦点に集中できます。白をメイン カラーとするページでは、目は最初に強い色の部分を見るため、強い色を使用してコア コンテンツを強調し、ユーザーの視覚をそこに集中させることもできます。」

すべてのビジュアル デザインは情報に基づいています。まず、情報の内容と構造を整理して、どこに焦点を当て、どこで停止するかを把握する必要があります。一方、上で述べたレイアウトや配色など、デザインのアイデアや考えの多くは情報そのものに暗黙的に存在していると言えます。情報が洗練され、最適化されれば、情報を整理していく過程で、どうすればいいのかが徐々に明らかになってきます。

出典: http://startwmlife.com/web-core-content-of-the-visual-performance/

元のタイトル: ウェブサイト分析: ウェブページのコアコンテンツが視覚的なパフォーマンスに与える影響

キーワード: ウェブサイトの分類、ウェブページ、コア、コンテンツ、ビジュアル、パフォーマンス、影響、情報、最適化、改良、ウェブマスター、ウェブサイトのプロモーション、収益化