デザイナーがDTPからWebに移行する際の11のアドバイス

デザイナーがDTPからWebに移行する際の11のアドバイスをThe Design Cubicleから紹介します。

from a Print to a Web Designer

Transitioning from a Print to a Web Designer

以下、その意訳です。

DTPからWebに移行する際、今まで培った法則やスタイルを捨てるということではありません。Web向けにそれらのスキルを活用します。

実際、紙を模倣したデザインの人気は高く、ニュースサイト、Eコマースサイト、ブログなど多くのウェブサイトで採用されています。

1. Design your sites and images at 72dpi

72dpiでデザイン

Webは300dpiではなく、72dpiを使用します。

2. Use RGB

RGBを使用

カラーモードはCMYKではなく、RGBを使用します。

3. Design in Photoshop

作業はPhotoshopで

Webで使用するグラフィックの多くは、Photoshopを使用します。
ベクターベースではなく、ピクセルベースのデザインです。

4. Use a grid and check your width

幅はピクセル単位で

レイアウトにはピクセル単位のグリッドを使用します。
最近の主流は幅960pxで、1,000pxは超えないようにします。

5. Use web safe fonts

Web用のフォント

ユーザーが閲覧する際のフォントは、OSごとに異なり、また自由に変更することもできます。そのため、より多くのユーザーが閲覧できる安全なフォントを使用します。

ヘッダやイラストなどは画像化したテキストを使用しますが、通常のボディテキストには、画像化したテキストは使用しないようにします。

6. Never rasterize copy

ラスタライズはしない

仕様書など原稿のテキストはラスタライズしないでください。

7. Organize. Organize. Organize.

レイヤーは整理して保持

Photoshopのレイヤーには適切なレイヤー名をつけ、フォルダを使用して整理・管理します。

修正や更新などに備えて、レイヤーをフラットにしないでください。

8. Design for the content and for your users.

コンテンツを重視

アート性を求めるのではなく、ユーザーが情報を入手しやすいようにコンテンツを重視してデザインします。

9. Know your shortcuts

ショートカットをマスター

Photoshopのショートカットは一通りマスターしておきます。
作業時間を短縮し、生産性を向上します。

関連:
Photoshopを便利にする30のショートカット
Photoshopで、レイヤーを操作する便利な33のショートカット

10. Save comps properly

ファイルの保存は適切に

Photoshopでの書き出しには、「Web用に保存」を使用します。主に、gif, jpg, pngを選択します。
元のPSDを保存することも忘れないでください。

11. Stay informed and inspired

情報収集とインスパイア

ウェブの情報を吸収し、常に刺激を受けるようにしてください。

sponsors

top of page

©2018 coliss