スライドショーで実装されているページネーションのデザインショーケース

スライドショーで実装されているページネーションのデザインショーケース

デザイン備忘録。
Webサイトでよく見かけるコンテンツのひとつにスライドショーがありますが、実装している多くのサイトでスライド切り替えができるページネーションが設置されています。
サイトによってはこのページネーションの部分もしっかりとデザインしているところもあるので、同じくこういった細かいところまでこだわりたい時に参考になりそうなページネーションデザインをタイプ別にまとめてみました。
デザインショーケースとは言っていますが、中には少しアニメーションを加えているのもあるので、見栄えだけでなく動きの面でも参考になるサイトが幾つかあります。

スライドショーで実装されているページネーションのデザインショーケース 目次

  1. サークル
  2. スクエア(正方形)
  3. レクタングル(矩形)
  4. サムネイル・ロゴ・アイコン
  5. ユニーク

1. サークル

見かけることが多いと思うサークルタイプのページネーションを用いているサイトです。
スライダーやカルーセルといったjQueryプラグインなどでも、予め設定されているスタイルでこのサークルタイプを用いているものが多いですね。
ほとんどがシンプルで同じような見栄えではありますが、中には周りのデザインに合わせたり、少し動きをつけたりしているものもあります。

Bulbul Watches

Bulbul Watches

Skargaarden

Skargaarden

クロノバデザイン株式会社

クロノバデザイン株式会社

SHIROYAMA WEDDING

SHIROYAMA WEDDING

ふくはだ皮ふ科クリニック

ふくはだ皮ふ科クリニック

TRIP(トリップ)

TRIP(トリップ)

見た目は普通のサークルですが、それぞれカラーを変更しています。

Georg Jensen (Japan)

Georg Jensen (Japan)

こちらはサークルと次のスライドまでの時間がわかるタイマー機能を組み合わせています。

Lexus International, New Luxury Lexus Cars: Amazing In Motion

Lexus International, New Luxury Lexus Cars: Amazing In Motion

パッと見は普通のサークルデザインですが、スライド切り替え時にサークルが回転するアニメーションがついています。

スキヤキ

スキヤキ

ちょっとわかりにくいかもしれませんが、周りのデザインテイストに併せて手書き風のサークルにしています。

目次へ

2. スクエア(正方形)

サークルタイプに比べると少ないですが、こちらも割とよく見かけると思うスクエア(正方形)タイプのページネーションを用いているサイトです。
そのまま配置するだけでなく、「医療法人川平デンタルクリニック」のように少し角丸にしているデザインもたまに見かけます。

タラントン公式サイト

タラントン公式サイト

Fukuoka Facts

Fukuoka Facts

医療法人川平デンタルクリニック

医療法人川平デンタルクリニック

目次へ

3. レクタングル(矩形)

レクタングル(矩形)タイプのページネーションで、「LEXUS」の場合はスライド切り替え時にカレント表示(現在地表示)がアニメーションするようになっており、「ソフトバンク」の場合は次のスライドに切り替わるまでの時間がわかるタイマー表示を組み合わせています。

ノリタケ食器オフィシャルサイト

ノリタケ食器オフィシャルサイト

LEXUS

LEXUS

ソフトバンク

ソフトバンク

目次へ

4. サムネイル・ロゴ・アイコン

スライドイメージを縮小したサムネイル画像を配置したり、スライドの内容に関連するロゴやアイコンをページネーションに用いてるサイトです。
デザインによってはスライドの枚数増える度にこの部分のデザインも作成するという手間が増えますが、特にスライドの枚数が沢山あるような時には、何枚目がどのようなスライドなのかがわかりやすくなりますね。

ACTUS online (アクタス公式通販)

ACTUS online (アクタス公式通販)

家具メーカーの株式会社一生紀

家具メーカーの株式会社一生紀

洋服の青山

洋服の青山

ダイハツ工業株式会社

ダイハツ工業株式会社

Supersteil

Supersteil

目次へ

5. ユニーク

以下はいずれもちょっとユニークなデザインのページネーションです。

100 Tokyo

100 Tokyo

それぞれで異なる形状のアイコンを使用しているのですが、面白いのが毎回表示される形状が変わるランダム方式となっています。

二風谷アイヌ匠の道

二風谷アイヌ匠の道

こちらはダイヤタイプのデザイン。

Google Ventures

Google Ventures

こちらはペンタゴンタイプのデザインで、更にそれぞれに少し傾きをつけています。

東京スカイツリー TOKYO SKYTREE

東京スカイツリー TOKYO SKYTREE

マスコットキャラクターでも使用されている星の形を採用しています。

京・清水 西川貞三郎商店(1917年創業)

京・清水 西川貞三郎商店(1917年創業)

こちらのサイトではアイコンではなく、数字を用いています。

山下フルーツ農園

山下フルーツ農園

それぞれ異なるデザインを使用しているのに加え、ホバー時にアニメーションをつけています。

目次へ

Close the search window,
please press close button or esc key.