この投稿はWebflow社が提供する「Advanced web typography」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/advanced-typography-styles
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
検索エンジンとUXを考慮して、テキストをスタイリングします。
タイポグラフィは、コンテンツの可読性を高め、情報の階層を明確にし、ブランドのアイデンティティを確立するなど、ウェブサイトにおいて多くの役割を担っています。
レッスン概要
見出しは、コンテンツのガイドガイド役です。誰でも見出しを見れば、コンテンツの概要と構成がわかるようにする必要があります。
ブログを想像してください。この場合、H1はそのページの一番大きな文字（目的）です。H2は、その大きな文に合わせたサイズの小さな見出しで、H3はさらに細かい見出しです。
見出しを追加する方法
個々の見出しにもCSS を使用してクラスを作成し、スタイリングすることができます。クラスを使用すると、1つの見出しに対してスタイルを作成し、そのスタイルをサイト全体の他の見出しに適用することができます。
クラスの作成方法
このクラスは、スタイリングの変更のすべて記憶します。フォントやウェイトを変更すると、このクラス（H1）はその変更を記憶します。もし、変更を削除したい場合は、その設定をリセットすることができます。
クラスの再利用方法
クラスを再利用した見出しのスタイルを変更すると、同じクラスを持つすべての見出しも変更されます。
タグを使用すると、見出し、パラグラフ、リンクなどのテキスト要素のデフォルトのスタイルを変更することができます。タグやクラスに適用したスタイルの変更は、関連するすべての要素に反映され、個別に更新する必要はありません。HTMLタグについて詳しくは、こちらをご覧ください。
タグのスタイリング方法
ここで変更したスタイルは、そのタグを持つすべての要素に適用されます。
テキストの塗りつぶしは、クリッピングを利用してテキストに色をつけます。テキストフィルは、デフォルトではフォントカラーを使用します。
テキストフィルを設定する方法
グラデーションに変更を加えると、リアルタイムにテキスト要素内が変更されます。この方法を使えば、どんな背景も置くことができ、複数の背景を重ねることもできます。背景がテキストにクリッピングされると、フォントカラーは無視され、バックグラウンドセクションにあるカラーが使用されます。
パラグラフのフォントをデフォルトのフォントと違うものにしたい場合の方法を解説します。タイポグラフィセクションの「font」をクリックすると、Body（ALL Pages）タグの設定を引きついていることが分かります（その要素の上位要素から継承されている場合もあります）。このフォントの設定を変更すると、新しいクラスが作られると共に、変更した設定がその要素に適用されます。
クラスは、特定のプロパティにスタイルを設定した瞬間に、自動的に作成されます。これが、デフォルトの継承スタイルを上書きするということです。スタイルプロパティのアイコンにあるオレンジ色の印は、そのプロパティに継承された値があることを意味します。オレンジ色のテキストをクリックすると、その値がどこから継承されているかを確認できます。継承インジケータの詳細については、こちらをご覧ください。
デフォルトの継承スタイルを上書きする方法
スパンは、個々の文字や単語など、テキスト要素の特定の部分にスタイルを設定するための書式オプションです。
スパンの使い方
スパンを解除する方法
ウェブで使われるタイポグラフィの単位の多くはピクセルで設定されていますが、それ以外にもさまざまな選択肢があります。
エム（em）はもともと書体の大文字のMの幅を基準にした単位でした。emは親要素のフォントサイズを参照して値に応じて、対象のフォントサイズを比例させます。
例えば、フォントサイズが16pxの場合のemは下記の通りになります。
また、Divブロックのようなパラグラフの親要素にフォントサイズを設定することもできます。
親要素のDivブロックが20pxの時のemは下記の通りになります。
レム（rem）は HTMLのフォントサイズに対する相対値です。
remは、remの値にHTMLのフォントサイズを乗じて計算されます。
これは、ブラウザの設定を基準とし（ブラウザでカスタムテキストサイズが設定されている場合はそれを参照。デフォルトは16px。）、サイト閲覧者に合わせてサイトをより快適な表示サイズに拡大できるという利点があり、アクセシビリティの観点からも好ましいとされています。
emと同様、パーセンテージは親要素のフォントサイズを参照します。
VWは、ブラウザのビューポートの幅に比例して拡大縮小されるフォントサイズの単位です。
CHは、パラグラフや見出しなど、1行に収まらせなければならない文字数を制限するための設定に最適です。
たとえば、パラグラフの最大横幅が60CHの場合、パラグラフをいれているボックスの横幅いっぱいに文字を入力した際に、60文字分（正確には「0」60文字分）が入り切るようにフォントサイズを設定します。（ただし、CHは半角数字「0」を1CHとしているため、全角だと文字数が合わないことがあります。ご注意ください。）
つまり、CHでは1行の文字数を制限したい場合に、ボックスの幅に合わせて文字の大きさを制限することができます。
アクセシビリティとインクルーシブデザインは、ウェブデザインの際に考慮すべき重要な要素です。タイポグラフィに関して、ウェブをよりアクセシブルでインクルーシブなものにするためにやるべきことをいくつか見てみましょう。
薄いフォントは、見出しだけでなく、特にパラグラフの中で非常に読みにくいです。
フォントのウェイトが不均一な場合も読みづらさを助長するので、これもお勧めしません。
また、特別な事由が無い限り、本文のフォントサイズは16px以下にしましょう。
なお、本文の最小フォントサイズは14pxがおすすめです。それ以上小さくすると、人によっては読みづらいサイズになってしまいます。近年では、フォントサイズを下げて、余白を作るようなデザインも流行っていますが、やりすぎると、読みづらいサイトとなり本末転倒ですので気を付けましょう。
テキストの塊に不均一な垂直方向の配置があると（テキストが中央に配置されている場合など）、読みにくさが生じます。ギザギザの配置は、読者が行から行へとたどるのが難しくなります。
モバイルデザインでは、本文を中央ぞろえにする風潮が日本にはありますが、個人的には一パラグラフあたりの行数が増えるモバイル時のデザインこそ、左ぞろえで表示するべきだと思います。
たとえ読みやすいフォントであっても、文字がギザギザに配置されていると、読者は次の行を追うことができません。
ウェブ上では、下線付きのテキストはハイパーリンクを示すと考えられています。単にテキストを強調したい場合は、斜体や太字のテキストを使用することを検討してください（スパンで区切ることで、パラグラフの一部のテキストのスタイルを変更できます）。
強調するためにテキストに下線を引くのではなく（ハイパーリンクと混同されることがあります）、斜体または太字を使用します。
コントラストとは、背景と内容の色の差のことです。コントラストが低いとは、やや暗いグレーの背景にやや明るいグレーのテキストを載せるようなものです。または、赤の上に茶色を載せたり、ピンクの上に紫色を載せるようなものです。
コントラストが高いからといって、フォントの太さなど他のことを考慮しなくていいわけではありません（背景に対してコントラストが高くても、かなり細いフォントは、やはり読みにくいです）。しかし、コントラストが高いということは、通常、可読性を高めることにつながり、ウェブ上では素晴らしいことです。
Webflowに内蔵されているカラーコントラストチェッカーを使って、背景に対するテキストのコントラスト比をアセスメントすることができます。また、これらの優れたカラーコントラストツールを使用して、デザインのカラーコントラストをチェックし、ベストプラクティスについて学ぶことができます。
長い一文は、読み手を混乱させ、疲れさせます。読み手の目は、左から右へ大きく移動しなければなりません。パラグラフが左右に長くなると、読者は混乱し、疲れてしまいます。1行の文字数は30～40文字程度を目安にするとよいでしょう。
こうした制限を掛けるときに有効なのが「CH」です。例えば、1行の文字数を全40文字に収めたい場合は、パラグラフ自体の横幅のサイズを80CHにすることでボックスの横幅いっぱいにテキストを入力した場合に、全角40文字に収めることができます。（ただし、CHは半角数字「0」を1CHとしているため、全角だと文字数が合わないことがあります。ご注意ください。）
ラインハイト
適切な行の高さを持つテキストは、サイト閲覧者にページ全体を見通してもらうのに非常に有効です。
パラグラフやテキストブロックの行の高さは、フォントサイズの少なくとも1.5倍が適正です。
リンクは、そのテキストにリンクが貼られていることをサイト閲覧者が認識できるものでなければなりません。
また、スクリーンリーダーは、訪問者にページ上のリンクについて次のことを伝えることができます。
下記は非推奨です。
リンク先がどこなのか、なぜそこへ行くのかがわかるような、明確で具体的な表現でリンクを貼ることが重要です。
PDFやビデオなどの高帯域幅のメディアを開く場合は、リンクのテキストでそれを明示しましょう。
すべてのナビゲーションは、どのように見えるかだけでなく、スクリーンリーダーを使ってどのように操作できるかをテストする必要があります。これは、人々がコンテンツをどのようにナビゲートできるかを理解するための推奨事項です。
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
Webflowとは何ですか？
Webflowは、コードを書かなくてもプロ品質のWebサイトを制作できる、アメリカ発のノーコードWebサイト制作プラットフォームです。デザイン・レイアウト・アニメーションをビジュアル操作で組み上げながら、裏側では実際にクリーンなHTML/CSSが生成される点が特徴で、コーディングができなくてもデザインの自由度とコードレベルの精度を両立できます。
WebflowとWordPressの違いは何ですか？
WordPressはCMS（コンテンツ管理システム）を中心に、プラグインやテーマを組み合わせてサイトを構築する仕組みで、細かなカスタマイズを行う場合はHTMLやPHPといったコーディング技術が求められる場面が多くあります。一方Webflowは、デザインツールと開発環境が一体化したビジュアル制作プラットフォームで、プラグインやコーディングに依存せず視覚的な操作だけで細かなレイアウトやアニメーションを直接作り込めるのが大きな違いです。
Webflowは無料で使えますか？
無料プランも用意されていますが、独自ドメインでの公開やCMS機能の拡張、フォーム送信数の上限緩和などには有料プランへの加入が必要です。個人の検証用やポートフォリオ作成程度であれば無料プランでも十分試すことができます。
Webflowはプログラミング知識がなくても使えますか？
基本的な操作はプログラミング知識がなくても、ドラッグ＆ドロップとビジュアル設定だけでサイトを作成できます。ただし、複雑なインタラクションやカスタム機能を実装したい場合は、HTML/CSSの基礎知識があると制作しやすくなります。
Webflowは日本語に対応していますか？
管理画面（エディタ）自体は英語ベースでの提供となっていますが、公開するWebサイト自体は日本語のコンテンツで問題なく作成・運用できます。日本語フォントの設定やSEO用のメタ情報も日本語で入力可能です。
Webflowのサイトは表示速度が速いですか？
Webflowはクラウド最適化されたホスティング環境（AWS基盤）を採用しており、画像の自動最適化やCDN配信などが標準で組み込まれているため、一般的なCMSと比較して高速な表示速度を実現しやすい傾向にあります。
WebflowでSEO対策はできますか？
Webflowにはメタタイトルやディスクリプション、OGP設定、見出しタグの構造化、XMLサイトマップの自動生成など、SEOに必要な基本要素が標準機能として備わっています。追加のプラグインなしである程度のSEO対策が可能な点は大きなメリットです。
WebflowはAEO対策に対応していますか？
はい、対応しています。Webflowで制作したサイトはセマンティックなHTML構造、スキーママークアップ、SEO用メタデータ、llms.txt、サイトマップ、robots.txtなどが標準で組み込まれており、AI検索エンジンにとって内容を理解・引用しやすいサイト作りがしやすい設計になっています。さらにWebflowは、AIによる自社の言及状況を計測し、メタデータや構造化データなどの改善提案を行うAEO専用の分析・支援機能も提供しています。
Webflowでのサイト制作を日本語で相談できる会社はありますか？
Funwork株式会社は、Webflowを用いたサイト制作の受注事業を日本で初めて公に事業化した会社です。これまでにWebflow関連のプロジェクト数は累計約200件（2026年7月現在）にのぼり、豊富な経験とノウハウを有しています。企画からデザイン、実装、公開後の運用まで日本語で一貫してサポートしており、Webflowでの制作を検討している方は安心してご相談いただけます。
Webflowの操作方法がわからない場合、代行や相談はできますか？
Funworkでは、サイト制作の全面的な代行から、既存サイトの一部修正・機能追加といった部分的なサポートまで、状況に応じた対応が可能です。Webflowの操作に不慣れな方でも、まずはお問い合わせページから気軽にご相談いただけます。
Webflowで作ったサイトの運用やSEO対策も依頼できますか？
Funworkはサイト制作事業に加えてWebマーケティング支援事業も展開しており、公開後のSEO対策やコンテンツ更新、アクセス解析にもとづく改善提案まで継続的にサポートしています。制作して終わりではなく、公開後の成果につながる運用まで一貫して依頼できます。
既存のWordPressサイトからWebflowへ移行できますか？
はい、既存サイトのデザインやコンテンツを踏まえたうえで、Webflowへのリニューアル移行のご相談も承っています。移行にあたっての注意点や進め方についても、事前にヒアリングのうえご案内していますので、まずはお問い合わせください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営