人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: i59sizu8yz9w0
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● エネゴリ
●0ポイント

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


i59sizu8yz9w0さんのコメント
ゴメン、ちょっと趣旨から外れています。

2 ● だわかき
●250ポイント

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

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

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

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

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



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

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

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



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

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

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


i59sizu8yz9w0さんのコメント
いい情報ありがとうございます。

3 ● holoholobird
●250ポイント

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

なお、基本的にプログラミングの勉強は複数のウェブサイトを渡り歩くよりも本を購入して学習したほうがいいです。
ウェブサイトと違って体系的に書かれてありますし、一冊は高くても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つの言語を学習した後に、余裕があれば少しずつやるような形で進めるといいと思います。

がんばってください。


i59sizu8yz9w0さんのコメント
かなり丁寧にありがとうございます。

4 ● mododemonandato
●500ポイント ベストアンサー

本当に最新の情報を知りたいのならば、月刊雑誌を定期購読するのが良いでしょう。
最新刊を2,3冊読んで作るだけでも良いです。
web業界はトレンドのスピードが速いですから、最新のデザインも直ぐに古くなってしまいます。
常に購読していれば流行に付いて行くことも出来るでしょう。

Web Designing (ウェブデザイニング) 2013年 05月号 [雑誌]

Web Designing (ウェブデザイニング) 2013年 05月号 [雑誌]



これから勉強すると言うのならば、やはり最新の基準となるHTML5に準拠したデザインを学ぶと良いと思われます。
古いHTML4でデザインを覚えてしまうと、新しい基準に覚え直すのが大変です。
初めからHTML5で学んでおけば、その心配も要りません。

HTML5 スタンダード・デザインガイド ~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ (Web Designing BOOKS)

HTML5 スタンダード・デザインガイド ~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ (Web Designing BOOKS)


i59sizu8yz9w0さんのコメント
あー、それは知りませんでした。助かりました!

5 ● amai_melon
●0ポイント

以下の本はいかがですか。

Dreamweaverレッスンブック Dreamweaver CS6/CS5.5/CS5/CS4対応 (-)

Dreamweaverレッスンブック Dreamweaver CS6/CS5.5/CS5/CS4対応 (-)


デザインの学校 これからはじめるDreamweaverの本[CS6/CS5.5対応版]

デザインの学校 これからはじめるDreamweaverの本[CS6/CS5.5対応版]


i59sizu8yz9w0さんのコメント
うーん、その情報はぐぐれば普通に出てくるからダメ。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ