Web カルーセルパネルとは？スライドUIデザインの注意するポイント | デジマースブログ
■カルーセルパネルとは？
カルーセル[carousel]パネルとは、
複数画像を左右にスライドさせることで表示させる展開(回転)構造を持ったWeb/UIコンポーネントです。
カルーセルパネルはナレッジと予見が必要な敷居の高い機能であった為、PC/スマフォでの使用には賛否がありました。
特に最終スライドまでの認知は、構造上少なくなっていく傾向は止むを得ません。
実装は「jQuery」で、Webデザイナーでも簡単に組み込めることから広く利用されておりますが、
理想のカルーセルパネルソースに出会えず、適切に運用されていない状況もあるのではないでしょうか。
今回はそんなカルーセルパネルを有効活用するためのポイントを紹介致します。
■使いやすさのポイント
単純に単体静止パネルとして素通りされてしまうのが一番の問題なので、気付きのアピールが必要です。
1. ちょい見せ
「単体パネル」ではなく「複数パネル」であることを認識させる表現にする。
2. 手動+時間での切り替え
停止したままではなく、一定時間経過で自動的に動かすことで複数枚を認識させる
3. 全体数の表示
全スライド数を認識させる
4. ポジション
現在のスライドの表示順番を認識させる
5. ループ
最終スライドから先頭へ戻る（ループする）ことを視覚的に伝え、最初のスライドに手早く戻れることを認識させる。
以上に上げたポイントが一つでも十分でない場合、格納されたスライドの全てを認識させるのは難しくなります。
■カルーセルパネルの動きをプロトタイピング
「jQuery」などオープンソースから理想の表現が出来ているカルーセルパネルが見つかれば話は終わってしまいますが、探すにも時間がかかるのではないでしょうか。
それでは、カルーセルパネルの内容や動きが確認できるプロトタイピングして具現化してみます。
デザインも出来て、JavaScriptが出来るWebデザイナーなら問題ないのですが、壁がとても高いと思われます。
そんなプログラムに精通していないデザイナーでも作れるツールが、過去の記事紹介している「Adobe Animate CC」です。
グラフィックUIの操作で作れるためデザイナーに相性が良く、
ある程度のJavaScript命令文を項目を選択するだけで記述出来、厳密に構文を覚える必要がありません。
「再生」「停止」「任意のポイントに戻る」「条件分岐」「繰り返し」
以上を組み合わせるだけでも、
プログラマーやプロジェクトメンバーに動きを確認してもらえるプロトタイプを作ることが出来ます。
■早速作る
まずは基本的なレイアウトに「ちょい見せ」搭載したプロトタイプです。
クリックでしか動作が出来ておりませんが、回転してグルグルと回るカルーセルパネル本来の動きが確認できるのではないでしょうか。
■プロトタイプならではのバリエーション
追加で2種類のデザイン案も作ってみました。
クリック/タッチで動かせます↓動きの想像が出来、ついつい回してしまいたくなる表現なら有効です。
クリック/タッチで動かせます↓■プロトタイプならではのバリエーション
追加で2種類のデザイン案も作ってみました。
動きの想像が出来、ついつい回してしまいたくなる表現なら有効です。
■最後に
いかがでしたでしょうか。
オペレーションソフトやブラウザ速度の向上した現在では、多くの表現がWeb上で可能となっております。
Webデザイナーに求められるスキルも必然と増え、インタラクティブな動的コンテンツが求められてきていると感じています。
それでは次回も、サービスUX設計に関係した話題をします。
以上、デザインに関わっているデジマースのネモトでした。
他の記事をさがす ⇒ 記事一覧へ
