DTP→WEB

『Webも実寸で確認して』DTPデザイナーの落とし穴/両方解決

こんにちはバタコです。

「ちゃんと実寸サイズで確認して」

Webデザインをはじめたばかりで、意味が分かりませんでした。

  • DTPと同じように、Webも実寸サイズを確認している
  • それにも関わらず「ちゃんと実寸で確認して」と指摘される
  • コーディングされたテストを見ると、思ってたより大きい・・

DTPデザイナーって、すっごく魂こめて仕上がりをチェックします。印刷物はあとで修正できないので、たった一つのミスが大きな問題になってしまう。今でも入稿前は緊張するし慎重です。

うまく行かなかったのは「100%表示をクリックしても、実寸表示にならなかったから」でした。PhotoshopとIllustratorでやり方は違ったので、まとめます!

Photoshopの場合、レティーナWeb実寸サイズ確認は200%

Photoshopの場合、レティーナは200%でプレビューを確認します。丸暗記していたので、少し考え方を整理します。

今さら聞けないレティーナの仕組み

デザイナーは、レティーナ(4K・5K)のディスプレイを使っている方多いと思います。レティーナはきめ細かく綺麗に見せる為に、実際のデータを1/2に圧縮して表示する仕組みになっています。

↓左:レティーナ用に2倍のサイズで作った文字/右:実寸で作った文字

そのためPhotoshopで『100%表示』を選ぶと、実寸の半分サイズ表示に。だから使っているパソコンがレティーナなら、Photoshopのプレビュー表示は200%を選択します。

データサイズは実寸で作る。2倍はNG

「レティーナでも表示がキレイなように、データを2倍の大きさで作る?」と思ったのですが違いました。WebデザインもDTPと同じで、作るのは実寸サイズです。「Webの文章は16pxが読みやすい」など意識すべき数値がたくさんあって、それを正しく把握するためです。

Webのデータを作る時は「実寸」で。最後に画像を書き出すとき、何倍で書き出すか指定します。やってみましょう。

レティーナ用に倍率を変える「書き出し形式」

ファイル>書き出し>『書き出し形式』

を選ぶと、画面左で倍率指定ができます。制作会社によって基準も違うと思うので、はじめは確認した方が良さそうです。

メインは1〜2倍を選び、他は1〜1.5倍を選ぶなど。

プロはギリギリの解像度を狙う!「データ量の目安」

全部2倍で書き出すと、見栄えはいいですがデータサイズが重いです。「いつまで待っても表示されない」ってストレスですよね。反応が遅いと、ユーザーが離れてしまいます。

データ容量の目安

  • 1つのバナーで100KB以内
  • メイン画像で300KB以内

あくまで目安です。JPEGを作るときは見た目が荒くならないギリギリまで解像度を下げます。

1つのスライドが500KB越えていたら、すごく重いです。単位がギガやメガは「ありえない」と指摘され、やり直しに・・。どうせなら提出前にデータサイズをしっかりチェック!実践あるのみですね^^

Illustratorの場合、レティーナWeb実寸サイズ確認は100%

Illustratorでデザイン案を作っているとき、実寸確認は100%です。ただし最初の設定に注意。

新規作成の入力は実寸サイズで入力

「新規作成」のとき、プレビューモードはピクセルを選択。これだけ!

Webはフォトショップだけに絞った方がいい?

職場でもフォトショップがメインで使われているので、フォトショップの設定を確認していますが、年内にXDに以降する予定があるのでIllustratorでも設定を確認しています。

XDを活用するとDTP制作と同じようにWebも「フォトショップは写真画像の加工だけ」になる予定です。

スマホは4K多いけど、横幅375pxなのでボケない

スマホの画面はほとんどが4K。でもスマホの横幅は平均375pxしかないので、パソコンとは大きく違ってキレイに見えやすいです。

たとえば600pxの画像を作ったとき

  • レティーナのPCならボケて見える
  • スマホなら「600px→375px」に圧縮されけっこうキレイ

こんな状態です。またスマホは特に動きが遅いとストレスなので、データを軽くする事を重視した方が良さそう。

モバイルサイズのシェア:2021年1月(日本)

携帯サイズ(日本)上位6シェア(2021.1)
W375×H667px22.98%
W414×H896px15.06%
W375×H812px14.23%
W360×H640px10.05%
W414×H736px4.48%
W360×H720px2.99%
引用:startcounter

モニターの幅を把握すると、定規が「実際と違う」と気づける

Web制作に慣れていなくても「なんかサイズが違うな」と気づために、持っているパソコンの横幅を把握しておくと良いです。

i-mac 27inch→ 横幅2560px

Webサイト横幅調べ方。「実寸が正しいか自信がない」時の為に

ディスプレイ上の定規が合っているか自信がないと、安心してできません。ディスプレイ上の定規では1366pxと表示されるのに「画面の横幅と比べたら、どう考えても大きすぎる・・」という事がなぜかありました。

確認方法はこちら。

  • 何でもいいので、サイトを開く(ヤフーのホーム画面など)
  • 画面上の何もない所を右クリック
  • 「検証」を左クリック
  • 右側にコードが出てくるので「body」でカーソルを下に回す
  • 見えているページの横幅がわかる

ここで出てきた数値(ヤフーなど開いた画面)と同じ大きさに、IllustratorやPhotoshopの定規サイズをあてて比較してみて下さい。

ぴったり合えば安心ですね(^^)

バタコのブログ:ニガテを克服しようとしたらDTPに専念してと言われたの巻

実は昨日「Webはもういい、DTPに専念して!」と言われました。

バタコ「え、もうWebはバッチリって事ですか?」

上司「本読んだなら実践あるのみだろ」

笑いました。ぜんぜんバッチリじゃないー。

ただここから3ヶ月、DTP案件の稼ぎどきです。フリーランスなので仕事量に波が合って、Trelloには画面いっぱいに制作案件がたまっています。

食事と睡眠だけじゃなく、休み時間ボーッとする時間もいりますね。ニガテなことは習得が遅いので、しばらく好きな事や短いブログで発信続けようかな。ではまた☆