iPhone.gsはiPhone用のWebサイト向けのグリッドライブラリです。

iPhone向けの最適化サイトを作る際に、グリッドに沿った奇麗なサイトを作りたいと思ったらiPhone.gsを使ってみましょう。4/6/8のグリッド表示ができます。


4カラムのグリッドです。320pxを最大幅として1:3、2:2、1:1:1:1に分かれます。


同様に6カラムのグリッドです。この場合は460px(サイトでは480pxとなっています)を最大幅としています。


8カラムです。かなり細かくなっています。


HTMLソースです。


横向きなら何とか…。

8カラムになると相当細かい印象ですが、より細かく制御したサイトが作れそうです。iPhone.gsはベースとして960 Grid Systemが使われています。

iPhone.gsはiPhone用のオープンソース・ソフトウェア(GPLとMIT Licenseのデュアルライセンス)です。

MOONGIFTはこう見る

スマートフォン向けのサイトは表現力が高い一方、画面サイズが小さいために表現する領域が限られるというジレンマに陥っています。そのため、情報をうまく配置していく工夫が必要で、大ざっぱな配置したできないライブラリよりも細かく制御できるライブラリを使っていく方がより表現が緻密になるはずです。それこそ方眼紙にサイトのパーツを並べていくイメージです。

後は画像を使ってインパクトあるWebサイトにする手もあります。かつてのガラケー向けサイトではできることが限られていたために表現力が乏しくても問題ありませんでしたが、iPhoneの場合こだわれば幾らでも細かく作り込めるようになっています。画面サイズと表現力のバランスをうまく保った制作力が求められていると言えそうです。

digdog / iPhone.gs

デモ

digdog/iphone.gs - GitHub