【ウェブデザイン戦略】魅力的なビジュアル要素で、わかりやすいタイムラインを作成しよう

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、Share Your Story with These Terrific Timelinesを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,350 views

読了時間 : 約2分57秒

ユーザー層に自分の主張を届けたいとき、山のような文章を差し出してもあまり効果的ではありません。人々は瞬間的に満足できる内容を期待しており、ほとんどの人が長文までたどり着かない場合が多いのです。それより、魅力的なビジュアルを活用し彼らの興味をそそる方法が存在します。

タイムラインは、私たちの提案の中でも人気の高い視覚的要素の一つです。しっかり作動するものを活用をすれば、理解にも困らないインタラクティブでさえある方式で、ストーリーを提供することができます。ユーザーの注目を勝ち取り、その使用体験へと招待してみましょう。

そして、驚くことでもありませんが、CSSやJavaScriptは今まで以上に強力になりつつあり、様々なところでもタイムラインの姿が見られるようになりました。これらの技術的な発展は、よりスムーズな遂行とより魅力的なビジュアルに繋がっていくのです。

この機会を借りて、人々を惹きつけ離さないタイムラインの最も有効的な事例を紹介していきます。楽しんでください！

歴史を焦点に合わせる

コンテンツがヘビーなタイムラインに潜在する落とし穴の一つとして、その内容全てが束ねられてしまうということが挙げられます。一つ一つの箇所へ値すべき注目がいかなくなるのです。この事例ではユニークなアプローチを測り、スクロールしてページのトップに見たいものが来るまで、各書き込みがフェードしています。トップに来ると画像は完全に明確になり、これによって各書き込みが少しでも輝ける工夫がなされています。

投稿を立てる

タイムラインを使えば、年代順やカテゴリー別のコンテンツなどどんなものでも紹介することができるのです。ここでは、この美しい日付順のレイアウトが、ブログ投稿をリスト化するために使われています。形式はシンプルでありついていくのも簡単です。投稿で標準的である垂直のリスト化に、異なった視点を紹介しています。

見識を変える

制限されたスペースにたくさんの情報を詰め込むための、もう一つのユニークな事例を見ていきましょう。この例の素晴らしいところはそのとても多才な能力です。キーボード、ドラッグそしてクリックを使って操作できます。そしてリストをズームして大きくしたり小さくしたりできて、初めの方に後から振り返ることも可能です。美しいだけでなく、ユーザーが好きなように使用できるオプションを提供しています。

扉の後ろを探す

時々、最も興味深い事例は、あなたの想像もつかなかったものではないですか？これまででは、タイムラインが、テキストや画像が線から飛び出るような、線状のものとして見てきました。ここでは、そうではありません。代わりに、背の高く細いパネルの数々が並んでいます。パネルに覆いかぶさると、フルカラーの画像とテキストが姿を現します。単純にHTMLやCSSで作成したものより一層見事なのです。

スクロールしながら学ぶ

スクロール動作を基本としたアニメーションは、最近より有名になりました。そしてベストなタイムラインの例がそれを統合しているのも、これが理由なのです。こちらの、アルバート・アインシュタインの人生の素晴らしい要約は、jQueryのおかげで巧妙なアニメーションを特徴としています。これがユーザー体験をよりインタラクティブにし、コンテンツ上で自然な流れをつくり出しています。

深く掘り下げてみる

このアムステルダムの芸術家を見ていくタイムラインですが、ぱっと見、あまり目に飛び込んでくるものもありません。しかし、芸術家の一つにクリックしてみると、彼らの作品を掲示している別のタイムラインを特集するページが現れます。このタイムラインの形式はとても美しく、全体の見た目を上手く補足しています。

簡潔であるという美しさ

簡潔な解決策に対しては、まだまだ言うべきことがあるのです。結果的に言うと、全てが人々を出し抜く必要はないということです。このVue.jsを基本とした事例は、全くやり過ぎていません。しかし、提供しているのは、リスト化された重要な出来事をインタラクティブに案内してくれる方法なのです。クイックで読みやすく、直感的です。それ以上期待するものはありますか？

チャートのトップ

最後に、もう一つのあまり予期されないタイプの構成を見ていきましょう。この水平線のタイムラインは、チャートやグラフを思い浮かばせます。先ほどのように、デザインがとてもシンプルです。そうは言っても、各書き込みが独自の線上にあるので、一つ一つを見分けるのに苦労するわけではありません。テキストも最小限に制限されており、より深い情報へ導いてくれるハイパーリンクが活用されています。