モックアップのWebサイトの幅に標準サイズはありますか?そのサイズは?どうして?
モックアップのWebサイトの幅に標準サイズはありますか?そのサイズは?どうして?
回答:
1024pxの解像度用に設計している場合でも、モックアップのほとんどを幅1200pxで開始します。1000pxのモックアップ内にガイドを設定しました。高さは異なる場合があります。モックアップファイルの幅を広げる理由は、周囲のスペースを空けてデザインがどのように感じるかを確認するためです。最近ではほとんどの人が1024px以上を使用しています。
Webページのモックアップを設計するための標準的な幅はありますか?
そうですね?
むかしむかし(下記参照)、Webデザインはほとんどの場合、ほとんどの画面に適切に収まる単一のビューを作成しようとしました。過去5年間で、レスポンシブWebデザイン(RWD)の採用により、状況は大きく変わりました。
RWDは、デバイスのサイズに関係なく、あらゆるデバイスに適度に適合するように設計を行う設計原則です。
Web開発では、多くの要因に応じて、メディアクエリを使用してさまざまなスタイルのセットをWebページに適用することがよくあります。一般的な要因には次のものがあります。
スタイルは特定の画面サイズを対象とすることができるため、特定の範囲を対象とするデザインの複数のセットを作成することは珍しくありません。
明確にするために、設定された「標準」はありません。「設計者はこれらのサイジングガイドラインに従って設計を行うべきです」と言う統治機関や組織はありません。最終的には、それは判断の呼び出しです。
そうは言っても、Web開発業界は、繰り返し発生する一般的なブレークポイントのセットを有機的に考え出しました。
典型的なブレークポイントは現在の画面幅用であり、一般的には次のとおりです。
単位 px
これらの特定の数値の理由はかなり平凡です。元のiPhoneの画面のサイズは320×480でした。元のiPadの画面のサイズは768×1024でした。1600×1200は、より大きな画面解像度で一般的です。
これらのブレークポイントの一部またはすべてでモックアップを表示することは一般的ですが、中間のデザイン変曲点を示す特定のページの複数のレンダリングを提供する必要もあります。
768px幅で積み上げられたアイテムを表示する幅の広いコンプには、アイテムが2列に切り替わった900pxのデザインを含める必要があります。これらの中間ブレークポイントに多くのデザインセットを提供する必要がある場合は、個々のコンポーネントを設計し、モックアップにページの残りの部分を含めずに、コンポーネントごとにコンポーネントが変化するブレークポイントを表示することを強くお勧めします。
これは、特定のUIコンポーネントが見つからないか、ブレークポイント間で一致しないという一般的な設計上の落とし穴を回避するのにも役立ちます。
以下は、私が後世のために保持しているこの回答の古いバージョンですが、しばらくの間は関係ありませんでした
誰もまだこれについて言及していないことに驚いています:
Googleには、という素晴らしい開発ツールがあります
あなたの質問に単独で答えるはずです。
現在の傾向についていくつかのメモがあります。
現在、大多数のユーザーの解像度は1024x600(タブレット/ネットブック)以上です。24px
スクロールバーについては、忘れずに約1000ピクセルの幅を残してください。高さに関しては、マウスのスクロールホイールに慣れているため、Webユーザーは垂直方向のスクロールが非常に得意です。初期の高さは、主に第一印象のために重要です。
ユーザーは水平方向のスクロールがそれほど得意ではないため、レイアウトを1000pxより広くすることはお勧めしません。
また、画面が大きいユーザーの多くは、Webブラウザーに画面全体を使用しません。特にWindows 7には、画面の半分にウィンドウをドロップするための簡単なドラッグアンドドック機能が含まれています。
要約すれば:
短い答え:800x600の場合は775x400、1024x768の場合は1000x500を使用します。
長い答え:プレゼンテーションがクライアントコンピューター上で正しく表示されるかどうかを確認することはできません(異なるオペレーティングシステム、ブラウザー、異なる調整されたモニター、または読みやすくするために設定された大きなフォントの低い解像度を持つことができます)。このため、可能な場合は常にコンピューターでプレゼンテーションを表示する傾向があります。
サイズの問題でPCに表示できない場合は、それらの個人的なルールを使用します(測定値を神聖なものとしてはいけません。誰もが自分のものを持っています)。
安全なサイズとしては、800x600に最適化するのが適切です(スクロールバーとトップバーを削除するには、775x400を「行の上」として使用します)。しかし、今日では、より安価な画面とより広い標準で、1024x768(1000x500)の設計を開始しました
重要なのは、高さではなく幅を最適化することです。高さは、マウスの簡単なスクロールで解決できます。幅は、Macマウスを持っていない場合、水平方向にスクロールして詳細を表示することはできません。ただし、正確に判断することが不可能な場合でも、画面の一番下の行のどこに多かれ少なかれ配置できるかを知ることは良いことです。
注:人々は基本的なブラウザに多くの追加のスクロールバー(たとえば、GoogleRankやブックマークなど多く)を持っている傾向があるため、1000pxでもこのような低い高さを使用しています。したがって、私は常に最悪の状況に対応できるように設計したいと考えています。
申し訳ありませんが私の悪い英語:)
ユーザーに関する情報を通知する追跡プログラムがあります。半分以上が1024x768です。そこで、これを「標準」モニターサイズとして使用します。
ただし、それはサイトのライブエリアではありません。人々はサイドバーを持っているため、ブラウザウィンドウを常に全幅で開くとは限りません。
私は960グリッドシステムが好きです。番号は柔軟で、ウェブサイトにはダウンロードするテンプレートがたくさんあります。私はそれを自分のモックアップに使用していますが、これまでのところ誰もがかなり満足しています。
バックアップするための統計情報(このSOブログの投稿など)を探す必要がありますが、画面解像度の標準的な共通点として1024x768が採用されています。幅1024ピクセルの解像度のスクロールバーとウィンドウの境界を考慮して、幅1000ピクセルの一般ユーザー向けにWebモックアップを設計します。より具体的な対象者については、ペッカのコメントが正しい。ターゲットオーディエンスの規範を確認します。
今日のブラウザのサイズは、人々が2種類のデバイス、高解像度のコンピューターと比較的低解像度の電話を使用しているため、難しい質問です。
サイトを現在のほとんどのコンピューター(ほとんどが90%以上)よりも小さいサイトにする場合は、1024の最小解像度が必要です。わずかに少ないコンピューターが必要な場合でも、1200を超える割合もその範囲内にあります。
モバイルサイトを作成している場合、ほとんどの携帯電話は水平方向のブラウジングで最大480pxですが、大部分のサイトには大規模なサイト用の何らかのレンダリングシステムもあります。
サイズの問題は、あなた自身の聴衆に関するものです。ターゲットがデザイナーの集団である場合、新しい自動車保険を探している中年の人々である場合、あなたは少し小さい仕事をするよりも、そしてそれが電話の場合、ユーザーは自分の携帯電話で見ながら、さらに小さくなります。
それは完全にあなたのウェブサイトに依存します、原則として、私は古いマシン上のそれらのクライアントのために1000を超えない傾向があります。しかし、現在の研究では、1200のデザインがデザインの世界で受け入れられるようになっていることが示されているので、それは間違いなく思考の糧です。
あなたの計画は最小公分母を打つことであり、それがたまたま800x600 Windows 95マシンでJoe Dinosaurであるなら、それはあなたが満たすべき人です。
また、それは完全にあなたのウェブサイトのデザインに依存します。現在、代理店用のウェブサイトを設計していますが、幅は800になります。これは、特定の人に対応するためではなく、優先するためです。