このサイトをスマートフォンでも見られるようにしてみました。
IS03とiPhone4で確認してます。他の機種では不明…。

別ページでスマートフォン用サイト作ろうかとも思いましたが面倒になったので、最近流行り（との噂）のMedia Queriesを使って簡易対応してみました。
やってみてわかったのですが、これはちょっとコツがいりそうです。
特に、作った後になってMedia Queries適用させるのは無理があるな…と実感したので、ちょっとまとめ。

Media Queries

機種振り分けなどではなく、画面サイズで表示用のcssを切り替える方法です。
このサイトをマウス使ってブラウザの横幅をせまくすると、PCでも動作確認できます。
PCとスマートフォンの中間サイズの対応はしてないので、横幅を中途半端なサイズにすると変な感じになりますが…。

Media Queriesについての詳しいことは↓を見た方が早いです。
■coliss
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html
■kachibit.net
http://kachibito.net/wordpress/media-queries-themes.html
■Media Queries実例集（海外サイト）
http://mediaqueri.es/

あと、Media Queriesにも問題が指摘されているようで、この問題は把握した上で対応したいところです。
http://unformedbuilding.com/articles/css-media-queries-for-mobile/

作った後からのMedia Queries対応

Media Queriesの考え方として、当然ですが色々なパーツが可変であることを前提に作る必要があります。
リニューアルした際はそんなこと全く考えてなかったので、後になってMedia Queries対応やってみようとすると、色々と面倒なことが判明しました。

cssで描けるものはcssで

下線も画像化しているタイトル文字画像などは、文字画像を小さくすると下線も一緒に予想以上に小さくなったり、かといって画像サイズをそのままにしておくと下線が領域からはみ出したりします。
ただの下線など、cssで描けるものはできる限りcssで描くようにした方が後々良さそうです。
このサイトも、いくつか下線を画像化していたところを後になってやりなおすことになりました。

html構造的に大丈夫か

フッターに「Recent Entries」と「About」があり、スマートフォンでは「Recent Entries」の下に「About」が配置されるようにしてます。
リニューアル時にはそんなこと考えてなかったので、HTML的に「About」の方を先に書いていたら、当然ですがMedia Queries対応してみると「About」が「Recent Entries」の上に来てしまったので、HTML構造を書き換えることになりました。

そのデザインは小さくなれる？

個人的に一番重要なことだと思ってますが、横幅を可変させることに対応できないデザインだとどうにもなりません。
狭い画面に入りきらないデザインも同様です。
諦めてスマートフォン用にリデザインした方が良いです。

例えばこのサイトだと、PHOTOの詳細表示がどうにもなりませんでした。
仕方ないので、詳細表示についてはページを切り替えるという、キャリア振り分けに近い方法を取ることで一応対応したことにしてます。

あと、トップページも本当は更新履歴を一つ一つを小さく羅列してもう少し見やすくしたいところですが、大幅に構造を変える必要がありそうだったので断念しました…。

javascriptは？

タッチパネルだとマウスオーバーが無いので、マウスオーバー用のjavascriptアクションは不要です。
タップしたつもりがマウスオーバー用の動作だけが起こるなど、かえって邪魔になることすらあります。
あと、PCなら問題ない負荷でも、スマートフォンなどでは高負荷になって重いサイトになってしまうことがあります。

Jacascriptの問題はMedia Queriesでは対応できないので、結局何らかの振り分けで機能を有効にしたり無効にしたりすることに…。

まとめ

Media Queriesに本気で取り組むなら、可変を前提としたデザイン、可変に適応するHTML構造、最適なcss、必要十分なjavascriptを、作る前の段階からよく考えておく必要があります。

一言で言うなら、Media Queriesのご利用は計画的に、というところでしょうか。