文章をメインにレイアウトされたWebデザイン事例15選。読まれるポイントも解説

先日お仕事で、Webサイトに小説を載せるというご依頼がありました。最近は活字離れもあり、長い文章はユーザーに読まれないと言われています。そんな中、ユーザーに長文をスムーズに読んでもらえるWebデザインについてまとめてご紹介していこうと思います。

そもそも長い文章は読まれるのか?

2008年と古い調査結果ではありますが、月並みなWebページの場合、平均的アクセス中にユーザーが読むテキストの量は多くても全体の28%にすぎないという分析結果が出たそうです。
テキストを全て読むのではなく、流し読みをして興味のあるところだけ読むなど以下の様な傾向があります。

1. ユーザーはWebページを見ながら、目に入ったキーワードや注目すべき箇所を探す。テキスト全体を読むのではなく、スキャンして必要な情報を取り出す傾向にある。
2. ユーザーはWebページをF字の様な流れで見る傾向があるとされている。先頭のタイトルや見出しを読み、その下にあるテキストの先頭部分を見て、必要な情報を得る傾向にある。
3. ユーザーは写真やイラストなどのビジュアル要素に対して高い関心を示す傾向がある。
4. 要約やリストなど箇条書きを好む傾向にある。簡潔でわかりやすい目次などの情報を設置するのも効果的。

日本語は英語の様に単語の区切りがなく、文字が長く連続して並ぶのでより、読みやすさの工夫が必要になります。

長文が読みやすい。参考にしたいWebデザイン15選

アニメーション+イラスト

すべてのお母さんに、ありがとう。| ポーラ公式 エイジングケアと美白・化粧品

出典:https://www.pola.co.jp/wecaremore/mothersday/  

株式会社寺田ニット | SEAMLESS KNIT FACTORY –

出典:https://terada-knit.co.jp/  

File teacher |後悔しないためのライフシミュレーション

出典:https://www.fileteacher.com/#top  

アニメーション+グラフィック

私たちについて | スタディサプリ BRAND SITE

出典:https://brand.studysapuri.jp/about/  

アニメーション+グラフィック+写真

タイガー・イン・スペースタイガー魔法瓶

出典:https://www.tiger-corporation.com/ja/jpn/feature/space/  

Sense Island -感覚の島- 暗闇の美術島 2022

出典:https://senseisland.com/  

アニメーション+写真+イラスト

Why Häagen-Dazs? 食べたくなる7つの理由|ハーゲンダッツ Häagen-Dazs

出典:https://www.haagen-dazs.co.jp/brand/special/why-haagen-dazs/  

アニメーション+グラフィック+写真+イラスト

本格麦焼酎「隠し蔵」特設サイト|濵田酒造

出典:https://www.hamadasyuzou.co.jp/kakushigura_brand/  

グラフィック+写真+イラスト

ぼくのおじさん|おじさんの知恵袋マガジン|MON ONCLE

出典:https://www.mononcle.jp/  

わたしたちについて | となりのひきだし

出典:https://www.tonahiki.com/f/about-us  

グラフィック+写真

HARKEN

出典:https://harkenic.com/  

WHOSE LEATHER

出典:https://whoseleather.com/  

About | 株式会社 米

出典:https://komeinc.com/about/  

CRISP

出典:https://corp.crisp.co.jp/  

写真

軽井沢 石の教会 内村鑑三記念堂

出典:https://www.stonechurch.jp/  

長文の読ませる、Webデザインのポイント

素敵なサイトを沢山しょうかいさせていたきました。 次に、長文を読みやすくするWebデザインのポイントについてご紹介します。

テキストのレイアウトを工夫する

• 文章を1行に詰め込まない
• 文章の行数が多い場合は、段落を分けて読みやすくする

読みやすいフォントの工夫

• 読みやすいフォントスタイルを選択する
• 小さい文字は読みづらいので、文字を大きめに設定

色使いを工夫する

• コントラストのある色を使用することで、文字がハッキリと見える
• 背景色を明るくすることで、文章が浮き出るように表示される

余白の工夫

• カーニングと行間を調整し適度な余白を設ける
• 段落の上下左右に余白を作ることで視線迷子を防ぐ

目次や見出しの工夫

• 目次や見出しを使用することで、読み手が文章の構成を把握しやすくなる
• 見出しを大きく表示することで、文章の流れを明確にし、読みやすさを向上させる

以上が、長文を読みやすくするWebデザインのポイントです。これらのポイントを意識することで、Webサイトの利用者にとって文章をスムーズに読み進めることができるといった、より良いユーザー体験を提供することができます。

KOHIMOTOでは、届けたい文章やコンテンツを的確に届けられるWebサイト制作のご相談を承っております。どうぞお気軽にご相談ください。