年表やSNSのデザインの参考に!タイムラインのサンプル10例

サリー


年表やSNSのデザインの参考に!タイムラインのサンプル10例

こんにちは、デザイナーのサリーです。
今回は「タイムライン」のサンプルを10例ほど紹介していきます。

たとえばLIGの沿革ページもSNSのタイムラインっぽいデザインになっているように、沿革や実績をタイムラインで見せたいという要望はときどきあるので、デザインの際の参考になればと思います。

それでは、はじめます。

さまざまなタイムライン10例

1. Vertical Timeline

Vertical Timeline

レスポンシブ対応のタイムライン。
JSも使用していて、スクロールでコンテンツが“びよよん”と気持ちいい動きで出現します。
中央のカテゴリーのアイコンがアクセントになっていて、かわいいですね。

2. VERTICAL TIMELINE

VERTICAL TIMELINE

「Codrops」のベーシックなプラグインやレイアウトのコレクション、「BLUEPRINTS」にカテゴライズされているタイムラインです。
レスポンシブで動きはなくシンプルですが、だからこそいろいろと応用ができそうなデザインです。

3. RESPONSIVE CSS TIMELINE WITH 3D EFFECT

RESPONSIVE CSS TIMELINE WITH 3D EFFECT

こちらのタイムラインも「Codrops」からで、レスポンシブです。
スターウォーズのキャラクターが会話しているデモが楽しいですね。
チェックをすることでタイトル以下の本文が“ぼわん”と出てきますが、JSは使用しておらず、inputのcheckboxと疑似クラスの「:checked」を使ってCSS3で表現されています。

4. CSS3 TIMELINE

CSS3 TIMELINE

フラットでとてもシンプルなレスポンシブのタイムライン。
こちらも「RESPONSIVE CSS TIMELINE WITH 3D EFFECT」と同じく、クリックすることで本文が現れる仕様で、疑似クラス「:checked」を使用しています。

5. Design and Build a Responsive Timeline Portfolio Page

Design and Build a Responsive Timeline Portfolio Page

こちらではPhotoshopでのデザインからSassを使用してのコーディングまで、レスポンシブのタイムラインつきプロフィールページを作るための丁寧なチュートリアルを見ることができます。(英文ですが)
デザイン編・コーディング編・仕上げ編の全3編で、最後は自動読み込みの方法まで丁寧に書かれているので、全編通して作ってみたらかなり勉強になりそうです!
完成したDemoは右サイドバーの「View Online Demo」から見ることができます。

6. Pure CSS Timeline

Pure CSS Timeline

帯タイプの簡単なタイムライン。
期間もわかるようにしたいときはこちらが参考になりますね。

7. Dark Responsive Timeline with Bootstrap

Dark Responsive Timeline with Bootstrap

Bootstrapを使用した、レスポンシブのタイムライン。
スタンダードな形です。

8. Bootstrap Timeline

Bootstrap Timeline

こちらもBootstrapを使用したタイムライン。
デザインは一番はじめに紹介した「Vertical Timeline」に似ています。
ただしこちらはレスポンシブ対応ではないのでご注意を。

9. Pure CSS Timeline

Pure CSS Timeline

1年ごとの切り替わりがわかりやすい、レスポンシブのタイムラインです。

10. Timeline JS

Timeline JS

こちらはJSのプラグインです。
横スクロール型で、上のコンテンツと下の年表が連動しています。
下の年表のクリックでも左右の矢印でも移動ができる上に、年表の目盛りの大きさを変えることも可能という作り込まれたプラグインです。

まとめ

同じ「タイムライン」というカテゴリーでも、さまざまなデザインがありました。
CSS3と擬似クラス:checkedを使うことで、JSなしでも簡単な動きのついたタイムラインが作れるんですね〜!
コーディング後のサンプルだと、レスポンシブの動きも参考になっていいですね。
勉強になりました。

サリー
この記事を書いた人
サリー

デザイナー

関連記事