名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

時間軸に沿った一日の流れを示した予定表、年間・月間・週間のスケジュール、長期間の歴史を示した年表などの時系列の情報をWEBデザインで表現する場合があります。デザインの方法は実に多様で、タイムラインのように縦軸に表した形やカレンダーのような表形式、シンプルなリスト形式などがあります。表現したいのが短期・中期・長期のどれかやテキスト量によってどの形式でデザインするべきかが左右されます。
今回はカレンダーやタイムラインなど時系列の情報をホームページに取り入れているWEBデザインをいくつか紹介します。WEBデザイナーの方はぜひ参考にしてみてください。

サービスの利用の流れを線で表現

サービスの利用の流れを紹介する時によくみられるのが線を使って時系列を表現しているデザインです。このデザインは、スクロールに伴って線が伸びていくアニメーションもよく使われます。縦に長いデザインになるため、ユーザーは自身がサービスを利用するイメージを順番に追うことができます。また、ワンビューに情報を収めるようなデザインとは異なり細かなテキストなどを入れ込むことができるのもメリットの一つといえるでしょう。

入居の流れ｜介護の窓口「ケアまど」
介護施設や老人ホームの紹介を行っている「ケアまど」のホームページでは、入居までの流れを動く線のアニメーションを使って表現している。視覚的に流れがわかる上、テキストや画像から詳しい内容が分かるデザインになっている。

線を軸にして左右にコンテンツを散らす

中央に線を配置し左右に時間やテキスト、画像を散らしたデザインもよく見られます。このデザインは「10年の歴史を振り返る」などのコンテンツページで多いデザインです。こちらもスクロールに伴って線が伸びるアニメーションと相性がいいです。時系列が最もわかりやすい上、掲載できる情報も多いので、コンテンツの情報量が多い場合に適しています。テキストだけでは単調で、面白味のないデザインになってしまうため、適宜画像やイラストなどを含めるとよいでしょう。

History｜フジドリームエアラインズ 10周年記念特別サイト
こちらはフジドリームエアラインズの10年の歴史を振り返っている周年記念サイト。中央の線を軸にして左右にコンテンツを散らしている。スクロールするにつれ時代が進んでいくため、より深い没入感が生まれる。

スライダーを使って時間軸を表現

画像などのコンテンツを横にスクロールできるスライダーを使って表現したデザインです。トップページのように多くの情報が掲載されるようなボリュームの多いページで年表などを紹介したい時に使われます。左から右に向かって順に歴史を振り返ることができ、年表をじっくりと見せたい時に適したデザインです。また視覚的に動きを出すことができるため、WEBデザインに動きをつけることができるのもメリットとして挙げられます。ただし、ユーザーが情報を見逃す可能性もあるためしっかりと見せたいコンテンツが含まれている場合は注意が必要です。

Philduct Inc. | 株式会社フィルダクト
スライダーを使って時間の流れを表現しているホームページ。スライダーにすることで長くなってしまいがちな歴史をコンパクトにまとめている。各年代にマウスオーバーすることで画像が表示される動きを実装しているのもポイント。

表形式でコンパクトに分かりやすく

表形式のコンパクトなデザインです。イベントやフェスなどのスケジュールでよく使われるデザインで、1日の流れを表現するのに適しています。テキストや画像などを入れるとボリュームが多くごちゃごちゃとした印象になってしまうため、このデザインを使用する際は時間と見出し、概要のテキストを入れるだけに留めておきましょう。イベントのホームページであれば、紙に印刷して持ち歩けるなど、紙とも親和性が高いデザインです。

WIRED CONFERENCE 2022 「FUTURES/REALITIES」開催 | WIRED.j
タイムテーブルを表形式で表現しているホームページ。時間とタイトル、2〜３行程度の文章をまとめたシンプルな形はイベントやフェスなどでよく使われるデザイン。

リスト形式でシンプルに

リスト形式に時間軸を表現したデザインです。日付順にリストを並べることで情報をすっきりと分かりやすく整理することができます。日付とテキストのみの情報がほとんどなので一覧性が非常に高く、多くの情報から素早く目的の情報を見つけることができます。色分けやアイコンなどを使うことで、限られたスペース内でより多くの情報をユーザーに伝えることができます。画像やイラストなどを入れてしまうと見づらくなってしまう場合があるため、できる限りテキストだけのシンプルな情報にとどめておきましょう。

LIVE | BLUE NOTE PLACE
ライブの予定をリスト形式でまとめているホームページ。PCで閲覧する場合はボタンでカレンダー形式と切り替えることもでき、ユーザーの使いやすい形で閲覧することができる。

カレンダー形式で日付や曜日を分かりやすく

カレンダーのような表組みは曜日や日付が分かりやすく、ユーザーの予定と照らし合わせやすいデザインです。ほとんど毎日イベントがある場合におすすめのデザインです。ただし、カレンダー形式で情報をまとめる場合はスマートフォンの画面サイズで表が小さくなってしまうため注意が必要です。スマートフォンの場合はリスト形式にまとめるなどで、見やすくまとめましょう。

営業時間・イベントカレンダー｜名古屋港水族館ホームページ
名古屋港水族館のホームページでは営業時間をカレンダー形式でまとめている。それぞれの日付をクリックすることでその日の詳細なカレンダーを見ることもできる。

追従の画像とともに時間軸を表現

サービスの利用の流れを表現する場合には、追従の画像を実装し、流れの一つ一つでイメージが切り替わるデザインもおすすめです。ユーザーは写真などのビジュアルを通して実際にサービスを利用するイメージを捉えることができ、ユーザーエクスペリエンスの向上を期待できます。ただし、適切な画像・テキストのレイアウトができていないと逆に時間軸が分かりづらくなってしまう場合があるため注意が必要です。

施工の流れ｜plus motif｜愛知県名古屋市でホームシアターを販売・施工
こちらのホームページは左に追従するビジュアルイメージとスクロールで切り替わるテキストでサービスの利用の流れを表現している。サービスがイメージしづらい場合などにもおすすめのデザイン。

今回のまとめ

今回のコラムでは時系列の情報をデザインしているWEBデザインアイデアをいくつか紹介しました。情報の種類によって適しているデザインの方法は異なるので、イベントサイトや周年サイト、サービス利用の流れをデザインする際はぜひ今回のコラムを参考にしてみてください。