長い記事のデザイン

美しい「物」をデザインすることは、多くの考慮事項から成り立っています。 たとえばホームページとは異なり、長い記事はインターフェースをデザインすることよりも、リラックスして快適な読書体験を生み出す方法でテキストをデザインすることです。

これは、記事が長い形式のコンテンツを扱っているためです。これは、ユーザーとの「ページ滞在時間」のインタラクションによって評価される傾向があるためです。 誰かに完全な物語を読んでもらいたいのです。 誰かが記事にたどり着いてからすべての単語を読むまでの間には、自然な間隔があります。 そして願わくば、その空間がユーザーの心を掴むだけでなく、考えやアイデア、そしておそらくは行動を誘発するのに十分な没入型であることを願っています。 少なくとも、私があなたの注意を引き、あなたが読んでいるまさにその記事を読み進めてくれることを願っています。

バランスがあります。 一方で、私たちはそれを聞きます 「誰もインターネットを読んでいません。」 一方、長い記事には細心の注意が必要です。 コンテンツ マーケティングの現在の価値とユーザーの焦りの高まりを考えると、できるだけ長く読者を魅了することが重要な関心事です。 いくつかのベスト プラクティスと優れた記事ページの例を見て、長い記事の視覚的に魅力的な読書体験を (ユーザー エクスペリエンスを犠牲にすることなく) 作るものと、その効果を再現する方法について理解を深めましょう。

クイックウィン

多くの人にとってすでに明らかであると思われるが、コンテンツの読みやすさにとって効果的なものを簡単にリストアップしましょう。

• フォント サイズを大きくします。 我々は知っている 16px がデフォルトであり、多くのデザインでまったく問題ありませんが、フォント サイズが大きいほど魅力的です。これは、ユーザーが画面を前に傾けて読む必要がなく、後ろにもたれかかって落ち着くことができることを意味します。
• XNUMX 行あたりの文字数を目標にする: 必要以上に一生懸命働くのが好きな人はほとんどいません。それは読書にも当てはまります。 ビューポートの幅全体を使用するのではなく、物事を絞り込み、大きなフォント サイズとのバランスを取って、 より少ない テキストの各行の文字。 スイート スポットはさまざまですが、多くの人は、読者の目が左から右に移動するために必要な距離を制限するために、45 行あたり 75 ～ XNUMX 文字にすることを提案しています。 クリスは 文字数をカウントするブックマークレット、しかし私達はまた持っています ch 予測可能な結果を​​得るために CSS でユニットを使用します。
• 行の高さを上げる: デフォルトの行の高さは潰れているように感じます。 面白いのですが、行間のスペースを増やすと (もちろん、ある程度までは) 目の負担が少なくなります。これは、通常、目が移動する距離を短くする必要がある行あたりの文字数のアドバイスとは正反対に思えます。 間の行の高さ 1.2 および 1.5 長い形式のコンテンツの典型的な範囲のようです。

まだ見たことがない方は、 ピエリック・カルベスは素晴らしい 「五分」 タイポグラフィのガイド これらのような簡単に手に入る果物がたくさん詰まっています。

余裕のある設計

不動産が最重要商品である「アバブ ザ フォールド」のデザインに慣れているかもしれません。 これは、ウェブの世界における海辺の物件のようなものです。なぜなら、ヒーロー バナー、行動を促すフレーズ、その他物を売るのに役立つものなど、価値の高いものを詰め込むのに慣れているからです。 アバブ ザ フォールドは、交通量が多く高層ビルが立ち並ぶ密集した都会のダウンタウンによく似ています。

記事が違います。 彼らはあなたが少し伸ばすことを可能にします。 都市開発の類推をもう少し進めたい場合、記事には「少ないほど多い」タイプの設計アプローチに傾倒する面積があります。 それが、文字などの一見小さなデザインの選択が、全体的なエクスペリエンスにとって非常に重要になる理由です。

以下の例をご覧ください。 リンクの下線にはもう少し余裕があります (具体的には、ディセンダーの下に表示されます)。 これは実際にはサイト全体で有効にできるものですが、読みやすさが向上するため、記事ページで特に見栄えがします. これは、余分な呼吸スペースに貢献する一種の微妙なデザインの選択です.

text-underline-position: under; これを機能させる CSS の行です。 当然、 text-decoration 以外に設定する必要があります none (underline この場合）も。

上記の例にも特徴があります text-decoration-thickness、下線 (およびその他の線種) の太さを変更します。 この CSS プロパティを使用して、線の太さをフォントのサイズや太さに一致させることができます。

完全な例を次に示します。

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;
}

しかし、あなたがに到達する前に text-decoration 省略形、Šime Vidas は いくつかの「落とし穴」 それを使用することになると、レビューする価値があります。

コンテンツへの誘導

ドロップキャップ ドキュメントまたはドキュメント セクションの先頭に配置できる定型化された文字です。 それらはかつてラテン語のテキストで使用されていました、しかし今日は主に装飾的な理由で使用されています。

個人的には、ドロップ キャップは可読性を妨げると思います。 ただし、読者をメイン コンテンツに「誘導」するための優れた方法になる可能性があります。 ::first-letter 疑似要素。 がある その他（年上） メソッド コンテンツへのアクセスを維持するために、より多くの HTML と CSS を使用し、ARIA 属性を使用する必要があります。

使い方 ::first-letter、CSS は次のようになります。

/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

使えたらいいですね initial-letter プロパティですが、これを書いている時点ではほとんどサポートされていません。 それがあれば、フォント サイズと行の高さのすべての計算が自動的に計算されます。

CodePen は、数年前にドロップ キャップのスタイリング スキルを披露するよう人々に呼びかけました。 このコレクション.

メインコンテンツへスキップ

スクリーン リーダーを使用すると、ユーザーはメイン コンテンツにスキップできます。 <main> エレメント。 ただし、タブで Web サイトをナビゲートする人は、この恩恵を受けません。 代わりに、「メイン コンテンツにスキップ」アンカー リンクを作成する必要があります。 このリンクは通常非表示ですが、ユーザーが最初のタブを作成すると表示されます (つまり、フォーカス時に表示されます)。

これは次のようになります。

<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>

<!-- target -->
<main class="main">
  <!-- main content -->
</main>

#skip-link {
  position: absolute; /* remove it from the flow */
  transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
  position: unset; /* insert it back into the flow */
  transform: unset; /* move it back onto the screen */
}

.main {
  scroll-margin: 1rem; /* adds breathing room above the scroll target */
}

もちろん、他の方法もあります。 ここでは、スキップ リンクの作成についてさらに詳しく説明します。

シームレスなビジュアル

中のイラストが好きです この記事. 見た目は素晴らしいですが、認知的注意をあまり必要としません。 短い喜びの瞬間を紹介するだけでなく、記事自体にもっと重要なことが書かれていることを示唆しています。 部分的には、これは透明度の使用に帰着しますが、長方形の画像はより多くのネガティブ スペースをキャプチャするため、より多くの注意を必要とします (それが望ましい効果であり、画像がストーリーにとって重要である場合は問題ありません)。

ただし、画像は実際にはまったく透明ではなく、コンテンツと同じ背景色を持つ不透明な JPEG であることを知っておくことが重要です。 透過性をサポートする PNG と比較して、画像のサイズを小さく保つためだと思います。

このように透明な背景を「偽造」することの欠点は、透明な背景をサポートするために追加のトリック (およびメンテナンス) が必要になることです。 ダークモードUI あなたのサイトがたまたまそれを提供している場合。 イラストが非常にフラットでシンプルな場合は、小さくてスケーラブルで、背景に溶け込むことができる SVG が代わりに適している可能性があります。

しかし、ラスター画像を使用することに縛られていて、透明のためにPNGファイルを使用したい場合は、使用することを検討する必要があります. レスポンシブ画像 と loading="lazy" 属性を使用する。 読み込み時間を短縮します。

型とセマンティクスに焦点を当てる

あなたはほとんど何も言わないかもしれません の or コラボレー 最近、誰かがウェブでコンテンツを読んでいます。 ユーザーが RSS フィードで受信したり、電子メールで配信したり、同僚からコピー アンド ペーストされたものを見たり、スクレイピングされたサイトで見つけたり、またはその他の方法で、コンテンツが表示される可能性があります。 異なります あなたが好むより。 あなたが世界で最も豪華な記事だと思うものをデザインしても、ユーザーはまだそうかもしれません。 そのリーダーモードボタンを押してください あなたの失望に。

それで大丈夫です！ コンテンツを見つけやすくすることは、そのデザインと同じくらい重要です。多くのユーザーは、コンテンツを見つける独自の方法と、優れた読書体験を実現するための好みを持っています。

しかし、誰かがリーダー モードを必要とするのには理由があります。 XNUMX つには、「CSS がまったく表示されない」ようなものです。 つまり、 Safariのリーダーモード or ブレイブスピードリーダー、機械学習を使用して記事を検出します。 CSS、JavaScript、記事以外の画像のフェッチや実行がないため、パフォーマンスが向上し、広告や追跡もブロックされます。

この種の 「野獣 ミニマリズム」 スタイルよりも内容に重点を置いています。 だから、あなたは実際に 欲しいです 特にその目的のために、ブラウザーの独自の読書スタイルを採用すること。

これを行う方法は、CSS を使用することではなく、HTML に細心の注意を払うことです。 リーダー モードは、シンプルでセマンティックな記事関連の HTML を使用するマークアップで最適に機能します。 平手打ち以上のことをしなければならない記事を最大限に活用するために記事の周りにタグを付けます。

滑らかさよりも読みやすさを重視した最小限のデザインは、実際にはサイトのデザインで使用するのに適した戦略であることに気付くかもしれません. ロビンの投稿を読むことを強くお勧めします "最小 しっかりした読書体験のためのCSS」.

長編記事まとめ！

Web で長い記事を読むのに役立つと思われる多くのことを共有してきました。 しかし、百聞は一見に如かずということで、これまでに取り上げた内容を紹介する例をまとめました。