年表や沿革など タイムラインが簡単に実装できる便利なライブラリ16選まとめ

         

Web制作

年表や沿革など タイムラインが簡単に実装できる便利なライブラリ16選まとめ

2018年10月21日 12:00 2022年01月13日

年表や沿革など タイムラインが簡単に実装できる便利なライブラリ16選まとめ

こんにちは👩

タイ社員旅行記をブログに書き起こそうとするも内容が多すぎて挫折している社員Aです。

タイで撮った写真は全部で360枚を超えていたので、どれをセレクトするかも迷ってしまっています(笑)

さて、今回は「年表や沿革などのタイムラインが簡単に実装できる便利なライブラリ」をまとめていきたいと思います。

私が最近コーディングした案件でこのタイムライン表示が必要だったので、実際に使ったものと、今後使ってみたいものをまとめました。

タイムラインコンテンツは1から作ると大変なので、ライブラリを使ってカスタマイズすると時短にもなります。



 

年表や沿革で使えるタイムラインコンテンツ

タイムラインは年表や沿革などでよく使われているのを見かけますが、フローとしても取り入れると非常にわかりやすいです。

私がデザインした案件では、税理士事務所さんのサービスで「お問い合わせ〜起業」までのフローとしてタイムラインを取り入れました。

お客様のお問い合わせから依頼まで、事務所側とお客様側で必要な作業などが時系列で見られてわかりやすいからです。

実際このタイムラインは見やすいのですが、実装となるとコーダーの頭を悩ませますよね。

PC表示で見やすいようにコーディングしても、スマホはどうやって表示させようと考えるのが大変だったりします。

そんな時に今回ご紹介するようなライブラリやフレームワークがあればタイムラインのベースはできているので、デザインに合わせてカスタマイズしていくことで簡単に実装することができます。

 

タイムラインコンテンツが実装できるライブラリ

ここからは、実際にタイムラインコンテンツが簡単に実装できるライブラリを紹介します。

 

Vertical Timeline

デモを見ると分かるのですが、アニメーションもついています。左右からコンテンツが表示されるような形のタイムラインです。

また、スマホ版の表示も見やすいです。公式サイトではカスタマイズの方法も詳しく紹介されているので、とにかく簡単にタイムラインを実装したいときにおすすめです。

 

B1nj Timeline

凝ったデザインのものではなく、シンプルなタイムラインを導入したいときにおすすめなのが「B1nj Timeline」です。

見た目はシンプルですが、コンテンツ自体をアコーディオンで開閉することもできます。

 

CSS3 Timeline

CSSのみを使って作られたタイムラインです。

タイトルをクリックすると吹き出しが表示され、詳細が見られるような形になっています。

コンテンツ量が多くても、すっきり見やすいタイムラインが実装できます。

 

Timeline Created With CSS Grid

CSSグリッドで作成されたタイムラインです。

スマホ表示になった時も見やすいし、コンテンツの追加も簡単に出来るのが良いなと思いました。



Scroll Timeline

左側の年数を押すとそれに合わせて右側のコンテンツが変化していきます。

また、クリックだけでなく、スクロールでも年数の部分の色が変化していきます。

企業の沿革などにぴったりのデザインだと思います。

 

timeline

実際にスクロールしていくと分かるのですが、これはすごいです。(笑)

時系列とともに背景画像も変化しています。

一般的なタイムラインとデザインに差をつけたい時におすすめです。

 

Flexbox Timeline Layout

Flexboxを使って作られたタイムラインです。

最初から写真を入れるスペースまで作られているので、色などを好みのものに変えていけばすぐに使えそうですね。

 

Narrow Vertical Timelinr

また一味違ったタイムラインです。

左側の年数を押すと、右側のコンテンツが切り替わるタイプのタイムラインで、上下の矢印アイコンでも前後に移動できます。

 

Responsive Vertical Timeline

こちらは私が案件で実際に取り入れたタイムラインです。

CSSのみで実装されているので、カスタマイズも容易で割と短時間でデザイン通りに組み込むことが出来ました。

また、左右にコンテンツが入っていますが、片方だけ入れられることもできるので柔軟性が高いなと思いました。

 

Responsive HTML Timeline

非常にシンプルなタイムラインでCSSだけで実装されているので、カスタマイズ性も抜群です。

レスポンシブにも対応しています。



Responsive slider timeline with Swiper

年数もしくは矢印アイコンを押すとフル画面で変動していくタイプのタイムラインです。

デザイン性を出したいときや、タイムラインをメインに打ち出したい時などにおすすめです。

 

comments & feeadbacks & history timeline

チャット風になっているタイプのタイムラインです。

更新履歴やお知らせなどでも使えそうですね。

 

Timeline scribble

一見シンプルですが、スクロールで可視範囲に入ると◆の部分が動いたり、年数の部分の背景色が変わったりとアニメーションも入っているタイプのタイムラインです。

 

responsive timeline v3

こちらは水平タイプのタイムラインです。

●部分をクリックするとそれに沿って下の内容が切り替わるようになっています。

 

Building a Horizontal Timeline With CSS and JavaScript

こちらも水平タイプのタイムラインですが、上下にコンテンツを入れられることが出来ます。

また、下部の矢印を押すことでスクロールされていき、年表が新しい方へ移動していきます。

 

4 Panel Timeline CSS

パネルを使ったおしゃれなタイムラインです。

マウスオンした年数の背景画像が鮮明になり、コンテンツが表示されます。

他のタイムラインと差をつけたいときやデザイン性を求めたい時に使えそうです。

 

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺