就職について
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
posted by yuiciiiさん 2013-10-11
馬場様
はじめまして、yuiciiiともうします。
わたしは、在宅でホームページ作成の仕事を目指していて、独学でhtml5、javascript、phpの勉強中です。
下記のサイトを作成いたしました。
http://webx.thick.jp/01/index.html
(架空のメンタルクリニック)
デザイン面、コードの書き方など良くない点を教えてください。
プロになるためには、技術面で何が足りないかは自分でも分かっているつもりですが、プロの視点からのご意見をお聞かせください。
よろしくお願いいたします。
はじめまして、yuiciiiともうします。
わたしは、在宅でホームページ作成の仕事を目指していて、独学でhtml5、javascript、phpの勉強中です。
下記のサイトを作成いたしました。
http://webx.thick.jp/01/index.html
(架空のメンタルクリニック)
デザイン面、コードの書き方など良くない点を教えてください。
プロになるためには、技術面で何が足りないかは自分でも分かっているつもりですが、プロの視点からのご意見をお聞かせください。
よろしくお願いいたします。
yuiciiiさん
はじめまして。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
というサイトの管理人の馬場と申します。
仕事が立て込んでおり、大変お待たせしました。
先日お送りいただいたお悩み相談の件、
以下、返信いたしますね！
サイト、拝見しました。
以下、私なりに感じた点を挙げてみたいと思います。
■デザイン
▽Topページ
トップページのファーストビュー（最初に見える部分）
は、そのサイトの顔とも言える部分です。
そのため、トップページはほとんどのケースで、
他ページの何倍もコスト（＝制作時間）がかけられて作られます。
現在はとてもシンプルになっており、
他ページとさして変わらないページになっていますので、
メインビジュアルを配置するなど一手間加え、
あきらかにここがトップページと分かるようデザイン強化されるといいでしょう。
▽テクスチャ
現状は、ほぼ全てのオブジェクトの塗りにテクスチャが適用されており、
しかもその種類が、縦線・横線・ドットなど複数あるため、
少しうるさくなっているようです。
テクスチャに限らずエフェクトなどにも言えることですが、
それらはさりげなく使う方が、
断然プロっぽく見えます。
現状ですと、かなり大胆にテクスチャ部分を
減らされるとより良くなると思います。
▽カラー
背景、ヘッダー、グローバルナビゲーション、
本文背景、フッターと、それぞれ複数の色が使われているので、
色がぼやけている印象です。
サイト制作の際は、まずはテーマカラーを１つ決めます。
その色を中心に他の色を決めるのですが、
あまり多くの色を使いすぎないように気をつけてみてください。
そして目立たせたいところにアクセントカラーを
入れるといいでしょう。
ちなみにアクセントカラーは、
テーマカラーの正反対の色（補色）にするのが定石です。
■コーディング
コーディングについては、
特別気になるところはありませんでした。
現在はシンプルなレイアウトなので、
次回は複雑なものにチャレンジされると、
より勉強になると思います。
前述の通り、特別気になるところはありませんでしたが、
少し細かいところを２点ほど挙げますね。
▽alt, width, height
imgタグのalt, width, heightが
指定されていないところが多いようです。
テストサイトだからかもしれませんが、
実際のサイトでは、これらは必須となります。
特に見出しタグ（hx）では、
altが無いと、SEO（検索エンジン対策）的、
アクセシビリティ的（音声読み上げソフトを使っている方など）
にもよくありませんので、より重要度が高いです。
▽h1
全ページ、ロゴの画像にh1がかかっているようです。
h1はそのページのタイトル的な意味合いがあり、
SEO的にも重要なタグとされています。
できれば画像ではなく、各ページの主題となる
テキストを指定する方がよいと思います。
以上になります。
学習の参考にしていただければ幸いです。
馬場誠
はじめまして。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
というサイトの管理人の馬場と申します。
仕事が立て込んでおり、大変お待たせしました。
先日お送りいただいたお悩み相談の件、
以下、返信いたしますね！
> プロになるためには、技術面で何が足りないかは自分でも分かっているつもりですが、プロの視点からのご意見をお聞かせください。
サイト、拝見しました。
以下、私なりに感じた点を挙げてみたいと思います。
■デザイン
▽Topページ
トップページのファーストビュー（最初に見える部分）
は、そのサイトの顔とも言える部分です。
そのため、トップページはほとんどのケースで、
他ページの何倍もコスト（＝制作時間）がかけられて作られます。
現在はとてもシンプルになっており、
他ページとさして変わらないページになっていますので、
メインビジュアルを配置するなど一手間加え、
あきらかにここがトップページと分かるようデザイン強化されるといいでしょう。
▽テクスチャ
現状は、ほぼ全てのオブジェクトの塗りにテクスチャが適用されており、
しかもその種類が、縦線・横線・ドットなど複数あるため、
少しうるさくなっているようです。
テクスチャに限らずエフェクトなどにも言えることですが、
それらはさりげなく使う方が、
断然プロっぽく見えます。
現状ですと、かなり大胆にテクスチャ部分を
減らされるとより良くなると思います。
▽カラー
背景、ヘッダー、グローバルナビゲーション、
本文背景、フッターと、それぞれ複数の色が使われているので、
色がぼやけている印象です。
サイト制作の際は、まずはテーマカラーを１つ決めます。
その色を中心に他の色を決めるのですが、
あまり多くの色を使いすぎないように気をつけてみてください。
そして目立たせたいところにアクセントカラーを
入れるといいでしょう。
ちなみにアクセントカラーは、
テーマカラーの正反対の色（補色）にするのが定石です。
■コーディング
コーディングについては、
特別気になるところはありませんでした。
現在はシンプルなレイアウトなので、
次回は複雑なものにチャレンジされると、
より勉強になると思います。
前述の通り、特別気になるところはありませんでしたが、
少し細かいところを２点ほど挙げますね。
▽alt, width, height
imgタグのalt, width, heightが
指定されていないところが多いようです。
テストサイトだからかもしれませんが、
実際のサイトでは、これらは必須となります。
特に見出しタグ（hx）では、
altが無いと、SEO（検索エンジン対策）的、
アクセシビリティ的（音声読み上げソフトを使っている方など）
にもよくありませんので、より重要度が高いです。
▽h1
全ページ、ロゴの画像にh1がかかっているようです。
h1はそのページのタイトル的な意味合いがあり、
SEO的にも重要なタグとされています。
できれば画像ではなく、各ページの主題となる
テキストを指定する方がよいと思います。
以上になります。
学習の参考にしていただければ幸いです。
馬場誠
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)