ueroku.netリニューアル

長く放置していた自分の営業用サイト、ueroku.netをリニューアルしました。

レスポンシブデザイン等でモバイル対応するウェブサイトもかなり増えてきましたが、まだまだこれからだと思います。しっかりしたウェブ制作会社へ依頼されたサイトやデキル社内スタッフが作ったサイト、ブログサービス等を大手のウェブサービスを活用しているサイト等はいいのですが、5年以上前くらいに構築されたシステムのままで運用されているサイトとかだと、殆どモバイル対応されいません。

既にウェブ閲覧の半数以上はモバイルからになっており、せっかくのコンテンツがちゃんと見てもらえないというケースが多いと思います。特にウェブ閲覧がFacebook、Twitter、LineといったSNSのモバイルアプリでのシェアである場合が多く、シェアされてもモバイル対応されていないと、よほど読みたい、読まなければならないコンテンツでない限り、何度もピンチアウト、ピンチインで拡大縮小を繰り返してまで見ようとは思わないです。iOSやAndroidが対応しないFlashをそのまま放置しているサイトもまだまだ多いです。

そこにまだ自分の出番があるのではと考え、その1点にポイントを絞りこみ、ueroku.netの再構築にトライしました。

fullPage.js

伝えたいことをできるだけ短い文章でまとめ1ページのサイトにしました。ページ内のセクション移動はfullPage.jsを使っています。パワポのプレゼンや紙芝居のような感じのサイトを構築できる、jQuery のプラグインです。

ページ内の部分をセクションに分け画面いっぱいに表示し、パソコンの場合は、マウススクロール、アイコンのクリック、キーボードの矢印キーで、モバイルの場合は、スワイプジェスチャーとアイコンのタップでセクションを移動することができます。

これに、パソコンの全画面でもスマホでも、同じソースが使えるように、工夫を加えています。

• 背景画像を使ったセクションでは、背景を2000x2000ピクセル程度の大きな正方形の画像にしています。これをbackground-size:coverにして横長のデスクトップでも縦長のスマホの画面も同じ背景画像を画面いっぱいに表示できるようになりますが、環境によっては読み込みに時間がかかるというデメリットもあります。
• セクションの大きさが限られるため、セクション内の文章を分け、パソコンでは全文を表示、スマホではタップしてオーバーレイ表示するようにしました。文章のブロック内でスクロールする方法も試してみたものの、スマホではブロック内のスクロール操作とセクション移動のスワイプの使い分けがしにくく、この方法に落ち着きました。

Drupal

コンテンツを絞り込んでいるので、ここではDrupalの出番はあまりないのですが、それでもセクション個々の内容をnodeになっていて、それをViewsで出力しています。「サイト全面リニューアルしました」のお知らせは別のViewsのブロックになっていて、今後更新情報等を組み込んでいくことになります。

jqPlot

2セクション目のグラフはjQueryのプラグインjqPlotです。ここでは折れ線グラフですが、棒グラフ、円グラフ、等々さまざまなグラフを作ることができ、座標軸、凡例等々すごく細かい設定ができ、それだけに手こずりましたが、何とかアニメーション付きのグラフができあがりました。

CSS3アニメーション

グラフ以外のアニメーションはCSS3のアニメーションです。蝶のアニメーション以外は、fullPage.jsの中にトリガーを組み込んで、セクション内に入ると動くようにしています。transition、animationの両方が混在、回転するだけ、左右に移動するだけ、のものが多いのですが、こだわっていたらいつまでもできあがらないので、とりあえずこの辺で公開することにしました。

蝶のアニメーションはほぼこのソースのままを使わせてもらっています。キーフレームの設定だけでリアルな翅の動きが表現できました。CSS3アニメーションの面白さがわかり、今後どんどんこだわって行きたいと思います。

配色

写真背景以外のセクションでは、Pantone2015春カラーを元に、フラットデザインっぽくセクション内は2色に留めることにこだわってみました。

対応ブラウザ

IE9以上は行けると思います。IE8は別途対応しようか考えたのですが、そこに時間を使いたくないので、「ウェブ標準ブラウザかスマホで見てください」とアラートを出すだけにしてしまいました。

どんなサイトにも使える手法ではありませんが、商品やイベント紹介といったプロジェクト型のサイトでは使える方法かなと思います。