shea回答ポイント 130pt

仕事で使いそうなこともあり、Web作成の技術を学びたいです。

とりあえず、なんの目標もなく始めるのもモチベーション的に難しいため、友人の劇団のサイトを作る約束をしました。

そこで質問なのですが、1からWeb制作をやるには、何を勉強したらいいですか？
経験は、10年くらい前にHTMLタグ打ちで簡単な日記サイトを作ったことはあるくらいです。
再度そこから初めても良いのですが、もっと効率よく、作りながら学んでいきたいと考えています。
また、仕事で使えるWeb制作スキルを得たいので、一般的に仕事で使われるのに必要なことを学びたいです。
dreamweaverとか必要なら買います。

なんのスキルをゲットしたらWeb制作が出来るのかも解っていないので教えて欲しいのですが、
職業的なWeb制作者の人たちが、どんな方法、流れ、スキルで仕事をしているのか（全体の仕事のイメージ）と、
HTML/CSS/PHP/MySQL/Javaスクリプト/Flash
などを学びたいです。
いきなり全部は難しいと思うので順番に少しずつで。

「何からどういう流れで始めるべきなのか」と「ガイドとなるオススメ書籍・必要ソフト」などを教えて下さい。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

chinya2009/08/06 14:33:20
満足21pt

2番目の回答者です。追記していきます。

Dreamweaverとphotoshopとfireworksで出来ることの違いがわかりません。

⇒PhotoshopとFireworks、Illustratorは、絵を描いたり写真加工をしたり、デザインをするためのアプリ。

　Dreamweaverは、そのデザインをHTMLに編集していくアプリです。

ドロー系アプリというのは、どのような機能のものを示すのでしょうか。

⇒ドロー系アプリとペイント系アプリに分けられます。

　・ドロー系　・・・Illustrator　イラストを描いたりすることでWEBにもDTPにも対応しています

　・ペイント系・・・Photoshop　　写真加工をしたりすることでWEBにもDTPにも対応しています

　・中間アプリ・・・Fireworks　　PhotoshopとIllustratorの中間でWEB専門です

基本的に、ウェブ制作を本格的にやっている人たちは、HTMLとCSSを理解した上で、アプリはDreamweaverを使っているという解釈で正しいですか？

⇒やはり基礎となるのはHTMLとCSSの知識でしょうが、CSSの知識がなくてもデザインをしたり、ディレクション

　をしているのが今の私です。HTMLとCSSの知識というよりも構造理解というか・・難しいですね。

　HTMLオーサリングソフトで最も優れているのがDreamweaverです。プロ用ソフトといっていいでしょう。

　昔はGoliveというものがありましたが、Macromedia社のAdobe合併で消えていきました。

　対極にあるものが、家庭用というか一般人向けのホームページビルダーでしょう。

　プロとしてやっていかれたいならHTMLとCSSを直打ちで理解し、Dreamweaverを使いこなすことをオススメ

　します。Dreamweaverはタグを理解していなければ、むしろ使わないほうがいいアプリケーションですので。

なお、いろいろな業務フローありますが、プロの現場の一般的な作り方を紹介します。（大まかです）

1.設計フェーズ

（1）サイトマップやディレクトリ構成図を書きます。

（2）ExcelやPowerpointでデザインの骨子となるワイヤーフレームというものを書きます。

（3）HTML／CSSガイドラインやファイル命名規則などのガイドラインを各種設けます。

（4）チェックシートを設けます。

2.構築フェーズ

（1）PhotoshopかFireworksでデザインを構成していきます。必要に応じIllstratorでイラストを描きます。

（2）デザインが出来上がったらPhotoshopかFireworksで画像をパーツごとに切り出し（スライス）ます。

　　※1-3で作成したファイル命名規則が重要になってきます。

（3）切り出した（スライス）パーツを手打ちかDreamweaverでHTMLを組み上げます。

　　※1-3で作成したHTML／CSSガイドラインが重要になってきます。

　　※ここでフォームなんかを作る場合は、出来上がったHTMLデータにプログラムを仕込みます

3.検証フェーズ※1-4で作成したファイルチェックシートが重要になってきます。

（1）複数のブラウザで崩れがないかチェックします。

（2）フォントサイズを大きくしたり小さくして崩れがないかチェックします。

（3）文言違いやALT抜けがないかチェックします。

（4）リンク設定ミスや忘れがないかチェックします。

4.公開フェーズ

（1）FFFTPといったFTPソフトでサーバにアップします。

最近のプロの現場は、デザインワークより上流工程と呼ばれる【設計フェーズ】を重視しています。

いわゆる段取りの部分であり、付加価値をつけられるのもすべてここにあります。

ここで設計されたドキュメントに従い、デザインワークをしていくわけですが、このデザインワークは

後の【検証フェーズ】でいかに表示崩れしにくいデザインをつくれるかどうか？にかかってきます。

つまりデザイナーとしてもHTMLやCSSの知識は最低限必要と言うわけです。

いわんや設計フェーズに関わるディレクター陣も、制作現場を知っていれば、それだけ強いので、

まずはHTMLとCSSの知識をつけていくところから始めましょう。

スター
- shea 2009/08/07 00:10:32
  
  ありがとうございます。こんな回答を待っていました。
  
  私の関わることになりそうな仕事も、ココで上げられている「設計フェーズ」に近いもので、
  
  現場のスキルを学びたいと言うことが質問の動機です。

その他の回答

MrDeePlanet2009/08/06 02:44:08
満足14pt

WEB制作を行うのであれば、まずHTMLを一番初めに学ぶの一番いいと思いますよ。ただ、HTMLだけでWeb制作を行ってもシンプルで味気ないデザインになってしまうので、HTMLのタグが理解できているのであればCSSを覚えるのがいいと思います。

HTMLとCSSの基礎は、とほほのWEB入門が無料で細かく書かれているので便利です。

http://www.tohoho-web.com/www.htm

CSSは、マージン等で間隔をあけたり文字や背景の色を変えることを覚えるとデザインの幅が広がると思いますよ。

http://www.tohoho-web.com/css/basic.htm

PHP/MySQL/Javaスクリプト/Flash　は、プログラミング言語になりレベルが変わってしまいます。

もしよければ、サーバーに簡単な設定で、掲示板や問い合わせフォームを設置できるところがあるので、はじめはそれを利用するのもひとつの手だと思います。

fc2では、無料でいろいろ設置できますよ。

http://fc2.com/

それからさらに変わったことがやりたくなってから、プログラムを学ぶのが一番いいと思います。

それぞれのプログラムは特性が違いますので、やりたいことにあわせて選ぶのが適切です。

スター
- shea 2009/08/06 11:14:20
  
  とほほは、10年前私がサイトを作っていた頃にもありましたね。懐かしいです。
  
  しかし、やっぱり、タグ打ちでポチポチ書いていくしか方法がないという意味合いの回答だと解釈して良いのでしょうか。
  
  一般的に、普通のウェブ制作者の人たちは、どうやって作っているのかを知りたいです。
  
  掲示板や問い合わせフォームも、時間がかかっても作れるなら作りたいです。
  
  昔サイトを作っていたときも、レンタルの掲示板やらなにやらありましたが、先にああいったものを使ってしまうと、自分で作る気というのは失せる気がします。
  
  技術を身につけることが目標です。
  
  普通のウェブサイト制作をしている人たちの仕事の流れと、
  
  サイトを作りながらHTML→CSS→PHP→MySQLを順に学んでいける方法を知りたいです。

chinya2009/08/06 02:54:23
満足14pt

HTMLとCSSは必須でJavascriptはTIPS拾ってきて対応すればいいでしょう。

HTMLオーサリングソフトとしてのDreamweaverは大変優れてますが、タグを理解したうえで使うようにしてください。

平行してPhotoshopやFireworksをやればいいでしょう。

動くものが必要であればFLASH（とActionScript）が必要になりますが、これは次のステップで。

PHPやCGIもまずはHTMLとドロー系アプリ（PhotoshopやFireworks）でWEBサイトができるようになってからでいいと思います。

初めのうちは、HTMLとCSS（Dreamweaver）とFireworks（かPhotoshopは高いので見送りか？）に絞って学習してみてください。

欲張るのはそのあとで。

http://www.amazon.co.jp/dp/4883375412/

http://www.amazon.co.jp/dp/4899771436/

手っ取り早くこんなんがいいかなぁと思ってピックアップしましたが、実際に本屋で手にとってみてから、

やりやすそうなのを選んで購入するようしてください。

いきなりアプリケーションを購入すると高くつくので、まずは体験版のDVDが付録の本を選ぶとか、いろいろと選びかたもありますよ。

スター

shea 2009/08/06 11:14:10

ステップ形式で書いていただいてありがとうございます。

<<「何からどういう流れで始めるべきなのか」と「ガイドとなるオススメ書籍・必要ソフト」などを教えて下さい。>>という質問に合致していると思います。

やはり順を追っていく必要があるのですね。

Dreamweaverとphotoshopとfireworksで出来ることの違いがわかりません。

photoshop以外は使用したことがありません。

ドロー系アプリというのは、どのような機能のものを示すのでしょうか。

基本的に、ウェブ制作を本格的にやっている人たちは、HTMLとCSSを理解した上で、アプリはDreamweaverを使っているという解釈で正しいですか？

aeteyo2009/08/06 07:06:57
満足7pt

dreamweaverは僕も使えるようになりたいのですが、マニュアルを見て諦めました。

adobeサイトに行けばマニュアルを見れますので見て下さい。とんでもないマニュアルです。

そんなに本格的なものを作らないとダメなのでしょうか？

仮にdreamweaverマスターできても、それに付随するフラッシュソフトや画像編集ソフトも使えるようにならないといけませんよ。

そんな高いソフトや高い本をいくつも買ったり勉強したりできますか？とんでもない時間や金を浪費すると思います。

私はyahooのジオシティに付いているジオクリエータでほとんどの事ができるようになりました。

いわゆるブラウザ型のホームページ編集ソフトです。無料です。操作も簡単でFTPなどのややこしいファイル転送もしなくていいです。

それで完成させて他のHPサービスにhtmlをコピペして利用する事も可能です。

あとdreamweaver使えばいいものができるという訳ではないそうです。

最終的には使い手の努力とかセンスの占める割合が大きいそうです。

スター

shea 2009/08/06 11:13:58

質問の1行目を読んで下さい。

そのレベルのサイト作成なら、今でも出来ます。

高いソフトや本を買う覚悟はあります。だから何を買うべきか聞いています。

最終的な目標は、仕事で使えるウェブ作成技術を身につけることです。

なんでもいいからお手軽に「ホームページ」を作ることではありません。

ある程度ウェブサイト制作経験のある方の回答を希望します。

学びたいことを習得済みの人から、良い学び方を教わりたいです。

indiana2009/08/06 13:04:30
満足21pt

「Web制作の勉強」ということならば、やはりまずはHTMLからになると思います。

HTMLで制作しながら、見た目を整えるためにそのうちCSS（スタイルシート）が必要になってきます。

だいたいサイトができてきたら、面白みや便利さを出すためにJavaScriptが必要になってきます。

そのうえ、管理を楽にしたくなってきたらCGI（PHPやPerlなど）が必要になってきます。

こうやって、順番に学ぶというよりは「発展していく」という感じでやるのがいいかと思います。

僕の勉強方は、「他人のサイトを真似する」です。

他人のサイトを見て、良いデザインや面白い・便利な動きなどがあると、ソースをコピーして動かしてみて、トライ＆エラーの繰り返しです。

もちろんそのまま使わず自分なりにカスタマイズする必要がありますが、リファレンスなどを眺めているよりも、そういう学習方法が最も習得（慣れ）が速く、今後忘れにくいと思います。

とくに、他人のサイトを目標とし、それに向けて進むことがモチベーションを保つきっかけとなるのが重要です。

本やリファレンスは、ひととおり覚えたあとで知識のブレを正す意味で見るのがいいかと思います。

僕は日常的にDreamweaverやFireworksを使っています。

Fireworksについては画像処理のため必要ですが、Photoshopに慣れているならば不要です。

Dreamweaverについては、使ってはいますが無くても全く問題ありません。

結局、やることは「普通のテキストエディタ」と「FTPソフト」を使った時とあまり変わりません。

むしろ、いろんな機能がありすぎてソフトの使い方に気をとられて時間がかかってしまう場合もあります。

なので、「自分のやりたいことを実現するために、どうしてもDreamweaverが必要だ」となるまでは買うことはないと思います。

（そうなればDreamweaverでなにができるかもわかっていると思うので）

かなりの高額ソフトですし・・・。

ついでに2つのソフトのいいところを簡単に書いておくと、

▼Fireworks（画像編集ソフト）

ピクセル単位の編集がカンタン（1ピクセルの線が、ぼやけずちゃんと1ピクセル幅になる）
Webに特化した画像を書き出すのが便利（軽くて綺麗な画像が書き出せる）
四角図形など矩形の操作やグラデーションの操作がわかりやすい

▼Dreamweaver（ソースコード編集ソフト）

ファイルの更新を監視しているため複数人での作業で上書きミスが減る
ファイルを編集し、そのままカンタンにFTPでアップロードできる
ソースが色分けされていて見やすい
テンプレート機能があり、ひとつのファイルを編集するだけですべてのページに反映される

といった感じでしょうか。

スター

shea 2009/08/07 00:47:21

ありがとうございます。

まずは、良さげなサイトのソースをコピペしてみるとこから、といった感じでしょうか。

スタイルシートも、この方法でコピーできるのでしたっけ。

dreamweaverの機能などもぼんやり解ってきました。

最終的に、仕事で使えるレベルを期待すると、必要になってくるのかもしれませんが、今は昔を思い出しつつ、ポチポチHTMLと付き合っていく必要があるのかもしれないですね。

yofukaci2009/08/07 07:27:32
満足13pt

WordPressとかをカスタマイズするところからはじめるのがよいと思います。

HTML/CSS/PHP　このあたりの技術が取得可能です。

Dreamweaverを使うことをお勧めしますが、タグなんてあまり意識してない人が

多いですので、自己満足だと思います。

タグを知らないより知っていたほうがよいですが、あまり役に立つとは思えません。

そもそも、タグ直うちが生産効率がわるいということで、いろんなツールが

あるわけなのですから。

スター

shea 2009/08/07 09:25:29

新しい意見が出てきた感じですね！

私も、タグ打ちの生産効率の悪そうさは承知なので、出来れば他の意見なんかも出てくるのはありがたいです。

「タグ打ちじゃない方法で作っているうちに、なんだかタグも大体なんとなくは解るようにはなってきたよね～」とかが理想シナリオではあります。

WordPressってどんなものですか？

使うと、何が出来ますか？

オフィシャルを見たけどピンと来ないので、それを使って作られたサイトとかが見たいです。

Dreamweaverを使って、WordPressのカスタマイズが出来るという解釈でOKですか？

j1nn2009/08/08 05:53:55
満足20pt

デザイン系の仕事か、技術系の仕事か、どちらを目指しているのかハッキリわからないので、どちらでも良い(一人で全部やりたい)ということで話を進めると、MT(Movable Type)というBlogシステムの改造が一番勉強になります。

そして、実践的です。

工夫次第で思いつくことが全てできます。HTML/CSS/PHP/MySQL/Javaスクリプト/Flashこれら全てを絡めたWebサイトも構築できます。日本で使っている人が多いので何か問題が起きても安心です。

まずは、真っ白な状態から、テンプレートを使わずBlogの形にしてみてください。

以下の書籍を参考にしてみるといいかもしれません。

小粋空間: Movable Type 4.1 書籍のまとめ

http://www.koikikukan.com/archives/2008/03/19-025050.php

タグの意味を把握して、Flashにどうやったら組み込めるのか、自動で更新するサイドバーをPHPでどうやったら作れるのか、レイアウトはどういうものが見やすいのか、色々研究してみてください。やる気さえあればそれら全てを学べます。好きにいじりまくるのは純粋に楽しいと思うのでやってみてください。

ちなみに、購入を考えられているDreamweaverは見た目を効率よく整えるために使うものです。いまさらHTMLの形を整えるだけの仕事なんてありません。ログが自動で整理されるシステムが備わっていて、更新に手間がかからず、見た目の良くて当たり前です。Dreamweaverだけ使っていてもそんなシステムは作れないので、まずはMTでシステムを構築できるようになっておくといいと思います。ただ、MTのタグが使えるようにカスタマイズしたDreamweaverを自分で作れたら、かなり作業がラクになると思います。

なんにせよ、MTを自由自在にカスタマイズできるようになれば、個人で仕事を取れるくらいにはなるはずです。

あとは仕事で使うのであればMTがちゃんと動くサーバーを用意できる、メンテナンスできるくらいの知識は必要です。

スター

shea 2009/08/11 09:15:58

MTは良さそうですね。

テンプレも多そうですが、あんまりそういうのは使わず1からやってみる感じが良いのでしょうか。

ついでに、LINUXでサーバ立ててみようかと思ってたので、両方ともやってみようかと思います。

ありがとうございます。

amplifact2009/08/11 03:21:37
満足20pt

僕はHTML/CSS/PHP/MySQL/Javaスクリプト/Flashのスキルを2年半程で取得しました。

参考になるかはわかりませんが、全ての言語のマスターになるのではなく、各言語を使ってある程度の

サイトが１つ作れるようになるという事を前提に僕が覚えた言語の順番で軽く雑感を...

僕が現在使用しているソフトはFlashを除いて全て無料のAptana（http://www.aptana.com/）というソフトで作っています。

その理由は無料だから...ではなく、HTML/CSS/PHP/Javascriptを書く事に特化したエディターだからです。

エディターなので全てを手打ちで書いていくソフトですが、タグの補完機能が優れているのでコーディング速度は天と地の差です。

dreamweaverはタグを書かずにある程度の事が出来ますが、本当にある程度です。それにHtml+CSS以上の事が習得出来なくなってします。

プログラミングになってくると数百数千行のコードを手打ちで書く以外の方法が無いからです...

デザインはFireworks、写真加工はPhotoshop、FlashはFireworksで作ったデザインをパーツ化する所までをFlashで行い

プログラムを書くのはFDTというソフトを使っていますは、こちらはAdobeの出しているFlexBuilderか無料のFlashDevelopでもかまわないと思います。

1. HTML + CSS

全ての基本になるので必須です。

モダンブラウザ＋IE6~で互換性のあるコーディングが出来るスキルは必要になってくるとおもいます。

WordPressやMovableTypeとセットで勉強されるのが良いと僕も思いますが、僕はMovableTypeをお進めします。

WordPressは確かにPHPベースのシステムなのでPHPが使える方はある程度のカスタマイズが可能ですが、しかしそれはあくまで

ブログを作る場合でしょう。サイトを作る時にCMSとして利用するには圧倒的にMovableTypeの方が拡張性に優れています。

2.Flash

企業のキャンペーンサイト等で見るようなフルフラッシュサイトを構築するスキルは現段階では不要でしょう。

それより、トップページ等でのイメージ訴求やブランディング等の用途で使うアニメーションをタイムラインベースではなく

ActionScript3（AS3）で構築出来るようになれば大丈夫でしょう。

3. Javascript（JS）

JS と AS3 は元が同じEcmaScriptという規格なので文法がほとんと一緒ですので習得は簡単です。

ただ文法が一緒でもプログラムの命令先がブラウザになってくるので出来る事やその用途は異なります。

しかし主にHTML+CSSで構築する際のちょっとしたユーザービリティの向上といった用途の言語ですので何百何千行も書く訳では無く

数十行で事はたります。AS3を覚えていれば少し調べれば簡単に習得出来ます。

4.PHP

主にフォームの構築で必要になってきます。これは先ほどのJSやAS3とはまったくの別言語ですので習得コストはそれなりにかかります。

しかしメールフォームで必要なPHPは数十行ですので、基本をここで学んでその後はフレームワークに移行するのが無難です。

フレームワークとは工作キットのようなもので、色んなパーツが既に用意されています。説明書に順番通りそのパーツを並べて、後はパーツ同士を

繋ぐPHPを書けばOKといったものです。現在一番主流なのはCakePHPというものです。

5.MySQL

PHPを取得したら今度は掲示板等を作る事に挑戦するかと思います。その際にはデータベースに情報を保存する必要があります。

しかし、MySQLを実行するSQL文を直接書く必要はありません。それはフレームワークに既にその機能が備わっているものが大半だからです。

先ほどのCakePHPを使用するとフォームから送られてきた投稿者名、タイトル、本文やサイトのURL等を"データベースに保存"するのはたったの

$this->save($this->data); と記述するだけで出来ます。これが裏側でかってに面倒なSQL文を書いてデータベースにデータを保存してくれます。

HTML+CSS以上のサイトになってくると普通はチームでの分業があたりまえですので、

一通りかじって、マスターする分野を選択し突き詰めるのが良いのではないかと思います。

スター

shea 2009/08/11 09:20:38

やっぱり、MovableTypeから始めようと思います。

http://www.amazon.co.jp/dp/4774137251

こういうのとかからで良いんでしょうか…？

とりあえず、初期セットアップをして、ちょっとずついじっていくかんじですかね。

Dreamweaverは、すぐにプレビューできるのとかが良さそうですけど、あんまり万能でもないんですね。

昔は、メモ帳で書いてたので、txt→htmlの拡張子書き換えがめんどくさすぎてうんざりでした。

最近はそんなこともないんでしょうか。

その他の回答を読む

この質問へのコメント

tdoi2009/08/06 00:23:48

どのような技術を使うかは、どのようなサイト、どのような機能を実現したいかによります。
そこを確定するというのは、Web制作において、ものすごく重要なスキルです。

そのため、まずは、ご友人にどのようなサイトを作成したいのかを、詳しく聞いて、sheaさんがご友人と同じ目標を持てる工夫をしてみてはいかがですか？

プログラミング言語やWebのテクニックを身につけたいのだとは思いますが、そちらを先に勉強すると、それらのために目標を捻じ曲げてしまうことが想像されますので、それは、作成したサイトが使い物にならなくなってしまいます。

すでに、ご友人のサイトでこういうことを実現したいというのがあれば、それを明記して頂ければ、この辺の仕組みを使うと便利じゃないかなというコメントはできるかと思います。

何かの参考になれば。
shea2009/08/06 01:42:41

相手も素人で、「今まで無くてもどうにかなったけど、出来るならお願いしたいな」くらいの感じなので、はっきりとした希望はなさそうです。
勉強のためという動機も、説明しています。

こちらも、いきなり難しいことは出来ないと思うので、
・普通にHTMLとCSSなどでデザインのちゃんとしたサイトを作る
・お問い合わせフォームくらい出来ないかな
・PHPとかで掲示板とか出来ないかな
くらいから始められないかとイメージしています。

このくらいの目標では難しいでしょうか？
自分でも、「何が出来るのか」「何があったら良いのか」が解らないので、要件定義難しいです。。

仕事で使いそうなこともあり、Web作成の技術を学びたいです。

ベストアンサー

chinya2009/08/06 14:33:20
満足21pt

shea 2009/08/07 00:10:32

その他の回答