忍者ブログ

WEBデザインとかSOHO, MacユーザのWEB制作者の徒然メモ。

[PR]

Posted by - 2017.11.20,Mon
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

DTPのデザイナーさんにWEB用にデザインを作成してもらわなければならない

Posted by toka - 2008.08.15,Fri

Photo : Luis Raa

つい最近、illustratorのデータでWEB用に入稿する際の注意点について聞かれた際のメモ。
DTP出身の方が作ったデータを元にコーディングをする、というお仕事だったのですが、色々と分からない事が多いそうなので、どういう感じでアドバイスすべきか、この機会に考えてみました。

■dpi(解像度)について

Q. WEB用の入稿の際には、dpiはどのくらいで作れば良いのでしょうか?

A. 解像度(相対解像度)については特に気にする必要はありません。

一般的なモニタの解像度は96dpi(Win)、もしくは72dpi(Mac)だと言われていますので、そちらを一つの目安にしていただくことも良いかもしれません。
しかし、実際のWEBでの表示の際は、印刷物のように「1インチの中にどれだけのドットを入れるのか」といった「相対解像度」の指定は特に意味がありません。
横幅1024pxのモニタであれば、1024px以上で作成したデータの表示は出来ない(画面に収まりきらない)、という単純な構造だとお考え頂いて問題ありません。
そのため、「相対解像度」ではなく、「絶対解像度」に注力して作成して頂くのが最良です。
2008年8月現在では一般的に横幅1024pxのモニタのユーザーが多いと想定されるため、illustratorの表示単位を「mm」ではなく「px」の指定にして作成頂くとほぼ正確にデータ作成をすることが可能です。
もしくは、illustratorで画面表示を「100%」にした大きさそのままが反映されるとお考え頂いても良いと思います。
(1200px以上のモニタを使っているユーザーも居ますが、多くのユーザーを視野に入れた場合、低スペックの方に合わせるのがベターです)

※2008年8月現在、横幅は800px程度で作成されるサイトが標準だと思われますが、Yahoo! JAPAN等は大体横幅950px程度で作成されています。

■その他の注意点

  1. カラーモードは必ずRGBにしてください。
  2. 読みやすさのため、フォントサイズは10px以上で作成してください。 (読ませたい本文等は12px以上にした方が、WEB上でも読みやすくなると思います)
  3. テキストデータとして流す本文について、Win/Macで文字詰めに違いが生じるため、カーニングは特に処理しないで構いません。 (文字詰めを細かく設定していただいても全ての環境で正確に再現することは困難です)
  4. (フォントのテイストをそのまま活かしたいとき等)画像として表示したい文字はアウトラインをかけてください。
  5. 大きさは横800px程度で作成(単位はmm、cm等ではなく、pxで作成してください)
  6. 貼付ける写真等の画像は埋め込まず、リンクして別ファイルにしてください。 (ファイルを取り出したり切り出すのが面倒なので。解像度は72dpi程度で構いません。)
と、いった感じで、大体問題無いと思います。
では。
PR
Comments
Post a Comment
Name :
Title :
E-mail :
URL :
Comments :
お手数をおかけ致しますが、文中のどこかに「す。」という言葉を入れてコメントして頂きますようお願い致します。(例:〜です。)
※外国語圏からのスパム防止のため。
Pass :   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
TrackBack URL
TrackBacks
人気っぽい記事7つ
あわせて読みたい
メールフォーム
Powered by NINJA TOOLS
Twitter
プロフィール
HN:
toka
性別:
非公開
職業:
WEB制作者
自己紹介:
フリーランスのWEBデザイナー。
マーケティングへの取り組みやユーザビリティの向上にも興味を持って活動しております。
にほんブログ村 デザインブログへ
カテゴリ一覧
忍者ブログ [PR]
Powered by "Samurai Factory"