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

WEBデザインに関して、HTMLとCSSしかできません。
だから素人臭いサイトしか作れません。
そうではなくて、
企業がWEBデザイナーを雇って作らせたような、
そういう小綺麗なサイトを作りたいんです。

===素人臭いサイト===

http://bit.ly/gE3IYl

http://bit.ly/b13s8g

http://bit.ly/e6e0jp
===プロのサイト===

http://bit.ly/cJFY9k

http://bit.ly/eE5dLB

http://bit.ly/fBqijS

http://bit.ly/5yh3cz
※動的サイトもありますが、あくまでデザイン面に言及してます

プロようなサイトを作るのに役立つ、
具体的、実践的な内容の本を教えてください。
(adobe系のソフトは既に購入済みです)
解説サイト、外注先等、でもOKです。
また、プロが使う素材屋を教えてください。

もしあなたが、上記に挙げたようなサイトを作るとしたら、
まずはどうやって勉強しますか?どの書籍を買いますか?どこに外注しますか?
極めて具体的に教えてください。

1300292466
●拡大する

●質問者: ty2016
●カテゴリ:ウェブ制作
✍キーワード:Adobe CSS HTML WEBデザイナー Webデザイン
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● koutarou
●20ポイント

>素人ぽい→プロへ、スキルUPしたい。

整理事項

・HTML・CSSスキル、素人臭いサイト制作。

・デザインセンスUP、小綺麗なサイト。


[1]実践的な本、解説サイト、外注先等

サイトのトップから下層まであり、容易にカスタマイズでき、お勧めです。

おしゃれなホームページのデザイン テンプレート・コレクション

おしゃれなネットショップのデザイン テンプレート・コレクション


[2]プロが使う素材屋

・アマナ

ttp://amanaimages.com/indexTop.aspx#


[3]掲載サイトを制作(具体的に)

掲載の「プロのサイト」に関してですが、残念ながら、素人の域を出していないと言う人が多い。

のではないでしょうか。

(1)どうやって勉強?

・サイトを分析。

(2)書籍購入?

・購入しない。

(3)外注先?

・外注しない。

◎質問者からの返答

回答ありがとうございます。

質問が曖昧だったので具体的に言いますね。

HTML CSSだけでは作れない下記のような画像は、

http://bit.ly/eoIVc9

どこで仕入れた素材を使い、adobeの何というソフトの、どんなスキル

を使って、

作られているのでしょうか?

そういったスキルを教えてくれる本を探しています。

プロと素人の決定的な違いは、HTML CSSだけでなく、

上記のような画像?でサイトを構成している点だと思うのです。

尚、ご紹介頂いた本は飲食店HP・ECサイト等の用途向けのようです。

私としては、アフィリエイトサイト、PHPウェブサービス等・・・

もっとポップな方向性なので方向性が異なります。


2 ● ymlab
●40ポイント ベストアンサー

>プロようなサイトを作るのに役立つ、

>具体的、実践的な内容の本を教えてください。

>(adobe系のソフトは既に購入済みです)

>解説サイト、外注先等、でもOKです。

>また、プロが使う素材屋を教えてください。

>もしあなたが、上記に挙げたようなサイトを作るとしたら、

>まずはどうやって勉強しますか?どの書籍を買いますか?どこに外注しますか?

>極めて具体的に教えてください。

画像を一から作る覚悟があるのでしたら、画像処理ソフトで作ります。

写真を元に、加工していくのであれば、

PhotoshopやGimp、無から作っていくのであればIllustrator等でしょう。

私は本職ではありませんが、ロゴを一つ作るのに、一晩徹夜して作りました。

Webサイトのデザインではありませんが、

iMacの発表のプレゼンの番号のロゴをつくるだけでも、徹夜しました。

(今では鏡面効果などはPowerPointでも一発で作ってくれますが、当時は画像処理ソフトで作成していました。)

http://news.cnet.com/1606-2-5894182.html

(最初にCMが出てきます。)

ただし、一人でデザインも、コーディングもするとなると大変です。

そこで、品質のよい画像は、購入することも検討されてはいかがでしょうか。

http://pixta.jp/search/?theme=&sg=&sg_word=&outcat=0&keyword=&no...

ソースを失念したのですが、ここのサイトをどこからのテレビ局が勝手に使っていて問題になったことがありました。

従って、

>プロようなサイトを作るのに役立つ、

>具体的、実践的な内容の本を教えてください。

については、画像編集の本を基礎から学ぶようなデザイン系と、

Javascriptやクライアントサーバシステムの学習が必要かと思います。

クライアントサーバシステムを構築するためには、HTMLとCSSの学習だけではなく、

PerlやPHP、Rubyの学習が必要ですし、それをサーバで公開するとなると、

これも組むシステムによりますが、Apache等の学習も必要です。

自宅サーバとなると、ポートの概念も学習する必要があります。

id:ty2016 さんは、まず高品質な画像を作りたいとお考えのようですので、

Photoshopプロフェッショナルロゴデザイン

http://books.rakuten.co.jp/rb/5671169/

のような本で学習されるとよいかもしれません。

ただし、私は、id:kou-ratou さんと同じく、PhotoShopについては、Webで学びました。

◎質問者からの返答

>id:ty2016 さんは、まず高品質な画像を作りたいとお考えのようですので、

Photoshopプロフェッショナルロゴデザイン

このような本を期待していました。

ピンポイントな回答です。ベストアンサーにさせて頂きます!


3 ● confuru
●20ポイント

HTML/CSSの知識があり小奇麗なサイトを作りたいということなので、

WEBデザインのルールについて学んではいかがでしょうか。

たとえば。

http://www.webcreatorbox.com/tech/design-element-principle/

配色の設計やレイアウト、フォントの選択などデザインの手法を学べば

見た目は整えられます。

その上でPhotoshopなどでパーツデザインやソフトウェアの機能、Tipsなど

を試していけば効果的だと思います。

本だとこんな感じのやつ。WEBデザインで検索かければいっぱいあります。

だいたい広く浅くデザインについて書かれているか、分野に特化したもの、

ツールの使い方を説明したものやTips集などに分けられます。

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

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

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

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


画像についていえば他の方が挙げられているとおりアマナなどのサイトで

買えば高品質なものが買えるでしょう。ストックフォトで検索してみてください。

GimpやCodaなどAdobe以外のツールでも

問題はないですがツールはPhotoshopとDreamweaverがあればとりあえずOK。

IllusoratorとFlashは必要に応じて。

PhotoshopのTipsはWEBでも本でもいっぱいあるので適当にググればいいものが

あるのでお好みのデザインに近いスタイルのものをチョイスすると早いと思います。

◎質問者からの返答

丁寧なご回答ありがとうございます。


4 ● やす@新宿
●20ポイント

ホームページの制作会社を経営しています。


プロが作るホームページと素人が作るホームページの違いは、設計をきちっとして、それに従って作っているかどうかです。

建築にしても、コンピュータのプログラムにしても、何にしてもそうですけど、物を作るには、まず、設計です。


1.中身の設計

ホームページの中身やその内容を綴ったサイトドラフトです。手書きでも結構ですし、ワードなどのワープロソフトで作成しても良いです。

理想は、htmlで作成するのが良いです。


2.見た目の設計

デザインラフと呼ばれる物です。手書きでも結構です。

理想は、Photoshopで作成するのが良いです。


3.CSSの設計

1と2の作業が終了したら、両方を見ながら、各タグの割り当てと、クラスやidの設計を行います。

これも手書きでも構いません。

理想は、xhtml+cssでテンプレート化していくのが良いです。


4.実作業

1?3までの作業を繰り返し行い、全て整った所で、実作業に入ります。


慣れてくると、設計を頭の中でやってしまい、実作業をいきなりする人も多く居ます。しかし、頭の中では、1?3の作業を何度も繰り返し、答えを持った上で作業をしています。

また、短納期に対応するため、企画部分、デザイン部分、コーディング部分を分業化することも多く、一人で作業をするとなるとそれなりの時間が掛かります。

デザイン部分においては、Photoshopのシェイプやブラシなどを設定して、高速にデザインを進めます。よって、デザインの細部を見ると、同じものを使っているケースが多いです。

コーディング部分は、基本的にYUIライブラリーをお手本にテンプレート化して、高速にコーディングを進めます。


弊社の社長が実際に1年間掛けて、作ったサイトがあります。

こちらを参考にして貰えると丁度良いかと思います。

鈴木智子のホームページのアクセスアップ講座

◎質問者からの返答

回答ありがとうございます。

プロの方からアドバイスを頂き光栄に思っております。

非常に参考になりました。

関連質問


●質問をもっと探す●



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