WEBデザイン勉強中です。

　現在独学でWEBデザインの勉強をしておりますが、周りにプロといえる人がいないため仕事レベルでのアドバイスやダメだしをしてくれる方がいないため、作成したサイトをどうすればもっと良くなるのかが分からず行き詰まっている状態です。

　ゆくゆくはプロとしてWEBデザインの仕事をしていきたいと考えておりますので、プロのデザイナーの方でアドバイスしてくれる方がいらっしゃいましたらよろしくお願いいたします。

　以下に知り合いの企業の製品のプロモーションサイトという位置付けで仮に作成したサイトを載せます。

　http://www.egg-land.net/index.html

です。

No.3 回答者： nyanko_2003 回答日時： 2008/10/14 01:06

デザイナー兼ディレクターやっています。

デザイン面での第一印象は「作りが粗い」ですね。
全体にまとまりもない。統一感もない。
細かくNGのところを挙げてみましょうか。

・横スクロールの出る理由がわからない。
⇒黒い土台が全て見えているにもかかわらず、まだ横スクロールが出ています。
横スクロールは嫌われます。

・グローバルメニューの下の黒い枠が、ぱっと見「？」になる
⇒ロールオーバーすると「コンテンツの説明が出る」のが分かりますが、「やってみなくちゃ理解してもらえない」のはあまり好ましくありません。
別にこのやり方でないといけない！と言うことはありませんので「意味不明な枠」を作るのは避けましょう。

・ロゴが無駄にでかい
⇒InterADですか？無駄に大きいですね。それとべベルがきつすぎです。
安っぽく見えますよ。
似たようなことで同じような注意点がありますが、ドロップシャドウのかけ過ぎも気をつけたほうがいいです。

・黒字に真っ青の文字が全く読めない
⇒可読性の悪いサイトは最悪です。もう少し文字色のバランスの研究をした方がいいです。

・右上の斜めに切れているデザインの意味がわからない
⇒デザインチックにしようとして失敗した例そのものです。
そして、「What's new」をここに置くのは、（言い方は悪いですが）正気とは思えません。
※デザインには、「Fの視線」と言って、ユーザーがWEBサイトを眼で追うラインがある程度決まっているのです。
まずは、左上のロゴからスタートして、まるでアルファベットの「F」の文字のような見方をするという統計もあります。
Fの文字に沿って、見せたい内容を置くのが一番効果的だと言われています（全てが全てこの配置にする必要はありません）。
そこから言うと、あなたのデザインはFの視線で見ようとすると、見落とす箇所が多々あり、また、見たいものがその線上にないのでジレンマを感じます。
レイアウトは、とても大切なものです。いろいろなサイトを見て、しっかり勉強してください。

・画像のつくりに統一感がない
⇒「Information」「Topics」で、右からと左からのそれぞれのデザインにしようとしたようですが、無駄な動きです。
こういうときは、同じ向きから作った方が、見やすいですしまとまりもあります。
デザインをこだわろうとして、失敗しています。

・文章と、配置とが逆
⇒「Pick up」のこんなに少ない文章量なのに「Information」「Topics」二つ分の枠を使ってしまうのには驚きました。
これ、逆ですよね…。

・コンテンツページと、グローバルメニューが違う
⇒なぜTOPページでやった手法をそのまま引き継がないのでしょうか…。
ロールオーバーの色も違うあたり、WEBサイト全体での統一感がありません。

・コンテンツページ内でのフォントサイズが大きすぎる
⇒細文字で大きな文字は、大変安っぽさが出てしまいます。

・SEOも考えて、全部画像にする…と言うことは絶対避ける
⇒全ページ見る気力がないので、一部だけですが、「Flow」ページの見積もりから設置までが一枚ものの画像です。
これは致命的です。あり得ないです。

と、もうデザイン面でのNG出しはきりがないので、この辺にして今度はソースです。

・XHTMLなのか、HTMLなのか、ソースの書き方がバラバラ

・H1がないのに、急にH2が出現

・altが全く入っていない

・cssファイルにも「@charset」をつけましょう

などなど。
プロとしてやっていきたいなら、今の努力の20倍以上は頑張らないとだめだと思います。
作った自己満足で終わっていませんか？自己満足でクライアントにデザイン提案できるようになるには、並大抵の努力じゃ駄目です。
私も、SOHOさんにお仕事を振っていますが、デザインが上がってきたものを2～3回は修正に戻します。
そこで初めてクライアントにデザインチェックが出せるのです。

>知り合いの企業の製品のプロモーションサイトという位置付けで仮に作成したサイト

厳しいことを言います。
仮でも何でも、これは本オープンするにはかなり恥ずかしい出来です。
至急、リニューアルなさることをオススメします。
私はこのデザインとコーディングには、100円すらもお支払できません。

この回答へのお礼

ご回答有難うございます！
　ここまで具体的にダメだしをしていただくと非常に参考になります。
今まで完全に独学でデザインを勉強していたので、プロの方からの厳しい意見をいただけることが非常に有難いです。
　もう一度サイトを一から作り直したいと思います。
　有難うございました！

お礼日時：2008/10/14 04:34

No.2 回答者： sign_00 回答日時： 2008/10/11 20:29

フリーのデザイナーです。

全体的にフォントの選定やサイズなど、テイストが一貫していないと思います。
・コンテンツ自体は中央揃えのようだが、不自然なアキがある。指定に問題有りかと思われる。
・フォントの頭揃え・中央揃え・後ろ揃えなどが的確になされていない。
・英単語が一部かなで打たれている（本来は英数で打たなければならない）
・リンクのカラー指定が適切ではない（地が黒なのに、リンクカラーはデフォルトになってるため見づらい。ユーザーの設定によってはリンクに見えていない場合がある）
・グローバルメニューはマウスオーバーすると説明文が出てくるが、通常の状態だと中途半端なスペースに見えるため、プロならこういった表現方法はしない。　また、「Contact」と他のメニューのフォントサイズが違うように見える。フォントサイズは合わせないとバラバラな印象になる。

デザイナーが制作する場合、コンテンツ内の文章の揃え方などは一定の規則性をもって行われています。
ブラウザウインドウは可変してしまうため、平面と一緒にすることは難しいですが、基本的な考え方は平面デザインと同じです。
シンプルなサイトほど、フォントの選定、揃え方、アキなどには気をつけます。そうしないとデザインがただの「手抜き」に見えるからです。

このデザインを制作した際、どういったプロセスを踏んでいますか？

まず全体レイアウトをPhotoshopやFireworksなど（Illustratorでもできます）で組んでじっくり検討することです。
そのうえで、プロが作ったサイトなり平面デザイン（雑誌など）なりと見比べてみてください。どこが違いますか？
左右天地の空白の取り方、文字の並べ方、タテライン・ヨコラインが揃ってるか、規則的にハズすことによってデザイン処理されてるetc..などを見てください。そこには、一定の規則があるはずです。
質問者さんのデザインには規則性を見て取ることはできますか？

この回答へのお礼

具体的なアドバイス有難うございます！やはりプロの方のアドバイスだととても為になります。
　確かに私の場合はphotoshopなどでレイアウトをざっくりとは組んでみるのですが、あまり突き詰めて考えていなかったように思います。
　デザイナーとしてはそんなことではどうしようもないですよね。反省してもう一度じっくりレイアウトから検討してみます。
　有難うございました。

お礼日時：2008/10/11 21:55

No.1 回答者： steel_gray 回答日時： 2008/10/11 08:19

デザイン素人ですがコメントさせて頂きます。

・コンテンツ全体のセンタリングの手段に間違いがある。
画面に入りきらず横スクロールが発生しているが左右には均等に余白がある。

・Topicsの部分がレイアウトがおかしい。
最下行の「⇒こちらから」の部分が枠からハミだしている。

・一部のテキストリンク、黒地に青の部分は見づらい

・header.jpg がなんかボヤけている。



また、以下で製作したサイトをチェックしてみてください。
http://openlab.ring.gr.jp/k16/htmllint/htmllintl …
http://www.su-jine.com/sujine_seo_virtualgoogle. …
デザインとは別の事ですが、プロを目指すなら意識する必要はあるかも?

コンテンツのレイアウトや配色などは全体的に好印象です。がんばってくださいませ。

この回答へのお礼

　ご回答有難うございます。デザイン素人ということですが、そういった一般の方からのご意見も作成する側としてはとても貴重なものです。
　具体的にどこが悪いのか指摘いただきとても参考になります。
　ありがとうございました！頑張ります！

お礼日時：2008/10/11 21:57