貧相なページをキレイなデザインにしたいです！

質問

とりあえずCSSを使用したページを作りました。
XHTMLや基本的なCSSの知識はありますが、デザイン心がまったくありません。
http://designcss.masa-mune.jp/css.html

メニューや背景に画像を指定して見栄えの良いページにしたいです。
デザインのテクニックやサンプル(ソース)が豊富に紹介されている書籍を教えて下さい。

経験のある方なら上記のアドレスを見て、何が足りないかすぐに分かると思いますので、
こんな本を読んだら良いよ、というアドバイスでも頂きたいと思います。
宜しくお願いします。

回答No.6

B-WING2 · ベストアンサー

No.2です。
質問の本題を忘れてました。失礼。
http://www.amazon.co.jp/s/ref=nb_ss?__mk_ja_JP=%83J%83%5E%83J%83i&url=search-alias%3Daps&field-keywords=mdn+web%83f%83U%83C%83%93
MdN系の雑誌をいろいろ見てください。
今私の手元にあるのが、
・WEBデザインアイデアブック
・Webデザイナーの「どうしよう」はこれで解決
の2冊です。（他の本は貸し出し中なのでタイトル不明）
古い本なので古本屋に置いてるかも知れません。
似たような新しい本もいっぱいありますのでまずは書店に。
立ち読みして気に入ったら買う、が私のやり方でした。

回答No.5

B-WING2

No.2です。
適当にデザインまでして、まだわかっていただけないようなので、比較用に悪いデザインを作ってみました。
http://capriciousphoto.web.fc2.com/sample2/
写真は撮ったままトリミングだけ、フォントは最高にダサいMSゴシックを使用。
ボタン類は画像を使わずテキストだけで表示。
そして使った写真はコレ。
http://capriciousphoto.web.fc2.com/sample2/photo.jpg
何も綺麗な写真じゃないでしょう？ それでも一手間二手間かけると使える物になります。
また、フォント一つ変えるだけでも印象が全く違う物になります。
ベタですがHelveticaを使うだけで印象が良くなります。
Helveticaがないのなら亜種であるArialなどを代用するといいでしょう。
サンセリフは最低でもHelveticaとFuturaを用意したいです。
サンセリフ：http://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%B3%E3%82%BB%E3%83%AA%E3%83%95

写真1枚で綺麗なデザインができると思ったら大間違いです。
素材の写真の加工、レイアウト、配色、使用するフォント、ボタンなどクリックするものは視覚的にわかりやすく。
最低でもこれらを考えないとデザインは成り立ちません。
ついでに昨日見つけたおもしろいブログを紹介します。
http://blog.petitboys.com/
私とは180度違う作り方ですが、シンプルで非常に良いデザインだと思います。
私が作るとどうしてもクドい物ができてしまう。 まさに見習う点が多く、刺激的に感じました。
こういう行為の積み重ね、つまりデザインの引き出しをいっぱい作って行かないとまともな物は作れません。
デザインを始めた頃、隣の部署のデザイナーの方に「どうやったらそんなかっこいいのが作れるのですか？」と聞くと、「いろいろ見ることとです。」と言われました。
当時はピンとこなかったのですが、今では痛いほどわかります。
http://www.amazon.co.jp/s/ref=nb_ss?__mk_ja_JP=%83J%83%5E%83J%83i&url=search-alias%3Daps&field-keywords=web%94N%8A%D3
こういうWeb年鑑を見て勉強するのもいいですし、自分で良いサイトを探すのもいいです。
Web年鑑だと海外のサイトも紹介されているので非常に勉強になります。
Webデザインを始めた頃にはいろんな本を買ってきてはひたすら眺めてました。
元々がDTP出身なので勝手の違いに苦労しました。
長々と書きましたが、この書き込みが少しでも参考になればと思います。

お礼

ありがとうございます、返事が遅くなってすみません。
メインの画像の加工、メニューをテキストでなく画像を使用しマウスオーバー時の画像を指定するところや、what's newの画像など非常に見栄えが良くなりますね。

今まで情報収集がメインで、ページデザインを意識して見る事は無かったのですが、最近ではソースを見てテーブルを使っているのか、divとfloatを使っているのか、どんな画像を使用しているのかなど興味を持ちました。

色々な本を紹介していただいてありがとうございます！

回答No.4

B-WING2

No.2です。
暇つぶしに例をベースに適当に作ってみました。
http://capriciousphoto.web.fc2.com/sample/
subcolの部分は思いつかなかったので割愛。
写真は東京に遊びに行ったときに駅のホームで撮った写真を加工。
ボタン類は以前使った物を使い回し。
後はDreamweaverでテーブル作ってレイアウト。
使用フォントはモリサワの新ゴLとR、Helvetica Bold、Futura Book。
30分くらいでできました。
このサンプルが良いデザインかどうかはわかりませんが、見てくれだけなら写真やボタンなどの素材さえ作れればどうにでもなりますｗ

お礼

いやー、全く見栄えが違うな、と思いました。
キレイな写真が一枚あるだけで、これだけ見栄えが良くなるんですね。
さすがプロって感じです。
デザインは奥が深いですね。。

回答No.3

nak777r

自分もセンスないので軽く聞き流す程度でお願いします

指定されたページで一番目を引くのはＧｏｏｇｌｅのロゴ
ですよね、であれば、ピンクの背景色部分をＧｏｏｇｌｅ
ロゴの背景色と同じ白に、
とりあえず、大外枠の黒はそのままにしておいて、
中の黒色の部分を、Ｇの文字と同じ単色の青
水色の部分を、ｌの文字と同じ単色の緑にしてみる
まぁ、センスは無いかもしれませんが雰囲気はでるかも

たとえば、タイトルロゴに、青空の写真を置くなら、ＨＰも
空をイメージできる青系の色、雲をイメージできる白系の
色を選んでみるとか

なんとなく、それらしいイメージで統一すると、
なんとなく、それらしくなるとおもいますよ

お礼

ありがとうございます。
色味が違うだけで随分見栄えが変わりそうですね。

現在ページを作成中なんですが、画像や配色のバランスを考えて作ってみようと思います。

回答No.2

B-WING2

取り合えずボタンなどはPhotoshopかFireworksを使って立体的に見せましょう。
立体的じゃなくとも背景の写真を透かすとかいろいろ見せ方はあります。
私はいろんなサイトを積極的に見たりWeb年鑑などを買ったりして参考にしています。
とりあえずいろんなサイトを見て勉強するのが一番安上がりです。
手始めに大手電機メーカーや車メーカー、化粧品メーカーあたりを見るといいでしょう。
個人的に最近見つけたかっこいいと思うHPを紹介します。
http://amethyst002.web.fc2.com/index.html
前のデザインの方が好きだったのですが、コレはコレでいいです。
ちょうどいいところにPhotoshopでバナーを作る方法を紹介してくれているサイトがありました。
http://www.webdesignlibrary.jp/2008/07/website-banner.php
見た目を良くしようと思うならパーツ作りやフォント選びなど勉強することは山ほどあります。
ちなみに私は質問者様と逆でHTMLすらろくに覚えてませんがWebデザインやってます。（笑

お礼

ありがとうございます。
1つ目のサイトですが、キレイな画像があるだけでページの見栄えが全然違いますね。

フォトショップは高すぎるので、GIMPでキレイな画像を作成してみます。＾＾

回答No.1

noname#108428

単純に、貴殿が見て「見栄えが良い」と感ずるページを参考にするのが良いかと。

何を「見栄えが良い」と思うか、は人それぞれなので。

お礼

おっしゃるとおりですね。
ページデザインを意識しながらブラウズする事はありませんでした。
個人的に好きなページのソースを参考にしてみます。