Webデザインサイズ

これは最近の私の大きな問題の1つです。15インチRetina Macbook Proを使用しています。PhotoshopでWebサイトをデザインするときは、通常、次の設定を使用します。

• 幅 = 2560、大画面で見やすくするため。ただし、すべてのテキストを12列のコンテンツグリッド（2000px）内に保持します
• 解像度 > 300

問題は、1080p画面のWebブラウザーでサイトを表示すると、巨大に見えることです。Macbook ProのPhotoshopでは正常に見えます。

私はこれの背後にある理論を理解していません。サイトをさまざまな解像度にスケーリングするためのベストプラクティスは何ですか？

レスポンシブウェブデザインを行うと、サイトに実際に何が起こっていますか？適切に拡大縮小するには、フォトショップでどのフォントサイズを使用すればよいですか？

簡単に回答する前に、手順について少しコメントします。

Photoshopでウェブサイトをデザインしているとき

デザインは「絵を描く」ことと同じではありません。デザインは、そのプロセスが何であるかを知っているプロセスです。「モックアップ」の作成は、設計プロセスの一部にすぎません。

大画面で見やすいように、私は通常、幅= 2560の設定を使用しています。ただし、すべてのテキストを12列のコンテンツグリッド（2000px）内に保持します

ピクセルが正しい単位であると想定しています。それは出発点ではありません。

解像度> 300

PPIはウェブデザインとは何の関係もありません。ただし、Photoshopを開始点として使用しているため、ppiを72または96に設定します。

基本的なガイド

私はこれの背後にある理論を理解していません。サイトをさまざまな解像度にスケーリングするためのベストプラクティスは何ですか？

「ベストプラクティス」と「基本的なプラクティス」を分離する

基本的な理論は、Webデザインはビットマップベースではなく、比例ベースであるというものです。例えば：

選択した任意のピクセルサイズの画像（jpgファイルと考えてください）を使用します。

• 比例プロセスは言いません：これはXXpixelsの大きな写真です。

• 「これはあなたの画面と同じ幅になることを意図しています」と書かれています。

これは、モックアップをどのように表示できるかに関する投稿のヒントです。長い1ページのWebサイトのワイヤーフレームとデザインをどのように表示しますか？

そのコードを使用すると、画像は最新の画面サイズに合わせてリサンプリングされます。

それが最初の基本的な考え方です。そこから、物理デバイスでWebページがどのように見えるかを考える作業に取り掛かります。主に：

• 大きなデスクトップモニター

• タブレット

• 電話

ただし、これはスタイルシートでより具体的にコーディングする必要があります。

まだピクセルサイズについて触れていないことに気づきましたか？

網膜の問題

特別な問題は高密度ディスプレイです。

大きなモニターを使ってウェブサイトをデザインでき、小型の携帯電話と同じ情報を使用できると思うなら...いいえ。24インチモニターと同じ1920x1080ピクセルであるかどうかは問題ではありません。

繰り返しになりますが、それはピクセルではなく、電話または大きなモニターと考えてください。

「網膜」は、通常の画面よりも鮮明に表示される代替画像を配信する特殊なケースです。

ブラウザは電話の通常のピクセルサイズ（たとえば480px）を「宣言」していますが、同時にウェブサイトに「ささやき」ますが、「より鮮明に表示できるため、高解像度の画像を送ってください」 2倍または3倍大きい写真を受け取ることができます。

ちなみに、あなたはこの網膜ディスプレイ解像度から始めていますが、常にそうであるとは限りません。

いくつかのヒント：

• 1920px幅など、より標準化された解像度で試してみてください。

• リンクで提供したコードを使用して、さまざまなモニターで画像をプレビューします。

• タブレット画面と同じサイズの紙に穴を開け、電話と同じサイズの他の穴を開けて、その中身を想像してください。必要な適応を行います。

ベストプラクティス

• プロポーションの観点から考えます。<=（基本的な方法はこちら）

• メディアクエリとは何かを調べます。<=（標準的な方法はこちら）

• フレームワークの使用を探る。<=（ここにいくつかの一般的な慣行）

• HTMLとCSS、UXデザイン、解像度などを深く研究する<=（ベストプラクティスはこちら）

ピクセルには標準の「サイズ」が関連付けられていません。したがって、Retinaディスプレイでの2,000ピクセル幅の画像（2880ピクセルx 1800ピクセル）は、画面の幅の約2/3です。ただし、1080p画面（1920ピクセルx 1080ピクセル）の同じ画像は、画面のサイズよりも広くなります。