actyway を HTML5 と CSS3 でリニューアルしてみました!

ニューな actyway!
まだ(謎)IE 未対応なので酷いよー!(↑Mac&Chrome だとこんな感じ)

リニューアルしてみました!

2012 年になってから初ポストになりました、おめでとうございます&今年もよろしくお願いします〜!(遅いっw

去年の秋ぐらいから「今年中にはリニューアルしたいなぁ」とは考えていたのですが、なかなかイメージが固まらず年を越していまいましたw 前回のブログテーマが暗めの色だったので、今回は明るくしたい!かわいくしたい!色を多く使いたい!でも見やすくしたい!スッキリさせたい!…等と多くの葛藤があり、複数人のわたしが喧嘩をはじめてなかなかまとまらない状況の結果だったりしますw

と、時間的な理由から今日はここまでにします!
書きたいことがいっぱいあるので続きは明後日には必ず追記します〜w
中途半端ですみません〜、1月中に1記事はポストしておきたかったなんて口が裂けても言えません><
ぶぅぶぅぶぅーw

やってみたこと!

では続き書きます〜!
ちょっと長めでダラダラした内容になるかもですが、よろしければお付き合いくださいw

リニューアルと言ってもお仕事ではないのでなかなかモチベーションが上がらなかったりしました。で、自分がやりやすい様に条件をしぼってみました〜w 条件絞ることでハードル上がってモチベーションアーープッ!みたいな魂胆ですw

  • HTML5 と CSS3 で。
  • 画像使わない。
  • スマートフォン対応を視野に入れる。
  • サイドバー使わない。
  • jQuery 使わない。

みたいな感じにしてみましたw
ぁ、ちなみに WordPress のテーマでのお話ですよ〜w

HTML5 と CSS3 で

ブログはじめた時(1年ちょっと前)も HTML5 で行くか悩んだんですけど HTML5 にはしませんでしたw で、最近だと HTML5 のサイトもよく見かけるし、検索エンジンからの流入も問題なさそうだしで HTML5 で WordPress テーマを作ってみました〜w

ある程度分かってるだろう〜と高をくくっていたのですが、意外と分かってなかったので結構学習しましたw
参考になったのは以下のサイトです!

特にセクショニング・コンテンツと見出しのレベルの部分なのですが、わたしの様なお馬鹿さんでも理解出来る様に、W3G Blog Studies さんの内容はやさしく丁寧に書かれてあります。とても参考になりました、ありがとうございます〜m(__)m
CSS3 は特に困ったことは無かったです〜w

画像使わない。

このブログデザインなんか変な感じしませんでした〜?
実はこのブログ、画像を一切使っていません!
はい、嘘でーすw

一切使わないのはさすがに難しかったので、フッターのプロフィールの画像と記事外枠の色味が白っぽくかすんでいる背景部分には使いました〜w で、あとは CSS3 でがんばっていますw

フッターのモコモコ

イラレでちょちょいと描けるような程度なら CSS3 でも結構いけるんでしょうけど、フッターの雲みたいなモコモコ部分は若干重いように思います。ただ画像でやると 30KB とか余裕でなると思うので重さを気にしなくて良いような場合だとありかなーとは思いました!

前回のテーマと今回のテーマの容量差を今の段階で比較するのは早すぎだとは思うのですが(IE 対応とか細かいところがまだまだな為)、とりあえず画像容量だけ比較ってことで images フォルダのサイズ比較は残しておきます。

前回のテーマの images のサイズ:170.1KB(55ファイル)
今回のテーマの images のサイズ:19.6KB(2ファイル)

1ページであたり 100KB は確実に違うでしょうから結構なサイズダウンになったのかな?パソコンだとあまり差を感じないですよねw スマートフォンとかだときいてくるんでしょうか? 謎でーすw リクエスト数も結構違ってきますよね、きっとw

スマートフォン対応を視野に入れる。

actyway では、去年の6月ぐらいからスマートフォンからのアクセス多いです。Android を所持したこともあってそっちの記事書いたりしてるのが主な理由ですが、他には Twitter とかソーシャル系サービスからの流入も増えた事とかもあると思います!

一時期はアクセスの半分はスマートフォンからになりそうな月もありました。ここ半年の期間で見ると全体の4割ぐらいがスマートフォン(タブ機種含む)です!世間のスマホ所持率は上がっていってるんでしょうね〜w

WPtouch

それで actyway にスマホからアクセスしていただくと WPtouch を入れていますので定番の WPtouch の画面で表示されます。これではブログデザインの本来の印象と違うのと WPtouch を入れられているブロガーさんがかなり多いのとで、印象に残るアプローチが出来ていないだろうなーと思っていました。

それで次テーマを作るならスマホ対応もオリジナルでやってみたいなーと考えていたので、スマホ対応しやすい様にパソコンから見た印象とあまり違わない様にとサイドバー無しにしてみました! 前々から記事読むだけならサイドバーはむしろ邪魔だって意見も持っていたりと色々と他にも理由はあります。

サイドバー無しにするとかなりスッキリはするのですが、ナビゲーションと他ページへの導線の少なさが不安にはなります〜w あと内部リンクの少なさは検索エンジン的にどうなんだろうなーとかw 様子見ながら工夫してみたいとは思っています〜!

サイドバー使わない。

多くはスマホ対応を視野に入れてに書いてしまったのですが、サイドバーが無いとヘッダーかフッターにその分をつっこむしか無いと思います。もちろん最初隠してしまってボタンとかでにゅーんと表示させるとか考えたりもしたのですが、見えるところに表示させたいことからタブメニューを使おうと思いましたっ!

タブメニュー

色々なサイトのタブメニュー見たのですが、中でもまとりさんの Unformed Building のタブメニューが動きも軽快で良さそうな印象だったので、Twitter で聞かせていただいたところ jQuery で作ったオリジナルだと教えていただけました。

タブメニュー

で、どうせならわたしもオリジナルで作ってみたいなーとチャレンジしたら、なんかそれっぽくなったので良しとしますw まとりさんにはわざわざ jsFiddle でオリジナルのコードを公開して教えてくださったのですが、時間的に急いでいたのと自作でいけそうだったので今回は使わせていただいていません〜w 近いうちにチャレンジしたいと思っています!!(ご好意無駄にはしません><)

jQuery 使わない。

最近の jQuery って意外とサイズ大きくなってて jQuery1.7.1 で 94KB あったりします!それで出来たら jQuery 使わずに、使うぐらいなら極力 JavaScript で自分で書く!みたいな野心を持っていましたww

Totem: A Vertical Ticker jQuery Plugin

で、これは全然ダメでしたww
タブメニューでも JavaScript 使っていますし、フッターにあるツイートを表示させている部分も jquery.totemticker.js ってプラグイン入れています〜w ゆくゆくは、時間かけて自作でやってみたいと思います〜w

他のセールスポイント!

セールスポイントww
自分で書いててちょっと笑いましたw
アピールポイントですよね〜w

デザイン的なことで言えば、極力 CSS でやれることはやる!「古いブラウザは切り捨てだ!!」みたいな勢いですw(とは言いつつも IE からのアクセス多いので徐々に対応していきますw)
今回は前回と違って、明るめでかわいい雰囲気に、記事部分はあまり余計なことをせず読みやすいを心がけてみました!

全体的にデータの軽さや高速化重視で、ぁ、そうだ! WordPress の標準の jQuery を読み込みせずに Google AJAX API を使ってみたり、head ではなく body 閉じタグ直前で JavaScript は読み込むようにしたりもしました!

このあたりは、なつきさんの ついに出た!Chrome版「Page Speed」の使い方 | Stocker.jp / diary にて情報がまとめられているので、興味のある方は是非!参考になると思います〜w

ソーシャルボタン

↑これ画像です!(分かりにくいですよねw)

あと、ソーシャル系ボタンを記事フッターに設置しました!
これも高速化って観点からです。以前は記事上部に公式のボタンを、下部にはオリジナルのボタンを置いていましたw ちなみに一番右のお茶碗にてんこ盛りご飯アイコンは、手前味噌なのですがソーシャルてんこ盛りの物で @susi-paku さんが描いてくださいました!

ブログからソーシャルてんこ盛りを呼び出せるようにリンク貼っているのですが、このアイデア元はすしぱくさんですw susi-paku (‘A’) 楽しければいいのですPAKUTASO/ぱくたそ-WEB制作デザイン向けの無料写真素材/商用可能 とで設置してくださってて、それをわたしが真似しましたww
またこのあたりの設置の仕方も記事書きたいと思います〜!

最後に

ちょっと時間的に余裕なかったのでまとまりのない読みにくい内容で本当にすみません〜w
結局、今回のリニューアルで一番何が変わったのかと言いますと全体的にコンパクトになったので、表示速度だと個人的には思っています〜!計測して比較すれば良かったですよね、ううぅw
ということで、今年1年も actyway をよろしくお願いします〜\(^o^)/

@actywav えっ あのシュワンシュワンってサイヤ人がモチーフじゃないんですかTue Jan 31 15:51:37 via Echofon

 
リニュした actyway のどこかを見て @bamboo_c さんがこの様に言われていました…。
どこのことだと思いますか〜?(新しめの webkit か Firefox なら分かると思いますw)