いよいよ明日開催となるデジハリ祭。
このタイミングで何を血迷ったのか公式サイトを構築した俺が、自分でそれをドヤ顔で解説するという誰得な記事を展開しようと思います。
いいよね？やっちゃうよ？
※多分にドヤ顔成分が含まれていますので、寛大な心を持ってお読みください。器のでかい人はモテますよ。
※WEBについてあんま詳しくない人にはわりとサッパリわけわからんな内容かもですが、そこは「あ～、なるほどねぇ～」とか言って乗り切って下さい。人生ハッタリも大切です。
さて、今回デジハリ祭2012の公式サイトは、学祭のコンセプト・テーマなどから広報部として1ペラサイト(中ページが存在しないサイト)案が採用されました。まずはその１ペラという構成から工夫したアレコレを解説していきたいと思います。
1．AJAX(非同期通信)でデータ通信量を分散(ドヤァ
学祭サイトでは様々なイベントや企画ほか、開催概要や協賛企業などたくさんの情報を詰め込む必要があります。
1ペラサイトではそれが1ページに収納されることになるため、そのHTMLを一気に読み込むとなるとデータ通信量が非常に大きくなり、表示されるまでに非常に時間が掛かってしまいます。(特にスマートフォンからのアクセス)
そこでAJAXを使って(jQueryを使って実装)、情報を小分けで通信させることで一度にやりとりする情報量を抑え、ロード時間の短縮化をはかりました。
具体的にはMOREボタンを押すことで表示される各トピックの詳細情報は、公式サイトトップページ(./index.html)にアクセスした時点ではロードしていません（詳細情報は別のHTMLファイルに記述されています）
ユーザーが詳細を知りたいと思ったトピックのMOREボタンを押した時にはじめて、サーバーにリクエストを送り、詳細情報が格納された別のhtmlファイルの中身を取りにいき、それを読み込んで表示します。(その中で使われている画像もこの時点ではじめて読み込まれます)
こうすることで、すべての情報をトップページのHTMLに詰め込むより、ロードにかかる時間が短くすることができました。
2.スクロールに追従するメニューで、スクロールの手間を減らす(ドヤァ
1ペラサイトでもうひとつ問題になるのは、情報が更新追加されるひたすらページが縦に伸びていくため、ユーザーが閲覧する際に何度もスクロールを行わなくてはいけなくなる点です。
これは右側にユーザーのスクロールに追従するメニューを設けることで解消しました。これでユーザーはページのどの部分にいてもスクロールすることなく他のブロックにジャンプすることができます。
3.1ペラ構成のページと相性の良い、トピックごとのSNSシェアボタン(ドヤァ
ここ最近のWEBではFBやツイッター等のSNSを使ったウェブの口コミ効果無視することはできません。今回の広報方針は、あらゆるメディアを導線として、最終的にすべての情報が詰まった公式WEBサイトにユーザーを還元させるというものでした。
そこで今回は各トピックごとにFB・ツイッターのシェアボタンを設置してみました。これには下記のような１ペラサイトならではの狙いがあります。
通常複数ページのあるサイトの各ページにそれぞれSNSボタンを置くと、リンクシェアを踏んでそのページに飛んで来たユーザーは一度グローバルメニュー等を経由してページ遷移しないと、他のページの情報をみることができません。
しかし今回の1ペラのサイトでは、シェアリンクから飛んできたユーザーはページ遷移をしなくてもスクロールをするだけで(あるいはしなくても)他の情報もみることができます。したがってシェアボタンの連鎖反応を比較的起こしやすいというメリットがあります。
当然OGPと呼ばれるSNSシェア時用の情報(リンクタイトルや表示される画像)も各トピックごとに個別設定し、SNS利用者の興味を引きやすくしています。
またこの他にも色々と工夫しました、例えば…
4.jQuery+CSSでスマートフォンでも動くサイトを構築(ドヤァ
スマートフォン全盛となった現在、スマートフォンで閲覧できないサイトはちょっと問題外。
かといって学祭という華やかなイベントのサイトなので、サイトにもいろいろ動きをつけて楽しさを演出したい。
そこでFLASHは完全に排除し、JavaScript(jQuery)＋CSSで動きを出しています。これでiPhone,Android共に対応。
欲を言えばスマートフォン閲覧に最適化した別デザインを用意したかったんですが…さすがに手がまわらず,
なるべくPC・スマートフォンどちらでも通用するレイアウトを目指しました。
5.白を基調としたシンプルなデザインに、情報を詰めることで彩っていく。(ドヤァ
今回のデジハリ祭のコンセプト・テーマが「再始動 はじめまして、デジハリです。」であることと、1ペラ構成であることから、デザインは白紙をイメージした白を基調として、そこに随時情報が追加されていくことでサイトが彩られていく…というコンセプトでデザインしました。
…などなど割と今ある自分のスキル・ノウハウを存分に詰め込んだ公式サイトになっております。是非ご覧ください。
ていうか見なくてもいいや！是非、明日明後日のデジハリ祭に遊びに来てください！おなしゃす！！
