ご覧の通り、ブログのデザインを大幅に変更致しました。
それに伴って裏側もかなりメンテナンスして設計しなおしています。

今日は、このブログで利用している技術や私の考える「デザインについて」などを簡単にお話出来ればと思っています。少々長くなりますが、興味のある部分だけお読み頂ければ幸いです。

尚、記事中で気になる部分や「これどうやるのよ？」という技術等ありましたら、遠慮なくTwitter (@room402jw)などでお問い合わせ下さい。

2 カラムの無意味さを感じていました

まずパッと目につくワンカラムのデザインについてお話させて頂きたいと思います。

『ブログ』という媒体に限った話になりますが、ブログのデザインと言えばメインカラムとサイドカラムに分かれた 2 カラムのデザインが圧倒的に多数を占めているように見受けられます。

しかし、最近様々なブログを見ていて感じたのですが、「ワンカラムのブログ、物凄く読みやすい」んですよね。それと同時に、徐々に 2 カラムのデザインのサイドカラムが「邪魔」だと感じるようになってきました。

それは何故か？結局、2 カラムを同時に見る事はなく、1 カラムを 2 回に分けて見ているに過ぎないと気付いたからです。

2 カラムは 1 カラムが 2 つあるという事

今さら言うまでも無い事ですが、ブログの主役は『メインカラム』です。そこには文章だったり写真だったり様々なものが載るでしょうが、何にせよ『メインカラム』にあるものが、そのブログの全てであり、読者の求めているものであり、私達が伝えたいものです。

それに対して『サイドカラム』は言うなれば優しさです。

サイドカラムにはブログの運営者が「こういうコンテンツがあればユーザーはもっと楽しめるだろうか？もっと便利になるだろうか？」と試行錯誤の上に、コンテンツを設置していきます。あとはまあ、小さなお知らせとか広告ですが、これは完全にユーザーにとっては不要な要素ですね。誰得、運営得…といった要素です。

ただ、少し思い出して欲しいのですが、この『メインカラム』と『サイドカラム』って同時に見る事ありますか？私はこれを意識してから試してみたのですが、同時に見るという事は結構難しいという事に気付きました。

要は右の画像のように、一旦メインカラムを読んで、目線もページスクロールも上まで戻ってから、もう一度サイドカラムを読んでいる訳です。メインカラムを読みつつサイドカラムも同時に見る、という「流し見」も無くはないですが、私の場合は殆どありませんでした。

しかも邪魔

それに加えて、前述したように徐々にサイドカラムを「邪魔」に感じている自分が居ました。その理由は、周辺視野です。

メインカラムを読んでいると時、焦点は勿論メインの文章や写真を見ているわけですが、見えるんですよ…ぼやーっと…目の端にゴニョゴニョっとした何かが…。私はユーザビリティ向上の一助になればと思って、サイドカラムには「もくじ」を設置していましたが、これも今見ると邪魔です。

しかも、サイドカラムのコンテンツが文字データだけであればまだマシですが、画像なんかになると「文章を読んでるのに視界の端がなんかカラフル…。」という、鬱陶しさに拍車がかかる状況になります。

追尾型だったりすると最悪

更に言うのであれば、追尾型だともう最悪とまで思うようになりました。

メインカラムが充実していればしているほど、コンテンツは縦に長くなります。そうして見進めていくうちに、周辺視野のサイドカラムは遥か上部へ消え去り、やっと集中してコンテンツを充分に堪能して没頭していく事が出来ます。普通なら。

しかし最近、『追尾型』のサイドカラムがやたらと流行っている印象を受けます。
広告などは論外ですが、追尾型サイドカラムの多くはユーザビリティを考慮に入れた、運営者の方の配慮を感じる質の良いコンテンツです。それはとても良い事だと思います。

それを踏まえた上でも尚、スクロールするたびに視界の端について回るカラフルな何かは、正直鬱陶しいです。

小学生の時に、見えるか見えないかのところで変顔しながら踊る男子、居ませんでしたか？
あれがずっと付いて来ているようなイメージです。

というわけでワンカラム

話が長くなりましたが、このような経緯を経て私が 2 カラムを無意味と思うようになり、挙句の果てにちょっと嫌いになり、今回ワンカラムに行き着くこととなりました。

ワンカラムのデザインについて考えてみた

では、ワンカラムでデザインをするというのはどういう事か？それも合わせて考えてみました。

ワンカラムの大きなメリットは、ひたすらコンテンツに集中できるという事です。

ブログ、それは本来『メインコンテンツ』を読んでもらうだけの機能しか持っていないものです。それがやれ回遊性だ～ユーザビリティだ～PVだ～という具合に、昨今ちょっと余計なものが付き過ぎたな…というのが私の印象です。実際私が多くのブログを読んでいく中で、サイドカラムが無いと困る…という状況は殆どありませんし、加えて言うならサイドカラムを見るかどうかも半々くらいのものです。

しかし、ワンカラムにはデメリットもあります。それは、ユーザーにリッチな経験を提供する機会（スペース）が減るという事です。

前述しましたが、サイドカラムには「ユーザーにこんなものを見せてあげたい」とか「こういうものが設置してあればもっとブログを便利に活用して貰えるかも」という要素が置かれている事が殆どです。人気の記事や関連記事、もくじなどがその代表的なものですね。

こうしたコンテンツが、サイドカラムの撤廃によって置かれる場所を失い、その分ユーザーが何を見るかというと「コンテンツしか見るものが無い」という状況になります。これはメリットでもありますが、デメリットになる可能性もあります。難しいですね。

メインコンテンツに置けば良い

このデメリットを解決する方法としては、私は「メインカラムの最下部に置けば良い」説を推します。
要は上から順番に下までマウスホイールを回していけば、一番の目的のコンテンツが読めて、関連する記事も見れて、人気のある記事も見れて、それで充分なのではないか、という事です。

ディスプレイサイズと Web サイトの幅

また、今回はかなり横幅を大きく取ってあります。
ワンカラムのレイアウトになったにも関わらず、汎用的な Web サイトの横幅である 960 px を超えています。

ディスプレイサイズの大型化

昨今の家電の進化は凄いですよね。凄いスピードです。
そして、ディスプレイのサイズも凄い勢いで広がっています。ほんの数年前であれば 800 x 600 なんていう解像度のディスプレイがありましたが、今どきそんな PC で何が出来るというのかというレベルです。

当ブログの 1 年分のアクセス解析を分析してみても、PC に限定して見れば 1280 px 以上の解像度ディスプレイを利用している方が殆どのようです。今後は益々大きな解像度のディスプレイが普及していくでしょう。

そこで、将来的なものも見越して、大きなディスプレイで見て頂いた時もコンテンツが充分に楽しめるように配慮した設計を施しました。文字サイズについても、現状では少し大きい印象を受ける環境も少なくないでしょうが、あえて少し大きめにとってあります。

Web サイトの高速化

私が好きなサイトは、表示の早いサイトです。
というわけで、今回とことん軽量化と高速化を意識しました。簡単にですが、内容を列挙していきたいと思います。

さようなら純正 SNS ボタン

Web サイトを最も重くする要因、それは SNS ボタンだと私は考えています。
「読み込みが止まった…？」と思ってステータスバーを見ると、Facebook や Twitter の SNS ボタンを読み込み中…。そんなの最後で良いっつーの！！です。

百歩譲って「遅い」という程でなくとも、純正の SNS ボタンというのはかなり負荷がかかる要因だというのは、Web に関わる方なら常識でしょう。というわけで、純正の SNS ボタンを使うのはやめました。グッバイ。

代わりにアイコンフォントと CSS3 にて、簡易的な SNS ボタンを作りました。ちゃんと動きます。各記事の最下部に設置してありますので、良かったらマウスカーソルを乗っけて見てください。

GZIP圧縮そしてキャッシュだ！

今回導入した技術ではないですが、htaccess ファイルにて GZIP 圧縮する要素と、ユーザーのブラウザキャッシュのコントロール時間などを調整しました。体感的なパフォーマンスはだいぶ上がっている筈です。

読み込む JavaScript と CSS の細分化管理

今までは特に管理していなかったのですが、今回は特定でのみ必要な JS や CSS は、その状況でのみ読み込むようにきちんと設定しました。

例を挙げるとすれば、Google Analytics は全てのページで読み込み、Google Adsense はシングルページのみ、コードを色分けする JS もシングルページのみ…という具合です。実際の分岐はもう少し詳細で、同じように CSS も必要なシーンでのみ読み込むように分類しています。

画像サイズの把握と管理

以前、『WordPress の画像は 1 枚見たら 7 枚隠れていると言われています』でもお話した通り、WordPress は一枚の画像から環境によって何枚もの画像を自動で作成します。

これは親切な機能ではありますが、むやみに画像を増やす事でサーバー容量の圧迫につながり、適切なサイズでない画像を使ってもなんとかなってしまうという Web デザイナーの怠慢を招きます。
そこで今回は利用する画像とシーンをきっちりと設定、認識しなおして、4つのサイズの画像のみを作成するようにしています。

JavaScript の活用

私が今後楽をするために幾つかの小さなプログラムを組み込みました。
気に入っているものを 2 つご紹介します。

pre タグに自動でクラスを与えるようにした

プログラムコードなどを表記する時に利用する < pre > タグですが、プラグインの利用をやめて Google Prettify を利用する事にしました。そのためには、pre タグにクラス名を付与する必要があるのですが、いちいち面倒なので addClass を利用して自動的にクラス名を付与するように設定しました。

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	/*This code is just sample.*/
}

これで何も気にせず、pre で囲めばカラフルに色分けされる…という具合です。便利。
addClass は応用次第でとても便利に使えるので、今後自動で振るようなクラスがあれば活用していきたいと思います。

target=”_blank” の管理を JS で

今までは記事中でリンクを貼る際、自分で target="_blank" を付与していました。また、自サイト内であれば同一タブで (self) 他サイトであれば別タブで (blank) と記述分けをしていました。

今後はこれを JS で管理し、記述する際はターゲット設定は記述しないで済むようにしました。ターゲット設定を気にする必要もなくなりましたし、コードも余計な要素が付かないで統一出来るので、一括置換などの際に管理がしやすくなります。便利です。

Functions.php の活用

Functions.php についても大幅に見なおして活用しました。
全ての内容を解説しているともうひとつ記事が書けてしまうので、利用した内容を列挙するに留めたいと思います。何か気になる内容があれば、冒頭でも述べた通りTwitter (@room402jw)でお気軽に話しかけて下さいませ。

• Google Analytics の管理と自動設置
• Google Adsense を始めとする幾つかのコードをショートコード化
• 常に最新の jQuery を google hosted library から読み込む
• ナビゲーションバーを常にトップに固定
• JavaScript のシーンによる読み込み管理
• CSS のシーンによる読み込み管理
• 独自の画像サイズの追加
• セルフピンバックの停止
• 抜粋による [...] メッセージの変更
• more リンクのアンカー削除
• RSS へサムネイル画像を表示するよう設定
• 各記事に独自 CSS を記述出来るボックスの設置
• 管理画面の記事一覧にてサムネイル画像を一覧出来るよう設定
• セキュリティ情報となるログインエラー情報を非表示
• 記事の日本語スラッグを停止し、自動でスラッグを作成するよう設定
• 記事の最終更新日時を格納し Google などが読み取れるように設定
• 管理者以外へのアップデート情報通知を停止
• JS, CSS のバージョン表記の削除
• WordPress バージョン情報など不要な情報を削除

など、という内容になります。
ちょっと表現を端折っている部分もありますが、大雑把に書くとこんなものです。

まとめ

最後までお読み頂き有難う御座います。
今回かなり大幅にデザインを変えたので、こうして記事にしておかないと自分でも忘れてしまいそうなのです。

もし良ければ、この下にある続きのコンテンツにも目を通してみて下さい。これまでに書いたように、ワンカラムのデザインを意識してコンテンツを配置してあります。

もう少し洗練させる事も出来るだろうという段階ではありますが、いつまでも公開できなくなる可能性が高かったので追々精度を上げていきたいと思います。ご不便やご感想、ご要望などあればお気軽にTwitter (@room402jw)などでお寄せ頂けると有難いです。

それでは、今後共よろしくお願い致します。

この記事を話題にする

同じカテゴリーの人気記事