1月 022005
 

2005年1月から、永井俊哉ドットコムは、Movable Type 3.1 を用いてウェッブサイトを再構築します。引越しは、今年度内には完了したいと思っています。もちろん、引越しが完了すれば、新規のコンテンツもRSSを用いて配信します。

image
ブログ化された永井俊哉ドットコム。三種類の画像解析度に対応できるように設計されている(後述)。

用語解説:RSSはXMLを応用したファイルで、後で紹介するRSSリーダーと呼ばれるクライアントソフトを使って、更新したばかりのウェブページをタイムリーかつ集約的に読むことができます。

これまで、毎月15日に新規のコンテンツを作って、メルマガで配信していましたが、ブログを始めるにともなって、配信は不定期にします。これまでよりも、頻度を高くし、文の長さを短くするように努力します。メルマガの場合、発行周期が短いと、読者から迷惑がられますが、ブログの場合、そのような心配はありませんので。

これまで、私は、Microsoft FrontPage 2003を使って、サイト構築を行っていましたが、Movable Type に乗り換えようと思ったのは、

  1. ping 送信ができる
  2. トラックバックができる
  3. コメント欄を掲示板として使える

といったところが魅力的だったからです。HTMLからXHTMLへの移行を機会に、コンテンツを見直したり、ソースコードをアップデートしたり、引用方法を統一したりしたため、かなり時間がかかってしまいましたが、数年に一度はこうした改装工事をしなければならないのが、ウェッブマスターの宿命というものです。

読者サイドにとっての、ブログ化の最大のメリットは、新規コンテンツの配信をRSSリーダーを使って受信できるというところにあります。RSS配信は、次の点で、メルマガ配信よりも優れています。

  1. テキストベースのメルマガよりも表現力が豊か
  2. HTMLメルマガよりもセキュリティが高い
  3. プライバシーの保護やスパム対策に有効
  4. 登録と解除が瞬時にできる
  5. キーワードによる「未来検索」ができる

既に、RSSリーダーをご利用の方は、それを使っていただければよいのですが、まだ使ったことがないという方は、「お薦めの無料RSSリーダー」を参考にして、自分にあったリーダーを選んでください。

なお、メルマガ配信も続けますので、いちいちRSSリーダーを起動するのが面倒という方は、引き続き、メルマガをご利用ください。メルマガでは、お薦めのコンテンツのエントリー(導入部)をお送りします。

追記:複数の画面解像度にどう対応するべきか

一方でパソコンの画面解像度が高くなり、他方で小さな画面しか持たない携帯電話がフルブラウザを備えるなか、ウェブマスターはどのようにサイトをデザインすればよいのでしょうか。現時点でベストと思える案を提示します。

1. PCでの画面解像度

ウェブアクセス解析調査をおこなっているオランダの OneStat.com によると、インターネットユーザーが最も多く利用している画面解像度は1024×768(ピクセル)とのことです。

The most popular screen resolutions on the web in the world
[OneStat.com]
順位解像度割合
1.1024×76854.02%
2.800×60024.66%
3.1280×102414.1%
4.1152×8644%
5.640×4800.6%
6.1600×12000.8%
7.1152×8700.1%

画面解像度は、パソコンのスペックが高くなるほど大きくなる傾向があり、日本での1024×768のシェアは、世界でのそれよりもさらに高いようです [Web資料館-画面解像度のシェア調査] 。

2. 携帯での画面解像度

現在、携帯でPC用ウェブサイトを閲覧することが徐々に普及しています。

携帯電話用アプリケーションの開発・販売を行うjig.jpは3月4日、専用アプリケーションをインストールすることなく、携帯電話機からPC用ウェブサイトを見られるサービス「jigブラウザWEB」を開始したと発表した。NTTドコモ、KDDIのau、ボーダフォンの3キャリアに対応する。

携帯端末では、QVGA(Quarter VGA)と呼ばれる、VGA(640×480)の1/4の解像度を持つ320×240の解像度が主流でした。しかし、フルブラウザを備えて、通常のウェブサイトをブラウズするには、これでは小さすぎます。

KDDIは、2004年10月13日に、2.6インチサイズのワイドQVGA液晶(240×400ピクセル)を搭載し、PC向けのウェブページを閲覧することができる「W21CA」(カシオ計算機製)を発表しました。

しかし、これでもまだ不十分なので、端末開発メーカーは、画像解像度をさらに上げようと努力しているようです。特に、サムスン電子は、同じ月の22日に、2.4インチ以下の携帯電話用超小型TFT-LCDパネルの解像度をVGA級に大幅向上させことに成功したと発表しました。

サムスン電子は来年第2四半期にこの製品を量産開始、後に高解像度を必要とする先端携帯電話製品への適用を拡大していく計画です。

パナソニックは、「折りたたみと回転の融合」 [Mobile:折りたたみと回転の融合~「P505iS」] をすすめ、ディスプレイを90度回転してでロックする「Newビューアスタイル」をP506iCに導入しています。ウェブページの閲覧には、横長のディスプレイの方が向いています。

通信速度や料金など、課題は多いものの、今後、640×480の解像度で携帯端末からウェッブページを閲覧する人が増えると予想されます。

3. サイトのデザインはどうするべきか

Movable Type 3.x でのコンテンツの表示エリアは、デフォルトでは、700ピクセルの幅で表示されていますが、現在PCで主流の画面解像度が1024×768であることを考えると、700ピクセルという幅は狭すぎます。

しかし、RSSリーダーなどで、サイドバーを使っている場合は、1024×768でも、実質的には幅が800ピクセルになります。小さな文字を見ることが苦痛という高齢者は、今後も800×600を使い続けるでしょうから、800×600も無視できません。

そして、携帯端末からウェブにアクセスする人が今後増えることを考えると、少なくとも本文は、640ピクセル以内の幅に収める必要があります。

パーセント表示で、あらゆる画像解析度に対応するという方法もありますが、それだと、レイアウトが予想困難となり、画像や表の大きさを決めるのに苦労するので、あくまでも、ピクセル単位でレイアウトを決めたいと思います。

私が提案するのは、左から順に

本文(640px)+ 左サイドバー(160px)+ 右サイドバー(224px)

と三つカラムを並べる方法です。このデザインなら、640×480だと本文だけ、800×600なら、左サイドバーまで、1024×768以上なら、すべてのコンテンツを見ることができます。

実際の数字を決める時には、縦スクロールの幅を除くなど、微調節が必要です。私は、CSSでは次のように数値を決めています。結果は、ご覧のとおりのものです。

body {
margin: 0px;
padding: 0px;
}

#container {
margin: 0px;
padding: 0px;
width: 1000px;
}

#center {
margin: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
float: left;
width: 618px;
overflow: visible;
}

.content {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 20px;
}

#left {
margin: 0px;
padding-top: 0px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
width: 120px;
float: left;
overflow: visible;
}

#right {
margin: 0px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
width: 180px;
float: left;
overflow: visible;
}

.sidebar {
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
padding: 0px;
}
 

#container の幅は、#center,#left,#right の幅とマージン(そして、なぜだかパディング)の幅の合計に2ピクセルを足した値となります。それ以下だと、カラムが回り込まなくなってしまいます。"overflow"は、デフォルトでは、"hidden"となっていますが、これだとFirefoxで、幅の値が狂うので、"visible"にしておきましょう。

このページをフォローする
私が書いた本

 返信する

以下のHTML タグと属性が利用できます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

/* ]]> */