Webサイトの添削
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
posted by 匿名希望さん 2013-07-17
匿名希望さん
こんにちは。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
の管理人の馬場です。
大変お待たせしました。
先日お送りいただいたお悩み相談の件、
以下、返信いたしますね！
添削は、就活用とそれ以外によって
回答が変わってくるのですが、
現在は学習中だと思いますので後者として回答しますね。
■デザイン
デザインに関しては、
とてもシンプルな構成につき評価が難しいため、
今回は評価の対象から外させていただきます。
色に関しては、現時点で特に気になるところはありません。
よりコンテンツが多いサイトだと配色も難しくなりますので、
練習のため、今後より豊富なコンテンツの
サイトを作ってみられるといいでしょう。
■コーディング
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が右側にきているのも同様ですね。
右・左という見た目ではなく、
コンテンツ部分、メニュー部分などといった
意味で命名されるといいでしょう。
命名について１つ例を挙げます。
注意を促す文字用にクラスを定義するとして、
例えば赤の太字にするとします。
× red-bold
○ attention
例え赤色で太字にしたとしても、見た目ではなく、
attention等の意味を表す命名にします。
■その他
今回のサイトは、架空のサイトであり、
サイトのテーマや内容が存在しないため、
評価が難しいところがあります。
サイトの目的、ターゲットユーザー等をしっかり定義し、
その上で架空ではなく中身のあるサイトだと、
よりきちんと評価することが可能です。
Webデザイナーは、情報をわかりやすく
デザインで伝えるというスキルも求められますので、
そのスキルをのばすためにも、
これからは中身のあるサイトを作ってみられるといいでしょう。
以上、参考にしていただければ幸いです。
馬場誠
こんにちは。独学!未経験から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が右側にきているのも同様ですね。
右・左という見た目ではなく、
コンテンツ部分、メニュー部分などといった
意味で命名されるといいでしょう。
命名について１つ例を挙げます。
注意を促す文字用にクラスを定義するとして、
例えば赤の太字にするとします。
× red-bold
○ attention
例え赤色で太字にしたとしても、見た目ではなく、
attention等の意味を表す命名にします。
■その他
今回のサイトは、架空のサイトであり、
サイトのテーマや内容が存在しないため、
評価が難しいところがあります。
サイトの目的、ターゲットユーザー等をしっかり定義し、
その上で架空ではなく中身のあるサイトだと、
よりきちんと評価することが可能です。
Webデザイナーは、情報をわかりやすく
デザインで伝えるというスキルも求められますので、
そのスキルをのばすためにも、
これからは中身のあるサイトを作ってみられるといいでしょう。
以上、参考にしていただければ幸いです。
馬場誠
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)