タイポグラフィは感覚を呼び起こし、ブランドを思い出したり、雰囲気を作ったりすることができます。FedExマークの大胆さを考えてみよう（こそこそ隠し矢印が付いている！）ニューヨーク・タイムズ紙の古典的な黒のフォントスタイル。タイポグラフィを編集する上で、お気に入りの雑誌のタイポグラフィを考えてみましょう。携帯電話の異なるアプリケーションで異なるフォントを使用する方法を考えます。しかし、組み版が悪いと、組み版は不快で注意力が散漫になり、読みにくいこともあります。前回、アプリケーション内の軽率なタイプに惑わされたり、看板に誤解されたり、分かりにくいパンフレットやパッケージ製品が理解できなかったりしたことを考えてみてください。
よく考えてみると、タイポグラフィされた芸術と科学は、ロゴ、広告文案、雑誌、新聞の見出し、書籍の章の見出しなど、すべてのコミュニケーションの基礎となっています。なぜタイポグラフィが重要なのかをもっと議論してみましょう。
記事のアウトライン
- タイポグラフィとは？
- タイポグラフィの重要性は何ですか。
- 各種タイポグラフィ要素
- Webサイトのタイポグラフィのヒント
- Strikinglyの提示
- 結論
- タイポグラフィとは？
このコースを学習する前に、実行可能に見えるフォントが見つかるまで、より多くのメニューをスクロールしてください。しかし、事実はそれだけではないことを証明している。フォント、フォントの意味文字、および文字を配列するためのアートとテクノロジーをタイポグラフィと呼びます。文字や文字のデザインだけでなく、これらの文字や文字の配列も欠かせない。これは、1行とページ全体、または作品全体でポイント、頭取、間隔を選択することです。
- タイポグラフィの重要性は何ですか。
タイポグラフィはきれいなフォントを選ぶだけではありません。UI設計に不可欠な部分です。良好なタイポグラフィは強力な視覚階層を作成し、Webサイトにグラフィックバランスを提供し、製品全体の基調を設定します。タイポグラフィを通じてユーザーを指導し、通知し、可読性とアクセス性を向上させるとともに、積極的なユーザー体験を提供しなければならない。なぜタイポグラフィが重要なのかをより深く理解してみましょう。
- タイポグラフィによるブランド認知度の向上
良好なタイポグラフィは、Webサイトの個性を改善するだけでなく、Webサイトのフォントとブランドを意識的にリンクさせ始めます。ユニークで一貫性のあるタイポグラフィは、強力なユーザー・フォロワーを構築し、ユーザーと信頼を構築し、ブランドを前進させるのに役立ちます。
- タイポグラフィの影響を受けることを決定する
タイポグラフィは、使用者がタイポグラフィテキストの伝達情報をどのように消化し、知覚するかに重大な影響を与える。テキスト情報を強化する強字体は、テキスト情報を支援しない弱字体よりも説得力がある。
- 読者が書体に惹かれる
良好なタイポグラフィは、Webサイトに1分または30分滞在する訪問者の違いを意味する可能性があります。ウェブサイトは視覚的に刺激的で忘れられないものであり、タイポグラフィが重要な役割を果たしている必要があります。
- 各種タイポグラフィ要素
タイポグラフィを開始するには、まずタイポグラフィ図形設計の8つの基本要素を把握する必要があります。
1、フォントとフォント
フォントとフォントの違いにはいくつかの誤解があり、多くの人が両者を混同している。フォントは、サイズや重さのさまざまな文字を含むタイポグラフィデザインスタイルであり、フォントはテキスト文字の図形表現である。フォントは一連の関連フォントであり、フォントはフォントを構成する太さ、幅、スタイルである。Serif、sans-serif、装飾フォントは3つの最も一般的なフォントです。良いデザイナーは3種類以上のフォントを使用することはありません。装飾フォントを最小限に維持して、メザニンと流線型を維持します。UIデザイナーの多くは、裏地フォントと裏地なしフォントをペアにします。例えば、裏地フォントを本体テキストに、裏地なしフォントをタイトルに、その逆も同様です。
2、比較
対照的に、階層構造のように、強調したい考えや情報を読者に伝えるのに役立ちます。コントラストに注目することで、テキストのタイポグラフィをより面白く、より意味があり、注目を集めることができます。ほとんどのデザイナーは、さまざまなフォント、色、スタイル、サイズを試して影響を与え、ページを割ってみます。
3、整合性
混乱や混乱を回避するためには、フォントの一貫性を保つことが重要です。情報をやり取りする際には、同じフォントスタイルを使用することが重要です。これにより、読者は彼らが読んでいる内容を理解し、パターンに気づき始めることができます。ある程度階層レベルを試してみることは可能ですが、一貫したフォント階層を確立して維持することが望ましい（1つの一貫したフォントはタイトルに、もう1つはサブタイトルに）。
4、空白
テキストまたは図形の周囲の空間である「負の空間」とも呼ばれる白い空間。それは常に良いタイポグラフィ要素として無視されている。ユーザーはそれに気づかないが、スペースを正しく使用することで、メザニンが清潔でテキストが読めるようにすることができる。空白はテキストに注目し、美しい全体的な体験を作り出すことができます。空白は通常、余白、塗りつぶし、またはテキストや図形のない領域で表されます。
5、配置
テキスト、グラフィック、イメージを統合して結合し、各要素間の空間、サイズ、距離が等しくなるようにするプロセスを「位置合わせ」と呼びます。多くのUIデザイナーは、ロゴ、タイトル、本文の位置合わせを確実にするためにマージンを使用しています。ユーザーのインタフェースを調整する際には、業界標準を念頭に置いたほうがいい。左から右へ読む読者にとって、テキストを右に揃えるのは直感に反するように見えます。
Strikinglyの商品から受けた画像
6、色
色はタイポグラフィの中で最もエキサイティングな要素の1つです。デザイナーが創意を発揮し、メゾスコピックを新たなレベルに引き上げることができる場所です。一方、テキストの色は油断してはいけません。フォントの色を正しく設定すると、テキストが際立って情報を伝達する基調になります。しかし、間違ったやり方をすると、中間面が混乱し、テキストとWebサイトの色が衝突する可能性があります。カラーには、彩度、色相、彩度の3つの主要成分が含まれます。良いデザイナーは、視覚障害のある人でも、テキストに視覚的な魅力と可読性を持たせるために、この3つの要素をバランスさせる方法を知っています。デザイナーは、テキストをグレースケール（色なし）で表示し、テキストが背景色に比べて暗すぎたり明るすぎたりしたときに調整することでテストすることがよくあります。
7、階層
最も重要なタイポグラフィの原則の1つは階層構造です。タイポグラフィ階層は、最初に注意して読む必要があるハイライトコピーと標準テキストコピーを区別することを目的としています。ソーシャルメディアが引き起こす注意力の短い時代には、デザイナーが簡潔で必要な情報を迅速に消費できるフォントを作成することを奨励します。
Strikinglyの商品から受けた画像
階層構造を作成するために、サイズ、色、コントラスト、および配置を使用できます。たとえば、前のコピーよりも大きな赤い感嘆符で始まるコピーの行がある場合、これは読者に対する視覚的なヒントであり、アピール用語です。サイズはタイポグラフィ階層で最も一般的な例です。見出しは常にサブタイトルと標準テキストより大きくなければなりません。
- Webサイトのタイポグラフィのヒント
ここでは、タイポグラフィの基礎知識を紹介しました。メソ面のフォントを選択し続けましょう。これだけ多くの異なるフォントやフォントが選択できると、戸惑いがちです。正しい決定を下すのは、何を見てもよさそうに見えるだけではありません。ここで考慮すべき点は次のとおりです。
A、訪問者が初めてサイトにアクセスしたとき、どのような気持ちになってほしいですか。環境をもっと人気にしたいですか。Webサイトが高級で、魅力的で、面白いのか、厳粛なのか。タイポグラフィはブランドや製品の個性を反映しなければならない。この課題に直面して、ブランドの中核的な特徴を定義し、これらの特徴を反映したフォントの収集を開始することが良い出発点です。そこから、パターンに気づくことができます。
B、フォントを考慮して情報のニュアンスを補うことも重要です。厳粛さや重要な情報を伝えたい場合は、はっきりと読みやすく、気配りを減らすことができるスタイルや装飾性のないフォントを選択してください。
Strikinglyの商品から受けた画像
C、機能をケチらない
機能は外観と同じように重要です：見た目はいいですが、完全に分かりにくいサイトほど悪いものはありません。説明がはっきりしないので、間違ったボタンをクリックしたり、道を間違えたりする原因になります。メソ面に含めるフォントを決定する際に、スタイル、美学、サウンドを横に置き、フォントがはっきりしているか、読み取り可能でアクセス可能であるかどうかを考慮します。テキストを難なく読む方法はありますか。キャラクター間に十分な違いはありますか？
D、パフォーマンスを考慮する
多くのデザイナーは、ネットワーク・ビューアに適合するフォントを選択することの重要性を無視しています。広く使用されているフォントライブラリ（Google Fontsなど）には、ビューアで完全に表示できるWebベースのフォントアーカイブが用意されています。専門的なヒント：ネットワークフォントをダウンロードするときは、必要以上の文字セットをダウンロードしないでください。これで体重増加を回避！
E、啓発される
どこから始めたらいいかわからない場合は、他の人が何をしているか見てみましょう。周りに見える書体に注意してください。繰り返しパターンを見ましたか。良い例と悪い例を識別できますか。ソーシャルメディアでハッシュタグのタイポグラフィに注目するか、Pinterestでタイポグラフィを検討すると、利用可能なコンテンツについてよく理解できます。この8つのタイポグラフィトレンドからいくつかのアイデアを得ることもできます。
F、少し時間を置いてテストを行う
メソ面でどのフォントを使用するのに最適な方法は何ですか？テスト、テスト、再テスト！実際のユーザーから有用なフィードバックを集めることで、何が有効で、何が無効で、何が読みやすいのか、何が直感に反するのか、不器用なのかをよりよく理解することができます。
- Strikinglyの提示
Strikinglyは、ユーザーが自分のサイトを設計できる無料のウェブサイトビルダーです。複雑に聞こえるのではないでしょうか。心配しないで。Strikinglyは非常に簡単に学習でき、Web開発経験のない人でも面白いと思います。Strikinglyには、Webデザイナーがタイポグラフィを追加したり編集したりするためのツールと、マステンプレートが含まれています。さまざまなフォントやテキストの色が使用可能であることに驚かされます。Strikinglyを使用してタイポグラフィの周囲の空間を操作し、良好なタイポグラフィデザインプロジェクトに合った視覚的に魅力的なテキストを作成できます。スタイルをブレンドしてマッチさせてタイポグラフィを作成し、ブランドを際立たせることができます。
Strikinglyの商品から受けた画像
- 結論
タイポグラフィはしばしば無視されますが、ユーザーのインターフェース設計の重要な構成要素です。タイポグラフィをマスターすれば、立派なUIデザイナーになります！どこから始めるかわからない場合は、お気に入りのWebサイトにアクセスして、選択したフォントの記録を開始してください。
