未経験者がこれからウェブデザインを学ぶにあたって

Question

就職早々に就職先のホームページデザインのリニューアルを任されました。
元々広告デザインをしていたので頭の中にデザインイメージはあります。これから形にしていこうというところなんですが、ウェブデザインは未経験です。
当方、家はMAC。フォトショ、イラレ人並みに使えます。
現在会社ではwindowsでGo Live CSが使われています。イラレ、フォトショも入っています。
私の前任者がGo Live CSで現在のホームページを作成。
これを期に、ウェブデザインを本気で学んでいきたいと思っています。

というのが現在の状況です。

そこで詳しい方にアドバイスを頂きたいのですが、

●まず何をすべきか？
Go Liveの簡単な操作は覚え、ちょっとしたサイトならすぐ作れそうですが、書き込みを見ていると、ソフトはやはり単なるツールで、言語が書けないと話にならないなど目にしました。ソフト操作習得よりも言語の勉強から始めるべきなのかとも思っています。そういう意味でもまず何をすべきか教えていただきたく思います。

●Go Live　はどうなの？
これから学ぶにあたり、Go Liveでいいのかという疑問があります。社長に言えば必要なソフトは買えそうなので、Dreamweaverの方が良いのではと思ったりしています。もしくはそれよりもいいものがあれば。

長くなりましたが、アドバイス頂けるとありがたいです。宜しくお願いいたします。

taloo · Accepted Answer

ウェブデザインの作業はイラストレーション：絵描き、写真の編集、合成などレイアウト：配置決め HTML/CSSコーディングの３段階有ります。（規模が大きくなると、それ以外の行程もあります）イラストレーションとレイアウトをひとまとめにしてIllustratorやFireworksなどで作業をすることも多いと思います。ウェブデザインというと３つめのHTML/CSSコーディングしかふれられないことが多いですが、たとえば通販サイトであれば、一目見ただけで購入意欲をそそるようなデザイニングというのは非常に重要ですし、そのデザイニングの作業は、あくまでPhotoshopやIllustrator、Fireworks、もしくは紙と鉛筆で「ページのどこに何色で表示するか」を決めるだけであって、この作業そのものにはHTML/CSSの入る余地はありません。それらのデザインが決まってから、（色鉛筆やIllustratorではなく）HTMLで配置、色を塗っていくのが、HTML/CSSコーディングです。・ DTPと違い、文字サイズが「閲覧時に」大きくしたり小さくしたりできます。たとえばDTPでは幅何センチの間に何文字を入れる、ということを制作者が決めることができますが、ウェブページでは、幅何ピクセルの間に制作段階では１０文字でぴったりに見えても、閲覧者が文字サイズを大きくすれば、何文字かがはみ出て隣の文字と重なってしまうことがあります。この問題に顕著なのがホームページビルダーのどこでも配置モードですが、 HTML手書きをされている方でも、この問題に引っかかったコードを書かれている方がいらっしゃいます。段組にすると、この問題に引っかかりやすいですね。・ウェブページの内容は「文書」ですので、見出しや段落などを明確にする必要があります。また、同じ意味の部分は同じ色、同じ装飾文字（太字や斜体など）で統一させた方が、CSSを作りやすくなります。フォントは可能な限り無指定の方が良いです。印刷と違い、制作者が指定したフォントで表示できるとは限りません。どうしてもそのフォントで表示したいというのであれば、画像で保存して表示することも可能ですが、そうすると、ユーザーへの配慮（ユーザビリティー）、その他検索サイトへの登録状況をよくするなど（SEO)が不利になり、ウェブページとしてはマイナスになりやすいです。 > ●まず何をすべきか？ツールはツールです。テキストエディタもツールではありますが、たとえばネジを締めるのに電動ドライバーを使えば一瞬で締められますが、１ミリ浮かして緩く締めるような場合には、手動ドライバーの方が使いやすいです。オーサリングソフトの欠点は、どこが見出しでどこが段落かという指定を行わない、または忘れてしまうことがあり得ることだと思います。見出しや段落の指定（HTMLコーディング）をしなくても、見た目だけ変更（CSSコーディング）すれば作れてしまうというは諸刃の剣です。また、ツールの機能を超えたことは、ツールでは作れません。たとえばDreamweaverはのlang属性やが使えませんので、厳密なコーディングもしくは、ツールの機能を超えた部分をやろうとすると、どうしても手書きになってしまいます。私はDreamweaverという名前の電動ドライバーも使いますし、テキストエディタという手動ドライバーも使っています。 > ●Go Live　はどうなの？社内にGoLiveの使い方が詳しい人がいて、便利な使い方を教えてもらえるのであれば、GoLiveから入るのがいいと思いますが、おそらくGoLiveの開発が終了しましたので、ツールの機能不足などを補おうとすると、Dreamweaverに切り替えないと行けないと思います。 GoLiveからDreamweaverに乗り換えると、ソフトウェアの使い方を最初から覚え直しになりますので、私は、最初からDreamweaverでやるほうが良いと思います。 > 某嫌われないWebデザインのページ（URL略）そうですね。ページトップにいきなりデカデカと他社の広告が入っていて、しかも本文なのか広告なのかわかりづらいのは嫌われると思います。

taloo · Answer

なるほど、、、、
ジーニアス和英、英和辞典によると
設計 = plan, design, layout
design = 図案、意匠、設計、計画する
とありますね。

私はsite=工場の名の通り、建築、DIY（日曜大工）でたとえることが多いのですが、
たとえば建築デザインなら、
インテリアデザイン、エクステリアデザインのような壁紙に絵を描いたり、カラーリングを指定するだけでいいなら、設計技術、知識は不要だと思います。

でも、かっこいいから柱を細くしました、じゃまだからなくしました。では、強度不足で使い物になりません。
綺麗だから屋外の敷石を大理石にしました。ではもし酸性雨が降りやすい地域ならそれに耐えられません。
材質や強度、予算、使いやすさも考慮した上で、どのくらい細くできるのかを考えなければ、良い「建築デザイン」とは言えないんじゃないでしょうか。


私はデザインと設計は別と考えていますが、もし１つにまとめて「デザイン」と呼ぶのであれば、それでかまいません。
でもそれなら、なおさら設計面などもしっかり勉強する必要がありますね。
もし設計面その他総合的な"デザイン"を勉強したいというのであれば、とてもBBSで話せる量ではありません。
「設計、運営、管理、メンテナンス、CMS、オーサリングソフト、メリット、デメリット、ユーザビリティー、アクセシビリティー」
など、ホームページ制作、運営に関するキーワードを検索してみてください。

taseki · Answer

話の本筋とはずれてしまいますが

＞ デザインとは設計・構築です。見た目ではありません

＞ 私はその部分は「サイト設計」として、デザインとは別

haj1meさん、talooさんお二人が言いたいことも気持ちも良く解りますが、一般的な言葉の意味としては、

■「デザイン」とは“見た目も含めて”、計画や設計という意味

です。
したがって、デザインとは見た目「でも」あるし、「設計とデザインは別」というのを日本語に訳すと「設計と設計は別」と意味不明なことに…。
しつこいようですが、言いたいことや気持ちは良く解っています。そういう人は多いですしね。
しかし、そう表現していた日本人が、以前にイタリア人デザイナーと話したときに、会話が訳のわからないことに…、ということがあって、まあ、どこでも通じる言葉を使うのであれば、なるべく注意した方が良いという、老婆心ながら口出ししてしまいました。失礼しました。

おそらく、デザインのことをビジュアル面に限定してしまう日本人は、主にプログラミングとか技術的な分野からは遠い位置にいる人に多いと思います。それこそグラフィックデザイナーや組版などやる人ですね。
なぜなら、プログラミングやその他の工業技術の世界では、普通に「デザイン」という言葉が用語として良く登場するし、設計ツールとか機能のことを「デザイナー」と呼びますから。自動車デザインなんて代表でしょうね。

taloo · Answer

> デザインとは設計・構築です。見た目ではありません。
あ～、、、
私はその部分は「サイト設計」として、デザインとは別のところで考えてますね。


そのサイトを作り公開する目的、
何を公表し、アピールしたいか、更新するためのプラン、管理方法、その他、
ディレクトリの分け方、ファイル名の命名基準、データベースを使うならデータベースの種類、
BBSやブログ、会社概要の地図を載せるのに、自分で作るのか他社サービスを利用するのかなど
そういうところを「サイト設計」の段階で決めていき、

その後、たとえば企業イメージが青なら全体に青でまとめよう、
女性向けのページにしたいから赤やピンクでまとめよう、などというデザインを決めていきます。

そのデザインを表現する手段として、色鉛筆があり、水彩絵の具や油絵の具、PhotoshopやIllustrator、
それにCSSがあると考えます。
（厳密にはHTMLはデザインのためのものではありません）

サイト設計＝ウェブディレクター
サイトデザイン、ページデザイン＝デザイナー
HTMLコーディング、CSSコーディング＝HTMLコーダー
JavaScript、Perl/PHPなどプログラム作成、CMSテンプレート作成＝プログラマー、HTMLコーダー
Flash作成＝Flashプログラマー、Flashプログラマー

大規模で複数の人が１つのサイトを作る場合は、役割分担ができると思いますが、
小規模ならほとんど１人で全部を兼任することが多いと思います。
ディレクターの仕事は営業の人が兼ねたり、
（クライアントがどんなサイトを作りたいかを聞き出して、
ショッピングカートをつけるのか、クライアントが自分で更新できるようにするためにCMSにするのか、などを決める）
デザインとHTML/CSSコーディングを１人でやるところは多いと思います。


広告デザインでも同様にディレクターがいると思いますし、デザイナーが印刷や製本まですることはないと思います。
雑誌に掲載する広告なのか、新聞の折り込み広告なのかで作り方が違うと思いますし、
そういうのを考えて、デザイナーに指示するのもディレクターの仕事ではないでしょうか。

いきなりディレクター業務までやらされるのは大変だと思いますが、
広告デザインの経験があるなら、そのときのディレクターがどんな仕事をしていたかを思い出しながら、自分の仕事を進めていけると思います。

haj1me · Answer

まず本質的な意味からデザインを考えます。
デザインとは設計・構築です。見た目ではありません。最後の最後にtoraqt88さんの広告デザインが生かされるかもしてません。
http://pingmag.jp/J/2005/12/09/the-website-development-process/
http://itpro.nikkeibp.co.jp/article/COLUMN/20061121/254332/
http://executive.itmedia.co.jp/hensyubu/archive/137/0
新人のあなたに任せたということは丸投げ外注に近いと思いますのでもう１つ。あなたはサイトより、会社も研究する必要があります。
http://executive.itmedia.co.jp/hensyubu/archive/137/0
http://executive.itmedia.co.jp/hensyubu/archive/133/0

そしてやっとお待ちかねの見える部分のデザインです。
「Go Live CS」「Dreamweaver」で、このＱ＆Ａサイトを検索してみてください。それらのソフトで●●できない。崩れる。等の質問が沢山見つかると思います。それらを解決するには、htmlとcss等のソースが提示されていると思います。ソフトに頼らないメモ帳（テキストエディター）でサイトを作れる人でないと修正もできません。基本をわかった人が効率化の為に使うソフトが上記のソフトです。
http://www.mdn.co.jp/content/view/6946/55/

プロ用包丁を手に入れれば、料亭料理が素人にでもできると考えておられるならそれらのソフトをいきなりお使いになればいいと思います。
いや無理と思いになるのであれば、まずは、XHTML(HTML)とｃｓｓを理念から学ばれる事をお奨めします。web標準ですね。簡単なことなら手打ちで充分です。そんなに難しい言語ではありませんし、ビジュアル面では強い武器をお持ちのようなので、すぐになんとかなりますよ。

紙と、全く違う環境で見られるサイトのデザインはことを意識して、macだろうが、winだろうがfirefoxだろうがOperaだろうが、見るに耐えられないものを作らないようにがんばってください。会社の顔になるのですから。

就職早々大変でしょうががんばってください。

noname#83877 · Answer

cssについてはブラウザごとのバグを覚えていく必要があります。
http://adp.daa.jp/web.html
このサイトのバグや挙動の違いを確認という項目を見てみてください。
cssのバグはいろいろと回避しながら書いていく必要があるので、経験を積むしかありません。急には無理かもしれませんが、じっくり覚えていくと良いと思います。

manicpanic · Answer

こんにちは。フリーランスでWEB業をしております　20代・女性です。

○いちから独学で学習した立場よりアドバイスさせていただきます。
私の場合はHTMLとCSSの勉強からはじめ、将来的な移行のためにも
XHTMLまでの言語をまずはじっくり勉強しました。
事実上、ウェブデザインに言語の勉強は不可欠です。

企業様のサイトでしたら、ぜひ　SEO対策なども研究してみてください！
"SEO"については個人で管理が難しいようであれば業者へ依頼してみるのも手です。
また、"JAVA"や"FLASH"なんかもできると表現手段が大きくひろがり
ますので、余裕がでてきたら勉強できると尚よいでしょう。
それから画像は「商業利用」が可のものを必ず使用するようにしてくださいね。
※これがけっこう問題になる場合がありますので重要なところです
確認作業は"IE"、"Firefox"の2窓で行います。


○「Go Live」はあくまでもツールですので、補助的に使用するという
考え方でしたら充分役に立つ道具だとは思いますが。
(HTML手打ちができれば一番よいのですが)
「Dreamweaver」のがウェブ制作業種では一般的ですが、一般的な企業様で既に
「Go Live」をお持ちなのでしたら充分ではないかと思います。
※Dreamweaverにしたからといって画期的に何かが変わる訳ではありませんし(;;)


ご自分の好みのデザインのサイトなどを参考にして、HTMLやCSSから
たくさんの数をこなして練習してみるのも上達への近道です。
まずはすこしずつでも言語習得から・
これからの永い道のりをがんばって踏み出してくださいね(^^!)

参考URL：http://heo.jp/tag/site_links/hpmake.html

nori_007 · Answer

#No1 さんと同意見になりますが、

１，Go Live はアドビがサポートを中止したソフトですので、覚えるだけ無駄

２，Dreamweaver が有ればweb デザインが出来ると思うのは間違い。

まず、するべき事は社内で、web デザインと、グラフィックデザインは別物と認識すること。

その上で、個人的に学ぶつもりが有るので有れば、まずは、XHTML(HTML)と CSS を学び、メモ帳等で簡単なホームページを制作出来るスキルを身に付けてください。

その次のステップとして、イラレ等で制作したデザインを、パーツに分解して、XHTML(HTML)と CSSで表現出来るように学んでください。

次に、公開するサーバの仕様や、ホームページ内に動きを出す為に、JavaScript 等を学んでみてください。

WEB デザインに関しては、グラフィックデザインが出来れば同じような物と勘違いされている方も多いと思います。是非ともじっくり学んでみてください。

taseki · Answer

まずは、大変失礼ながら、フォトショ、イラレ、GoLiveなどのビジュアル面でのデザインの領域と、言語とおっしゃるプログラミングすなわちシステム構築の領域とを、混同なさっているか、明確に区別できていないようにお見受けします。
この二つは、もちろん無関係ではありませんが、やっていることは全然違いますし、技術も知識も別ですので、きちんと分けて考えたほうが良いです。
本来なら担当する技術者も別です。

ビジュアルデザインのツールは、はっきり言ってしまえば、自分が使い慣れたものであれば、何でも良いです。ただし最低限のツールという前提ですが、Dreamweaverなどであれば問題ないと思います。
またGoLiveは開発もとのAdobeが開発と販売を止めてしまったので、これは今から選ぶとなれば外したほうが良いです。

プログラミングのほうは、何を作るのかに依存しますが、より汎用的な、つまり「つぶしが利く」という意味では、JAVA、Perl、Cというあたり。
Webシステムに限らずUNIX系サーバーを触るなら、最低限Perlぐらいできないと厳しいかもしれません。
PythonやRubyなども需要が高まっています。
初心者向けとしてはPHPという手もありますが、初心者でもできるので人材はあふれていることと同時に、初心者つまり技術があまり高くない人も多いことから、本格的なシステムでは敬遠されることも多いです。

未経験者がこれからウェブデザインを学ぶにあたって

ウェブデザインの作業は

なるほど、、、、

話の本筋とはずれてしまいますが

> デザインとは設計・構築です。

まず本質的な意味からデザインを考えます。

cssについてはブラウザごとのバグを覚えていく必要があります。

こんにちは。

この回答への補足

#No1 さんと同意見になりますが、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング