ウェブページのコアコンテンツ（画像とテキスト）の視覚的表現の紹介

情報の最適化と改良は常にデザインの最初のステップです。「これは百度アライアンスユーザーエクスペリエンスセンターのバナーにある文章です。ウェブデザインを行う過程で、私はこのような要約についての個人的な経験とアイデアをますます持っています。もちろん、この簡潔な文章には実際には多くの内容が含まれています。個人的には、少なくとも次の4つの側面が含まれていると思います。1.ウェブサイト全体の魅力の観点から、ウェブサイトの魅力をよりよく実現するために、ウェブページにどのような情報を配置する必要がありますか？どの情報を保持する必要がありますか？そして、どの情報を他のページに配置する必要がありますか、または単に破棄する必要がありますか？ 2.ページに配置することを決定した情報について、どのようにテキストを書き、画像を選択して、機能性と視覚的な美しさの完璧な統一を実現すればよいですか？ 3.情報の重要性を区別し、どれが重要で強調する必要があるか、そしてどれがそれほど重要ではないか？ 4.一次情報と二次情報を区別した後、レイアウト、色、サイズ、つまり視覚的にどのように強調して表現すればよいですか？
これら 4 つのパートにはそれぞれ議論すべきトピックがほぼ無限にあるため、この記事では、4 番目の側面、つまり Web ページ上のコアコンテンツと視覚表現の関係についてのみ、私の理解を整理して要約します。私が検討したすべての内容を書き留め、私の視点を説明するためにいくつかの具体的な例を示して、皆さんがよりよく理解できるように最善を尽くします。
1. コアコンテンツがページレイアウトに与える影響<br />下の画像はWordPressウェブサイト構築を提供する会社です。ホームページには、上からナビゲーション、ロゴ、スローガン、作品展示、選定理由、お問い合わせフォーム、ログリスト、メール購読、Twitter情報、著作権情報などの情報が表示されています。最初のビジュアルは、間違いなく会社のスローガンと仕事の展示であり、このウェブサイトのホームページの核となるコンテンツです。なぜなら、Webサイト構築会社として、自分たちが何をしているのか、どのようにそれをしているのかを直感的に顧客に知ってもらうことが、顧客が最も知りたいコンテンツであるはずだからです。では、コアコンテンツについてはどのような視覚的配慮がなされているのでしょうか?
プロモーションスローガンでは、デザイナーが「wordpress」という単語の文字サイズを非常に大きくし、他のテキストと区別するために濃い灰色を使用して、会社がバックエンドとして特に WordPress を使用して Web サイトを構築していることを強調していることがわかります。宣伝スローガンの下の作品展示画像のサイズは非常に大きく、幅は540ピクセル、デザイン全体の幅は1000ピクセルです。ホームページ上のこのような大きなサイズの展示画像により、お客様は作品の本来の姿を非常に鮮明かつ直接的に確認することができ、会社の制作レベルを直感的に感じることができます。このような大規模な作品展示は、実はウェブサイト全体のレイアウトを漠然と決定づけているのです。考えてみてください。画面の左上の領域に幅 540 ピクセル、高さ 460 ピクセルの長方形を配置した後、次の領域にはどのような情報を配置すればよいでしょうか。実際には、積み木を配置するのと同じで、重要度に応じて 1 つずつ配置するだけです。もちろん、これが唯一のレイアウト方法ではありませんが、どのようなレイアウト方法を使用する場合でも、機能的な考慮に基づいて考える必要があります。私たちは創造性を持つことができますが、創造性と、既成概念にとらわれない純粋な創造性との違いを理解しなければなりません。
ウェブページのコアコンテンツのビジュアルプレゼンテーション 123WORDPRESS.COM

ウェブページのコアコンテンツのビジュアルプレゼンテーション 123WORDPRESS.COM

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

2. コアコンテンツが配色に与える影響Lofter は NetEase が提供する軽量ブログサービスで、画像、音楽、テキスト、ビデオの 4 つの主要な情報タイプがあります。 Loferのテンプレートデザインについて、Mugou氏は「LOFTER Light Blog Template Design」という記事の中で、主に写真を表示するテンプレートについて、次のようなデザイン上の考慮事項を挙げています。「このテンプレートは通常、写真ユーザーを満足させるために設計されています。写真表示領域は十分に大きく、十分にクールでなければなりません。テンプレートのホームページでは、1つの画面で複数の写真を表示できます。背景は暗くして現在の写真を際立たせる必要があります。境界線のデザインは、写真をより目立たせたり、写真をより精巧にしたりする必要があります。」このデザインのアイデアを分析して理解すると、写真表示領域は十分に大きくなければならないことがわかります。これは、前述のレイアウトの考慮事項であり、背景は暗くなければなりません。これは、ここで説明する配色への影響です。
Puppetの完成作品から、デザインのアイデアに従って作られたグレーの背景は落ち着いていて控えめで、白い絵の縁と背景と鮮明なコントラストを形成し、グレーと白の配色はカラフルな絵と衝突しないことがわかります。絵がどのように変化しても、グレーと白と合わせることができます。そのため、カラフルな絵は白い背景と縁に対してより目を引くようになり、写真などの重要な情報を視覚的に十分に表現することができます。

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

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

<<: リフレッシュリダイレクトを実現する HTML ヘッドタグメタ

>>: CSS3のbox-shadowプロパティの使い方の詳細な例