今回はWordPress系のイベントサイト「WordFesNagoya2014」について、便利なレスポンシブサイトチェックツール「Am I Responsive?」と共にご紹介します。
| サイト名 | WordFesNagoya014 |
| URL | http://2014.wordfes.org/ |
| QRコード |  |
目次
- ４つのポイント
- １：レスポンシブデザイン
- ２：CSSによるAnimation
- ３：どこからでも申し込めるサイト構成
- ４：「残席表示」で「今すぐ感」を演出
- ５：「賑わい要素」としての参加者一覧
- ４デバイスを同時表示できる便利ツール「Am I Responsive?」
４つのポイント
１：レスポンシブデザイン
このサイトはレスポンシブデザインで制作されているため、どこからでも不自由なくサイトを閲覧することができます。
フェス風のファーストビュー表示をタブレット・スマートフォンで非常に綺麗に調整されていました。
２：CSSによるAnimation
またファーストビューのイラストは、背景の雲や風船がアニメーションするようになっています。
CSSAnimationを利用しているために読み込み速度への負荷も少なく、どのデバイスからでも違和感のない演出となっています。
３：どこからでも申し込めるサイト構成
このサイトでは、右側のメニューからいつでもイベント申込が可能な構成となっています。
具体的に金額なども確認できる構成となっており、「参加したい」と思ったタイミングで申込をすることが可能です。
４：「残席表示」で「今すぐ感」を演出
申込フォームでは、それぞれのプランの「残席数」が表示されています。
購入するかしないかを判断するタイミングで在庫数や残席数などを表示させることにより、「今すぐ買わないと」と思わせることが可能となります。
５：「賑わい要素」としての参加者一覧
申込フォームに情報を入力していると、Twitter・Facebookアカウント情報を入力する欄が表示されます。
これはTOPページなどで「参加者一覧」を表示させるための項目となっていて、アカウントのアイコンと登録名が表示されるようになっています。
ECサイトでは「今売れている商品」を表示させることで「賑わい感」を出すことがありますが、
イベントサイトでは「これだけの人が参加する」という「賑わい感」の出し方になるということですね。
スマートフォンからは上部メニューを利用しての申込となります。
４デバイスを同時表示できる便利ツール「Am I Responsive?」
今回スクリーンショット撮影に「Am I Responsive?」というサービスを利用しました。
４デバイス分のサイト表示だけでなく、ドラッグ＆ドロップでの並び替えなどもできる非常に便利なツールです。
このような配置もドラッグ＆ドロップだけで簡単に実現できます。
レスポンシブサイトを紹介する際などに是非ご利用下さい。
