<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>OTCHY.NET &#187; ディスプレイ</title>
	<atom:link href="http://www.otchy.net/tag/%e3%83%87%e3%82%a3%e3%82%b9%e3%83%97%e3%83%ac%e3%82%a4/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.otchy.net</link>
	<description>Otchy の技術ネタ。JavaScript 率と Twitter 率がやや高く、他にも PHP/Java/Perl などなど。共通点は Web。</description>
	<lastBuildDate>Wed, 01 Feb 2012 14:39:17 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>PC ディスプレイの解像度とウェブサイトの横幅</title>
		<link>http://www.otchy.net/20090119/display-resolution-website-width/</link>
		<comments>http://www.otchy.net/20090119/display-resolution-website-width/#comments</comments>
		<pubDate>Mon, 19 Jan 2009 11:02:10 +0000</pubDate>
		<dc:creator>Otchy</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[ディスプレイ]]></category>
		<category><![CDATA[解像度]]></category>

		<guid isPermaLink="false">http://www.otchy.net/?p=197</guid>
		<description><![CDATA[レイアウトの基本となる画面サイズ色々：ITpro
実際のレイアウトサイズの目安には基準があり、最も低い環境に配慮した SVGAサイズなら760×420ピクセルが、標準的なサイズのXGAなら955×600ピクセルが妥当な大 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://itpro.nikkeibp.co.jp/article/COLUMN/20061017/250936/" target="_blank">レイアウトの基本となる画面サイズ色々：ITpro</a></p>
<blockquote><p>実際のレイアウトサイズの目安には基準があり、最も低い環境に配慮した SVGAサイズなら760×420ピクセルが、標準的なサイズのXGAなら955×600ピクセルが妥当な大きさである。</p></blockquote>
<p>ウェブサイトを作成するのであれば、最初のデザイン段階で気にしたいですね。</p>
<p>OTCHY.NET は、XGA 以上の環境を基準として、横幅を 950 ピクセル に合わせています。<br />
ダウンロードした 2 カラムのWP テーマを改造して 3 カラム×950 ピクセルにしたものです。<br />
Yahoo も今は 950 ピクセルなので、現状で最もポピュラーな横幅かと思います。</p>
<p>さて、それだけではおもしろくないので、<a href="http://www.webcomicranking.com" target="_blank">WCR</a> の先月 (2008年12月) のアクセス解析結果から、ユーザの画面の解像度部分を公開してみます。<br />
WCR というサイトであるが故のバイアスはかかっていますが、IE の比率が約 8 割のサイトなので、概ね今時の一般的な PC 環境と合致していると考えられます。<br />
(技術寄りのサイトほど、FireFox の比率が高まる傾向があるため)</p>
<p><a href="http://www.otchy.net/wp-content/uploads/2009/01/wcr_disp_top10.png"><img class="aligncenter size-full wp-image-210" src="http://www.otchy.net/wp-content/uploads/2009/01/wcr_disp_top10.png" alt="WCR 画面解像度 トップ 10" width="491" height="199" /></a></p>
<p>これを見て気づいたのは、XGA と SXGA を合わせて過半数ではあるものの、1280 × 800 や、1440 × 900 等のワイド画面が思ったより多いという事です。<br />
最近のノート PC でワイド画面が増えている事が影響していると思われます。</p>
<p>11位以下を見ても、横の解像度が 1024 ピクセル未満の環境は、1 % を割り込む状況なので、「横幅は 600 ピクセル以内で！」と声高に喧伝されていた 20 世紀終盤頃からすると、隔世の感がありますね。</p>
<p>ちなみに、WCR 自体は横幅を 900 ピクセルでデザインしています。<br />
900 ピクセルオーバーのデザインでは、XGA 環境であっても、ブラウザのサイドバーにブックマークを表示している場合に右端が切れてしまうためです。<br />
WCR では、右サイドバーにも比較的重要な情報を載せているため、多少右端が切れてしまっても、情報を取得できるように配慮しています。</p>
<p>逆に OTCHY.NET は同じ 3 カラムでも、サイドバーを右に 2 本の構成として、一番右のバーには比較的重要度の低い情報を載せています。<br />
個人ブログサイトという事で、ある程度割り切った作りに出来るのは楽ですね。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.otchy.net/20090119/display-resolution-website-width/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

