新着記事
2008年02月09日

webページの横幅

webページの横幅は今まで「800×600px」という解像度をひとつの基準にして作成するもんだという了解がありました。ところがYahoo! JAPANのリニューアルを受けて、そろそろ最大1000pxにしてもいいじゃないのかという動きが目に付きます。

参考
発端はたぶんこちら→Yahoo! JAPANのデザインが横幅950pxに変更されるという時代の流れ
1000px弱時代のWebデザイン
ウェブサイトの横幅と高さをYahoo!リニューアルから改めて考える

このブログではなく、いわゆるホームページとして作っているサイトを持っているので、私もトップページのサイズを見直すことにしました。webページの横幅はサイズを固定すべきではないという考え方にも理があるので、私はコンテンツ内部のページは絶対値で固定させず、余白をスタイルシートで%指定してあります。ただサイトの入り口のトップページは、例外的にピクセル指定で横幅を決めていました。それはスクロールしないで見られる領域になるべく多くの情報を表示させたい、デザインも重視したいという理由からです。もう少し横幅を広げられれば、もっと見やすいページになるかもしれない…。

解像度割合
解像度割合
←画像クリックで拡大
過去1ヶ月間のアクセス解析を見ると、解像度の上位10位はこんな具合。20位の「800×628px」1回を足しても、1000px以下で見ている割合は全体の2%程度でした。
Google Analyticsによる

確かに小さな画面で見る人は減ったようです。でも数にしたら1ヶ月間に26回のアクセスがあるし、いきなり大幅に広げてもデザイン上バランスが悪くなるので、とりあえず780pxを800pxに変更しました。いずれは900pxくらいの横幅にしたいと考えています。



拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 16:47 | Comment(6) | TrackBack(1) | サイト制作試行錯誤 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんにちは。

ちょうどNucleus(ニュークリアス)をさわり始めた頃かな、
自社HPをNucleus(ニュークリアス)で作り直そうと思い始めた頃に、この記事がUpされたような気がします。

横幅をいくつにしようかな・・・。
現在のブログ版HPは860、950はちょっと大きいかな・・・。

ここだけの話ですが(^^ゞ
Nucleus(ニュークリアス)版の作りかけHPは、index.phpを指定していただくと表示されちゃいます。
社外でこの話をしたのはここだけ・・・。
ここまではそれなりに出来ました。後はTOP頁をどうしようか・・・等と考えながら正式採用の是非を検討予定です。

Posted by つかさ at 2008年02月15日 23:26
つかささん
>社外でこの話をしたのはここだけ・・・。

わー、光栄です(^^;
「index.php」を拝見しました。
かっこいい!(笑)
横幅のサイズとバランス、ちょうどいいのじゃないでしょうか。
ともかく横スクロールを強いるのは避けたいですし。

いいなあ、かっこいいなあ。
Movable Typeは借りているサーバー容量が足りないので諦めたのですが
ソフトという手もあるか…
また気持ちが傾いてしまっています(笑)
Posted by Masako at 2008年02月16日 00:38
こんにちは。

NucleusからMTに趣旨替えして、試行錯誤中です。

http://www.kawanaka-keiei.jp/index_mt2.html

こんな感じ↑で考えているんですが、どうでしょう???
公開予定なのですが、その前に「ご神託」をと思いまして(^^)。
Posted by つかさ at 2008年05月18日 20:56
拝見しました。
「ご神託」なんかではありませんが、せっかくですので素人なりの印象を述べさせてもらいます(^^;

デザインはとてもさわやかで好印象でした。
ビルダーで作ったサイトと違い、スッキリして見やすいです。
メニュー、最新記事リストと、目とマウスの自然な動きに合っていて、ユーザビリティも良いと思います。

小さなことですが2点ほど。
文字(フォント)サイズ固定になっていますが、できたらサイズ固定じゃない方が良いのでは。
と言っても、IEでの文字の大きさ「中」で見やすいです。
念のためFirefoxで見たら、Firefoxだと文字の大きさが変えられますね…なんでだろ(笑)
ついでに言うと、Firefoxだと「新着記事はこちらから」のリストマーク「・」が右サイドバーの端に密着して見えます(たいした問題ではないと思いますが)。

それから、私のディスプレイの解像度は1024×768にしているのですが、
この解像度(平均あるいは1280×1024についで2番手)ではスクロールが必要です。
サブタイトルの背景(空画像)の縦をもう少し短くすると、画面にピタッと収まり
スクロールも必要がなくなりそうなのですが。
バランス的にもあの部分の縦幅を取りすぎているような気もします。
この意見は解像度1280×1024で収まるのなら無視してください。

以上、勝手なことを申し上げてごめんなさい。
MTに趣旨替えした理由など、過去ログを彷徨ってしまいました(笑)
個人ではないので、ライセンスを購入したのでしょうか?

ますますMTを導入したくなってしまいましたが、やりません。たぶん…(笑)
Posted by Masako at 2008年05月18日 23:09
丁寧な「天の声」(^^)、ありがとうございます。


フォントサイズの固定・可変の概念が私にはないので、もちっと補足いただければ、非常に嬉しく、有りがたく思う次第であります。m(__)m


このデザインはMT標準装備の一つです。サブタイトルの画像は変更しました。
ここの縦幅がもうちょっと短いデザインもあり、悩んでいる項目の一つです。

スクロール、そうなんですよね。
私のノートの解像度は1400x1050なので、何でもかんでもすっきり見えちゃうんです。
(時々、社員の1024x768で確認してはいるのですが。)


Firefoxでも確認いただき、ありがとうございます。
このブログの記事の「他のブラウザーでの見え方チェックHP」も試したのですが、人気HPらしく、なかなか結果を教えてくれません(×_×)


MTに趣旨替えした理由は、「素人はスタンダードを使う」です(^^ゞ
Nucleusは非常に素晴らしいシステムだと思うのですが、壁に当たったときのサポートが心配なので、仕事で使うシステムは「スタンダード」としました。書籍もブログも桁違いに多いですから。

という訳で、ライセンス購入です。


早々のRESに感謝しつつ、質問させていただきました。

感謝を込めて。m(__)m
Posted by つかさ at 2008年05月19日 00:43
IEでフォントサイズが変えられないので、てっきり固定にしていると思いましたが…
どうやらMTにはこんな現象が起きるようです。
http://syoboi.com/movabletype/000031.html

Firefoxでのフォント標準サイズだと、小さくて読みにくくなります。
でもブラウザで「大きくする」「小さくする」が有効ですので
とくにいじらなくてよろしいのではないでしょうか。
Posted by Masako at 2008年05月19日 17:10
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

最近のディスプレーサイズとWebデザイン
Excerpt: 3.4年ほど前まではサイトのデザインする際、横幅は700px〜800pxほどでしたが、急激な画面サイズの大型化、特にワイドディスプレーがはやり横幅が拡がっている。Yahh!でもつい最近のリデザインで横..
Weblog: レディーファースト
Tracked: 2008-02-22 06:19
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。