1024pxの解像度でデザインしていても、ほとんどのモックアップは1200pxの幅でスタートするんだ。モックアップの中に1000pxのガイドを設定します。高さは変わるかもしれません。モックアップファイルの幅を広くするのは、デザインに余裕があるときにどのように感じられるかを確認するためです。最近は1024px以上の解像度を使う人がほとんどです。

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

はい、いいえ、多分?

むかしむかし(以下を参照)、Webデザインは、ほとんどの画面にかなり適合する単一のビューを作成しようとしました。 過去5年間で、Responsive Web Design(RWD)の採用により、状況は大きく変化しました。

RWDは、デバイスのサイズに関係なく、任意のデバイスにかなりうまくフィットできるように設計を行うという設計原則です。

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

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

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

明確にするために、「標準」のセットはありません。 「デザイナーはこれらのサイジングガイドラインに従ってデザインを作成する必要がある」と言う統治機関や組織はありません。結局それは判断の呼びかけだからです。

そうは言っても、ウェブ開発業界は、何度も何度も発生する一連の共通のブレークポイントを有機的に考え出しました。

典型的なブレークポイントは、現在の画面幅に対するもので、通常は次のとおりです。

px< / sub>の単位。

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

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

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

768px幅の積み重ねられたアイテムを表示する流体幅のコンプには、アイテムが2つの列に切り替わった900pxの設計を含める必要がある場合があります。 これらの中間ブレークポイントに多くの設計セットを提供する必要がある場合は、個々のコンポーネントを設計し、コンポーネントごとにコンポーネントが変化するブレークポイントを表示することを強くお勧めします。

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

---。

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

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

Googleには、次のような優れた開発ツールがあります。

ブラウザサイズ。

それはあなたの質問に一人で答えるべきです。

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

現在、大多数のユーザーの解像度は1024x600(タブレット/ネットブック)以上です。 巻物バーの場合は約「24px」を削除することを忘れないでください。これにより、幅は1000pxにもなります。 高さに関しては、マウスのホイールをスクロールすることに慣れているため、Webユーザーは垂直スクロールが非常に得意です。 最初の高さは、主に最初の印象にとって重要です。

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

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

要約すると:

• 1000pxを超える静的な幅は避けてください。 最初の印象が1024x600で見栄えがすることを確認してください。 コンテンツを折り目の下に落とすことを恐れないでください。

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

長い答えです。 あなたは今まであなたのプレゼンテーションがあなたのクライアントのコンピュータ（それは別のオペレーティングシステム、ブラウザ、異なるキャリブレーションモニタ、または大きなフォントがよく読むように設定されている低解像度を持っている可能性があります）に正しく表示されますことを確認することはできません。このため、私は可能であれば、私のコンピュータ上で常にプレゼンテーションを表示する傾向があります。

もし、私のPCでサイズが表示されない場合は、私の個人的なルール（私の寸法を神聖なものと思わないでください。）

安全なサイズとしては、800x600に最適化するのが良いと思います（スクロールバーとトップバーを削除して、775x400を行の上とします）。しかし、最近では、より安価で広い規格のスクリーンが増えてきたので、1024x768（1000x500）でデザインするようになりました。

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

注：1000pxでも高さを低くしているのは、基本的なブラウザには多くの追加スクロールバー（例えばGoogleRankやブックマークなど）があるため、可能な限り最悪の状況を想定してデザインしたいからです。

P.s. 英語が下手でごめんなさい :)

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

ただし、それはあなたのサイトとmdashのライブエリアではありません。人々はサイドバーを持っています、彼らはいつもブラウザウィンドウの全幅を開くとは限りません。

裏付けとなる統計データを探さなければならないが（このSOブログ記事など）、1024x768が画面解像度の標準的な共通項として引き継がれた、あるいは引き継がれようとしている。 私は、一般ユーザー向けのウェブモックアップは、幅1024pxの解像度でスクロールバーやウィンドウの境界線を考慮し、幅1000pxでデザインしています。 より特殊なユーザーに対しては、Pekka'のコメントの通りです。 ターゲットとするユーザーにとっての標準が何であるかを調べてください。

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

サイトをサイトにする場合は、今日のほとんどのコンピューター(ほとんどが90%以上)の最小解像度は1024です。 コンピューターを少し少なくしたいが、それでも1200よりも良いパーセンテージが必要な場合は、その範囲内です。

モバイルサイトを作成している場合、ほとんどの電話は水平ブラウジング用に最大480pxですが、ほとんどの電話には、より大きなサイト用のある種のレンダリングシステムもあります。

サイズの問題はすべてあなた自身の聴衆についてです。, あなたのターゲットがデザイナーの束である場合。, より大きなサイトを持つことができます。, if it&#39。;あなたが少し小さく働くべきよりも新しい自動車保険を探している中年人々。, &#39の場合。;電話ユーザーが自分の電話にいる間に見るために。, さらに小さい。

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

あなたの計画は、最も低い共通点を打つことである必要があり、それがたまたま800x600 Windows 95マシンのジョー恐竜である場合、それはあなたが対応すべきものです。

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

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

答えは次のとおりです。いいえ、「標準」はありません。

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

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