ということで、今日はその舞台裏というか、コレがアレでこうなってできているよ、って話をしてみようかと思います。なにかの参考になれば幸いです。

Responsive Web Design の簡単な説明

インターネットに接続できるデバイスが増えています、というか多様化しています。画面サイズや画面解像度はまちまちです。日本の場合は10年ぐらい前からいわゆる携帯電話で接続できてましたが、それらもやはり同じような問題を抱えていました。そのような個別の端末に対して、画面解像度や技術仕様などをベースにコンテンツを最適化して配信するということは大変ことです。

さらに、今時はスマートフォン向けのサイト制作などもあります。今後ますます増えていくであろう端末に対して、情報をどのように出していくか、ということを考えなければいけません。デバイスに完全に最適化するのか、ある程度の見栄えを維持したままワンソースで展開していくか、ってなことです。

ま、そういう手法のひとつがこの「Responsive Web Design」や「Adaptive Web Design」などと呼ばれているものです。厳密に言えば、二つの意味するとこは異なると思いますが、端末の画面サイズや利用可能な技術、仕様にあわせて、最適化というより適合させていくという考えです。

たとえば、カラムのレイアウトは流動的に変化するように「%」ベースで幅を指定する、画像や映像のサイズもそれにあわせて変化させる、といったテクニックを駆使します。そこで使われる技術としては、CSS3はもちろんMediaQueriesやJavaScriptなども含まれます。

ただし、この方法もやはり万能とは言い切れません。たとえば、ブログやニュースのような文字が主体のコンテンツには向いてますが、Webアプリや視覚的な情報も含んだコンテンツなどではコンテンツそのものの見せ方を考えなければならないかもしれません。要は向き不向きがあるってことです。

WordPressのテーマ「Skeleton」を使ってみた

ま、そんなわけで今回作ったサイトは、「書籍や誰かのインタビューなどで気になる発言を引用してメモしておく」という内容です。文字ベースになるのは明白ですし、個別のデバイスに対応する意味もあまり感じられないので、レスポンシブな感じにしてみようと思ったのですね。

そこで採用したのが（自分で作れよって話ですが）、こちらの「Skeleton WordPress Theme」です。Skelton という名前からピンと来る方もいらっしゃる方も多いかもしれませんが、このテーマの元になっているものは「Skelton」というフレームワークです。

「Beautiful Boilerplate for Responsive, Mobile-Friendly Development 」というタイトルになってるように、多様な端末での見栄えをサポートしてくれるフレームワーク。HTML5ベースで主要な要素などがシンプルにスタイリングされたものなので電子書籍などでも使える感じです。これは、カラム幅は % 指定するのではなく、960pxをベースにしたpx指定となっています。

テーマの方はWordPress以外のCMSをサポートしていたりしてるので不要なファイルなども含まれていますが、ファイルをダウンロードしてテーマのディレクトリにアップすれば使えます。いらないCSSのコードもできれば抜いた方が軽くなるでしょう（そのままだと60kぐらいになるので）。

とまぁ、SkeltonがベースのWordPressのテーマをいれて楽はしてるのですが、そのままではちょっと使えないというか、ところどころに凡ミスもあるのでその辺を修正しながら「quoted」ができています。ブラウザのサイズを変えたりiPhoneやiPadなどのデバイスでご覧いただければ、と。

（追記）iPadを縦方向にすると横幅がぴっちりになるのもやはり単純な記述ミスだと思われますが、修正する場合は「skelton.css」の「#Tablet (Portrait)」のcontainerの横幅を748pxに変更しましょう。デフォルトでは左右のマージンが10pxずつ、16カラムがベースなので.sixteenは728px、たとえば「one＋fifteen＝728px」じゃないと話がおかしくなります。

それ以外にやっていること

それと今回は、Web fontも使ってみようかな？と思って「Google Web Fonts」をタイトル部分に使っています。CSS版で入れました。

あと、FacebookのOGPはシンプルに「WP Facebook Open Graph protocol」をベースにちょっとだけ改良。デフォルトイメージの登録、「og:description」には本文先頭の160文字かexcerptを抜いてくれるので楽ですね。

それ以外には、いわゆるサイトパフォーマンス高速化の手法をあれやこれやと。例によって「W3 Total Cache」を入れてCDNのオプションを有効にし、CSSやJS、ちょっとした画像などは別サイトから配信といった感じになっています。

参考までにGTmetrixのデータはこちらです。
→ Latest Performance Report for: http://q.gaspanik.com/

以上、これからWordPressを使ってレスポンシブ・ウェブ・デザインで何か…と、お考えの皆さんの参考になればと幸いです。

とはいえ、時代は「ソーシャルメディアを使ってうんたら」みたいな流れでもあります。後日解析レポートを見て施策をすることも大事ですが、こんな時代だからこそ自サイトをリアルタイムに観察し、それに応じて動線（導線）を追加したり効果的にコンテンツを投下することも大事なんじゃないかな？と思います。

で、これまでも何度か取り上げていますがあらためてまとめてみました、リアルタイムのアクセス解析のサービス。こういうサービス調べるのが仕事兼趣味なので、今回は世界中のサイトで比較的よく見かけるものをチョイスしています。

すべて使って試してるわけではないですが、何かのご参考になれば。

Woopra

リアルタイムのアクセス解析の中でも老舗の部類に入るだろうWoopraは、世界中のWebサイトでも多く使われています。残念ながらボクは使ったことないですが、ECナビさんで一ヶ月使われた感想がレポートとしてまとまってます。

CLICKY

CLICKYもまた世界中のWebサイトによく仕込まれているアクセス解析のサービスです。オンラインデモもあるので、それ触ってみるといいですね。ココにある他社のサービスとの比較表をみるといろいろ拾えることがわかります。

Chartbeat

このブログでも何度も何度も取り上げてますが、リアルタイムにサイトへのアクセス数だけでなく、ページのどこまで読み進めたかとかページのロード時間なども見れるサービスです。キーワード指定してTwitterのつぶやきをトラックもできます。あと、一定のアクセス数を超えたりサーバの反応がなかったら、iPhoneアプリにアラートを出せますので便利です。最近では大手のサイトにもこのChartbeatが仕込んでるところが増えてますね。もうしばらくするとEコマース向けのサービスも始まるみたいです。

Reinvigorate

MediaTempleのグループ会社が運営している知らぬ間にWebTrends系になっていたReinvigorateは、リアルタイムアクセス解析に加えて、ページ内の要素のどこをクリックしてるかといったヒートマップもくっついてるのがひとつの売りでしょうか。何回目の訪問とかそんなのも表示されますし、必要であればユーザーごとにタグをつけてトラックできるのでサイト内での動向を追えます。

mixpanel

mixpanelもまたよく見かけるリアルタイムアクセス解析のサービスです。有名どころではQuoraとかPosterousなんかでも使ってますね。一通りの機能はもちろんですが、他と違うのはEメールの開封率とかも解析できることですかね。

Mint

Mintは、サーバにインストールするタイプのアクセス解析ソフトウェアです。これもうちのブログで使ってるので過去に紹介したかもしれません。ドメインごとにお安くライセンスされる形です。プラグインを使って、必要に応じて解析内容を拡充することができるのが特徴です。

StatCounter

StatCounterも結構よく見かけます。機能は豊富そうですが、デモを試すと他と比べて画面がみにくい…。画面は結構大事です（笑）。

W3Counter

W3Counterもまたよく仕込まれているアクセス解析のサービスです。たまにネットに流れてくるブラウザの使用率レポートとかは、ここのレポートが多いんじゃないでしょうか。ボクは使ったことないですが、Twitterのメンションとかも拾えるようです。あ、あとWordPressのプラグインもあるみたいです。

Histats

この記事を書くにあたってサービスを調べていて見つけたHistatsも面白そうです。ちょっとゴチャゴチャしている感はありますが、機能は豊富そうですし、なんとFreeで使えるようです。デモやビデオもサイトにあるので見てみましょう。

Piwik

Piwikは、Google Analyticsの置き換え的な位置づけのオープンソース・ソフトウェアです。で、GAにはないリアルタイムアクセスがチェックできる、と。アクセス解析サービスはCDNとか使ってるので、ネットワーク障害とかが発生するとアウトだったりするので自前でインストールするのもいいですね。

CrazyEgg

最後はおまけです。リアルタイムアクセス解析ではありませんが、サイト内のどこをクリックしてるかがわかるヒートマップや、リンクされている要素のクリック数などを視覚的に確認できるアクセス解析のサービスがCrazyEggです。ボクもサイト公開後のチェックでたまに使ったりしています（意図したところが押されてるか、みたいなｗ）。これも結構使ってるトコありますね。

複数使い分けるのもいいですよ

といった感じで、リアルタイムアクセス解析といっても機能はまちまちですし、中には専用のiPhoneアプリなどが公開されていて便利に使えるものもあります。アクセス解析といってもGoogle Analyticsとか一個だけで完結せず、こういったリアルタイムアクセス解析もいくつか入れておくと分析も楽しくなります（笑）。

無償だと機能制限がかかったり一定のアクセス数までといったことがありますが、有償といっても膨大なアクセスがなければそんなビックリするような額にはならないので、一度リアルタイムアクセス解析試してみるといいと思います。きっと、通常のアクセス解析では得られなかった情報が得られるでしょう。

簡単にいえば、Googleさんがデータを拾い上げて最適化したデータをGoogleのサーバから世界中に配信しちゃうよ、ギャハ。しかも今なら無料！みたいなこと？ となると、CDN系サービスの存在意義は…（厳密には違うだろうけど）。

ま、登録する前に置き換えたらどうなるかチェックから始めましょう。

専用のWebPageTestのサイトでチェック

サイトの右側にある「Check It Out」ボタンを押すと下のページに移動します。

このページとかはまだ日本語化されていませんが、Page Speed Serviceのマニュアルみたいなもんですね。で、そこにある「Running the tests」の手順に従ってすすめます。

リンクをクリックすると「WebPagetest – Comparison Test」のページに移動するので、チェックしたいサイトのURLを入力。下にあるのは、どこのサーバからチェックするかです。そこはお好みで。

準備ができたら右にある「START TEST」をクリック。

テストはちょっと時間かかりますが（さらにいま混んでる）、そのままちょっとほったらかしておけば終わります。終わったらこの画面が出てきて、オリジナルのロード時間（リピートビュー）と最適化された場合の時間が並べて表示されます。サーバのある場所とテストする場所の関係で秒数はもろもろ変化します。数字見ればわかりますけど、緑の数字だと最適化した方が効果あるってことです。

うちだといろいろ最適化的な施策はやってるといえ、全体のロード時間とレンダリング開始の時間が1秒ぐらい速くなるみたいな結果になりました（東京から、US Eastからとテストしてみたけど、どっちも）。リピートビューとかはちょい遅れると出てますが誤差みたいなもんでしょう（笑）。

とまぁこんな感じなので、使ってみたかったらサイトのトップページにある「Sign Up」から進んでフォームに必要事項を入れて申し込んでおくと幸せになるかもしれません。有効になったら、自サイトのドメインのCNAMEを書き換えて…みたいな感じですので、それはマニュアル読んでください。

Now you don’t have to worry about concatenating CSS, compressing images, caching, gzipping resources or other web performance best practices.

ブログに書かれているように、Webサイトの表示パフォーマンス関連でいろいろ面倒な画像の最適化だったり、キャッシュのこと、gzipだったりってことも気にしなくて良くなる、と。そういえば、そもそものサービス名は「Page Speed Service」でしたね、その辺の細かいコントロールはダッシュボードからカスタマイズできるようです。

取り急ぎそんなサービスを始められたようです、というお知らせでした。

ま、本屋にもあれだけFacebookの本が並んでますからね、誰かの役に立つかもしれません。では、並べてみましょう。

Facebook Platform Showcase

Facebook Page Showcase

fbfolio

Custom Facebook Page Gallery

Complete Guide to Facebook Fan Pages

57 Facebook Page Design

20 Examples of Great Facebook Pages

Facebook Pages Design Trends

101 examples of f-commerce

実は1年ぐらい前からドメインだけ取ってあってうっかり寝かせてしまっていたのですが、フリーランスとして活動し始めて10年、そろそろ何か自分のやりたいことでもやってみようかな、と思ったのが事の発端です。そろそろ40歳という大台も目の前に見えてきましたしね。ただ、何をやるかはまだ内緒です（笑）。

今回こちらのティザー的なサイトを立ち上げるにあたって、これまであまり表に出してなかった実績なども出してみました。実績の中のサイト制作などは一部ページとかではなく、基本的に丸ごとやってるものです（代理店さん経由とかではなく、基本直でやってきてますので）。

そういうわけで、ひとつよろしくお願いいたします。

余談

今回のサイトは試しにHTML5で作ってみました。表示確認などはほとんどしてないに等しいので（AdobeさんのBrowserLabではちらっとみましたが）、なんか見えてなかったらごめんなさい（笑）。たぶん、こんなのなので大丈夫だと思ってるんですが。

また、いわゆるスマートフォン向けの最適化されたページも用意していませんし、Responsiveな感じでブラウザの横幅でレイアウトが切り替わるようなこともしていません。ただ、iOS系のデバイスではタップしてカラムを拡大するとちゃんと読めるのではないかと。縦横切り替えながらのぞいて見てみてください。

あと、OS Xで見ると書体が違うのはボクの意図するところです。

→ http://protean.im/

その名も「Extragram」。

何がExtraなのか？ってMapモードがあります（笑）。

割と直感的な操作で見ていけるのも良いですね

基本的な機能は、これまでリリースされている他のサービスと同じ感じですが、このExtragramは割と直感的な操作でInstagramの写真を眺めていけます。

Likeもコメントもマウスオーバーで。

サムネイルというかグリッドで表示している時のコメントは、ポップアップで出てくるので遷移もないし書きやすいですね。個別に写真を表示すればTwitterやFacebookなんかに写真をシェアすることもできます。

また、AutoPagerizeみたいなブラウザの拡張機能を入れてなくても、ページ下までいけば「Load more」のボタンがあるので次から次に写真を見ていくことができます（Popular以外は）。

Mapモードは結構楽しいかもしれない

他のサービスと異なるのは、ありがちなグリッド表示やフィルムストリップ表示以外に「Map」ってのがあるところでしょうか。

特定の場所を検索して表示すると、その周辺のGeoTag付きの写真がパラパラパラと表示されていきます。旅行したい場所とかそんなのを眺めてみるのもいいかも。

そんなExtragram、もちろん無料です（笑）。

こちらのサイトにURLを入れてチェックすると、YSlow!とPage Speedでのチェック結果が表示されます。それに加えてHTTPリクエストの数やロード時間、ウォーターフォールチャートも出るわで至れり尽くせりです。チェック項目の解説なんかも用意されています。

便利です。ありがとうございます（笑）。