Webサイトの添削 | お悩み相談

皆さんからのお悩み相談に馬場誠がお答えします!

独学!未経験からWebデザイナーになる!! > お悩み相談室 > 2013年のご投稿 > Webサイトの添削

Webサイトの添削

posted by 匿名希望さん 2013-07-17

Webサイトの添削をお願いします。
色は三色で橙色を基本に、茶色の調和色、補色の青色を配置してみました。

http://0526.dousetsu.com/1/index.html
 
匿名希望さん

こんにちは。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
の管理人の馬場です。

大変お待たせしました。
先日お送りいただいたお悩み相談の件、
以下、返信いたしますね!


> Webサイトの添削をお願いします。


添削は、就活用とそれ以外によって
回答が変わってくるのですが、
現在は学習中だと思いますので後者として回答しますね。


■デザイン
デザインに関しては、
とてもシンプルな構成につき評価が難しいため、
今回は評価の対象から外させていただきます。

色に関しては、現時点で特に気になるところはありません。

よりコンテンツが多いサイトだと配色も難しくなりますので、
練習のため、今後より豊富なコンテンツの
サイトを作ってみられるといいでしょう。



■コーディング
TOPページはAnother HTML-lintで100点となっており、
文法的に問題ないと思います。

シンプルな構成となっていますので、
こちらも次は、もっと複雑な構成のサイトに
チャレンジされるといいでしょう。


ただ、これだと全くアドバイスにならないので、
しいて2点だけあげますね。


1点目は、h2に適用しているクラス「h2-blue」です。

コンテンツ内の標準的な見出しのようですので、
#contents h2{} などの部分でCSSを適用してあげると、
全てのページのh2でその都度クラスを適用する必要がなくなり、
コードがすっきりすると思います。

できる限り、余分なクラス指定を減らすと、
見通しが良く、より美しいコードになります。


2点目は、クラスの命名についてです。
h2-blueというのは、「h2の青」と、
見た目を意味する命名となっています。

CSSはHTMLから見た目部分を切り離すためにありますので、
見た目を表すblueなどの言葉ではなく、
意味で表現した方がいいです。

なぜかというと、例えば今回の場合に、
クライアントから青ではなく赤くしてと言われた際、
h2-blueという命名が破綻してしまうためです。
(blueとあるのに赤になってしまうためです。
 全てのblueをredに直せばいいですが、
 それだとCSSのメリットが失われてしまいます)


現在、contents-rightというクラスを
適用するボックスが左側にあり、
contents-leftが右側にきているのも同様ですね。

右・左という見た目ではなく、
コンテンツ部分、メニュー部分などといった
意味で命名されるといいでしょう。


命名について1つ例を挙げます。
注意を促す文字用にクラスを定義するとして、
例えば赤の太字にするとします。

× red-bold
○ attention

例え赤色で太字にしたとしても、見た目ではなく、
attention等の意味を表す命名にします。



■その他
今回のサイトは、架空のサイトであり、
サイトのテーマや内容が存在しないため、
評価が難しいところがあります。

サイトの目的、ターゲットユーザー等をしっかり定義し、
その上で架空ではなく中身のあるサイトだと、
よりきちんと評価することが可能です。


Webデザイナーは、情報をわかりやすく
デザインで伝えるというスキルも求められますので、
そのスキルをのばすためにも、
これからは中身のあるサイトを作ってみられるといいでしょう。


以上、参考にしていただければ幸いです。
馬場誠
私も相談したい!という方はこちら

お悩み相談TOPに戻る

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。