サイトリニューアルしました

この記事をシェアする

  • ツイッターでシェアする
  • facebookでシェアする
  • google+でシェアする
  • はてぶにブックマークする
サイトリニューアルしました

最近、すごいブロガーでガジェッターの方と知り合いまして、ものすごい影響を受けてしまいました。
そこで、まずは我がブログサイトをリニューアルせねば!!と思いたち、1週間ほどで見た目はほぼリニューアル完了しました。
なんだかんだで年に1回くらいリニューアルをしているこのサイトですが、今回気をつけたことなどをまとめます。




左寄せからセンター寄せレイアウトへ変更

左寄せサイトがかっこいい。
そんな風に思っていた時代が僕にもありました。
いや、実は今でも少しだけ思ってますけど。でも、減ったんですよね左寄せサイト。多分スマホやタブレット端末の台頭やレスポンシブデザインの誕生が原因なんじゃないかなと思います。
もちろん、大きな流れには逆らえず我がサイトも右にならえです。




横幅はもう気にしない

幅1024pxのモニターを考慮して、スクロールバーが出る分を計算に入れて、サイトは幅960px前後で制作する。というのが、なんとなーくweb業界の暗黙の了解みたいになってる、いや、なってたと思います。
この概念がレスポンシブウェブデザインの登場で揺らいでますが、今回のリニューアルではそれすらもあまり考えず、必要な幅を必要なだけ使いました。
みんながドヤ顔で使ってる11インチMacBookの解像度が1,366*768pxですもんね。もう1024にこだわる必要はないと思います。
強いて言えばiPadには対応しないとダメだと思いますけど、まあそこはMedia Queriesで。




3カラムは意地でも採用

横幅の話から続きますが、今回も3カラムは採用しました。
理由は1つ。スクロールすると付いてくる広告を導入したかったからです。最後までスクロールすると、右のカラムはほぼ広告で埋まるという仕組みです。 これ、嫌がるユーザーさんもいるんですけど、やっぱりよくクリックされるんですよね。デザイン性、ユーザビリティを疎かにして収入を優先しました。背に腹は代えられません。




シャドウやグラデに頼りすぎずしかもフラットデザインにしすぎない

はじめに言っておきますが、僕はアンチフラットデザインです。あれは日本のサイトには合わない。日本語と相性が悪すぎる。
ですが、フラットデザインのメリットやかっこよさも理解しています。なので、今回は少しだけ取り入れました。
フラットデザインを少しだけ採用するにあたって、ドロップシャドウやグラデーションはなるべく排除しました。これは後述する「CSS3をなるべく使わない」ことにも貢献してくれました。
グランジっぽいテクスチャを随所に入れることで、フラットデザイン感を消すことに成功したと思います。テクスチャがなかったらほぼフラットデザインなんじゃね?




フォントはMSゴシックからメイリオに

2つ前のサイトではメイリオを使ってたんですが、メイリオってイケてなくない?と思って前回からはMSゴシックを使っていました。
しかし、下記サイトを見たのがきっかけで今回またメイリオに戻しました。

CSSのfont-family指定はこれで決まり!(2013春)遠近法ノートさま

あと、英語表記をなるべく排除しました。New Article → 新着記事 のように。日本人ですしおすし。

ところで、メイリオって「明瞭」って意味だって、知ってました?




コーディングはHTML5で!CSS3とwebfontは使いすぎない!

html5.jsを使って無理やりIE8に対応させるのはあまり良くないんじゃないか。と思っています。下記記事を読んでからそう思うようになりました。

html5shiv.jsを使うのをやめることにしました(Web ambさま)


ですが、HTML5が流行りだした頃に作った旧サイトが、出来そうなことを色々試しながらHTML5で組んでしまってあったのと、一応、来年になればIE8は全滅する(はず)なので、HTML5で組みました。


 

CSS3もなるべく使わずに組みました。セレクタもなるべく使ってません。selectivizr.jsも外しました。webフォントも使いすぎないように気をつけました。

なるべくいろんな技を使わずにシンプルにかっこ良くなるように気をつかいました。シンプルを意識しながら、このサイトの特徴であるグランジ感・中二感は残すよう意識しました。

IE6、IE7は滅びろ。




facebookページを開設

今回のリニューアルから少しだけパブリックになろうと思って、今さらですがfacebookページを作りました。
最近のfacebookのタイムラインは、ほぼ鬼女の皆さんの投稿で埋まっています。一昔前に流行って今やゴーストタウンと化した某オレンジ色SNSの様ですね。下降の一途をたどるfacebookブームですが、うざくない程度の更新頻度なので、是非いいね!しておいてくださいね。

No Fateのfacebookページ




pocketボタンを設置

最近のソーシャル系では一番のお気に入り「pocket
あとで読む!というシンプルな機能に特化したサービスです。 ブックマークとなにが違うん?と思ってました。違うんです!はっきりと!!
まとめサイトやtips系サイトを斜め読みしてるとき、タイトルだけ流し見してるときなど「興味あるけど今読むテンションじゃないなー」ってときにpocket!!時間があるときにまとめ読みできます。
このサイトをpocketしてくれる奇特な人はいないでしょうけど。




コメント機能にDISQUSを採用

このブログはMovable Typeを使って制作しています。
以前はMovable Type標準のコメントを使ってたんですが、やはりスパムが多い!
ということで、おしゃれなブロガーさんのブログ(だいたいWordPress)でよく利用されている高機能コメントサービス「DISQUS」を使うことにしました。

様々なSNSサービスのアカウントでコメントができるサービスなんですけど、そういったSNSを利用していない人にはハードルが高いと思うので、多分コメントは減るんだろうな。と思ってますけど、ものは試しに入れてみました。

WordPressに導入するのは簡単そうだったんですけど、MTにインストールするのはすこし面倒そうでした。


下記サイトを参考に導入しました。

外部コメントシステム「DISQUS」の導入(MovableType)(Stack Stack!さま)
MTに DISQUSを配備するには(Ogawa::Buzzさま)


なぜか日本語が選べなかったんで英語で出てます。
下記記事も見たんですけどおかしいですね。まぁ仕方ない。そのうち対応するやろ。

【朗報】Disqusが日本語再対応している件【2013年3月19現在】(塞翁が馬さま)






もうちょっと書こうと思ってたことがあるんですけど、忘れたのでこれくらいにしておきます。

兎にも角にも今回のリニューアルは、レンダリング速度を上げることに注力しました。CSS3やwebフォントを使えば軽くなると考えがちですが、画像と比べたら軽いだけでやっぱり何もしないよりは重いわけで。なのでなるべくそれも使いすぎないようにしました。以前のサイトはいろいろ試しすぎててかなり重たかったですからね。
でも、SNSのボタンやadsense広告で結局重たくなってる気がします。残念です。

レスポンシブにしたり広告の場所を考えたりtagを見なおしたり、という作業がまだ済んでませんので、そのうち作業しようと思います。

あ、あとこれからメインイラストを発注してサイトの右下にどーんと載せようと思っています。
透過PNGになると思うのでさらに重くなちゃうかな。