独学でゼロからウェブデザインを勉強したいです。

Question

i59sizu8yz9w0

6

6もっと見る

1000pt

ウェブ制作

独学でゼロからウェブデザインを勉強したいです。

どんなウェブサイトを見て勉強をすればいいでしょうか？
あと、どんな本を買えばいいですか？（オフラインでも本を読んで色々参考にしたいです。）
ツールは Adobe Dreamweaver や Adobe Fireworks など、アドビのクリエイティブクラウドに入っている機能を使います。
作るサイトは、色々な商品説明やレビューをいれたアフィリエイトサイトです。
ページの配色や、サイトを作る上での最新の考え方、サイトの構成などが分かるような本や情報元（ＵＲＬ）が欲しいです。よろしくおねがいします。

回答の条件

URL必須
1人5回まで

登録：2013/05/12 17:57:44
終了：2013/05/12 22:13:13

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

No.1

エネゴリ13761562013/05/12 18:45:00

いろいろ挑戦してみたい気持ちは分かりますが、まずはとほほでテキストに打ち込んで基本的な事を習得しましょう。本はその後でもいいです。
あと、アフィリエイトはTwitterからの方が簡単にできますのでそちらから試してみてはいかがですか？
http://affiliate.rakuten.co.jp/susumeru/
慣れてきたらAdobe Photoshopなどのペイントソフトで画像の加工の練習などしてみてください。
独学が厳しいようならハローワークの職業訓練学校でWebデザインの講座がないか探してみてください。テキスト代だけで済みますし、失業しているなら雇用保険の期間延長もできます。また、Adobe製品のアカデミック版（学生版）を通常版より安く購入できこともあります。
参考にどうぞ。

ゴメン、ちょっと趣旨から外れています。

2013/05/12 20:05:42

No.2

だわかき7971222013/05/12 18:49:07

250pt

Adobe Fireworksは生産終了となりました。
デザインソフトはDreamweaverに統一した方がいいです。

デザインを学ぶにはサイトより参考書がいいです。
サイトだと知識が偏ってしまうので、基本的な知識は書籍で補うのがいいのです。

デザインはCSSがベースになります。
CSSの教科書として以下の書籍をおすすめします。

すべての人に知っておいてほしいスタイルシートデザインの基本原則

作者: 秋葉秀樹,安住光,坂本亮介,千貫りこ,鍋坂理恵,林豊,比留間和也
出版社/メーカー: エムディエヌコーポレーション
発売日: 2012/05/25
メディア: 単行本
クリック: 15回
この商品を含むブログを見る

デザインが優れていても、コーディングが標準から外れては元も子もありません。
以下の参考書も併せて読みましょう。

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト

作者: 益子貴寛
出版社/メーカー: 秀和システム
発売日: 2005/07
メディア: 単行本
購入: 17人クリック: 532回
この商品を含むブログ (104件) を見る

Dreamweaverによるデザイン参考書として以下もお勧めです。

しっかり学ぶはじめてのDreamweaverドリル CS6/CS5.5/CS5/CS4対応 (デザインドリル)

作者: 両角由美,スタジオイースペース
出版社/メーカー: 技術評論社
発売日: 2013/04/24
メディア: 大型本
この商品を含むブログを見る

いい情報ありがとうございます。

2013/05/12 20:06:16

No.3

holoholobird5741042013/05/12 19:28:39

250pt

ウェブサイトを作るには、いくつか学ぶ必要があるプログラミング言語があります。
それぞれの役割と、学ぶ方法。そして学んだらどんなことができるのかを簡単に説明したいと思います。

なお、基本的にプログラミングの勉強は複数のウェブサイトを渡り歩くよりも本を購入して学習したほうがいいです。
ウェブサイトと違って体系的に書かれてありますし、一冊は高くても2000円台で購入できます。

さらにウェブデザインを学ぶのに必要な知識を習得するのに必要な参考書は高々2冊程度です。
ですので、個人的には本の購入を検討することをお勧めしたいと思います。

では基本的な言語から説明したいと思います。

・HTML
internet explorerに文字や画像を表示する言語です。
internet explorerであるページを表示させたときに、HTML言語を使って「こんにちは。」と記述すると、画面に「こんにちは。」と表示されます。
HTMLを知らないと、ウェブサイトが作れません。

・CSS
「HTMLのように、ただ画面上に文字を並べるだけでは味気ない。」
「どうせならデザイナーの本のように、見やすくセンスあふれたデザインのウェブサイトを作りたい！」
という人が使います。つまり、サイトの「デザイン」を設定する言語です。
文字のサイズから画面の配色まで、ウェブサイトを見やすくなるように設定したいなら必要です。
ただデザインセンスが悪いと、見にくいサイトができてしまいます。

当たり前ですが、HTMLとCSSは基本的にセットです。
というよりもHTMLだけでは
http://www.ibarakiken.gr.jp/www/
http://info.cern.ch/hypertext/WWW/TheProject.html
こういうホームページしか作れません。（ちなみに上が日本最初のホームページ、下が世界最初のホームページのコピーです。）

HTMLとCSSを学ぶには、実際に手順に沿って作るのがいいでしょう。
http://www.amazon.co.jp/HTML/dp/4883375412
私はこの本を使って、手順通りにすすめました。

というのもホームページ作成系のウェブサイトは、説明不十分なところが少なからずあり、読んでて不明なことが多かったからです。
逆にこの本は説明がくどいくらいあるのですが、少なくとも読み進めていって、なぜこれがこうなるのかわからなくなることはありませんでした。

この本を一冊終わらせれば、よくあるホームページテンプレート系のウェブサイト程度なら作ることができるようになります。
しかしこの本を学習する本当の効果は、idとかclassとか、CSSの設定とかの意味が理解できるようになることです。

自分でいざ新しいウェブサイトを作ろうとするとき、必ず何かしら技術的な問題にぶち当たります。
知識がなければこの問題を解決するにはどういう検索を行えばいいのかすら理解できませんが、この本で知識を付ければ検索で簡単に解決方法を導くことができます。

ちなみに私もこの本に書かれている演習はDream weaver4を使って行いました。
Dreamweaver便利です。かゆいところに手が届くので、演習を気持ち良く進めることができました。

・PHP
ある商品の名前やユーザーの名前を検索したときに、検索結果を表示したいとします。
あらかじめ、すべての商品のホームページを作成するのは手間がかかります。
そこでどのような情報をどのような画面で表示するかをあらかじめHTMLとCSSで作成しておき、ここには商品の名前、ここには商品の説明、ここにはユーザーの名前を入れる

、などPHPで設定すると、わざわざすべての商品のページを作らなくても、PHPが一人で作ってくれます。

・MySQL
いわゆるデータベースです。EXCELみたいなものを想像してください。
これがあると、商品名、商品の情報、登録したユーザー、商品のレビューなどを効率的に検索したり、保存したり、管理できます。
PHPで商品の情報などを検索するときには、MySQLで条件を検索した後、PHPで検索結果を表示させています。

さて。PHPとmysqlに関しては、下手な説明サイトを読むよりもまずはこの本を購入して読んでみたほうが絶対にいいです。
http://www.amazon.co.jp/dp/4798119865

これを読めば、あなたがどんなサイトを作ろうと思っても、どういうプログラムを作ればいいのかが、実例付きで、分かります。
この本が一冊あれば、仮にあなたがプログラミングを全く行ったことがない素人でも、PHPとMySQLでデータベースを使ったサイトを作れるようになるうえに、セキュリティの

知識からホームページの公開方法まですべてがわかります。

基本的に、HTMLをCSSの知識があれば、あとはこの本1冊あればあなたが作りたいものはまず確実に作れます。
上級者になる場合でも、この本を理解したならどういう勉強をすればいいのかがおのずと分かるでしょう。

この本である程度理解したなら、自分でプログラムが作れるようになります。
分からないことが出てきても、この本を読み返せば大抵解決策が載っています。

それでもわからないことが出てきたら、googleで検索すれば必ず答えが出てきます。

・javascript
いわゆる、「動く」サイトを作ることができます。
ちょっと下のURLを見てください。

http://bunkai-kei.com/special/Bridge-of-Babel/
flashとは違います。flashのように読み込む時間もかからず、これだけのサイトを作ることができるのがjavascriptです。

まだあるのでいろいろ見てください。
http://makoto-tanaka.com/%EF%BD%8Aquery/119/

ちなみに、PHPとjavascriptは一般的なプログラミング言語と似た感じで記述されています。
まずPHPを学習して、そのあとjavascriptを勉強するとスムーズに……は行きませんが、いくらか楽に勉強できます。

javascriptは本を購入するのではなく、実際に自分が使いたい機能を実行するコードを探して、そのコードを改造する感じで少しずつ勉強していくのがいいです。
ちなみにjavascriptでは細かな機能を実行することができます。

こんな感じです。
http://www.webcreatorbox.com/tech/jquery-tips20/

PHPを学んだあとなら、大体どんなことを言っているのか理解することができるようになるでしょう。
分からないことがあったら、わからない部分を検索すれば、その部分が何を言っているのか理解できるようになります。
余談ですが、私はjavascriptの勉強をしているとき、コードを読んでは検索し、コードを読んでは検索し、を繰り返しましたが、なんだか英語の長文を読んでいるようだと思いました。
実際、javascriptの勉強は英語の長文を読むのに似ています。
javascriptはコード中に「関数」がとても多いため、英単語のごとく関数の意味を暗記しなければコードを読むことができないからです。

javascriptは上記4つの言語を学習した後に、余裕があれば少しずつやるような形で進めるといいと思います。

がんばってください。