新SHiFT の魅力を再発見！スライドショーをナビゲーションに使おう！

この秋、新しいBiNDupをリリースするに向けて開発現場よりお届けするインタビュー第2弾。
初登場して以来ずっと人気のスライドショー機能「SHiFT」が5年ぶりにどう進化するのか・・

スマホ時代だからこそ新たに提案したいのは、スライドショーをナビゲーションとしても活用するという在り方。
プロジェクトマネージャーの洪泰和に加え、Webデザイン＆UIデザイナーのニタバル、フロントエンドエンジニアの藤澤篤志にも話を聞きました。

スマホ時代にスライドショーが持つ役割とは

「目を引く利点」をナビゲーションとして活かす

僕は一昨年から開発に加わったのであまり知らなかったのですが、SHiFTは5年ぶりのリニューアルなんですよね。

5年前はまだAdobeのFlashも提供が終了しておらず、Web上でコンテンツを動かすことの価値が高かった時期。あれからスマホの閲覧者がPCのそれを超える逆転劇が起き、モバイルファーストの概念が重要視されて表示速度が検索結果ランキングにも関わるとまで言われるようになりました。

そのせいか、最近はビルボードで大きくリッチコンテンツが使われているサイトをあまり見かけなくなりましたね。動画やアニメーションは必然的にリソースを使いますから。

そう変化した中で、SHiFTの役割が大きく変わる必要があったということですね。

とはいっても、ページの中で目を引きたいポイントに使う用途や、限られたエリアで、たくさんの素材を見せられるのは、スライドショーの大きな利点であることは変わりません。
だからこそ、リンクを促したいコンテンツの目を引くナビゲーションという役割が適していると考え、今回の開発のテーマの一つになりました。

ナビゲーションの用途で見る、SHiFTの3つの進化

１．画像の上に文字を重ねてリンクを促す

そこで新SHiFTでは、伝えたい情報に促すナビゲーション機能として強化しました。
まず、スライド1枚1枚の画像の上にそれぞれ違う文字を重ねることができるようになりました。スライドショーにテキストを直接載せられるので、SEO効果も期待できます。

これまでのSHiFTではあくまで画像のキャプションとしてしか文字を入れられず、積極的に読ませるものではなかったですからね。ちなみにブロックの上にブロックを重ねるブロックオンブロック機能も、載せられるテキスト情報やリンクは1つだけで、画像ごとに別々のテキストやリンクを貼ることができませんでした。
今回は新たにタイトルとコメントを組み合わせられるので、おすすめの商品を紹介するバナーのような使い方が可能になり、導線としてかなり使いやすくなると思います。

現在提供中のテンプレートに入れた例。写真の上に任意の文字を、タイトルとコメントに分けて入れられます。

２．スライドを送るページネーションのカスタマイズが可能

さらに、一部のテンプレートでスライドを送るページネーションのデザインや色を選択できるようになり、作り込みが可能になりました。ナビゲーションとして使う場合はページネーションが目立つかどうかも重要なポイントです。自分でコントロールできるのはうれしいですね。

スライドの位置を示すページネーションを表示するかどうかを任意に設定可能。送りボタンも設置できる。

３．ナビゲーションに使える新作テンプレートを追加

ナビゲーションで使うことを想定した新テンプレートも搭載します。メッセージをしっかりと見せることができる「カード」というレイアウトは使いやすいと思います。

写真とテキストが並んだレイアウトの新テンプレート。スマホでの表示も見やすく、豊富な情報量を記載できる。スマホ表示の際はフリックによる画像送りが可能

新SHiFTの操作性と使い勝手を解剖

テンプレート選びを再設計、作り直しに便利なプレビュー機能を搭載

SHiFTは画像を入れるだけでスライドショーが作れるシンプルな操作性が好評で、多くの方にご利用いただいてきました。だからこそ基本操作のわかりやすさはそのままに、インターフェースを刷新しました。

たとえば、テンプレートを選びやすくするために体系的に整理しました。具体的には、これまでは左右のどちらから動き始めるかや背景色が違うというだけで、同じ動きなのにテンプレートが複数分かれていたのをまとめて、テンプレートごとにオプションを設けるような設計に変更しました。

作り途中でもその場で動きが見られるプレビュー機能もお勧めですね。

再生スピードや写真の順番を入れ替えたときなどの微調整が面倒だったので、いちいち保存する必要なくプレビューを見ながらリアルタイムに作業できるようになったのはポイント高いです。

画像を取り込む際の面倒をなくし扱いやすく。細部にこそこだわりを

SHiFTはこれまで、画像を設定後に途中でスライドショーのサイズを変えると、変更前の画像サイズを設定し直す必要があるのが面倒でしたが、スライドショーのサイズを変えても、画像を設定し直す必要がなくなります。

画像を取り扱うエリアが広がり、画像の取り扱いがしやすくなります。

複数の画像をまとめて選択して、削除する操作も加えました。

複数扱えるのは便利ですが、画像の設定しすぎには要注意ですね。

そうですね。カルーセルやタイルのテンプレートは画像が多くてもいいですが、大きく見せるスライドショーは5枚以内に収めるのがベストです。ページ内にいくつもSHiFTを入れるのも要注意です。1ページに1つなど、本当に見せたいエリアに活用するのがおすすめですよ。ページの表示速度は今、SEOの観点で軽視できませんから。

コメントの表示方法や背景色をオプションで自由にカスタマイズ

SHiFTの基本的な操作は、写真とテンプレートを選んでオプションで調整を行い、プレビューで確認してイメージと合っていたら完了なので、これまで通りの直感的な操作で作成できます。一部テンプレートのコメント部分は、Dressでデザインを少し変更することも可能です。

オプションは、さきほど出たページネーションの設定のほか、背景があるテンプレートの場合は背景色を選択する設定エリアなど、テンプレートによって表示内容が異なります。これらも飾りとしてのスライドショーから、情報を扱うスライドショーに進化させるための拡張です。

オプションでは、画像サイズやタイトルとコメントの表示方法などをカスタマイズできます

PCとスマホの表示サイズを指定するエリアもありますが、スマホ表示のレイアウトなどもテンプレートごとにあらかじめ最適なデザインが設定されているので、基本的にはこれまで通りおまかせで大丈夫です。

スマホ表示時の見え方を確認しながらサイズの設定が可能

今の時代に合う、スライドショーの新テンプレートへ刷新！

シンプルに徹することで、デザインの古さを解消

テンプレートデザイン採用のポイントも、まずWebサイトの中で使いやすいかどうかを１番に考えて選びました。次にインパクト重視で使えそうなデザイン。最後に背景スライドショーのラインアップを増やすために選んだものが搭載されます。

開発者としては、SHiFTはBiNDから独立したツールなのでデザイナーのリクエストを割と実現しやすかったですね。網羅できたと思います。

デザインに古さを感じるのは細部なので、すべてのテンプレートを見直して、細かい部分までデザインを調整しました。シンプルなものが多いのでどんなWebサイトでも活躍するかと。

上記にある従来のSHiFTに搭載されていた、いかにもタブというデザインを廃止。

新SHiFTで写真を切り替えたいときは、シンプルなテキストインデックスが活躍。

Webサイトの中で使いやすいかは、ナビゲーションとして使えるかどうかにも関係する話で、それは結局シンプルなものっていうことなんですよね。

SHiFTの未来

モチベーションが上がるデザインを追加していきたい

新SHiFTは写真をスライドさせる機能としてはほぼ完成に近い形になったんじゃないかと思います。

次の発展があるとするなら、スライドショーという枠を飛び越える進化の可能性でしょうか。

フロントエンドエンジニアとしては、今後もっと挑戦したいこととかある？

そうですね。笑
今回はナビゲーションという実用的な一つの進化を遂げましたが、フロントエンドとしてはやっぱりかっこいいインタラクティブなデザインに取り組むのはモチベーションが上がるので、新しい技術を取り入れた、見る人を驚かすような表現も模索していきたいですね。

この秋から、BiNDupそのもののアップデートのタイミングも年1回じゃなくなるから、エンジニアやデザイナーとしてやりたいことも気軽に取り組めるといいですね。

アップデートでSHiFTテンプレートが増えていくという展開もありえます。

ユーザーの皆さんが、新しいSHiFTをどう活用していくか、開発クルーも楽しみにしています！！

この秋、登場！新BiNDupの記事を読む
次回は、メニューエリアの表現力をアップする「メガメニュー」の開発秘話をインタビュー！

※新BiNDupは開発中のため、内容は変更となる可能性があります。