CSS/JSで作る”読ませる会社沿革ページ”デザイン事例7選。時の流れをインタラクティブに

長い文章のみで紹介された会社沿革ページやバイオグラフィーは、とっつきにくい印象がありますよね。

Webデザインにおいて、伝えたいことを長い文章だけで表現するのは得策ではありません。文章と画像を組み合わせて、ユーザーが飽きないようにする必要があります。

今回はCSSとJavaScriptを使った、思わず読み進めてしまうインタラクティブな会社沿革ページのデザイン事例を9つご紹介します。会社沿革ページや、バイオグラフィーの制作を考えている方はぜひ参考にしてください。

1. 視線を上手く誘導した会社沿革ページ

会社沿革ページは、各エントリーごとに同じ形式でつらつらと書いてしまうことがよくあります。しかしそれでは、適切に視線を誘導するのが難しいでしょう。なにより、読んでいて飽きてしまいます。

この例ではフェードイン効果を使って、視線を適切に誘導しています。ビューポートの一番上にくると画像がはっきりと見える仕組みになっており、ユーザーは自然とエントリーごとに目を留められます。

See the Pen timeline by Stefan Kyurkchiev (@stefan-kyurkchiev) on CodePen.

2. ブログ風の会社沿革ページ

会社沿革ページは多くの場合、年代や分類によってコンテンツを分けて表示されています。その構造は、実はブログとよく似ています。

以下の事例は、ブログ風の会社沿革ページの事例です。シンプルでわかりやすいフォーマットと、ユニークなデザインが魅力的ですね。

See the Pen Posts Timeline by Tracy (@Tracy_Tung) on CodePen.

3. 機能満載のスライダーを用いた会社沿革ページ

限られたスペースで会社沿革を伝えたいなら、この事例が参考になるはず。

画像とテキストで構成されたスライダーは、クリック、ドラッグ、キーボードでの操作が可能です。拡大縮小したり、最初の項目まで戻す機能も搭載しています。

デザインのよさだけでなく、操作方法についてユーザーに複数の選択肢を与えているところもお手本にしたいですね。

See the Pen Centennial Timeline by Sean (@sgroff04) on CodePen.

4. ずらっと並ぶ細長いパネルを用いた会社沿革ページ

会社沿革ページと聞いて、この事例のようなデザインを思い浮かべる人は少ないでしょう。

細長いパネルが横に並んでおり、カーソルを合わせるとフルカラーの画像とテキストが表示されます。HTMLとCSSのみで作られているところもポイントです。

See the Pen WIE_ Box Slider (4 Panel Timeline CSS) by Alejandro Santacroce (@elaleph23) on CodePen.

5. スクロールによるアニメーション効果を取り入れた会社沿革ページ

スクロールを前提としたアニメーションは、近年人気を集めています。

この事例では、jQueryによる滑らかで自然なアニメーションが特徴です。アニメーションはインタラクティブさを補強することにも役立っています。

See the Pen jQuery Scrollable timeline (Responsive design) by Stefan Tudoran (@tns301) on CodePen.

6. シンプルさが光るインタラクティブな会社沿革ページ

Vue.jsを使った、インタラクティブな会社沿革ページ。

直感的で読みやすく、シンプルでありながら必要なものはすべて備えています。

See the Pen Horizontal Timeline by Adhitama Fikri (@adhitamafikri) on CodePen.

7. グラフのようなタイムライン

最後にご紹介するのは、チャートやグラフを彷彿させる横長の会社沿革ページです。

とてもシンプルで可読性が高く、またリンクから詳細情報にアクセスできます。

See the Pen Horizontal Life Timeline by Milan Milošev (@MilanMilosev) on CodePen.

おわりに

今回ご紹介した7つのコードスニペットからもわかるように、会社沿革ページのデザインはさまざまです。

ミニマルなデザインから、アニメーションがついたインタラクティブなデザインまで、幅広い用途に活用できます。ぜひ今回の記事を参考に、会社沿革ページのWebデザインを考えてみてください。

（原文：Eric Karkovack　翻訳：Nakajima Asuka）