HTML5時代のサイトリニューアルはタグ打ちからどう変化したか

Photo by Niklas Pivic

サイトリニューアルの時に考えたこと。
それほどITに詳しいわけではないので妥当でないものも多分あるけど、どうしてこういうサイトになったかという経緯ということで。あと、いろいろなサービスを検討したので、僕が使わなかったものも人によっては参考になるかも。

スマホ対応

格安スマホというのがこのところ出てきているようだ。通話やデータ通信に制限がかかるけど、その分維持費がだいぶ安くなっている。この流れは今後大きくなってきそうだし、今web制作をするならこの格安スマホのことを考えたほうがよさそうだ。
ということは、小さい画面でも見やすくするということと、ページの読み込みを速くする、ということだ。これは普通のスマホでもそうだけど、特に格安スマホだとひと月に使えるデータの量に制限があるから、コンパクトさが大事なのはなおさらなのだ。
ブログをリニューアルするにあたって当初はWordPressが候補にあったけども、ここで、以前と同じようにタグ打ちで作るのでもいいんじゃないかと方向転換することになった。これだとサーバー代も安くすることができる。CMSのメンテナンスもいらないし、セキュリティ的にも安全だ。WordPressの見た目のかっこよさやアクセスアップ効果は惜しいけど。
より少なく。僕はミニマリストなのだ。

レスポンシブデザイン

次に、デバイスによってちょうどいい感じの表示に切り替える「レスポンシブデザイン」というのを検討。一度自分で以前作ったサイトがスマホでどう見えるかを確認したら、通常のページは表示が小さすぎて見ずらかったり、拡大すると今度は大きすぎてはみ出したりするんだけど、(WordPressで自動的に)レスポンシブで作ったところは見事スマホ用に最適化されていて、さすがと思った。
ただ、レスポンシブのデメリットとして、見えていないところも読み込むためにページ遷移に時間がかかるというのがあるらしい。ピンチイン・ピンチアウトに合わせて、通常の表示を対応させるリキッド(フレキシブル)レイアウトにすれば、必ずしもレスポンシブでなくてもよさそうだ。
また、Bootstrapという、簡単に今風のサイトが作れるフレームワークがあってこれにもけっこうひかれるものがあったけども、やっぱりちょっと重そう。

そんなところに "Responsive Grid System" というシンプルなフレームワークを見つけた。 通常のレスポンシブだとスマホ・タブレット・PCで3種類の表示を切り替えるところ、これは2種類という最小限のコードになっている。TOPページに採用することに。

http://responsive.gs/

ブログサービスの有料プラン

独自ドメインを使えるライブドアブログやはてなブログもよさそうだった。特にはてなブックマークというサービスを最近知って、これはおもしろい仕組みだと思ったし、はてなブログにしたらこのブックマークからのアクセスアップ効果が期待できるようだ。でも月に1000円近くするので、あきらめることにした。

静的サイトジェネレータ

軽いサイトを作るとなったときに目をひいたのが、「静的サイトジェネレータ」というものだった。記事の更新などの作業はブログ並みに簡単で、閲覧表示は静的サイト並みに速い、というツワモノなのだ。
問題は、RubyだとかPythonなどのプログラミングがある程度できないと使えないということ。僕が少し扱えるPHPのもあったけど、これは使っている人が少ないようで情報も少なく心もとない。
ただ静的サイトジェネレータ自体はけっこうよさそうなので、今後もこっち方面の様子は時々探っていきたい。

激安サーバー

完全に静的サイトで、プログラムをまったく使わないのであれば、レンタルサーバーがわりにamazonのクラウドストレージを使えば、格安を上回る激安でサイト運営できるようだ。従量制なので、サイトへのアクセスが少なかったりする時は激安、急にアクセスが増えても柔軟に対応できるのでパンクしたり重くなったりしないらしい。またネットオウルのウェブクロウにいたっては無料である。 僕はプログラムを使う可能性は少しあるので今回見送ったけど、これらも今後視野に入れておこうと思う。

そうしていろんな要素を吟味して、新しい流れも考慮してたどりついたのは、思いがけないことに「昔ながらのタグ打ちでつくる」というはじめにいた場所だったのだ。