サイトの横幅議論

Webサイトにおけるwidthについて、非常に興味深い記事があったのでご紹介。

「サイトの横幅」再論：950px時代のウェブデザイン
絵文録ことのは 様より。

リンク先の最上部に、2006年ごろに書かれたエントリサイトの横幅を640ピクセルにする理由のリンクもあるので、是非こちらもあわせてご覧下さい。
非常に説得力のある記事で、読んでいて面白かったです。

私がWeb制作を始めたのは5年ほど前ですが、当時はまだ800×600解像度の割合が少なくなく、本格的に作品制作を始める2年前まではずっと、横幅800pxでサイトを作っていました。

解像度が1024×768が主流になった今でも、正直横幅900px超のサイトを作るのに抵抗があります。
ただ、その要因として、私の使用しているPCの解像度が1024×768のため、900px超だと窮屈に見えるから。という個人的な視点が入っている点は否めませんが…。

ちなみに本ブログは最小幅600px、最大幅1200pxで回覧できるようになってます。
（max-widthプロパティで指定をしているので、IE6には全く効果がないみたいですが。）
両端のカラムが220pxなので、本体幅は160px～760px。
さらに、左右にpaddingが20pxずつあるので、実際の文字表示領域は120px～720pxということに。

なぜこのようなサイズにしているかというと、
このサイトに訪れる方の解像度が1024×768以上であることが多いからです。
だいたいは、ターゲットユーザに合わせて幅を指定することが多いです。

…この、「サイトに訪れる方の解像度が1024×768以上であることが多い」というのは、アクセス解析などで分かるわけですが、その人が実際にブラウザを画面いっぱいに表示しているかどうかは、正直なところ分からないのだ、と言うことに気付かされました。
解像度はモニタの解像度を示しているだけで、ブラウザの表示域を示しているわけではないのです。
そして、最大化していない場合とか、お気に入りバーとか、GoogleToolbarとか、上下左右に様々なツールを表示すれば、それだけコンテンツを表示する画面が減るわけです。

…そんな単純なことに、今さら気付きました。
（ちなみに、じゃあアクセス解析使えねーじゃん。と言っているわけではありません。）

最近はミニノートも増えてきているし、
もしかしたらサイトの表示サイズが再変化することもあるかもしれませんね。

話を戻すと。
個人的には、サイトの横幅どうのっていうものは、どれも私論でしかないと思うのです。
別に、リキッドレイアウトがいいんだったら、リキッドレイアウトにすればいい。
固定レイアウトがしたいならpxで固定すればいい。
「つぶあんとこしあんどっちがいい？」のと同じで、正しい答えなんて無いんだから。

だからと言って、じゃあレイアウトについてなんて考えなくてもいいや。って問題ではなくて。

誰のためにサイトを作っているのか考えたら、おのずと結論は出るはずです。
自分が正しいと証明するためだけにレイアウトを選んでいるのなら、それは何を選んだって間違っているということ。

どんな人がこのサイトを見るのか。どんな人にサイトを見てほしいのか。
大事なのはやっぱりそこなんですよね。

Drawterでデザインカンプ制作

ブラウザ上でWYSIWYG的にWebサイトが作れる、Drawterに関するメモ。
サイトにアクセスするとでさっそくサイト制作ができます。

Drawterは、jQueryライブラリをベースにしたJavaScriptで制作されています。
テーブルレイアウトではなく、CSSでレイアウトが組めるツール。

PCスペック的には、メモリが256M以上、CPUが800Mhz 以上であることが必要条件です。

このDrawterは、マークアップをしていく際にHTMLやCSSの知識が必要になってくるので、最低限HTML、CSSがわかる人向け。
初心者向きのツールではありません。

ただ、ブラウザ上にルーラーがあって、ボックスを手早く生成することができるのは優れもの。
そして、他のオーサリングソフトとは比較にならないくらいの動作の軽さ。

はじめに「サイト制作ができます」とは書きましたが、どちらかというとデザインカンプ制作にオススメします。

なぜデザインカンプ用かというと、自分でも色々いじってみたのですが、サイトを作るにはあまりにエディタが本格的過ぎて、扱いづらいからです（笑）。自分でHTML打つほうが数倍早い。道具の使い方を覚えるのに苦労するくらいだったら、使わないほうがいいかな、というのが個人的見解。

詳しい動かし方は、DrawterのヘッダのOther→Screen Castで、サイト制作の手順を見ることができます。

が、相当でかいディスプレイサイズで手順を説明しているらしく、1024×768の私のPCでは画面が小さすぎてスクロールバーが出てしまいました。注意。
実際に作業をするときも、1024×768の画面では狭くて作業しづらいかもしれません。

また、制作者のサイトはどうもドイツ語っぽい言語で書かれているようで、純日本人の私にはうまく読めませんでした。

ちなみに、HTMLファイルを自動生成してくれるわけではないので、
作成したデザインをHTMLにしたい場合は、DrawterのヘッダのCode→Generate codeを選択すると、HTMLとCSSのコードが出てきます。これをコピペして使ってください。

デザインができるまで

idea*idea 様にて、
「雑誌のページデザインを作るまで」の動画（Youtube）の紹介がされていたので、お気に入りメモ。

雑誌のデザインの場合はずっとPhotoshopでの作業になるので
画面変化を動画として保存できますが、
Webだとコーディング→ブラウジングの繰り返しなので、
なかなか作業風景を動画にするのは難しいものがあります。

デュアルディスプレイでの作業ならもう少し楽かもしれませんが、
CSS書き換えた後は、ブラウザをそのつど更新しないと反映されないのでなんとも言えないですね。

ちなみに、エントリーのコメントに、
「Webサイトのできるまでの変遷・gifアニメ」へのリンクが貼られています。
こちらもオススメです。

以前、CSSを書くタイミングという記事を書きましたが、
このgifアニメではコンテンツ→CSSの順で作業が行われていたので、
少し親近感が湧きました。

作業がわかりやすいようにコンテンツ（文章）を先に入れていたかもしれないので、
この方がいつもこの順番で製作されているのかは分かりませんが…。

自分なりのルールを明確にして、
それに沿ってWebサイトを作るように意識することが大事だと感じました。

Firefoxのエクステンション「GridFox」でグリッドレイアウト

英語翻訳練習第二弾。

今回は、グリッドレイアウトに便利なGridFoxという、Firefox用エクステンションの紹介です。

---

近年、グリッドレイアウトが近年よく使われるようになってきました。

しかし、ひとつ問題があります。
原案のモックアップのグリッドが、最終的なWebでもちゃんと維持されているのかどうか、
確かめるすべがないということです。

私が最初にグリッドレイアウトのコーディングをしたとき、
サイトのスクリーンショットをわざわざ撮って、Photoshopで作ったオリジナルのグリッドと比較しました。
（だそうです。私も良くやります。）

GridFoxは、Firefoxの拡張機能です。
Webサイトのグリッドをブラウザ上で表示してくれる便利なもの。
簡単にカスタマイズでき、正確なグリッドレイアウトを可能にします。

---

以上、意訳です
例によって、本文のコピーライトはGridFoxサイトに帰属します。
英訳は必ずしも正しいとは限りません。

どうも、訳文がAdobe日本語サイトみたいになっちゃって気持ち悪いですね。

ダウンロード方法

GridFoxサイトの中段にある青い太字「Install GridFox v1.1」をクリックしてください。

使い方

インストールしたら、グリッドを表示させたいWebサイトの上で右クリック。
GridFox→Show Gridでグリッドを表示できるようです。

3段組・メインコンテンツリキッドレイアウトの作り方２

前回、このブログを作る際に用いた３段組リキッドレイアウトについての記事を書きましたが、
このソースは、IEの標準モードでは表示がうまくいかないことがわかりました。

XHTMLで作られているWebサイトのほとんどはXML宣言がない＝標準モードであり、
HTMLで作られているサイトもほとんどがDOCTYPEでURL指定されている＝標準モードです。

このブログはたまたま互換モードのDOCTYPEだったので事なきを得たのですが、
やはり標準モードバージョンもないと不便な気がしますので、
標準モードでもできる３段組メインコンテンツリキッドレイアウトを考えてみました。