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

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

推薦する

Zabbix カスタム監視 nginx ステータス実装プロセス

目次Zabbix カスタム監視 nginx ステータス1. ステータスインターフェースを開く2. 監...

CentOS7にsshをインストールして設定する

1. openssh-serverをインストールする yum インストール -y openssl o...

XHTML ブロックレベルタグの概要

* 住所 - 住所* blockquote - ブロック引用* center - 中央揃えブロック*...

HTMLで下線を設定するには?HTMLでテキストに下線を付ける方法

HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...

HTML 要素 (タグ) とその使用法

a : ハイパーリンクの開始位置または宛先位置を示します。頭字語: 単語の最初の文字からなる略語を示...

JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...

mysql ステートメントを使用してユーザー権限を照会するプロセスの詳細な説明

MySQL では、ユーザーに付与された権限をどのように確認しますか? ユーザーに付与される権限は、グ...

Linux の traceroute コマンドの使用方法の詳細な説明

Traceroute を使用すると、情報がコンピュータからインターネットの反対側のホストまでたどるパ...

Vueは書籍ショッピングカートの機能を実現

この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有し...

CentOS7にPostgreSQL11をインストールする方法

CentOS 7にPostgreSQL 11をインストールする PostgreSQL: 世界で最も先...

モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...

2列の水平タイムラインを実装するためのVueサンプルコード

目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...

MySQLの比較演算子正規表現マッチングREGEXPの使用の詳細な説明

1. データを初期化する `test_01` が存在する場合はテーブルを削除します。 テーブル「te...

複数の HTML ページで HTML コードをまとめて呼び出す方法

方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...

MySQLカバーインデックスの詳しい説明

コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...