Webページのモックアップを設計するための標準的な幅はありますか?


回答:


19

1024pxの解像度用に設計している場合でも、モックアップのほとんどを幅1200pxで開始します。1000pxのモックアップ内にガイドを設定しました。高さは異なる場合があります。モックアップファイルの幅を広げる理由は、周囲のスペースを空けてデザインがどのように感じるかを確認するためです。最近ではほとんどの人が1024px以上を使用しています。


1
モックアップをターゲット解像度の幅よりも広くする正当な理由を提供するためにのみ答えてください。
e100

「px」の代わりに「em」を使用する必要があります。たとえば、1000pxの代わりに62.5emを使用します。これは、「通常の」PCでも同じように見えますが、それほど普通ではない画面(HiDPI、モバイルなど)ではよりエレガントに適応します。
-WhyNotHugo

9

Webページのモックアップを設計するための標準的な幅はありますか?

そうですね?

むかしむかし(下記参照)、Webデザインはほとんどの場合、ほとんどの画面に適切に収まる単一のビューを作成しようとしました。過去5年間で、レスポンシブWebデザイン(RWD)の採用により、状況は大きく変わりました。

RWDは、デバイスのサイズに関係なく、あらゆるデバイスに適度に適合するように設計を行う設計原則です。

Web開発では、多くの要因に応じて、メディアクエリを使用してさまざまなスタイルのセットをWebページに適用することがよくあります。一般的な要因には次のものがあります。

  • 現在の画面幅
  • 現在の画面の高さ
  • デバイス幅
  • デバイスの高さ
  • デバイスの向き

スタイルは特定の画面サイズを対象とすることができるため、特定の範囲を対象とするデザインの複数のセットを作成することは珍しくありません。

明確にするために、設定された「標準」はありません。「設計者はこれらのサイジングガイドラインに従って設計を行うべきです」と言う統治機関や組織はありません。最終的には、それは判断の呼び出しです。

そうは言っても、Web開発業界は、繰り返し発生する一般的なブレークポイントのセットを有機的に考え出しました。

典型的なブレークポイントは現在の画面幅用であり、一般的には次のとおりです。

単位 px

  • 320
  • 480
  • 768
  • 1024
  • 1200
  • 1600

これらの特定の数値の理由はかなり平凡です。元のiPhoneの画面のサイズは320×480でした。元のiPadの画面のサイズは768×1024でした。1600×1200は、より大きな画面解像度で一般的です。

これらのブレークポイントの一部またはすべてでモックアップを表示することは一般的ですが、中間のデザイン変曲点を示す特定のページの複数のレンダリングを提供する必要もあります。

768px幅で積み上げられたアイテムを表示する幅の広いコンプには、アイテムが2列に切り替わった900pxのデザインを含める必要があります。これらの中間ブレークポイントに多くのデザインセットを提供する必要がある場合は、個々のコンポーネントを設計し、モックアップにページの残りの部分を含めずに、コンポーネントごとにコンポーネントが変化するブレークポイントを表示することを強くお勧めします。

これは、特定のUIコンポーネントが見つからないか、ブレークポイント間で一致しないという一般的な設計上の落とし穴を回避するのにも役立ちます。


以下は、私が後世のために保持しているこの回答の古いバージョンですが、しばらくの間は関係ありませんでした

誰もまだこれについて言及していないことに驚いています:

Googleには、という素晴らしい開発ツールがあります

ブラウザサイズ

あなたの質問に単独で答えるはずです。

現在の傾向についていくつかのメモがあります。

現在、大多数のユーザーの解像度は1024x600(タブレット/ネットブック)以上です。24pxスクロールバーについては、忘れずに約1000ピクセルの幅を残してください。高さに関しては、マウスのスクロールホイールに慣れているため、Webユーザーは垂直方向のスクロールが非常に得意です。初期の高さは、主に第一印象のために重要です。

ユーザーは水平方向のスクロールがそれほど得意ではないため、レイアウトを1000pxより広くすることはお勧めしません。

また、画面が大きいユーザーの多くは、Webブラウザーに画面全体を使用しません。特にWindows 7には、画面の半分にウィンドウをドロップするための簡単なドラッグアンドドック機能が含まれています。

要約すれば:

  • 1000pxを超える静的な幅を避ける
  • 第一印象が1024x600で見栄えが良いことを確認してください
  • スクロールせずに見える範囲にコンテンツをドロップすることを恐れないでください。

「ブラウザサイズ」が「Googleアナリティクス」に組み込まれました。スタンドアロンツールはもう使用できません。analytics.blogspot.com.br/2012/06/...
デニウソンSáマイア

これはRWDの初期に書かれたものであり、もはや適切な回答ではないことに注意してください。
zzzzBov

8

短い答え:800x600の場合は775x400、1024x768の場合は1000x500を使用します。

長い答え:プレゼンテーションがクライアントコンピューター上で正しく表示されるかどうかを確認することはできません(異なるオペレーティングシステム、ブラウザー、異なる調整されたモニター、または読みやすくするために設定された大きなフォントの低い解像度を持つことができます)。このため、可能な場合は常にコンピューターでプレゼンテーションを表示する傾向があります。

サイズの問題でPCに表示できない場合は、それらの個人的なルールを使用します(測定値を神聖なものとしてはいけません。誰もが自分のものを持っています)。

安全なサイズとしては、800x600に最適化するのが適切です(スクロールバーとトップバーを削除するには、775x400を「行の上」として使用します)。しかし、今日では、より安価な画面とより広い標準で、1024x768(1000x500)の設計を開始しました

重要なのは、高さではなく幅を最適化することです。高さは、マウスの簡単なスクロールで解決できます。幅は、Macマウスを持っていない場合、水平方向にスクロールして詳細を表示することはできません。ただし、正確に判断することが不可能な場合でも、画面の一番下の行のどこに多かれ少なかれ配置できるかを知ることは良いことです。

注:人々は基本的なブラウザに多くの追加のスクロールバー(たとえば、GoogleRankやブックマークなど多く)を持っている傾向があるため、1000pxでもこのような低い高さを使用しています。したがって、私は常に最悪の状況に対応できるように設計したいと考えています。

申し訳ありませんが私の悪い英語:)


使用するブラウザーとブラウザーの機能に応じて、実際に操作する必要のあるピクセル数を決定します。
ジェイソンW

6

ユーザーに関する情報を通知する追跡プログラムがあります。半分以上が1024x768です。そこで、これを「標準」モニターサイズとして使用します。

ただし、それはサイトのライブエリアではありません。人々はサイドバーを持っているため、ブラウザウィンドウを常に全幅で開くとは限りません。

私は960グリッドシステムが好きです。番号は柔軟で、ウェブサイトにはダウンロードするテンプレートがたくさんあります。私はそれを自分のモックアップに使用していますが、これまでのところ誰もがかなり満足しています。


画面解像度!=ブラウザサイズ
-DA01

@ DA01:あなたは正しいです。それらは同じものではないので、2番目の段落で書きました。どれだけのライブエリアがあるかを把握するための出発点です。
ローレン-Reinstate-Monica-Ipsum

2

バックアップするための統計情報(このSOブログの投稿など)を探す必要がありますが、画面解像度の標準的な共通点として1024x768が採用されています。幅1024ピクセルの解像度のスクロールバーとウィンドウの境界を考慮して、幅1000ピクセルの一般ユーザー向けにWebモックアップを設計します。より具体的な対象者については、ペッカのコメントが正しい。ターゲットオーディエンスの規範を確認します。


2

今日のブラウザのサイズは、人々が2種類のデバイス、高解像度のコンピューターと比較的低解像度の電話を使用しているため、難しい質問です。

サイトを現在のほとんどのコンピューター(ほとんどが90%以上)よりも小さいサイトにする場合は、1024の最小解像度が必要です。わずかに少ないコンピューターが必要な場合でも、1200を超える割合もその範囲内にあります。

モバイルサイトを作成している場合、ほとんどの携帯電話は水平方向のブラウジングで最大480pxですが、大部分のサイトには大規模なサイト用の何らかのレンダリングシステムもあります。

サイズの問題は、あなた自身の聴衆に関するものです。ターゲットがデザイナーの集団である場合、新しい自動車保険を探している中年の人々である場合、あなたは少し小さい仕事をするよりも、そしてそれが電話の場合、ユーザーは自分の携帯電話で見ながら、さらに小さくなります。


1

それは完全にあなたのウェブサイトに依存します、原則として、私は古いマシン上のそれらのクライアントのために1000を超えない傾向があります。しかし、現在の研究では、1200のデザインがデザインの世界で受け入れられるようになっていることが示されているので、それは間違いなく思考の糧です。

あなたの計画は最小公分母を打つことであり、それがたまたま800x600 Windows 95マシンでJoe Dinosaurであるなら、それはあなたが満たすべき人です。

また、それは完全にあなたのウェブサイトのデザインに依存します。現在、代理店用のウェブサイトを設計していますが、幅は800になります。これは、特定の人に対応するためではなく、優先するためです。


1

残念ながら、Webページは多くのディスプレイでアクセスされるため、標準サイズはありません。安全のために、最も一般的な解像度(たとえば、1024x768)を調査し、人気に基づいて設計してください。


しかし、携帯電話もかなり人気があることに注意してください!
-DA01

はい、確かに。ほとんどの携帯電話でも、異なるサイズのディスプレイが付属しています。それからタブレットもあります。幅が%で剛性ではない液体ディスプレイを作成するのが最善です。
AB01

1

答えは:いいえ、「標準」はありません。


2
「標準」をどのように定義するかに依存しますが、あなたの答えには心から反対します。Bootstrapに '960'グリッドシステムと特定のブレークポイントが存在することは、一般化できることを示唆しています(確かに、時間の経過とともに変化します)。
ブレンダン

おそらく一般的に使用される@Brendan。しかし、ポイントは、Webページに標準サイズがないことです。実際、Bootstrapはその(応答)の縮図です。
DA01

0

ほとんどの画面解像度は1028pxなので、テンプレートの幅には960pxを使用することをお勧めします。スクロールバーは表示されず、使用した背景も表示されます。


0

標準幅には1024pxを使用することをお勧めします。なぜなら、crtモニターで構築されたpcの最大数とこのモニターの解像度は1024 * 768pxであるためです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.