ウェブサイトデザイン分析: バナーのフォント構造の調査

ウェブサイトデザイン分析: バナーのフォント構造の調査

私たちが普段目にするウェブサイトのバナーは、その形状によって固定された構成モードが決まります。一般的には長方形、水平、左右構造、中央揃えです。テキストの特徴はテーマ性があり、一般的にはメインタイトルとサブタイトルに分かれており、テキストが多くなります。デザインする際には、ウェブサイトに適用されるさまざまなサイズのプロモーション画像の読みやすさと拡張性も考慮する必要があります。また、その画像はテーマを補助し、テキストのレンダリング力を高めます。バナーのコミュニケーション動作は、コンピューター画面をキャリアとして使用し、IEブラウザーの最初の画面の位置にあり、ユーザーの目が3秒以上それに集中していると理解できます。

[バナーは一般的にテーマ別ウェブサイトに使用されるため、ポータルサイトのセカンダリページでは、ユーザーはホームページに来る前にすでにテーマについて一定の理解と知識を持っているため、バナーの役割はセカンダリページをパッケージ化すると同時に、コンテンツへの関心を高め、コンテンツの方向を導くことです。そのため、これは一般的に視覚的なインパクトで目を引く必要がある従来の広告とも異なります。 ]

バナー内のテキストの重要性

テキストに関しては、需要側から「テキストは大きくする必要があります」という質問がよく聞かれます。

「あ?もっと?もう大きいのに!」そこで仕方なく少しだけ拡大してみましたが、数ピクセル拡大しても意味がないことは誰もが知っています。

しかし、よく考えてみると、需要者が本当に求めているのは、ほんの少しの追求だけでしょうか?結局のところ、彼らはデザイナーではなく、自分の考えを表現する方法を知りません。目立つと感じさせる唯一の方法は、サイズの違いです。それは、文字が十分に目立たない、文字の扱いが平凡すぎる、背景が目立ちすぎるなど、さまざまな理由によるかもしれません。おそらく、「文字はもっと目立つべきだ」と理解するべきであり、「目立つ」には多くの方法があります。

バナー=テキスト+画像[補助]

バナー上のテキストは通常​​、バナー全体の 70% を占め、実際の画像は 30% 未満を占めます。多くの場合、多くのデザイナーは 30% の画像デザインに重点を置いて、最も重要な 70% のテキスト領域を無視します。最終的には、システム ワードのみを使用してそれをまとめます。このようなバナー デザインは合理的でしょうか?

特に、テーマが小さなサイズのプロモーション画像に拡張され、テキスト用のスペースのみが残されると、プロモーション画像が完全に台無しになります。

漢字と英語の文字の性質の違い

漢字と英語の文字の違いは、文字が純粋に表音文字であることです。各文字自体には意味がありません。単語の意味は、これらの文字の横並びの組み合わせから生まれます。漢字の作り方は象形文字に基づいています。つまり、各文字には特別な意味があります。古代では、単純な文字が複雑な生活シーンを表していました。したがって、それは世界で最も比喩的なテキストでもあります。両者の読み方や解釈方法には本質的な違いがあります。したがって、漢字の配列は英語の配列を真似ることはできません。両者の配列には客観的な違いがあります。

中国語と英語のフォントの構造分析

a. 同じフォントでも実際のサイズは異なります。英語は文字で構成されており、文字の構造は非常に単純です。画面上の最小可視ピクセルは6pxです[代表フォント:04フォント]。中国語は構造が複雑です。画面に表示される最小ピクセルは10px [MS Ming Dynasty/MS UI Gothic] および11px [New Fine Ming Style/PMingLiU] です。

b. 英語の全体的な構成は、段落や冠詞を形成しやすく、視覚効果は比較的自由で生き生きしており、不連続な線の感覚が強く、リズム感や韻律感を作りやすい。

漢字の全体的な配置は文章や線を形成しやすく、視覚効果は規則的な幾何学的な点や帯に近くなります。ダイナミックさを生み出すのが容易でない主な理由は、全体の構造が閉じており、ストロークの張力の合計がゼロに近づくことです。

c. 英語の単語の長さは、同じ意味を持つ中国語の文字の長さよりも一般的に長いため、デザインする際には、英語自体がデザインの対象になりやすいです。また、英語の単語の文字数が異なるため、配置する際に、左側を揃えると、右側に自然な不規則な千鳥模様が生じます。中国語を配置する場合は、このようなことが起こる可能性は低いです。中国語の配置では、各段落が完全な「ブロック」であり、この千鳥模様の感覚を生み出すことは困難です。

d. 英語の構造にはさまざまな大きさの形状があり、フォントデザインでそれらを同じ直線上に配置することは不可能です。たとえば、文字 gjpqy は下のシンカーラインに揃えられ、文字 bdfhkl は上の線に揃えられ、他の文字はセンターラインと下の線に揃えられます。しかし、英語の組版で自然に発生する不規則性は、西洋のデザイナーが期待するものではありません。西洋のデザイナーは、文字間隔、単語間隔、行間隔、段落間隔などを調整してテキストを細かく揃え、段落をより幾何学的にするために多くの時間を費やしています。

バナーの漢字構成の扱い方

キーワード: 理解-分解-再構築

理解する。

テキストを配置する前に、まずテキストの内容を理解する必要があります。レイアウトの美しさにのみ焦点を当て、テキストの内容には注意を払わないデザイナーをたくさん見てきました。彼らはテキストを受け取るとすぐに配置を開始し、テキストの内容についてはまったく考慮しません。彼らの原則は、テキストはレイアウト要件に従わなければならないというものです。これは間違ったデザイン方法です。タイトルの場合、タイトルの内容を理解していなければ、本末転倒になりがちです。これは、デザイナーが需要側とのコミュニケーションに重点を置き、需要側のキーワードを取得する必要があるという問題でもあります。

壊す。

テーマキーワードが伝える感情に応じて、フォント自体の文字属性を分析し、イメージを統合して分解します。線の太さと構造、余白、重心の関係は、活字デザインの包括的な問題であり、一夜にして習得できるものではありません。文字の個性に対する深い理解だけでなく、非常に鋭い観察力も必要です。特にフォント自体が設定するイメージや、このフォントは普段どこに現れるのか?このフォントを見たときに何を思い浮かべるのか?といったことは、視覚的なコミュニケーションにおける長期的な蓄積が必要です。

リファクタリング

フォントのデザインは、画面上のタイトルの全体的な組み合わせのバランスを考慮し、フォントの基本的な認識を破壊せずに再設計してテキストをグラフィック化する必要があります。フォントカテゴリでセリフフォントとサンセリフフォント(セリフ対サンセリフ)を組み合わせる場合、サンセリフフォントとセリフフォントを直接組み合わせることはお勧めしません。

心理モデルから、規則的な組み合わせの配置では、サンセリフフォントの方がセリフフォントよりも規則的な組み合わせが優れていることがわかりますが、適切に処理しないと退屈なものになります。

書道のフォントは、各世代の書道家の追求により、その構造がより強固になっています。少し多すぎたり少なすぎたりすると、フォント自体の美しさに影響し、オーラが強くなります。小さなフォーマットや長い文章での大規模な使用には適していません。書道を学んだことがある学生は、中国の書道が「精髄」「精神」「魂」を重視していることを深く理解しているかもしれません。感情が言葉で表現できないとき、書道の行間に現れるオーラ、つまり文字のいわゆる性格が現れます。

上記は、カリグラフィーフォントを使用して特定のテーマに対する感情を表現する方法の一部です。テキストは特別な方法で変形されるわけではありませんが、テーマに合わせていくつかの効果が作成されます。

私が勤務先の会社に初めて面接に行ったとき、人事担当者が「ビジュアル デザイナーという職種について、デザイナーとはどのような人だと思いますか。何ができるのですか。」と尋ねたことを今でも覚えています。私は「ここでのデザイナーは、情報をすべての対象者に迅速かつ正確に伝える、翻訳者のような役割を果たすことが多いです。」と答えました。これは私が言った言葉であり、将来のデザインキャリアにおいて私自身を励ます言葉であり、同僚たちにも同じことをしてもらいたいと願っています。

この記事はNetEase UEDCリンクhttp://uedc.163.com/2006.htmlから転載したものです。

元のタイトル: ウェブサイトのデザイン分析: バナーのフォント構造の調査

キーワード: ウェブサイト、ディスカッション、バナー、フォント、構造、私たちにとって、通常、ウェブマスター、ウェブサイトのプロモーション、収益化

<<:  電子商取引はハッカーにとって新たな金儲けの手段となっている。電子商取引のユーザーデータの90%が漏洩している

>>:  新しいウェブサイトの所有者が最初の月にやるべきこと

推薦する

インテリジェント製造のトレンドにおけるエッジコンピューティングの応用シナリオの探究

概要インダストリー4.0の導入により、世界中のますます多くの製造企業が、クラウドコンピューティング、...

エッジコンピューティングサービスの利点は何ですか?

エッジコンピューティングサービスは、近年進化を遂げた新しい用語と言えます。エッジコンピューティングの...

#元旦# メガレイヤー: 香港/アメリカ/フィリピン/シンガポール、CN2/CUII回線、199元VPS-16Gメモリ/8コア/240gSSD/3IP、399元e3専用サーバー

クリスマスと元旦を祝うため、Megalayer は新しいプロモーションを開始しました。このプロモーシ...

アリババクラウドの賈陽青氏:データを真に「活用」するためのビッグデータ+AIエンジニアリング

5月20日、アリババ副社長兼アリババクラウドコンピューティングプラットフォーム責任者の賈陽清氏はメデ...

機密情報ウェブサイトを宣伝するための実践的な方法

企業のウェブサイト最適化のための強力なリソースとしての分析情報ウェブサイトプロモーションは、多くのマ...

SEO に関する 4 つのよくある誤解の分析 (パート 2)

前の章では、SEO に関するよくある誤解を 4 つ紹介しました。具体的なアドレスは、http://w...

包括的、専門的、そして洗練されたクラウドデータベースのリーダーはこうやって実現する

[51CTO.com からのオリジナル記事] 最近、「HuYa Live が Amazon Web ...

個々のウェブマスターは、自分のウェブサイト上の広告のクリック率をどのように向上させることができるでしょうか?

以前、個人のウェブマスターがお金を稼ぐ方法について語っている有名なブログを見ました。現在、オンライン...

ゼネラル・エレクトリックがAWSを優先クラウドコンピューティングサービスプロバイダーとして選択

高度30,000フィート、巡航速度マッハ0.85、ボーイング 787 に搭乗すると、あなたはすでに雲...

電子商取引?それとも感電による傷害でしょうか?電子商取引はどうやって生き残ることができるでしょうか?

タオバオアフィリエイトプログラムは最初から非常に人気があると考えられていました。タオバオマーチャント...

B2Cウェブサイトに関する私の意見 - 戦略

みなさん、こんにちは。またお会いできて嬉しいです。前回のオンサイト記事とオフサイト記事の公開にあたり...

#BlackFriday# limewave: 米国シアトルの VPS、年間 15 ドル、2G メモリ/2 コア (Ryzen)/30gSSD/10T トラフィック/1Gbps 帯域幅

Limewave は特別なブラックフライデー イベントを開始しました。2G メモリ、2 コア (RY...

言葉の意味を解説:SEOのスタートラインで勝つ方法

中国文化は歴史が長く、奥深いものです。世界で最も優れた文字体系である漢字は、甲骨文字から現在の印刷文...

統合インフラストラクチャがクラウドの未来である理由

これらのプラットフォームを作成する目的は、IT コンシューマライゼーション、ビッグデータ、Inter...