ウェブデザインに関しての質問です。１、デザインをする際（プログラムではなく）、最も一般的なのはフォトショップですか、それともインデザインでしょうか？

いちコーダーからのアドバイスとしては、フォトショップがベストではないでしょうか。

私はあまりインデザインは使った事がありませんが、DTPではなくWEBデザインでしたらほとんどのデザイナーさんがフォトショップで作ったものを送って来ます。

最近ではFireworksの方が簡単なので、それで作ってくる方も増えていますね。

（僕も趣味でWEBデザインをする時はFireworksでやっています）

フォントですが、特に制作者の環境にフォントがなくても問題ないです。

ただ、アウトライン化したものと、してないままのデータを両方渡してあげると優しいかもしれません。

完全に統合してしまったものだけ渡すと、テキストデータが拾えないので面倒です。

また、デザインが複雑な場合、レイヤーを非表示にしての画像のスライスが必要になる場合もありますので、必ずレイヤーが残っているデータが必要になります。

ただ、僕がこれまでコーダーとしていくつものデザイナーさんと出会って来て感じた事は、

「データの重さ／レイヤーの整理の仕方でデザイナーの質が分かる」

という事です。

ステキなデザイナーさんは、レイヤーもしっかりフォルダ分けして目的のレイヤーが分かり易く整理されていて、なおかつ不要なレイヤーは統合／削除する事によりデータ量も軽くしています。

ちょっと質問に完全に答えている訳ではないので申し訳ありませんが、

参考になれば幸いです。

（余談ですが、たまにaiデータのまま送ってくるデザイナーさんもいますが、正直aiデータは扱いにくいのでキツいです。。）

＞１、デザインをする際（プログラムではなく）、最も一般的なのはフォトショップですか、それともインデザインでしょうか？

フォトショップはイメージレタッチソフトでインデザインは組み版ソフトです。webデザインでは一般的には使用しません。両方とも主に紙の版下をデザインする際に利用します。

もし、これらのソフトで自由なデザインをされてしまうと、後でデザインを全て作り直しせざるを得なくなることが考えられます。

両方とも高価なソフトですしEPSのデーターを作らないといけない、修正しないといけない、という紙の印刷業界特有の事情に必要なソフトであってwebの場合は基本的にはepsのデータを作成修正する必要はありませんので特に必要になるソフトではありません。流用できないわけではないけれど一般的かと問われると高価なのでとても一般的とは言えなくしかも紙の印刷のためのデーターを作る機能が主になっているのでweb用途では不要な機能が多いと思います。

一般にwebデザインを行う場合はこういった高価なソフトは必要ありません。その道のプロでも基本的には全て無料のソフト（あるいは数千円のソフト）、環境で作成できるようになっています。

フォトレタッチ用途では、gimp（無料）、PaintoShopPro（安いけど有料）、CorelPhotoPaint（有料、ちょっぴり高いかな）、Fireworks（昔は安かったけど、最近はものすごく高くなってしまったのであまり人に勧められない）など

イラストを書く際は、TGIF（無料）、DrawGraphic（有料、1980円だったかな？）、CorelDraw（これは少し高価だけどイラストを書く際にはイラストレーターよりも高機能なので海外では評価が高いです）、Illustrator（有料、高い）

ページのデザイン、NetscapeComposer（無料）、TeraPad（無料）、HomepageBuilder（有料、数千円）、、、

これだけあれば充分プロとしてやってゆけます。

＞２、ウェブセーフなフォントは限られていますが、インデザインでちょっと変わったフォントを使用したとしても、PDFでフォトショップに持ってくれば、ウェブ上でフォントの崩れは起こらないのでしょうか？

webデザインでは基本的には文字を表示するフォントはページを見ている人が自由に変えることが出来ますのでどんなフォントを使用してもほぼデザインは崩れないようにします。文字の大きさもピクセル単位はポイント単位は使用せず、主に％で設定をします。

どうしてもそのフォントのデザインを使用したい場合はビットマップに変換してイメージデーターとして使用しますが基本的には文字情報は検索などの利便性を考えると出来るだけ文字として埋め込むようにしたほうがよいと思います。

「。。。PDFでフォトショップ。。。」－＞表示しているままを持ってこれるのでスクリーンショット経由が一番トラブルが少ないかもしれないですね。

＞３、インデザインでデザインした場合はPDFでフォトショップに持ってくることになると思いますが、その際レイヤーは統合されていますよね？それはプログラムをされる方には問題はないのでしょうか？それともオブジェクトひとつひとつのレイヤーが保たれているほうがよいのでしょうか？（ということはやはりフォトショップでのデザインのほうが好ましい？）

よろしくお願いします。

ページのパーツ関しては出来るだけばらばらのほうが扱いやすいのです。

ページを丸ごとPhotoShopなどで作ると紙の場合は問題なくてもwebデザイン上はかなり無理が来る場合があります。デザインはNetscapeのComposerで出来る範囲で作った方がプログラムやシステム、SEOのデザインをされる方には喜ばれると思います。結果的に低コストになりお客さんにも喜ばれると思います。

私はDTPの世界では老舗の部類になるのでQuarkXpress、PageMaker、Illustrator、PhotoShop、FrameMaker、FontGrapher、、、、などを長く使ってきましたが、webデザインの際に使用しているのはフォントやイラストなどを描く際にIllustratorを使用しているだけで先ほど挙げたソフトを主に使用しています。

文章を読んでいて、”紙のDTP感覚だなぁ”と感じました。紙のDTPで使用している環境を一回捨てて1から組み立てるような感じでデザイン環境をそろえたほうがwebらしいデザインが出来るような気がします。

１、デザインをする際（プログラムではなく）…

フォトショップとインデザインを比べた場合、圧倒的にフォトショップです。

ウェブデザインをインデザインで作る方はたぶんいないと思います。

インデザインはDTP用(雑誌を作ったり)のソフトです。

２、ウェブセーフなフォントは限られていますが…

相手の見ているPCにインストールされていないフォントを

表示させることはできません。

そのフォントを使用したい場合は画像にしてください。

PDFでもキャプチャ(スクリーンショット)でもweb書き出しでも、

画像(gif、png、jpgなど)にできれば方法は何でも構いません。

　３、インデザインでデザインした場合はPDFでフォトショップ…

プログラムをされる方に、カンプや見本としてではなく

最終データとしてPDFをいきなり送りつけたら、

「なんでPDF？？」と思われてしまうかもしれません。

デザインだけ行って納品するのであれば、レイヤーの分かれたフォトショップ

データを渡すのがいいと思います。

それがいやなら見本とコーディングできるようにスライスしたものを渡したほうがいいと思います。(これはお勧めできませんが…)

何のことか全然わからない…ということであれば、納品先のプログラマ(コーダー)さんに

どういった形式がご希望ですか？(作業しやすいですか？)と確認をとったほうが

いいと思います。

また、フォトショップでテキストを使っていた場合、相手に同じフォントがなければ

別のフォントになってしまうのでレイヤーを統合したものと統合前のものを用意してください。

今やってるサイトで同じようなデザイナーさんを使っている故に思うことですが、根本的な所で、ウェブデザインの基本（HTMLの基礎）部分は勉強された方がよいと思います。

ウェブデザインの基本的な考え方は、画像は別にデザインしておいてテキストも別に用意しておいて、後で一緒にレイアウトする、という点でDTPソフトが近いです。

つまりInDesignでは画像は作れないゆえ、結局デザインはPhotoshopやイラレ、Fireworksだけで済みます。

わざわざInDesignでレイアウト作ってPDFにしても、テキストの抜き出しが便利なくらいでメリットはない（むしろ紙ベースの綺麗なレイアウトにするとHTMLの制約からギャップが大きい）でしょう。

DTPソフトでレイアウトする時と同様、HTMLではテキストと画像は分離しており、テキスト部分はHTMLコードになるのでデザイナー側でフォントを細かく指定できません（これに近いサイズや色にしてください、といえる程度）。

背景に画像を敷いて、その上に文字を載せることもできますが、今度はフォントサイズにゆとりを持たないと、画像の文字とHTMLのテキスト文字は可読性が大きく異なります。（画像になった文字は小さめでも読めるが、HTMLテキストは小さくするのも限度があるゆえ、背景画像の上にレイアウトするとはみ出すことがあったり極端に小さい文字になって、汚く見えます）

一方、メニューバーとかタイトルとか背景・挿絵など、画像データの上の文字はデザインですから、デザイナーが自由にデザインできますが、コーディングする側はテキストとして編集できませんので、1文字の差し替えでもデザイナーが画像を出力し直すことになります（コーダ－側に同じソフトと同じフォントがあればやってもらえるかもしれませんが、デザイナーはMacでコーダ－はWindowsとかも多いですし）。

じゃあテキストも全部画像にすれば紙と同じような綺麗なデザインにできるのでは？と思われるかもしれませんが、そうすると検索しても出てこない（画像の中の文字は検索できません）ので、デザイン重視なサイトでなければ、できるだけテキストにしたいというニーズはあり、どこまで文字を画像にするかが問題になります。

そこを考えずに、背景に複雑な地紋を敷いてキャラを置いて吹き出しのセリフで細かく説明するようなデザインをされると、HTML化する際にテキスト部分の処理でコーダ－が大変な思いをしたり（コーダ－の不満）、面倒なので全部画像で済まされたり（検索エンジン対策にならない故にクライアントの不満）、テキスト重視に処理されてデザイナーが思った通りのデザインにならなかったり（デザイナーの不満）して、みんなの不満が生じます。

その点でデザイナー側もHTMLの制約（WindowsとMacの違いやブラウザの種類やバージョン違いなど）を考慮して、できるだけ切り出しやすいデザインやサイズで出すことさえ心がければ、ツールは使いやすいものであれば何でもよいと思います。

いずれにせよ、カンプレベルでコーダ－さんと相談して、ここは画像、ここはテキスト（DTPでもテキストが未作成でもとりあえずＸＸＸＸＸとかで仮置きするような部分）、というのをおおざっぱに把握した上でデザインにかかった方がストレスがないと思います。

（少々コーダ－サイドの愚痴のようになってしまいましたが）

既にご留意されている事柄もあると思いますが、ちょっと追記します。

フォントの件、

Helveticaが置き換えられてしまったのはwindowsの標準のフォントにhelveticaが無いからです。

Macだと標準のフォントだから特に説明せずに渡してしまったのでしょうがcourierも含めて全て書き記したほうが良いと思います。

Macで使えるフォントでもwindowsではない場合もありうるので基本的には全部アウトラインを取っておいたほうが良いです。（イラストレーターで文字だけアウトラインを取ったベクトルデーターを添付すると良いと思います）

何にもフォントが内蔵されていないイメージセッター相手だと思っておけばよいと思います。

opentypeだったらmacでもwindowsでも共通で使用できますのでopentypeで用意されているフォントを使用するとよいと思います。もっとも、web関係の制作者で1フォント3万円なんていうフォントを購入する習慣はあまりありませんのでdynaフォントのような安めのフォントを選んでいただけると良いかと思います。

webページを見る世の中のほとんどのコンピューターは日本ではwindowsだと思ってください。うちのサイトの統計では９５％がwindowsでした、linuxとmacは同じぐらいで残りを占めています。当然作業をする人もほとんどwindowsで作業するケースが多いのでwebデザインをやっている人たちは、関係者は、windows環境だと思ってデーターの受け渡しなどをすると良いと思います。Macで作業している人たちももちろん居ますが最終的にはwindowsで確認することになりますので作業もその流れでwindowsで作業するようになるケースが多いです。

windowsでもATMフォントは使用できますから受け取った側がhelveticaを入れていれば大丈夫だったんでしょうね。

フィルムの出力のときと同じようにフォントのリストなどをつけていればこういう問題はクリヤーできると思います。

他の方も書いていらっしゃいますがフィルムを出すときにも万一を考えて作業に使った元のデーターも渡しますよね、それと同じ感覚で全てのデーターを渡したほうが良いと思います。webにしずらいデザインの場合は作り直しますのでその際に必要になります。イラストなどの元のデーターを渡すのには抵抗がある場合は自分でHTMLのコードをデザインするしかないです。出来ればHTMLのコードデザインをする方に全てを渡す決心をしていただけるとよいと思います。

WEBデザインとフィルムを出して印刷するときのデザインの違いは、webの方はカラムをきっちり分けてカラム間で関わりを持たないようにする、カラム内では文字の大きさや見た感じが変わっても差しさわりが無いようなデザインの仕方をすると良いと思います。

webの解像度は100dpiぐらいしかないので100dpi*10インチの範囲で収めるようなつもりで文字の大きさを極端に変えないように作るとwebページが出来上がったときに”あれ、そんなつもりではなかったのに”という事が減ると思います。

DTPをしていたデザイン会社が良くやってしまうデザインに”A4縦でデザイン”があります。

ほとんどのユーザーは横長のモニターですので”A5横”のつもりで作ると良いと思います。

webは時間軸方向が利用できますのでハリーポッターに出てくる新聞のように1つの場所に時間軸方向に情報を入れることが出来ます。同じ時系列のものであれば下に置かずに裏側におけることを留意してデザインをするとよりwebらしく出来ると思います。（たとえば、写真とそのキャプションなど）

カラムの件、解像度の件、向き、時間軸、今思いつくのはそれだけですがそれらの違いに気をつけてデザインをすれば全部作り直しになるような事態は減ると思います。

ちょっと本題からずれた余談でした関連することなので追記させていただきました。

フォント(と一部レイアウト)に関してはDTPの感覚は捨ててしまったほうが

いいかもしれません。

（もちろん「webの常識」みたいなものをいい意味で壊せて、画期的なものが

出来上がる可能性もありますが）

フォントに関してはwindowsによっても入っているものはマチマチです。

MacOS9にヒラギノがなかったり、Xにosakaがないみたいな。

フォントサンプル貼っときます。

OSソフトで自動的にインストールされるフォント一覧

http://www.aboutfont.com/trouble/osfont.html#VISTA

あと解像度については72dpiでも96dpiでも構いません。極端な話360dpiでも。

たとえば、72dpiでも100dpiでも

＜img src="img/0.png" width="10" height="10"＞こう記述すれば

どのモニタでも10×10ピクセルの画像に見えます。慣例的に72dpi推奨が多いのだと思います。

（もちろん全ての画像を360dpiで作ったりしたら光でも厳しいと思います。）

モニタの解像度(dpi)とピクセルについて

http://otzt.nobody.jp/html/resolution_web.htm

あと、MacでDTP(グラフィック)からwebならこの編が参考になるかも知れません。

ウェブマスター駆け込み相談室・ヤン先生に聞いてみよう！

http://www.salut.ne.jp/wmh/qbox/a061/index.html

すいません、時間が空きましたが、一応ご質問にお答えしておきます。

（既にみなさんからステキなご回答が来ているようですが笑）

＞１、それを防ぐ方法はありますか？プログラムされる方には問題がないのでしょうか？

大丈夫ですよ！

macでHelveticaやヒラギノを使ってデザインしたPSDを送っても、コーダー側はPhotoshopで開く際に「テキストを更新しない」を選択すればフォントは保持されるので。

（未熟なコーダーさんはフォントを更新してしまうかもしれませんが・・）

ただ、ついテキストをいじろうとして気づかぬ間にフォントが崩れてしまう可能性があるので、アウトライン化したものも送ってあげると親切だと思うのです。

正直フォントはそんなに悩まなくても大丈夫ですよ。

やはりデザインではキレイなフォントを使いたいですものね。（得てしてステキなフォントはmacなんですよね笑）

凝ったフォントのものは画像で切り出す、つまり画像とテキストの判断くらいコーダーは分かってないとプロじゃないので。

もしクライアントがSEOの話を持ち出しても、コーディングでなんとかなるので、デザイナーさんはあまりフォントの制約などにとらわれず、ステキなデザインを作って下さい！

＞２、先のご回答で、「アウトライン化したものと、してないままのデ−タを両方渡してあげるとよい」とのことですが、この場合アウトライン化というのはどのPSDだけでなく統合されたJPEGなどのデータも一緒に渡すということでしょうか？

Jpegのデータも添付すると、「お、このデザイナーさん優しい！」って思われますよ笑

PSDはプレビューする際もデータが重いですからね。

ただ、アウトライン化したデータとJpegデータは別にした方がいいです。

Jpegからパーツ画像をスライスする事と荒くなってしまうので、必ずPSDデータは必要になります。

・PSD元データ（レイヤー、テキストデータ保持）

・PSDアウトラインデータ（レイヤー統合、フォントアウトライン化）

・Jpegデータ（プレビュー用）

としてあげると完璧ではないですかね。

（僕が以前携帯キャリアのWEBを作った時に出会ったデザイナーさんは、レイヤーの整理、データの最適化、アウトライン化データ、jpegファイルといった所が完璧で、正直神かと思いました。）