ウェブサイトデザインにおける言葉：フォントのタイポグラフィ

デザイナーとして、私たちは毎日フォントを扱っており、デザインに彩りを加えるためにフォントをうまく使いたいとよく思います。コンピューターにはたくさんのフォントがあるので、どれを使えばいいのか、言葉がたくさんあるので、自分の心の奥底にある考えを表現するにはどうしたらいいのか、とよく疑問に思います。

芸術は普遍的であるとよく言われます。タイポグラフィと音楽を組み合わせ、視覚的な音楽とタイポグラフィを使用すると、タイポグラフィの組み合わせが容易になり、デザインの感情をよりよく反映できるようになります。

日常の言葉に音楽という芸術形式を与え、テキストレイアウトに聴覚の美しさと視覚の美しさを与えることで、情報を伝え、そのより深い意味を表現することが容易になります。

音楽が流れるとき、コンピュータプレーヤーの変化する楽しい周波数スペクトル、スピーカーの振動によって生成される音波、ジャンプする五線譜、楽器によって変化するグラフ（A-01）はすべて、私たちの感情表現の視覚的な形です。

テキストレイアウトを視覚的な音楽で表現することで、高低分布、疎密、軽重、速さ、遅さなどの効果を視覚的に作り出し、メロディーのような機能を持たせます。

優れたタイポグラフィデザインは、リズムと韻を伴った音楽となり、固まった音楽として理解することができます。

(I) テキスト分析: フォントの構造と特性を理解することは、優れたフォントをタイプセットするための基礎となります。

タイポグラフィデザインでは、点、線、面の組み合わせによって形成されるデザイン群、それらの互い違いの高さ、疎密が、形式美を構成する重要な要素となります。英語の26文字はフォントの太さに応じてノードと組み合わされ、個々の文字が音符を構成します。

図(B-01)に示すように、大文字のI = 1つの長いノード、O = 4つの長いノード、図(B-02)に示すように、小文字のa = 3つの短いノード、b = 1つの長いノード + 2つの短いノード。

一行文字組版の横リズム：フォントの太さに応じて節の太さや配置の密度を設定することで、図（B-03）に示すように、太さや速さを変えたリズム感や押韻感を作り出すことができます。

複数行テキスト組版の縦リズム：図（B-04）に示すように、1行のテキストの長さとフォントの太さに応じてリズムとリズムが生成されます。

テキストを音楽的に変換した後は、フォント デザインをよりリズミカルにするために、タイポグラフィのルールを整理し始めることができます。

（２）テキストのリズム：優れたタイポグラフィには独特の美しさがあります。言葉のリズムが美しい音楽を生み出します。

テキスト自体のリズム：目的のフォントの変化に応じて、通常のフォントの文字が連続して配置され、リズミカルな形式を形成します。

文章に修正や変更を加えず、フォントのサイズや色も変えずに、言葉と言葉の間にある空間でリズムを作ります。フォントは感情を反映する唯一の基盤です。

下の図に示すように、フォントのサイズと方向は同じで、ノードノートは連続的に繰り返され、リズムは単語内の文字間の距離であり、大文字と小文字の区別が起伏のあるリズムを作成します。フォントの太さにより、テキストは明るく安定した雰囲気を醸し出します。図（C-01）に示すように、すべて大文字は滑らかで安定したリズムを作成し、図（C-02）に示すように、大文字と小文字は起伏のあるリズムを作成します。ノードは左側のテキストノードよりも細いため、より生き生きと見えます。

図（C-03）に示すように、すべての文字を大文字にし、単語間の間隔でリズムを作り、単語間の色の明暗でリズムを作ります。テキストレイアウトは、水平のリズムに基づいて垂直のリズムを形成します。使用されているフォントは安定感がありながらも生き生きとしており、その下の斜体フォントにより、テキストレイアウト全体に男性的で安定したトーンが表れ、同時にリラックスした明るいリズムが保たれています。

タイポグラフィ デザインのリズミカルな美しさは、繰り返しに反映されています。つまり、間隔は異なるが同じ形の繰り返し、間隔は異なるが同じ形の繰り返し、あるいは他の方法での単位繰り返しなどです。この繰り返しの第一の条件は、単位の類似性、つまり間隔の規則性であり、第二の条件はリズムの論理です。

（III）テキストのリズムの付け方：テキスト自体のリズムと韻に基づいて、人工的に新しいリズムと韻を付ける

基本的なフォントとフォント サイズを使用し、他の意図的な変更を加えずにテキスト自体の特性に応じて調整することで、テキスト レイアウトが水平方向と垂直方向の両方で客観的で自然なリズムの変化を生み出し、フォント レイアウトのリズムがより一貫性がありスムーズになり、音楽のスタイルのようにデザイナーが表現したい感情を表現できるようになります。

図（D-01）のように、フォントは同じですが、大きさ、太さ、色を変えることでリズムが変わります。ノードの太さと間隔によって、人々に明るい、安定している、活発でかわいい、緊張している、リラックスしているなど、異なるリズム感を与えることができ、異なるリズムによってより明らかなコントラストを生み出すことができます。

ケーススタディ:

図（D-02）は大文字を使い、単語間の間隔をリズムに、フォントサイズを対比させてリズミカルなリズムをつくっています。テキストレイアウトは合理的で整然としており、微妙なリズムが突然強いトーンに変化することで、テーマが衝撃的で目を引くものになっています。

図（D-03）では、文字間隔がリズミカルで、フォントサイズのコントラストが強く、DENIMを強調しています。細い線のフォントを使用しているため、絵全体のリズムがファッショナブルで丸みを帯びており、女性服のテーマにぴったりです。

図（D-04）では、単語間隔がリズミカルで、フォントサイズのコントラストが強くなっています。起伏のあるソフトな音楽で始まり、その後、力強い音楽で観客全員に衝撃を与え、その後はソフトな音楽で補完されます。交響曲のリズムが重要なポイントを際立たせ、ビートも衝撃的で明瞭です。

図（D-05）では、水平方向では単語間隔がリズムとなり、フォントの太さのコントラストがリズムの強弱を形成し、フォントの色の濃さがリズム効果を強め、垂直方向ではフォントのサイズと色が強弱強中弱のリズムを形成しています。

(III) テキストにリズムを与える方法 - ベースライン、特殊効果: レイアウトを変更し、傾きや手書きなどの特殊効果を追加することで、テキストをより面白くすることができます。

よく使用される方法としては、図 (D-06) に示すように、テキストをダイナミックかつ面白くするために斜体を追加したり、テキストの行を重ねて二重のベースラインを作成し、デュエットまたはポリフォニックのリズムを形成したりすることが挙げられます。

ケーススタディ:

図（D-07）の左側のタイポグラフィは、主にベースラインの変更に基づいており、シングルベースラインからダブルベースラインへ、シングルからダブルへとなっています。大文字と小文字の起伏により、文章が目立ち、メインの内容が表現され、リズムが軽快になります。

図（D-08）は、この文字レイアウトが音楽作品だとすると、左から右に、軽快なイタリック体のリズムで始まり、突然、明るく細い線のメロディーに変わり、人々の注目を集めます。最後に、一連の控えめな音楽が現れてそれを補完し、人々はこの文字がファッションアクセサリーであるとすぐに理解できるようにします。特に冒頭のイタリック体は、女性の落ち着きにもかかわらず、絵に活気を与えています。

図（D-09）はイタリック体を主旋律として用い、大文字と小文字の上下が美しいリズムを生み出しています。

（III）テキストにリズムを与える方法 - 長い文と短い文、文字間隔：テキストのサイズと文字間隔を対比させることで、垂直方向のリズムを追加します。

図（D-10）に示すように、単語間のフォントサイズは大きく異なり、単語の大文字と区切りは水平方向のリズムを形成します。ただし、テキスト行の観点から見ると、テキスト行の長さ、高さ、間隔が異なるため、垂直方向のリズムが形成されます。したがって、このタイプのタイポグラフィには二重のリズムがあります。

ケーススタディ:

図（D-11）は縦に見ると、長短の文の配置が、これが歌のメロディーであると感じさせます。重短軽長のメロディーと軽妙で面白い筆跡が相まって、絵から遊び心が感じられます。

図 (D-12) では、通常、組版を行うときは常に配置方法を使用しますが、このテキストの組版では、左揃えでも右揃えでも中央揃えでもない、異なるアプローチを採用しています。しかし、左側のノードから、メロディーはソフトからヘビーに進み、その後フェードアウトして再びソフトになり、漸進的な変化関係を示し、絵のメロディーを軽やかで通気性のある、魅力に満ちたものにしています。

図（D-13）このタイプのフォントレイアウトの組み合わせには、水平リズムと垂直リズムの両方があります。水平方向では、フォントサイズのコントラスト、太字・細字・やや太字・再び細字と単語間のリズム、垂直方向では、文章の長さの起伏が絵に表現された感情を反映しています。

リズムを妨げるデザインをしないでください。1 セットの組版デザインには、2 つのフォントを使用するのが最適です。3 つを超えないようにしてください。これに基づいて、大文字と小文字、フォント サイズ、太さ、行間などのフォントを調整および変更し、斜体や二重ベースラインなどのいくつかの特殊な変更を加えることで、一連の組版変更を生み出すことができます。これにより、テキストの組版に順序、コントラスト、変化、強さなどがあり、デザイン感情のリズムとリズムが生まれます。

(IV) リズミカルなデザインの例: タイポグラフィの創造プロセスには、最初から最後まで理性的な感情体験が伴います。

タイポグラフィの分析はこれで終わりです。このタイポグラフィ手法を私たちのタイポグラフィに適用する方法を例を使って説明しましょう。

図（E-01）は、何も変更されていない単語の行を示しています。順序はありますが、長すぎて強調や順序がありません。フォント自体の特性に頼ってリズムを作成するしかなく、リズムが鈍く、目立たないものです。

図（E-02）は、平文を分割し、元のリズムに基づいて新しいリズムを与えています。

図（E-03）ですが、新しいリズムでは強調したいポイントを強調できないため、調整する必要があります。それは私たちの感情的な注意を注ぎ込むプロセスです。

図（E-04）は、私たちの主観的な意識が与えたい感情を強調しています。フォントサイズや太さのコントラストなどを変えてリズムを調整し、新たなリズムを形成します。キーワードを調整して強調し、感情を与え、リズムをより目立たせ、メロディーをより滑らかにします。

図（E-05）、リズムをよりスムーズにするための細かい調整。色を追加するとリズムに軽快さや重厚さが加わり、斜体効果を追加するとシリアスなテキストに躍動感が加わります。

図（E-06）では、このように、異なるリズムと異なる感情を与えることで、異なるリズムを生み出すことができます。 上記の組版方法に従って、さまざまな特性を持つテキストを配置することができます。

テキスト自体は何千もの改良の結晶であり、非常に美しいリズムを持っています。設計と組版のベースとして選択した後、文字はノードに置き換えられます。ノードの長さ、太さ、間隔により、テキストは太さ、高さ、文字間隔、行間隔の変化により、繰り返し、サイズ、色、ベースラインの形状、長短文の音楽を生み出すことができます。テキストにリズムと韻を与えることで、豊かでカラフルな視覚効果を生み出すことができます。

原文: http://www.aliued.com/2013/02/02/1532/

原題: ウェブサイトデザインにおける単語イメージ - フォントのタイポグラフィデザイン

キーワード: ウェブサイト、Jizhong、単語画像、Qiankun、フォント、タイプセッティング、デザイナー、米国、毎日、ウェブマスター、ウェブサイトのプロモーション、収益化