見出し

見出しはコンテンツガイドと考えてください — 誰でも見出しを一目見ただけでコンテンツの構造を理解できるようにするため、見出しは明確で記述的であり、コンテンツの階層を伝えるために使用することが重要です。明確で記述的な見出しの書き方について詳しく学びましょう。

新聞の一面を想像してみてください。この文脈では、H1はページ上の大きな声明（目的）です。H2はその大きな見出しの中に入る小さな見出しで、H3はさらに詳細な見出しです。

見出しを追加するには：

1. Add panelを開きます。
2. Typography までスクロールします。
3. heading をキャンバスにドラッグします。

クラス

個々の見出しのためにタイポグラフィのプロパティを設定する代わりに、CSS を使用してクラスを作成できます。クラスを使用すると、1 つの見出しのスタイルを作成し、サイト全体の他の見出しにそのスタイルを適用できます。

クラスを作成するには：

1. キャンバス上でheadingが選択されていることを確認します。
2. Style panelのSelector fieldをクリックします。
3. クラスの名前を入力します（例：ビッグ見出し）。

このクラスは、行ったすべてのスタイリング変更を記憶します。フォントを変更したり、太さを変更したりすると、このクラス（大きい見出し）もこれらの変更を記憶します。変更を取り消す場合、そのプロパティをリセットできます。

クラスを再利用するには：

1. キャンバス上で新しいheadingが選択されていることを確認します。
2. Style panelの Selector fieldをクリックします。
3. 再利用したいクラスの名前を入力し始めます。
4. リストからクラスを選択します。

これで、見出しを変更すると、実際にはクラスをスタイル設定しているため、同じクラスを持つすべての見出しも変更されます。

タグ

タグを使用すると、見出し、段落、リンクなどのテキスト要素のデフォルトのスタイリングを変更できます。タグまたはクラスに適用するスタイルの変更は、個々に更新する必要がなく、関連するすべての要素に影響を与えます。

タグにスタイルを適用するには：

1. キャンバス上の任意のheadingを選択します。
2. クラスを追加せずにSelector fieldをクリックします。
3. スタイルを適用したいタグをクリックします（例：すべての H1 見出し）。
4. フォントの種類、色、太さなどの設定を調整します。

ここで行ったスタイルの変更は、そのタグを持つすべての要素に適用されます（例：すべての H1 見出し）

タイポグラフィオプションを選択する方法について詳しく学ぶには、Webflow ブログの Web Typography 101 をチェックしてください。

テキストの塗りつぶし

テキストの塗りつぶしは、テキストの内部に色を適用するためにクリッピングを使用します。テキストの塗りつぶしは、デフォルトではフォントの色を使用します。

カスタムテキストの塗りつぶしを追加するには：

1. Style panelにクリックします。
2. Typography セクションまでスクロールします。
3. フォントの色を変更して、自動的にクラスを作成します。
4. Style panel 内のSelector fieldをクリックして、そのクラスの名前を変更します（例：Bigger heading）。
5. Backgroundsまでスクロールし、Typeの隣にグラデーションを設定します。
6. グラデーションバーの左端をダブルクリックし、最初のストップカラーを選択します。
7. グラデーションバーの右端をダブルクリックし、2番目のストップカラーを選択します。
8. Angleの隣の円をクリックして、グラデーションの方向を調整します。
9. Clippingの隣のドロップダウンをクリックし、Clip background to textを選択します。

グラデーションに変更を加えると、テキスト内がリアルタイムで更新されます。この方法を使えば、どんな背景でも（複数の背景を重ねても）配置できます。背景がテキストにクリップされると、フォントカラーは無視され、Backgroundsセクションのカラーが使用されます。

段落とテキストの継承

親要素はテキストのスタイル情報を子要素に伝えることができます。親要素にテキストスタイルを設定し、これらのスタイルを子要素の設定で上書きすることができます。

このテクニックは、ボディタグにグローバルなフォントスタイルを設定したり、セクション内のテキストや他の要素を配置したり、デフォルトのリンクブロックスタイルを上書きしたりするためによく使用されます。

テキストの継承を使用するには：

1. 任意のページの Body elementを選択します。
2. Style panelの Selector fieldをクリックします。
3. e Body (All pages) tagを選択します。
4. 好みに応じて設定を調整します。

本文（全ページ）タグは最上位のタグです。このタグへの変更（フォントなど）は、すべてのテキストに反映されます。これは、サイトのデフォルトを設定するのに最適な方法です。

デフォルトの継承スタイルを上書きする

おそらく、段落のフォントをデフォルトのフォントと異なるものにしたいと考えているかもしれません。フォントにクリックすると、それが「Body（すべてのページ）」タグからの情報を受けているのがわかります。このフォント設定を変更すると、新しいクラスが適用されます。

特定のプロパティをスタイル設定すると、その瞬間にクラスが自動的に作成されるため、これがデフォルトの継承スタイルを上書きする鍵です。スタイルプロパティアイコンに表示されるオレンジ色のインジケータは、そのプロパティに継承された値があることを意味します。オレンジ色のテキストをクリックして、値がどこから継承されているかを確認できます。。

デフォルトの継承スタイルを上書きするには：

1. スタイルを適用したい要素をクリックします。
2. その設定のいずれかを調整します（フォント、太さなど）。
3. セレクタ フィールドにクリックして、クラス名を変更します（例：「特別な段落」）。

これで、継承の階層全体を確認できるようになります。

スパン

スパンは、テキスト要素の特定の部分、例えば個々の文字や単語などをスタイル設定するための書式オプションです。

スパンを使用するには：

1. スタイル設定したいテキストを強調表示します。
2. Style panel のSelector fieldをクリックして、クラスを作成します。
3. 好みに応じて設定を変更します（フォント、背景色など）。

スパンの書式設定をクリアするには：

1. テキストを強調表示します。
2. テキストツールバーのポップアップからClear formattingをクリックします（Aにxが表示されます）。

単位

ウェブで使われるタイポグラフィの単位の多くはピクセルで設定されているが、他にも多くの選択肢がある：

• Ems
• Rems (root ems)
• Percentages
• VW (viewport width)
• CH (character unit)

Ems

Emsは元々、書体の大文字Mの幅に基づいていました。Emsは親要素を見て、フォントサイズを比例して拡大縮小します。

したがって、フォントが16ピクセルの場合：

• 1 emは16ピクセルです
• 2 emは32ピクセルです
• 1.5 emは24ピクセルです

また、段落の親要素、例えばDivブロックにフォントサイズを設定することもできます：

1. 親要素を選択します
2. Style panelのTypographyの下で、フォントサイズを変更します（例：20ピクセル）

親要素が20ピクセルの場合：

• 1 emは20ピクセルです
• 2 emは40ピクセルです
• 3 emは60ピクセルです

Rems (root ems)

RemsはHTMLフォントサイズに対して相対的です。

Remは、Remの値を取り、HTMLフォントサイズに乗じて計算されます（コードで手動で変更しない限り、ブラウザのフォントサイズを尊重します）。

これにより、ブラウザの設定に従う（ブラウザでカスタムテキストサイズが設定されている場合）と、サイト訪問者が快適な表示サイズに拡大できる利点があり、アクセシビリティ向上に適しています。レスポンシブテキストサイズにRemsを使用する詳細を学ぶ。

パーセンテージ

Emsと同様に、パーセンテージは親要素のフォントサイズを参照します。

VW (viewport width)

VWはブラウザのビューポートの幅を測定し、ビューポートの幅に比例して拡大縮小します。

CH (character unit)

CHは、1行あたりの読むべき文字数を制限するために、段落や見出しのような要素のサイズを調整するのに適しています。

例えば、段落の最大幅が60chの場合、選択したフォント（段落の書体）を取り、段落の境界（そのボックス）を60のゼロの幅に等しく設定します。

CHを使用すると、文字の幅（フォントのゼロ文字の幅に基づく）を制限しようとする場合に、テキスト要素の幅を設定できます。

アクセシビリティとインクルーシブ・タイポグラフィ

アクセシビリティとインクルーシブデザインは、ウェブデザインをする際に考慮すべき重要な要素です。タイポグラフィに関して、ウェブをよりアクセシブルでインクルーシブにするための簡単な方法をいくつか見てみよう。

フォントの読みやすさ

見出しだけでなく、特に段落では、細いフォントは非常に読みにくい。

これはフォントのウェイト配分が不均等な場合も同様で、一部の文字はあまり読みやすくない。

本文のフォントは16ピクセル以下にしてください。

textの整列

テキストの塊の垂直方向の揃えが不揃いだと（例えばテキストを中央揃えにした場合）、読みにくい文章になります。ギザギザの配置は、読者が行から行へとたどるのを困難にする。

フォントが読みやすくても、文字がギザギザに並んでいると、読者は次の行を追うのが大変です。

All caps

大文字と小文字を区別する言語は、多くの場合、センテンス・ケース（例：「Sentence case」）やタイトル・ケース（例：「Title Case」）で書いた方がはるかに読みやすくなります。基本的には、大文字を使う必要がある、あるいは使うことが予想される箇所でのみ大文字を使って文章を書き出します。

全角文字は、特に長い段落では、読み手にとってより重い認知的負荷をもたらす可能性があります。スクリーン・リーダーは大文字を個々の文字として認識するため、流れが妨げられ、理解しづらくなります。長い文字列では、全角文字の使用を制限することを検討しましょう。

全角文字は読み手にとってより重い認知的負荷となる可能性があります。長い文字列では全角文字の使用を制限することを検討してください。

Underlined text

ウェブ上では、下線付きのテキストはハイパーリンクを示すと考えられています。強調したい場合は、イタリック体や太字のテキストを使用することを検討してください（または、スパンで囲むことでスタイルを変更することもできます）。

強調するためにテキストに下線を引く（ハイパーリンクと混同される可能性がある）代わりに、イタリック体（左）または太字テキスト（右）を使用する。

カラーコントラスト

コントラストとは、背景と前景の差の測定である。コントラストが低いとは、やや暗いグレーにやや明るいグレーのようなものだ。あるいは赤にマルーン。あるいはピンクに紫。

Colorableによる2色のコントラスト結果。左は薄紫の背景に濃い紫のテキスト。比率は7.06:1で、WCAGガイドラインに基づく評価はAAA。右側は、薄い紫色の背景に紫色のテキストで、比率は2.39:1。

コントラストが高いからといって、フォントの太さなど他のことを考慮しなくなるわけではありません（背景に対してたまたまコントラストが高い超細いフォントは、それでも超読めません）。しかし、コントラストを高くすることは、通常、可読性を高めることにつながり、ウェブでは素晴らしいことです。

Webflowに内蔵されているカラーコントラストチェッカーを使って、背景に対するテキストのコントラスト比を評価することができます。また、これらの優れたカラーコントラストツールを使用して、デザインのカラーコントラストをチェックし、ベストプラクティスについて詳しく学ぶこともできます：

• TPG’s Color Contrast Analyser
• tanaguru contrast finder
• ‍WebAIM’s Contrast Checker
• Colorable

行あたりの文字数

長い行のテキストは読み手を混乱させ、疲れさせます。コンテナを使って、テキストがページの横方向にどこまで広がるかを制限しましょう。1行あたり60文字から80文字が推奨されます。

Stripeは、コンテナを使ってページ全体のコンテンツの範囲を制限することで、より読みやすくしている。

もしStripeがコンテナでテキストのスパンを制限しなければ、すぐに読みづらくなってしまうだろう。

先に説明したように、これを行う1つの方法は、テキスト要素の最大幅に制限を設け、1行に必要な文字数を設定することです。覚えておいてほしいのは、60CHはどんなフォントを選んだとしても、60個のゼロに等しいということだ。

行の高さ - Line height

適度な行の高さのあるテキストは、圧迫感を与えず、ページをまたいだり、下に移動したりしやすくなる。

段落やテキストブロックの行の高さは、フォントサイズの1.5倍以上にしてください。

理想的な行の高さは、段落やテキスト・ブロックのフォント・サイズの少なくとも1.5倍であるべきです。

明確なリンク

リンクは意味があり、実行可能である必要があります。スクリーンリーダーはページ内のリンクの概要を訪問者に提供できます。リンクテキストが文脈から切り離されて読み上げられる場合、読者に次の情報を提供するべきです：

1. リンクが何か
2. リンクがどこに向かっているか

してはいけないこと：

• "more"、"this page"、または "click here" などの一般的な用語にリンクを埋め込まないでください
• 生のURLをハイパーリンクとして使用しないでください

行うべきこと：

• リンクを、人々がリンクがどこに行くか、なぜそこに行くかを伝える明確で具体的な言語で埋め込む
• リンクがPDFやビデオなどの高帯域幅メディアを開く場合、リンクテキスト内でそれを示す

ページ内の役立たないリンクをスクリーンリーダーがアナウンスする例については、WebflowのAdvanced web typographyビデオレッスンのリンクセクションをご覧ください。詳細なリンクについての情報は、WebAIMのハイパーテキストリンクの記事を参照してください。

ナビゲーション

ナビゲーション全体を、見た目だけでなく、スクリーンリーダーを使用してどのように対話できるかをテストする必要があります。これは、人々がコンテンツをどのようにナビゲートできるかを理解する素晴らしい方法です。

Webflow Universityでは、アクセシビリティと包括的なデザインに関する情報がますます増えていますので、定期的にチェックしてください！

一方、サイトをよりアクセスしやすくするためのレッスンをご覧いただくか、アクセシビリティコースに登録してみてください。