- ベストアンサー
未経験者がこれからウェブデザインを学ぶにあたって
神崎 渉瑠（@taloo）の回答
ウェブデザインの作業は イラストレーション：絵描き、写真の編集、合成など レイアウト：配置決め HTML/CSSコーディング の３段階有ります。 （規模が大きくなると、それ以外の行程もあります） イラストレーションとレイアウトをひとまとめにしてIllustratorやFireworksなどで作業をすることも多いと思います。 ウェブデザインというと３つめのHTML/CSSコーディングしかふれられないことが多いですが、 たとえば通販サイトであれば、一目見ただけで購入意欲をそそるようなデザイニングというのは非常に重要ですし、 そのデザイニングの作業は、あくまでPhotoshopやIllustrator、Fireworks、もしくは紙と鉛筆で「ページのどこに何色で表示するか」を決めるだけであって、 この作業そのものにはHTML/CSSの入る余地はありません。 それらのデザインが決まってから、（色鉛筆やIllustratorではなく）HTMLで配置、色を塗っていくのが、HTML/CSSコーディングです。 ・ DTPと違い、文字サイズが「閲覧時に」大きくしたり小さくしたりできます。 たとえばDTPでは幅何センチの間に何文字を入れる、ということを制作者が決めることができますが、 ウェブページでは、幅何ピクセルの間に制作段階では１０文字でぴったりに見えても、 閲覧者が文字サイズを大きくすれば、何文字かがはみ出て隣の文字と重なってしまうことがあります。 この問題に顕著なのがホームページビルダーのどこでも配置モードですが、 HTML手書きをされている方でも、この問題に引っかかったコードを書かれている方がいらっしゃいます。 段組にすると、この問題に引っかかりやすいですね。 ・ ウェブページの内容は「文書」ですので、見出しや段落などを明確にする必要があります。 また、同じ意味の部分は同じ色、同じ装飾文字（太字や斜体など）で統一させた方が、CSSを作りやすくなります。 フォントは可能な限り無指定の方が良いです。 印刷と違い、制作者が指定したフォントで表示できるとは限りません。 どうしてもそのフォントで表示したいというのであれば、画像で保存して表示することも可能ですが、 そうすると、ユーザーへの配慮（ユーザビリティー）、その他検索サイトへの登録状況をよくするなど（SEO)が不利になり、 ウェブページとしてはマイナスになりやすいです。 > ●まず何をすべきか？ ツールはツールです。 テキストエディタもツールではありますが、 たとえばネジを締めるのに電動ドライバーを使えば一瞬で締められますが、 １ミリ浮かして緩く締めるような場合には、手動ドライバーの方が使いやすいです。 オーサリングソフトの欠点は、 どこが見出しでどこが段落かという指定を行わない、または忘れてしまうことがあり得ることだと思います。 見出しや段落の指定（HTMLコーディング）をしなくても、見た目だけ変更（CSSコーディング）すれば作れてしまうというは諸刃の剣です。 また、ツールの機能を超えたことは、ツールでは作れません。 たとえばDreamweaverは<html>のlang属性や<tbody>が使えませんので、 厳密なコーディングもしくは、ツールの機能を超えた部分をやろうとすると、どうしても手書きになってしまいます。 私はDreamweaverという名前の電動ドライバーも使いますし、テキストエディタという手動ドライバーも使っています。 > ●Go Live はどうなの？ 社内にGoLiveの使い方が詳しい人がいて、 便利な使い方を教えてもらえるのであれば、GoLiveから入るのがいいと思いますが、 おそらくGoLiveの開発が終了しましたので、 ツールの機能不足などを補おうとすると、Dreamweaverに切り替えないと行けないと思います。 GoLiveからDreamweaverに乗り換えると、ソフトウェアの使い方を最初から覚え直しになりますので、 私は、最初からDreamweaverでやるほうが良いと思います。 > 某嫌われないWebデザインのページ （URL略） そうですね。 ページトップにいきなりデカデカと他社の広告が入っていて、しかも本文なのか広告なのかわかりづらいのは嫌われると思います。
noname#83877
関連するQ&A
- Webデザインのスキル
在宅でデザインの仕事を探しています。（副業的に） スキル的には、現在食品メーカーでパッケージデザイン、POP制作、パネル制作、料理写真の補正・加工等を行っています。イラレCS3、フォトショCS2です。 ネットを拝見するとWebデザインの案件が多いので、可能ならそれでもいいかなと思うのですが、印刷や紙ものグラフィックとWebでは結構勝手が違いますか？ また、Webデザインを覚えるのにお勧めの書籍等があれば教えてください。
- ベストアンサー
- グラフィックソフト
- 素人がWebデザイン/制作をするのにお勧め書籍ありますか？
素人がWebデザイン/制作をするのにお勧め書籍ありますか？ 会社のWebサイトをリニューアルしたいと考えています。小さいところなので、外注できる予算はまったくなく、自分たちでやらねばならない状況で、それまでビルダーやFront Page、Wordなどで作ってきましたが、やはり素人臭さが抜けないのと、おぞましいソースになってしまうので、アクセシビリティの面から考えてXHTML+CSSで作り直したいと考えています。 プロはおそらくイラレやフォトショでデザインを作って、そこからコーディングしていく形でサイトをデザイン、構築していく流れになろうかと思いますが、この一連の流れを勉強できるお勧め本（テキスト）があれば教えていただきたいです。XHTML+CSSだけ、イラレだけ、フォトショだけ、ならそれぞれたくさんの書籍が発行されてると思うのですが、「サイトを作り上げる」という観点で書かれた本ないかなぁ、と思ったしだいです。 現在持っているのはソシム社の「HTML/XHTML＆スタイルシート レッスンブック」だけで、イラレやフォトショ関連の本はまだ持っていません。同じくソシム社の「DTPデザイナー&グラフィックデザイナーのためのDreamweaver Webデザイン練習帳 改訂版」がいいのかなと思いましたが、Amazonのレビューの書き込みがなかったこともあり、質問させていただきました。 AdobeのCS4デザインプレミアムを持っているので、DWが加わっても大丈夫です。 ちなみに当方のスキルは昔HTMLだけでホームページを作成し、ビルダーでもちょこちょこ作っていたのでその辺のことはわかります。イラレ・フォトショ・DWはイーラーニングで一通り学びはしましたが、あまり身についていない感じがしています。特に、デザインされたものをコーディングしていくのってどうするんだろう・・・？というレベルです。 webデザイン、サイト制作関連でお仕事されている方、教育機関などで関連の講座を担当されている方、同じく勉強中の方、広くご意見いただけるとうれしいです。よろしくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- WEBデザインでのソフトの使い分け
現在WEBデザインの仕事をしていますが、グラフィックやページのデザインで皆さんはどのソフトをどのように使い分けていますでしょうか？ 私はデザイン案をイラレで作成したものを、フォトショにコピー&ペーストで貼り付けて書き出したり、見出しなどの文字列の画像などはフォトショで個別に作り直しているのですが、結構手間が掛かってしまいます。ファイヤーワークス（以後FW）も使えるので時々FWでデザインで作成しスライスで書き出すと言うこともやるのですが、明らかにこちらの方が効率的ではあるのですが、イラレほどにデザインが自由にできないため（点線を掛けないなど）、どうも製作のたびにソフトの使い分けで悩んでしまいます。 皆さんはどのように使い分けていますか？
- 締切済み
- デザイナー・クリエイティブ職
- Adobe CS5 design premium を買おうと思うのです
Adobe CS5 design premium を買おうと思うのですが、このソフトは、セットなので、イラレやフォトショ以外にもFlash、ドリームウィバー、Acrobat、fireWorks、など10個もソフトがセットになっていますが～これは、一つづつ好きなソフトだけインストール出来たりはしないんでしょうか？？セットで買った方が安いのでセットを買いたいのですが、デメリットでしかないんでしょうか？ 使うのはMacBookProです。 やっぱりインストールして使っているとMacBook Proでも、重くなってしまうのでしょうか？？ フォトショとイラレだけ単品で買っていれたほうがいいですかね？ MacBookでデザインのソフトでデザインしている方がいたら、教えてくれるとありがたいです！ どうか情報をください！お願いします?
- 締切済み
- 画像・動画・音楽編集
- イラストレーターでWEBデザインする時
WEBデザイナーをしています。 私はイラストレーターの方が文字の装飾などパーツを作るのに便利なので、 全てのデザインをイラストレーターで行っています。 そこでものすごく木になることがあります。 クライアントから素材として大きな画像をもらうことがあります。 この場合は、フォトショップで使用する大きななどに調整してイラレにもって行きます。 さらにイラレ上でこの画像に文字をのせたり、マスクをかけたりデザインをしてから、 デザインが仕上がった段階でスライスに入ります。 当たり前ですが、一旦フォトショでjpgで書き出して、さらにイラレのスライスでもｊｐｇ書き出しをするので、 写真画像があまりきれいではありません。 大きなままイラレに持ってきて、イラレ上で縮小して書き出せば、そこそこキレイなのですが、 イラレを保存する時にかなり重くなってしまいます。 イラストレーターでWEBデザインをされる方は写真画像の書き出しなどはどのようにされているのでしょうか？ 良い方法、もしくはやはりイラレでデザインすべきでないなど、教えていただければうれしいです。 よろしくお願いします。
- ベストアンサー
- デザイナー・クリエイティブ職
- ドラッグしても開かない
OSX10.45でAdobe PhotoshopCSとイラレCSを入れてます。 ドッグの PhotoshopCSとアイコンにデータ(.psd)をドラッグしても 開きません。同様にイラレCSもイラレデータ(.ai)をドラッグしても 開きません。ちなみにGo LiveはGo LiveデータhtmlをGo Liveのアプリ にドラッグすると開きます。ほかの別メーカーのインストールされた ものは普通に開きます。反応しない、Adobe PhotoshopCSとイラレCSは現在「開く」で使ってます。ちょっと面倒です。 どう直すのか教えて下さい
- ベストアンサー
- Mac
- イラレとフォトショどっちが良いか。
イラレとフォトショのCS6を購入したのですが、WEBのデザインカンプはこれから作るのを学ぶ場合どちらで作っていったほうが良いのでしょうか？ フォトショのほうが慣れているのですが、フォトショはイラレのようにここが他のオブジェクトと水平などのガイドがないので、イラレのほうが良いのでしょうか？ それともフォトショも設定を変えればそのようなことができるのでしょうか？
- ベストアンサー
- CSS
- アドビ web premiumインストール
アドビのウェブプレミアムのインストールについてですが、 以前CS3のフォトショップとイラストレーターの体験版をダウンロードしました。 そして今回ウェブプレミアムを購入しインストールしました。それで以前フォトショとイラレをダウンロードしたのでフォトショとイラレはインストールできませんでした。（ダウンロード済みと表示が出ました） こういう場合は体験版のイラレとフォトショをアンインストールして 追加でウェブプレミアムのイラレとフォトショをインストールして問題はないでしょうか？
- ベストアンサー
- 画像・動画・音楽編集
- Illustratorでweb用にスライス
Web制作初心者です。 Illustrator CS5で web用にスライスをしてみました。 作ったデザインの背景色を、カラーをカラーピッカーの16進数（#～）で確認して、 CSSにバックグラウンドカラーで指定しました。 その上にイラレ上でタイトル画像をスライスしたものを置いたのですが、 バックグラウンドカラーと画像の色が違うのです。 web制作にはDreamweaver使っているのですが、こちらの不具合かと思い ブラウザで見ても違う色になっていました。 やはり、イラレでスライスはまだまだ、うまく行かないのですか？ DTP出身なのでフォトショが苦手で出来ればイラレで全てデザインしたいと思っています。 どうぞ、よろしくお願いいたします！
- 締切済み
- CSS
- Adobeソフトについての質問です。
webサイト、インタラクティブコンテンツを作ろうと考えた場合、Fireworksは必要でしょうか？ 詳しく言いますと、今現在Adobeソフトの購入を検討しているのですが、デザインスタンダードCS5(イラレ、フォトショ、インデザイン)とDreamweaverを購入するか、デザインプレミアムCS5(イラレ、フォトショ、インデザイン、フラッシュ、ドリームウィーバー、ファイアーワークス)を購入するかで悩んでいます。 購入目的は平面デザイン、webページの作成、フラッシュでのプレゼン資料作成を考えています。 現在、Flash CS4 professional がインストールされている状態なので、デザインプレミアムを購入することでフラッシュCS4が無駄になってしまうのが嫌なのと、なるべく安く済ませたいという思いがあります。 しかし、デザインスタンダードとドリームウィーバーで購入する場合、ファイアーワークスが手に入りません。 そのため、ファイアーワークスがどの程度必要なソフトなのかを伺いたいです。 よろしくお願いします。
- 締切済み
- 画像・動画・音楽編集