Information

今回のリニューアルについて

2013年 01月 06日 21:34 | カテゴリー: Information
2013年 01月 06日 21:34
Information

ようやくリニューアルできました。

相変わらず苦労の連続でした。結局あれだけ苦労したローカルもデータ移行がままならず、MySQLでのエラーで、大変な思いをしました。

およそ2年半ぶりのリニューアルです。CMS導入から初めてのことです。アップできると済んだ思い出ですが、備忘録的にまとめておきます。

 

今回のリニューアルの為の分析

CMS導入にともない、Google先生の分析ツールAnalyticsも導入したわけですが、この2年半でいろいろなことがわかってきました。

当たり前と言っては当たり前ですが、

・おかげさまで、日本全国からのアクセスをいただけた

・古い記事ほど埋もれていく

・携帯やガジェット系でのアクセスが伸びてきている

・IE8でのアクセスが、Web業界で言われているほど、多くない。

などです。

アクセスについて

アクセスについては、徐々に拡大傾向にあります。一般的に言われているのは、新規ユーザー:既存ユーザー(リピーター)の比が6:4~7:3くらいが理想とされていますが、見事に合致しています。楽器って狭い業界でありますが、まだまだ可能性を感じます。
 

古い記事ほど埋もれていく

ブログとしてどうなのか?というのは懸念していたことでもある古い記事が埋もれていくこと。これを掘り起こすのに、アルファブロガーと呼ばれる方達も努力しています。それを見て勉強したわけですが、サイドバーの変更やお勧め記事、関連記事などの情報開示などありまして、それらを取り入れたいと思っていました。自分では「楽器に関する辞書サイト」として考えていたので、実は古い記事でも意外と皆さんに見ていただいています。それでも数は落ちるので、これをカバーしたいと。
 

携帯やガジェット系でのアクセスが伸びてきている

もう一つの懸念事項は携帯やガジェット系のアクセスが見逃せないほど上がってきていること。ご存じのようにガジェット系はWebの制作業界では一番進んでいるモダンブラウザです。PC用のブラウザよりも最新のテクニック(CSS3やHTML5など)が簡単に使えるようになっており、いろいろな会社が携帯サイトを作るわけです。しかし増え続けるガジェットにも表示範囲という壁があり、何種類ものスタイルシートで対応したりするわけです。

ここは持論ですが、フルブラウザを備えたガジェット、特に「ピンチ」といったズーム方法もある中で、ユーザーは自分に適した大きさにすることが当たり前になっているわけです。また、タップして倍率上げるとほぼ320px単位で上がります。これが3倍で960pxとなり、昨今のPC用Webの幅として認知されているのです。ですから記事部分がおよそ2倍時(640px幅)ですと縦スクロールだけで済みますし、友人のiPhoneやiPad見ていても、使い方がそんな感じでした。ですから、配置と大きさをあらかじめ決めておくことで、ガジェットの有用性を落とすことなく閲覧が可能なのです。

であれば、(少ないですが)画像やムービーなどもありますし(大きくして見たいのが普通です)、携帯やガジェット専用の画面を作る必要はないという結論なんですが、前の設計では、いかんせんリンクのタップがやりにくいんです。手持ちのiPod Touchがテスト機なんですが、「続きはこちら」の押しにくいこと。小さすぎるのです。なので、僕の太い指でもちゃんと押せる(タップできる)範囲が欲しいという希望がありました。これもiPod Touch(古いですが)を持ってから気づいたことです。
 

IE8でのアクセスが、Web業界で言われているほど、多くない

そして、問題のIE8ですが、結論としては今回より除外しました。まだまだWeb業界では外せないような傾向がありますが、当サイトでは、新しもの好きが多いのでしょう。見る見るうちにIE8からのアクセスが減りました。半年前には全体の40%台を保っていたのに、昨今では全体の約12%程まで落ちています。逆にガジェット系のアクセスは半年前から徐々に伸びて、現在全体の約15%まで上がってきています。

リニューアルデザインを制作中はなんとかIE8の対応も続けていたのですが、マシンの状況によって表示が違うこと(たぶんメモリー量の差)、当サイトのガジェット系シェアがIE8を超えたこと(つまりモダンブラウザは全体で80%強あるということ)、どうしてもデザイン的にやりたい表現(CSS3)があったという点から見送りました。

考えてみればXPのサポートも2014年4月までと、およそ1年です。IE6/7からIE8への移行期よりIE8の廃れ方の方が早い事実もあります。たぶん、サポート終了後、1年もかからないで移行ユーザーが増えると思います。既にWindowsは3つもメジャーアップデートしているわけですから。

 

リニューアルの趣旨

上記分析のもと、今回の趣旨は以下の通りです。
 

ガジェット系の対応

PC用サイトのサイズでありながら、クリッカブルエリアを広げることで、以前より操作感を上げること。これが僕の考えたガジェット対策です。スタイルシートはビジネス系なら普通でも、1000行超えるようなのはまず見ません(汗)。

クリッカブルエリアは、通常時、a:hover(マウスを乗せたとき)と、a:active(マウスを押したときと、ガジェットでのタップ)にCSS3でのカラー表記をモダンブラウザ向けに書き分けているので、スタイルシートが増えまくったわけです。

また、ガジェットはいろいろな場所で使われることもあり、光の加減でも見やすさが変わります。そこで今回はクリックしたときやタップしたときに、当サイトのカラースキームである青と反対色である赤に光るようにしました。広くクリッカブルエリアをとったリンクは全て赤く光ります。

PCでは、2段階(通常時→hover時→active時)で色が変わります。ガジェットのタップでは一気に輝度が変わって見られます(通常時→active時)。またクリッカブルエリアも要素を囲む<li>などを全部囲ったので、かなり広くなっています。通常の文字リンクは文字を大きくするなど、よくありますが、<li>ごとというのはPC用サイトでは珍しいかもしれません。iOS(iPhoneなどの設定画面やアルバムの曲選択など)では、割と標準です。

また、文字サイズも1段階上げて、大きくしています。その分、行間や文字間も調整し直しました。
 

古い記事の掘り起こし

各パートのトップに、「すべての記事」を表示しました。これをJ Queryで動かして、すべての記事を表示させています。表示されているパートの総記事数が表示されいるので、こちらを参考に必要な記事があるか、探すことが可能です。自動で送られる記事は、古い記事から新しい記事へ流れますが、戻ることも進むこともできます。

単独ではIE8でも動いていたのに、組み込むと動かない現象に遭遇しました。たぶん他のJ Queryとコンフリクトを起こしているようです。ですが、原因が特定できなかったので、今回はIE8を除外したので、良しとしました。

以上が今回のトピックですが、掘り起こしとしての第2弾、「ピックアップ記事」を設けました。現在表示中のパートすべての記事からランダムで7件表示されます。これはブログ再構築時にピックアップされるので、再構築するタイミング(通常は記事更新時ですが、やらないときもあります)は不定期です。

さらに右のサイドバーにある「最近の記事」では、中央の「最新記事」とダブるものの、+5件(合計12件)まで表示を拡大しました。

 

デザインについて

まだまだだとは思いますが、リニューアルを思い立ってから1年以上が立ちます。その思い立った1年前頃、ちょっと流行ったデザインがあります。「Grain(グレイン)」という、砂地と言いますか、粒子という意味ですが、ちょっと渋めの雰囲気に仕上がる、バックグラウンドやテクスチャに使うに良さげなデザインがありました(もう廃れてますね)。

それと今回多用したrgbaの透過です。前回はopacityという透過を使ってIE8にも対応させましたが、上に乗った文字まで透過させるので、使いづらかったのです。rgbaを使うと文字はそのままで、背景だけ透過ができます。

このグレインと透過、そしてグラデーションを組み合わせてみたわけです。いろいろな場所を色分けしたので、色がベタだとバタ臭くなりがちですが、透過での色の落ち具合や、派手さを少々残しつつ、落ち着いた感じに収まりました。余白を作らず詰まる部分にはグラデーションで境目をはっきりさせつつ、合わないとは思いつつも、リンクには赤(PC用には2段階)を使いました。

バックグラウンドは、Facebookのカバーでおなじみのデザインの全景です。イメージ的には、まずタイトルの「Magician」から、魔方陣を展開し、五線譜からいろいろな機材を通じて、様々な音を作り出す様子で、無限大に広がる宇宙は、音作りの無限さをイメージしています。この星空がグレインとも相まって、ちょっと渋めに仕上がりました。

特に今回は透過を多用しているので、バックグランド画像の関係上、画面の下の方では見づらいかも知れません。上方にスクロールするとバックが黒いので見やすくなります。

モニターの明るさ設定でも結構差が出ます。普通のバックライト液晶が一番きれいかもしれません。LED液晶は、僕のところではやや暗めにしてあるので、全体が暗めに見えます。ですがデフォルトでは、白がバキッと出るので、グレインがよく見えるようになります。

制作って、実はこうやって苦労して考えているときが一番楽しんですよね。