新しいサイトができました
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
posted by ゆみママさん 2011-06-29
馬場誠様
こんばんは、ゆみママです。
いつもお世話になっております。
やっとやっと、長い道のりでしたが、新しいサイトができました！
（前から話していたお料理のサイトです。）
このサイトは、
①ターゲット：私のように、小さいお子様がいらっしゃる主婦の方
②サイトの主旨：安くて早く簡単にできるお料理を紹介する
③イメージ：題材がお料理なので、オレンジ系の暖色を使ってみました
サイトのURL：http://www.easy-cook.info/
今回は、自分でやってみようと思うデザインにしました。
特に、マスキングテープを作って使いたいと思っていたので、ところどころで使っています。
マスキングテープを使っているところには、張り紙をしてあるようなイメージにしているのですが、紙の端っこを丸める画像が難しくて何度も修正してみたのですが、やっぱり上手く出来ていません。
新しいサイトを作ると、新しいこともいろいろでてくるもので、初めて<dd>
や<position: relative>などを使って表のようにしてみたり、位置を調整したりしましたが、上手くいかなくてものすごく時間がかかりました。
今回からIE TesterとFirefoxで見え方をチェックしたのですが、初めにFirefoxでレイアウトが崩れてつまずき、IE6でとんでもなく崩れていて修正するのにホントに大変でした（汗）…でもすごく良い経験になりました。ブラウザのチェックって、すごく大切だとも思いました。
このサイトは、趣味的に作ったサイトなのですが、馬場様の目から見て改善点やデザインについてなど、アドバイスいただけましたら嬉しく思います。
よろしくお願いいたします。
こんばんは、ゆみママです。
いつもお世話になっております。
やっとやっと、長い道のりでしたが、新しいサイトができました！
（前から話していたお料理のサイトです。）
このサイトは、
①ターゲット：私のように、小さいお子様がいらっしゃる主婦の方
②サイトの主旨：安くて早く簡単にできるお料理を紹介する
③イメージ：題材がお料理なので、オレンジ系の暖色を使ってみました
サイトのURL：http://www.easy-cook.info/
今回は、自分でやってみようと思うデザインにしました。
特に、マスキングテープを作って使いたいと思っていたので、ところどころで使っています。
マスキングテープを使っているところには、張り紙をしてあるようなイメージにしているのですが、紙の端っこを丸める画像が難しくて何度も修正してみたのですが、やっぱり上手く出来ていません。
新しいサイトを作ると、新しいこともいろいろでてくるもので、初めて<dd>
や<position: relative>などを使って表のようにしてみたり、位置を調整したりしましたが、上手くいかなくてものすごく時間がかかりました。
今回からIE TesterとFirefoxで見え方をチェックしたのですが、初めにFirefoxでレイアウトが崩れてつまずき、IE6でとんでもなく崩れていて修正するのにホントに大変でした（汗）…でもすごく良い経験になりました。ブラウザのチェックって、すごく大切だとも思いました。
このサイトは、趣味的に作ったサイトなのですが、馬場様の目から見て改善点やデザインについてなど、アドバイスいただけましたら嬉しく思います。
よろしくお願いいたします。
ゆみママさん
こんにちは、馬場です。
先日のお悩み相談の件、以下返信させていただきますね！
すごくいいことだと思いますよ。
どこかで見た「これいいな」ということを
自分でもやってみるのが、デザインスキルを磨く有効な手段です。
こういうことを繰り返していくと、
デザインの引き出しがだんだん増えていくので、
よりデザインの幅が広がっていきます。
（料理と同じで、一度自分で作ってみるのが
レパートリーを増やす近道なのです）
私も紙の端っこの丸める部分はいろいろ試行錯誤しました。
右上を丸めるよりも、右下を丸める方が
影を作りやすいので難易度は低いかもしれません。
IE6は本当に厄介者で、コツをつかまないと本当に苦労します。
最近はIE6が動作対象ブラウザから外れている案件もでてきていますが、
IE6をCSSハックなどをなるべく使わずに対応させられるようになると、
かなり力が身につくと思います。
（最近安易にCSSハックをしたがる人も多いですが、
CSSハックを使わなくても解決できる場合も多いです）
さて、それではこのあたりで、
サイトについて気がついた点をいくつか挙げますね。
■サイト全体について
ユーザーがサイトに訪れたときに、
何のサイトなのかが視覚的に分かりやすくされると
さらに良くなると思います。
例えば検索からトップページにユーザーがたどり着いた際、
現状では、文字を読まなければ
料理のサイトかどうかが分かりませんよね。
お料理サイトなので、料理や食材のイメージを入れたり、
調理器具のイラストを描いたりなど工夫して、
ぱっと見てすぐに料理サイトだとわかるようにされるといいと思います。
他に、左メニューの上か下などに、
お勧めメニューなどのバナーを作っても
いい経験になるかもしれませんね。
（バナーも、実際に作らないとなかなか成長しませんので）
■トップページについて
トップページというのは、
実務でも最も予算が多くかけられる、いわば顔のページです。
したがって、他ページ以上にデザイン的に作り込むことが一般的です。
※ここで言う「作り込む」というのは、
配置するオブジェクトを時間をかけて丁寧に加工したり、
写真を加工・配置したり、イラストを描いて見栄えを良くしたりなどして、
ページ全体の品質を上げるという意味で使っています。
全てのページを作り込む必要はありませんが、
最低限トップページだけは、
ちょっと特別にデザインする癖をつけておかれるといいでしょう。
実際に作り込む練習をしておくと、
いざフリーランス活動を始めたときに必ず役立ちますので。
逆に言えば、作り込む練習をしておかないと、
実務で品質の高いページを作らなければならないときに、
どうやって品質を上げればいいかのアイデアが出てきづらいです。
■張り紙の部分について
張り紙部分はpositionを使って実現されていると思います。
これに関しては、すでにご存じかもしれませんが、
ボックスに背景画像を割りあてるという手もあります。
(例
.box {
background: url(aaa.gif) no-repeat;
height: 200px;/* 画像の縦サイズ */
width: 500px;/* 画像の横サイズ */
}
また、文字の長さが決まっている場合はいいのですが、
文字を増やした際や、閲覧者が文字サイズを大きくしたとき、
または環境によっては、意図せず文字がはみ出してしまう場合があります。
特にMacの場合、文字がWindowsより幅を取るので、
思いがけず行数が増えてしまうことがあります。
文章の長さによって本文部分が伸びるような仕組みもあるので、
場合によってはそちらを使ってみるという方法もあります。
こちらは簡単には説明できないので、記事にさせていただきました。
よろしければ参考になさってください。
▽背景画像ありのボックスの文字をはみ出させない方法
http://www.be-webdesigner.com/tips/coding/extendable_box.htm
■コードについて
せっかくなので、ざっくりとソースを拝見させていただきました。
いくつか気付いた点のみ挙げておきますね。
▽文字コード指定部分
文字コード指定部分が、正しく指定されていないようです。
<meta http-equiv="Content-Type" content="text/html;charset="utf-8" />
charset="←ここで閉じられてしまっています。
▽IMGタグの一部
一部ですが、HTMLでの画像サイズ指定が
下記のようになっているものがあります。
<img ～width:"95" height:"60"～
<img ～width="95" height="60"～ ですね。
もしかしたら、画像のサイズ指定は手打ちで入力されていますか？
Dreamweaverなら、画像を配置した後、
コードビューで画像を右クリック→サイズのリセットで
簡単にサイズ指定できますよ。
新しいバージョンでは分かりませんが、
私がメインで使っているCS3ではZがショートカットなので、
右クリック→Zキーで素早くサイズ指定できます。
余談ですが、Firefoxでソースを表示させると、
エラー部分が赤字になるので上記に気付きました。
Firefoxで表示チェックする際、
ソースも表示させると、手軽にチェックできていいかもしれません。
■URLについて
少し気になったのですが、ドメインをお取りになったのに、
～www.easy-cook.info/kitchen
と、/kitchen 以下に配置されているのは何か理由があるのでしょうか？
（何か意図があるのであればお聞き流しください）
（※編集注 現在は修正されています）
■最後に
いい感じに進めていると思います。
デザイン力や経験はまだこれからですが、
Webクリエイターとしての成長のレールには乗れていると思います。
後はこの調子でサイトを更新・運営し続け、
それと同時に新しいサイトも作り続けていけば、
少しずつ確実に成長していきますよ。
進んでいる方向は間違っていませんので、
この調子でがんばってください。
馬場誠
こんにちは、馬場です。
先日のお悩み相談の件、以下返信させていただきますね！
> 今回は、自分でやってみようと思うデザインにしました。
> 特に、マスキングテープを作って使いたいと思っていたので、ところどころで使っています。
すごくいいことだと思いますよ。
どこかで見た「これいいな」ということを
自分でもやってみるのが、デザインスキルを磨く有効な手段です。
こういうことを繰り返していくと、
デザインの引き出しがだんだん増えていくので、
よりデザインの幅が広がっていきます。
（料理と同じで、一度自分で作ってみるのが
レパートリーを増やす近道なのです）
私も紙の端っこの丸める部分はいろいろ試行錯誤しました。
右上を丸めるよりも、右下を丸める方が
影を作りやすいので難易度は低いかもしれません。
> IE6でとんでもなく崩れていて修正するのにホントに大変でした（汗）
IE6は本当に厄介者で、コツをつかまないと本当に苦労します。
最近はIE6が動作対象ブラウザから外れている案件もでてきていますが、
IE6をCSSハックなどをなるべく使わずに対応させられるようになると、
かなり力が身につくと思います。
（最近安易にCSSハックをしたがる人も多いですが、
CSSハックを使わなくても解決できる場合も多いです）
さて、それではこのあたりで、
サイトについて気がついた点をいくつか挙げますね。
■サイト全体について
ユーザーがサイトに訪れたときに、
何のサイトなのかが視覚的に分かりやすくされると
さらに良くなると思います。
例えば検索からトップページにユーザーがたどり着いた際、
現状では、文字を読まなければ
料理のサイトかどうかが分かりませんよね。
お料理サイトなので、料理や食材のイメージを入れたり、
調理器具のイラストを描いたりなど工夫して、
ぱっと見てすぐに料理サイトだとわかるようにされるといいと思います。
他に、左メニューの上か下などに、
お勧めメニューなどのバナーを作っても
いい経験になるかもしれませんね。
（バナーも、実際に作らないとなかなか成長しませんので）
■トップページについて
トップページというのは、
実務でも最も予算が多くかけられる、いわば顔のページです。
したがって、他ページ以上にデザイン的に作り込むことが一般的です。
※ここで言う「作り込む」というのは、
配置するオブジェクトを時間をかけて丁寧に加工したり、
写真を加工・配置したり、イラストを描いて見栄えを良くしたりなどして、
ページ全体の品質を上げるという意味で使っています。
全てのページを作り込む必要はありませんが、
最低限トップページだけは、
ちょっと特別にデザインする癖をつけておかれるといいでしょう。
実際に作り込む練習をしておくと、
いざフリーランス活動を始めたときに必ず役立ちますので。
逆に言えば、作り込む練習をしておかないと、
実務で品質の高いページを作らなければならないときに、
どうやって品質を上げればいいかのアイデアが出てきづらいです。
■張り紙の部分について
張り紙部分はpositionを使って実現されていると思います。
これに関しては、すでにご存じかもしれませんが、
ボックスに背景画像を割りあてるという手もあります。
(例
.box {
background: url(aaa.gif) no-repeat;
height: 200px;/* 画像の縦サイズ */
width: 500px;/* 画像の横サイズ */
}
また、文字の長さが決まっている場合はいいのですが、
文字を増やした際や、閲覧者が文字サイズを大きくしたとき、
または環境によっては、意図せず文字がはみ出してしまう場合があります。
特にMacの場合、文字がWindowsより幅を取るので、
思いがけず行数が増えてしまうことがあります。
文章の長さによって本文部分が伸びるような仕組みもあるので、
場合によってはそちらを使ってみるという方法もあります。
こちらは簡単には説明できないので、記事にさせていただきました。
よろしければ参考になさってください。
▽背景画像ありのボックスの文字をはみ出させない方法
http://www.be-webdesigner.com/tips/coding/extendable_box.htm
■コードについて
せっかくなので、ざっくりとソースを拝見させていただきました。
いくつか気付いた点のみ挙げておきますね。
▽文字コード指定部分
文字コード指定部分が、正しく指定されていないようです。
<meta http-equiv="Content-Type" content="text/html;charset="utf-8" />
charset="←ここで閉じられてしまっています。
▽IMGタグの一部
一部ですが、HTMLでの画像サイズ指定が
下記のようになっているものがあります。
<img ～width:"95" height:"60"～
<img ～width="95" height="60"～ ですね。
もしかしたら、画像のサイズ指定は手打ちで入力されていますか？
Dreamweaverなら、画像を配置した後、
コードビューで画像を右クリック→サイズのリセットで
簡単にサイズ指定できますよ。
新しいバージョンでは分かりませんが、
私がメインで使っているCS3ではZがショートカットなので、
右クリック→Zキーで素早くサイズ指定できます。
余談ですが、Firefoxでソースを表示させると、
エラー部分が赤字になるので上記に気付きました。
Firefoxで表示チェックする際、
ソースも表示させると、手軽にチェックできていいかもしれません。
■URLについて
少し気になったのですが、ドメインをお取りになったのに、
～www.easy-cook.info/kitchen
と、/kitchen 以下に配置されているのは何か理由があるのでしょうか？
（何か意図があるのであればお聞き流しください）
（※編集注 現在は修正されています）
■最後に
いい感じに進めていると思います。
デザイン力や経験はまだこれからですが、
Webクリエイターとしての成長のレールには乗れていると思います。
後はこの調子でサイトを更新・運営し続け、
それと同時に新しいサイトも作り続けていけば、
少しずつ確実に成長していきますよ。
進んでいる方向は間違っていませんので、
この調子でがんばってください。
馬場誠
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)