Webサイトの添削をお願い致します
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
posted by ばーなるさん 2014-09-26
以前一度、ワイヤーフレームについて質問させて頂きました。その節はどうもありがとうございました。
HTML, CSSを独学で勉強しており、練習サイトを作るにあたってクライアントがいない為、夫にクライアントになってもらって、初めてサイトを作ってみました。
ホテルのサイトです。レスポンシブデザインも加えてみました。
widthやfloatの部分があやふやなのと、JavaScript等、まだ学習しておりませんので、ちゃんと機能していない部分がありますが、評価をお願いできますでしょうか？
（馬場注：現在は公開終了されています）
ドイツ語なのでページの内容等、分かりにくい所があるかもしれませんが、どうぞ宜しくお願い致します。
HTML, CSSを独学で勉強しており、練習サイトを作るにあたってクライアントがいない為、夫にクライアントになってもらって、初めてサイトを作ってみました。
ホテルのサイトです。レスポンシブデザインも加えてみました。
widthやfloatの部分があやふやなのと、JavaScript等、まだ学習しておりませんので、ちゃんと機能していない部分がありますが、評価をお願いできますでしょうか？
（馬場注：現在は公開終了されています）
ドイツ語なのでページの内容等、分かりにくい所があるかもしれませんが、どうぞ宜しくお願い致します。
ばーなるさん
こんにちは。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
の管理人の馬場です。
仕事が立て込んでおりまして、ご返信が遅くなり大変恐縮です。
以下、先日のお悩み相談についてご返信しますね。
まず、サイトを一通り拝見しました。
評価をご希望と言うことで、
個人的な感想を書かせていただきますね！
■デザイン
▽トップページ-メイン画像
トップのメイン画像は、デザインにおいて最も重要な要素ですので、
一般的には何らかの加工が伴うことがほとんどです。
現在は、画像が１枚ぽんと置いてあるだけなので、
ちょっと寂しい感じがします。
例えば文字（キャッチコピー等）を載せる等、
もうひと工夫表現できるといいですね。
▽トップページ-容量
Topページの容量が、全部で3.7MBあるようです。
こちらの環境（光）では少しもっさりする程度ですが、
少し速度が落ちる環境（スマホ含む）ではやや重くなる可能性があります。
その他ページも含め、サイズを絞れるところは、
できるだけ絞るように検討されると良いと思います。
▽その他共通
写真画像が長方形で配置されている以外には、
画像がわずかしか使われていないようです。
Webクリエイターとしてのデザインの腕の見せ所となるのは、
PhotoshopやIllustrator等で作る画像部分です。
現状ではいささかシンプルすぎるため、
それらのソフトを用いてデザイン要素を追加できないか、
検討されると良いでしょう。
この部分が、今後のばーなるさんの成長のために、
一番力を入れた方が良い部分と思います。
■HTML/CSSコーディング
▽HTML
おおむねきちんとコーディングできているようです。
widthやfloatの部分があやふや……ということですが、
こちらの環境では、特に問題無く閲覧できました。
強いて上げるのであれば、
「Zimmer」のページや「Buchung」の部分等、
tableを別に置き換えることが出来ないか考えてみるのも良いと思います。
（Zimmerの中身は、brで改行するよりも
リストを使う方が適切かもしれませんね）
▽CSS
HTMLに埋め込まされているCSSは、
基本的に外部CSSにしましょう。
HTML内に埋め込まれていると、
メンテナンス性が良くないことと、
容量と文字が増えるため、あまり好ましくないからです。
▽その他
画像でデザインをしない部分であっても、
HTML/CSSでデザインできることもあります。
例えば、文字色・背景色・ボーダーを使用することでも、
ある程度見栄えを変えることができます。
やり過ぎはよくないのですが、
現在はシンプルなので、検討してみるのも良いでしょう。
ここはもっとデザインできるかも、
というところを探してみてください。
▽その他２
小さな画像クリックで、
大きな画像を表示できるのもよいかもしれませんね。
難しいJavaScriptを学ばなくても、
jQueryなどのライブラリを使えば比較的簡単に実現できますので、
チェックしてみられると良いと思います。
以上になります。
全体の印象としては、
デザイン力がさらについてくると、
よりクオリティが上がるように思います。
少しでも参考になることがあれば幸いです。
馬場誠
こんにちは。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
の管理人の馬場です。
仕事が立て込んでおりまして、ご返信が遅くなり大変恐縮です。
以下、先日のお悩み相談についてご返信しますね。
まず、サイトを一通り拝見しました。
評価をご希望と言うことで、
個人的な感想を書かせていただきますね！
■デザイン
▽トップページ-メイン画像
トップのメイン画像は、デザインにおいて最も重要な要素ですので、
一般的には何らかの加工が伴うことがほとんどです。
現在は、画像が１枚ぽんと置いてあるだけなので、
ちょっと寂しい感じがします。
例えば文字（キャッチコピー等）を載せる等、
もうひと工夫表現できるといいですね。
▽トップページ-容量
Topページの容量が、全部で3.7MBあるようです。
こちらの環境（光）では少しもっさりする程度ですが、
少し速度が落ちる環境（スマホ含む）ではやや重くなる可能性があります。
その他ページも含め、サイズを絞れるところは、
できるだけ絞るように検討されると良いと思います。
▽その他共通
写真画像が長方形で配置されている以外には、
画像がわずかしか使われていないようです。
Webクリエイターとしてのデザインの腕の見せ所となるのは、
PhotoshopやIllustrator等で作る画像部分です。
現状ではいささかシンプルすぎるため、
それらのソフトを用いてデザイン要素を追加できないか、
検討されると良いでしょう。
この部分が、今後のばーなるさんの成長のために、
一番力を入れた方が良い部分と思います。
■HTML/CSSコーディング
▽HTML
おおむねきちんとコーディングできているようです。
widthやfloatの部分があやふや……ということですが、
こちらの環境では、特に問題無く閲覧できました。
強いて上げるのであれば、
「Zimmer」のページや「Buchung」の部分等、
tableを別に置き換えることが出来ないか考えてみるのも良いと思います。
（Zimmerの中身は、brで改行するよりも
リストを使う方が適切かもしれませんね）
▽CSS
HTMLに埋め込まされているCSSは、
基本的に外部CSSにしましょう。
HTML内に埋め込まれていると、
メンテナンス性が良くないことと、
容量と文字が増えるため、あまり好ましくないからです。
▽その他
画像でデザインをしない部分であっても、
HTML/CSSでデザインできることもあります。
例えば、文字色・背景色・ボーダーを使用することでも、
ある程度見栄えを変えることができます。
やり過ぎはよくないのですが、
現在はシンプルなので、検討してみるのも良いでしょう。
ここはもっとデザインできるかも、
というところを探してみてください。
▽その他２
小さな画像クリックで、
大きな画像を表示できるのもよいかもしれませんね。
難しいJavaScriptを学ばなくても、
jQueryなどのライブラリを使えば比較的簡単に実現できますので、
チェックしてみられると良いと思います。
以上になります。
全体の印象としては、
デザイン力がさらについてくると、
よりクオリティが上がるように思います。
少しでも参考になることがあれば幸いです。
馬場誠
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)