• ベストアンサー

WebサイトのラフをIllustratorで作る際について

Webサイトの制作をしています。 Illustratorでラフを出して欲しいといわれたで、いつもの通りに文章部分を 「○○○○○○○○○○」 として写真部分を白枠で囲み「photo」 という感じで作ったのですが、 上司に「写真や文章もすべて入ったラフを作って欲しい」と言われました。 今回のサイトはテキスト部分多く、Illustratorで表を作ったとしても、HTMLで組み直さないといけないので、すごく手間のように感じるのですが… 経験が浅く、社内にアドバイスをしてくれそうな人もいないので、こちらで相談させていただきました。 こういう場合、どのようにデザインのプレゼンテーションをするのが一般的でしょうか? 分かりにくい質問で申し訳ありませんが、説明が足りない部分は、言っていただければ補足いたします。 ぜひアドバイスをよろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • DaimaruDo
  • ベストアンサー率47% (8/17)
回答No.2

私も同じような仕事(デザイナーさんに発注する側ですが)を していますが、無駄&手間を承知でお願いしています。 決してその状態が正しいとは思わないのですが、 サイト制作に関わる全員で共通のイメージを持つ意味において、 面倒でも制作しておく必要があると思います。 『○○○○●○○○○●』 『Photo』 だけですと、各々違うイメージを抱いてしまうので。 言葉は悪いですが、 『お客さんはみんな馬鹿。顔では笑顔、心で毒吐く』 くらいの気持ちでいたほうがラクかもしれませんよ。

taro707
質問者

お礼

社内でWeb制作をしているのが私ひとりなので 「もしかして私のやり方はすごく時間がかかってるんじゃなか」と不安になってしまいました。 でも、お客様にちゃんとしたイメージを伝えるほうが大事ですね。 がんばります。ありがとうございました。

その他の回答 (2)

  • fab76
  • ベストアンサー率59% (327/548)
回答No.3

「写真や文章もすべて入ったラフを作って欲しい」=カンプ作成としてとらえていますが、Illustratorのバージョン10以降(正確には9ですが)でないと2度手間となり面倒な作業となってしまいます。 VGA横スクロールなしなら760px程度、XGAなら950px程度の幅、高さについてはスクロールさせるという前提で都合のいい数値を指定でいいと思います。 パーツ類(ヘッダやフッダ)といった具合にレイヤごとに置いた方が後の作業ははるかに楽になります。 基本的に(ver10以降なら)オブジェクトベースのスライス+ユーザースライスを使い、パーツを切り出してHTMLファイルとして吐き出して、Dreamweaver、GoLiveなど(何でも)HTMLコーディング作成ソフトに読み込ませて細かい修正をしていきます。 この段階で画像化されたテキストや表の部分を削除して、本来のTEXTデータ、テーブルに戻す作業をします。 可能なら無用なスペーサーなども削除する場合もあります。 元のTEXTや、表データなどは別に保存されていれば流し込むだけなので、手間はさほどかからないと思います。 共通部品を含むテンプレート作成なら、前出のレイヤの表示、非表示を利用して、たとえばヘッダのナビゲーション部分のみを作成→ HTML化→ レイアウト部分の作成といった手順になるでしょう。 Web用に保存コマンドがないと上記の作業は出来ません。(ver9はスライスがいまいち使えないです)

taro707
質問者

お礼

ありがとうございます。 幸い使用しているのがver10なので、HTMLの書き出しはできます。 マメにレイヤーを分けて、なるべく楽に作業できるようにがんばります。ありがとうございました。

  • hopehope
  • ベストアンサー率17% (94/528)
回答No.1

手間でもそれをやるのが仕事だったりして(^_^)v がんばってね

taro707
質問者

お礼

ありがとうございます。 与えられた仕事を文句を言うのはよくないですが 上司もwebの制作をしているわけじゃないので、一般的にはどうなのかな、と思っていました。 でも、納期も迫っていることだし、言われたとおりにやってみようと思います。 ありがとうございました。

関連するQ&A

  • 「ラフ」ってどこまでするもの?

    こんにちは。お世話になります。 もしかしたらカテ違いかもしれませんが・・・ フリーで働いていらっしゃる方のお話を聞きたかったので、こちらに投稿させていただきました。 本職とは別に、チラシ・パンフレットなどのデザインをする内職アルバイトのようなことをしています。 いつも、先方から「まずはラフでお願い」と言われると、困ってしまいます・・・ いつもは、イラストレータなどでアウトラインのみを作成し、色はその場で説明したりしています。簡単にベタで色をつけることもあります。 しかし、フリーのデザイナーをしている友人は、手描きで色もちゃんとつけたものをラフとして提出していると聞き、驚きました。 手描きなら、それほど手間もかかりませんし、私もできれば手書きのものを提出したいのですが、私はデザインの勉強をしたことがないので、ラフの描き方が分からなくて・・・。 そこでお聞きしたいのですが、 「ラフ」ってどこまでするものなんでしょうか? また、いいラフの描き方などが紹介されている書籍、サイトがありましたら、教えてください。

  • ウェブにおけるラフ・WF制作ソフトは?

    質問ではないかもしれませんが、どうぞ、よろしくお願い致します。 ウェブ制作時に、必要となるラフやWFは、一般的に何のソフトを使用していますか? 私は、デザイナー上がりなので、Fire WorksやIllustratorで作製します。 しかし、jpgに書き出すと、どうしても1ページ1ファイルという形式になってしまい、閲覧する側からすると、不便といわれました。 そこで、エクセルですれば、シートで複数のラフやWFを管理できるということで、今回エクセルで作製しています。 しかし、エクセルですと、グラフィック系のソフトにある、 オブジェクトの移動や、複製、繰り返し作製、やり直しといったような動作がなく、かえって、私自身、効率が悪くなっています。 また、Fire WorksやIllustratorだと、エクセルより具体的に画面構成として作ることができるので、時間がかかるというイメージがあるようです。 しかし、私にとっては、エクセルの方が、時間がかかってしまいます。 アーキテクト的な部分を含んだ、ラフ・WFは、やはり、グラフィックツールで作ったほうがいい、つまり、デザイン・レイアウト的な考慮をもって、制作できる人間が行う必要がありますが、皆さん、どのように作業をおこなっているのか、教えていただけますか? よろしくお願いいたします!

  • Webデザイナー転職 Illustrator

    Webデザイナー転職におけるIllustratorのスキルのアピール方法 似たような質問で恐縮ですが、 応募先のWeb制作会社に、Illustratorのスキルをアピールするために、HTML、CSS、jQuery、Photoshopを使って作成したWebサイトの中にイラストやロゴを作って、Webサイトを通してスキルをアピールしようと考えているのですが、この考えは適切でしょうか?

  • ★Webの同一HTML部分の同期化は?

    Webサイトを制作しています。 メニュー部分など、複数のページで同一のHTML部分があるのですが、 一箇所書き換えると、全ページをコピペで書き換えなければならず、手間が かかって大変です。 こういう場合、どうやって解決すべきでしょうか?

  • 効率よくWebサイトを制作するには?

    Webデザイナーの卵です。 いくつかサイトを制作したのですが、まだ慣れないこともあり物凄く時間がかかってしまいます。 時間短縮が必要不可欠だと思うのですが、皆様はどのような工程で、どのようなソフトを使ってサイトを制作しますか? ちなみに自分は…  ものすごーく簡単なラフ画を制作   ↓  ロゴをイラレで作ったりして、  全体のイメージ制作はフォトショップで。   ↓  パーツごとに切り取り   ↓  ドリームウィーバーでコーディング 全体のイメージを作ったけど、それをHTMLにしていく過程に物凄く時間がかかっている感じです。アプリケーション間の連携もうまくいっていないというか…。 ちなみに会社のPCスペックが低すぎて、フォトショップとイラレ同時起動はできず、フォトショップ立ち上げたり、イラレ立ち上げたり… この辺もストレスですね。 皆様のやり方を教えていただけるとうれしいです。

  • photo shop,Dream weaver,flash,Fire works,イラストレータ

    初めまして、いきなりなのですが、私はphoto shop必修,Dream weaver必修,Flash,Fire works,イラストレータとかがあまりなじみがありません。それほどWEB制作に必要なソフトなのでしょうか!?私の基本スキルはHTMLとCSSの本を一冊ずつ読んだだけです。あと、CSSのうまく組み合わせ方が書いてあるデザインの本を読んでいるところなんです。とにかく、WEB制作の仕事に携りたいのですが、独学でどれから初めて良いのかわかりません。そして自分には何が必要ないのかもわかりません。希望としましては、まずデジカメで写真を撮ってそれをWEB制作の中に組み込んでみたいです。あとできればキャラクターを描いてそれをWEB制作の中に入れたいです(まぁマンガとか絵を描くのは苦手なので、あくまでこちらは理想です。)。とにかく早くWEB制作者として働きたいので、何が良いか教えてください。

  • イラストレーターの初心者です。

    イラストレーターの初心者です。 いただいたデータのロックを外して、文字を変更しようとしています。 ところが、1文字ずつ作られている部分と、一括して変更できる部分があります。 後者は手間はそれほどではありませんが、 1文字ずつしか選択できない文章は、ひとつずつ変更して、ひとつずつズラしてと 気の遠くなるような修正作業になってしまいます。 なぜイラストレーターでは文字が1文字ずつなのかわかりませんが、 この1文字ずつを、ひとつの文章に変更してから修正できるような手法がありましたら ご教授いただきたく思います。

  • web プロデューサー・ディレクターになるには?

    31です。ウェブプロデューサー・ディレクター(企画より)になるためのアドバイスを頂きたくて投稿しました。 いままでマーコム業務で自社サイト制作(実際の制作は外部業者による)プロジェクト管理やサイト運営、更新、メルマガ作成、編集、インタラクティブマーケティング、WebエージェンシーではWeb編集、IA設計補佐など経験しましたがPhotoshop, Illustratorは基礎、HTML, CSSも基礎知識くらいで制作工程や技術の知識はまあわかっていても、実際に自分でサイト制作経験はありません。 プロデューサー・ディレクターになるためにはデザイナー・コーダーなどの経験がなくではむずかしいですか? またHTML・XHTMLを勉強せずFlashやAction script専門で習得しても無意味ですかね。HTML5の登場でFlashもいらなくなるのか?、と考えたりもするのですが アドバイスお待ちしております。

  • イラストレーターでWebページ制作

    Webページのデザインをイラストレーターを使って作っています。(CS3) 文章+商品写真のページを作る際、商品写真をレイアウトにするときに、紙媒体を制作するときと同様、 illustratorのファイルにPhotoshopで加工・切り抜きをしたPSD又はPNGデータを“配置”しているのですが、 配置した後、illustrator上で写真を縮小してしまうと写真が汚くなってしまうと職場で指摘されたのですが、 本当でしょうか? 一応、縮小率が80%未満にならない程度に写真はリサイズはしてあるのですが、 等倍の写真ファイルを配置しなければ画像は汚くなってしまうのでしょうか? その後の流れとして、 レイアウトが決まり写真も全部配置したら、画像は全部埋め込む    ↓ 文字にアウトラインをかけ、“書き出し”でPSDに書き出し、コーディング作業の外注にそのままデータを渡す。 という感じで、最終的にはスライスする前にPSDデータに書き出すので、illustrator上での配置は100%のものでなくても 良い気がするのですが、実際はどうなのでしょうか? 何回か縮小した写真を埋め込んだままでページを作っていましたが、 画像の荒れは気づきませんでした。 illustrator上で写真の大きさも自由に変えながらレイアウト作業したいので、少し大きめ(110%ぐらい)の画像を 配置していたのですが、100%の写真でないとダメならば、最後にまたリサイズし直さないとならなくなってしまいます(>_<)  いろいろ検証してみたのですが、職場の人に大丈夫ですと言い切る自信がいまいちないので、こちらで質問させて頂きました。 よろしくお願いします。

  • イラストレーターとフォトショップでサイトデザイン

    現在、ウェブデザイナーを目指して勉強中です。 サイトのラフを考えてその後、実際のイメージをグラフィックソフトを 利用して起こす場合、イラストレーターとフォトショップどちらを 利用するのが良いのでしょうか? 最近まではFireworksを使っていたのですが、CS3のシリーズからは これがなくなってしまったようなので、これを機に乗り換えようと 思ったのですが、手に取ったばかりなので判断がつきかねています。 アドバイスよろしくお願いします。