MENU
CLOSE
デザイン Edit : 2023.03.10 Update : 2024.11.07
文章をメインにレイアウトされたWebデザイン事例15選。動画で読まれるポイントも解説

文章をメインにレイアウトされた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

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

ぼくのおじさん|おじさんの知恵袋マガジン|MON ONCLE
レトロな雰囲気のWebマガジン。親しみを感じるイラストとおしゃれな手描き風のグラフィック、カラーをうまく活用し目新しい独自の世界観を構築しています。グラフィックの配置と色使い、また特に「白」に使い方がとても参考になります。
出典:https://www.mononcle.jp/
 

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

わたしたちについて | となりのひきだし
グラフィックとカラーの使い方でテキストが読みやすく配置されている、工場のサイトのイメージを良い意味で壊してしているデザイン。ノートや文房具が入った机の引き出しの中というイメージをサイトデザインにうまく落とし込んでいます。
出典:https://www.tonahiki.com/f/about-us
 

グラフィック+写真編

HARKEN

HARKEN
横スクロールデザインで、お洒落なカタログをみているかのよう。フォントや矢印などのグラフィックをうまく活用し、テキストもデザインの一部として溶け込んでいます。 出典:https://harkenic.com/
 

WHOSE LEATHER

WHOSE LEATHER
ポップなカラーでカテゴリー化したデザイン。おしゃれなフォントから生み出される余白で、長いテキストも読みやすい。
出典:https://whoseleather.com/
 

About | 株式会社 米

About | 株式会社 米
フォントの種類でテキストの読みやすさの違いがよくわかるサイト。デザインとしてのテキストと、読んでもらうためのテキストで。フォントを使い分けています。
出典:https://komeinc.com/about/
 

CRISP

CRISP
大胆にテキストを大きく配置したデザイン。これって結構勇気がいると思います。大胆かつシンプル、企業の意気込みが文章で強く伝わってくるサイトです。
出典:https://corp.crisp.co.jp/

写真編

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

軽井沢 石の教会 内村鑑三記念堂
美しい写真と絶妙なテキストの配置で詩集のように綺麗なサイト。テキストの配置が絶妙です。
出典:https://www.stonechurch.jp/
 

長文の読ませる、レイアウトのポイント

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

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

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

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

  • 適切なフォント・太さ・大きさを選択する
  • 小さい文字は読みづらいので、大きめに設定

色使いを工夫する

  • コントラストのある配色を使用することで、文字をハッキリと見せる
  • 文字色は濃い色を利用する

余白の工夫

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

目次や見出しの工夫

  • 目次や見出しを使用することで、文章の構成を把握しやすくする
  • 見出しと本文でサイズの差をつけることで、文章の流れを明確にすることで読みやすさを向上できる

装飾・動きの工夫

  • イラストや写真などの装飾でテンポを付ける
  • 動きは目線に合わせて滑らかな動きを意識する
  • 文章の背景の装飾で背景を付ける

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

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

KOHIMOTO LABO

WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。