WEBデザインとグラフィックの総合情報サイト[エムディエヌ・デザイン・インタラクティブ]

  • このエントリーをはてなブックマークに追加
  • チェック
  • Clip to Evernote

クラウドでWebサイトがサクサクつくれる BIND Cloudの便利な機能15選

リッチインターフェイス編

インパクトある画像スライダーも手軽に実装!

ブランディングを意識したトップページデザインにぜひ利用したいのが、スライドショーだ。大きなイメージ写真をスライドショーとして掲載することで、サイトコンセプトを効果的に表現できる。ただ、スライドショーといえばjQueryプラグインを使うのが定番で、設定などはスクリプトで記述しなくてはならないこともあり、苦手意識のあるデザイナーも多いだろう。BiNDクラウドにはスライドショーを設定画面から選ぶだけで手軽に実装できる「SHiFT」が付属している。シンプルなスライダーから、3Dスライスキューブ、モザイクタイルなど、いろいろと選ぶことができる【13】。特に写真をじわ~っとズームさせるKen Burnsが利用できるのは魅力的だ【14】。各モーションのスピード調整は1/1000単位で細かく調整できるため、Webサイトの雰囲気に合わせたモーションデザインが可能。またスライドショーは、コンテンツエリアだけでなく、背景全面にも設置することができるため、よりダイナミックな見せ方もできる。

写真13
写真14

さまざまに利用できるギャラリー!

効果的なスライドショーを手軽に実装できるSHiFTでは、切り替わる画像ごとのサムネイルを表示し、オートスライドだけでなく、クリックして画像を切り替えることのできるサムネイルインデックスつきギャラリーも作成できてしまう【15】。このギャラリーも、左右にインデックスを配置できるシンプルなタイプのほか、視差効果を利用してより効果的なプレゼンが可能なパララックスタイプを選ぶことが可能。オススメ商品のカタログやピックアップなどにも効果的に活用できる。

写真15

美しいエフェクトのかかったメニューも簡単に!

いまどきのWebデザインでは、ナビゲーションにも効果的なモーションを付けるのがあたりまえ。メニューなどのナビゲーションは、ドロップダウンリスト化することで、余計な場所を取ることなく、ユーザビリティも高いものとなる。BiNDクラウドでは、ブロックエディタ画面でリストを挿入する際、「モーションメニュー」という機能を選ぶことが可能だ。モーションメニューではドロップダウン、ラバランプ、シズル、ボタン、ラインチェイサーという5つのカテゴリから、好きな機能・デザインの“動きのあるナビゲーション”を簡単に実装できてしまう【16】

写真16

ソーシャルボタンによる情報拡散機能も手軽に!

公開するWebサイトの宣伝に欠かせないのは、TwitterやFacebookによる口コミだ。TwitterのつぶやきボタンやFacebookのいいね!ボタンは、それぞれのサービスサイトでHTMLコードを入手して設置することも可能だが、横並びにするといったレイアウト調整には若干手間がかかる。特にCSSが苦手なデザイナーにとってはかなりめんどうなもの。BiNDクラウドではTwitter、Facebook、mixi、Google+から好みのものを複数個、手軽に設置する機能が搭載されている。ブロックエディタ画面でボタンの種類をチェックするだけという手軽さで、口コミ情報拡散機能を簡単にWebサイトに追加できてしまうのだ【17】【18】

写真17
写真18

メールベースの問い合わせフォームも簡単に!

ユーザーからの問い合わせや商品・サービスの申込、予約受付など、コミュニケーションに欠かせないのがフォーム機能。エントリー情報をメールで受信するにせよ、HTMLコードとしても機能性の高いフォームの実装を苦手とするデザイナーも多いのではないだろうか。特にエントリー情報をバックヤードで蓄積するとなると、専用のシステムが必要と考えてしまうだろう。BiNDクラウドでは、Googleスプレッドシートと連携して情報を蓄積しつつ、メールベースでユーザー情報を受信できるフォーム機能も簡単に貼り付けられる【19】。選べるタイプは「お問い合わせ」「予約」「アンケート」「資料請求」「ご意見」の5つ。一般的なWebサイトでは必要十分なフォーム機能を手軽に実装できるのはうれしい。

写真19

Webデザインとグラフィックの総合情報サイト -MdN Design Interactive- [TOP]へ