サイトの修正をしました
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
posted by ゆみママさん 2011-12-08
馬場誠様
こんにちは。
いつもお世話になっております。
以前作ったマーケティング会社のサイトの修正がやっとできました！
http://sample1.webdesign-study.info
修正…というよりも８割くらい作りなおした感じです。
初めは純粋な赤をベースにしていましたが、今回は少し落ち着いた赤に変更しました。
色々作りなおしてみたことで、当初は単純なデザインだったのが少しはマシになったような気がします。
でも、今回の修正は、私にとってはすごく難しかったです。
リニューアルするってこんな感じなんでしょうか。
…まだまだ経験不足ですね…。頑張ります！
コーディングが上手くいかなくて、丸１日とか２日とかハマってしまったりしましたが、何とかできあがりました。
marginとかpaddingなど、基本的なことがちゃんと理解できてないところがあるようで、正確に画像表示するのにすごく時間がかかる時があるので、このあたりをもう少しちゃんと理解しないといけないかなと思います。
それに、idやclassのタグの多さ、名前の付け方もこれからの課題です。もっとスマートに綺麗にコーディングが出来るようになりたいです。
お忙しいところ恐れ入りますが、また添削をよろしくお願いいたします。
こんにちは。
いつもお世話になっております。
以前作ったマーケティング会社のサイトの修正がやっとできました！
http://sample1.webdesign-study.info
修正…というよりも８割くらい作りなおした感じです。
初めは純粋な赤をベースにしていましたが、今回は少し落ち着いた赤に変更しました。
色々作りなおしてみたことで、当初は単純なデザインだったのが少しはマシになったような気がします。
でも、今回の修正は、私にとってはすごく難しかったです。
リニューアルするってこんな感じなんでしょうか。
…まだまだ経験不足ですね…。頑張ります！
コーディングが上手くいかなくて、丸１日とか２日とかハマってしまったりしましたが、何とかできあがりました。
marginとかpaddingなど、基本的なことがちゃんと理解できてないところがあるようで、正確に画像表示するのにすごく時間がかかる時があるので、このあたりをもう少しちゃんと理解しないといけないかなと思います。
それに、idやclassのタグの多さ、名前の付け方もこれからの課題です。もっとスマートに綺麗にコーディングが出来るようになりたいです。
お忙しいところ恐れ入りますが、また添削をよろしくお願いいたします。
ゆみママさん
こんばんは、馬場です。
今回は大変お待たせしてしまい、大変申し訳ありませんm(__)m
以下、先日のお悩み相談の件、回答させていただきますね！
まず、サイトを閲覧しての第一印象として、
前回よりも細かい部分に
手間がかけられていることが伝わってきました。
1pxのラインやグラデーション、
各ページごとのメインイメージなどから、
いろいろと研究＆試行錯誤されたことがうかがえます。
一般の方が見て気づかないことでも、
これまでずっと拝見してきた私からすれば、
今回はとても大きな変化を感じます。
おそらくゆみママさんとしても、
今までよりも“デザインした！”という
感覚があるのではないでしょうか。
とのことですが、見たところ綺麗にコーディングができているように思います。
たとえ時間がかかってしまったとしても、
ここまでできればお仕事でも合格ラインだと思います。
後は経験を重ねるだけで、自然と早くなっていくことでしょう。
ですので今回は、デザインに重点をおいて
感じた点などをお話ししたいと思います。
■グラデーション
グラデーションは、
クールなサイトを作るのに強い武器にもなるのですが、
その反面、ものすごく繊細な一面があります。
基本的なコツとしては、たいていの場合、
控えめがクールに見えることが多いです。
特に白系に変化するグラデーションの場合は、
かけ方が強いと白飛びしているように見えてしまうのと、
さらには上に載るテキストが白の場合は
文字の可読性にも影響が出てくるので注意が必要です。
今回で言えば、グローバルナビゲーション部分はもう若干
控えめにした方がよく見えるかもしれませんね。
（もしくはサイドメニューのグラデーションのような、
オブジェクト全体ではないグラデーションなら白飛びっぽく見えづらいです）
とは言っても、グラデーションのかかり具合というのは
本当に微妙なものなので、ほんとうに“ほんの少し”レベルの話です。
なかなか言葉では表現できないのですが、
これからたくさん試行錯誤して、
適切なかけ具合をものにしてみてください。
■トーンジャンプ
グローバルナビゲーションの
グラデーション部分のお話しついでにおまけです。
該当部分をよく見ると、上から下に横の縞ができているのがおわかりでしょうか。
（モニタによって見え方に違いがあるかもしれませんが、
ブラウザのスクリーンショットをとって拡大すると分かりやすいと思います）
これはGIFで、繊細な階調を表現できていないことにより発生しています。
GIFは使用できる色域が少ないのである程度は仕方が無いのですが、
Fireworksの場合、「最適化パネル」→「GIF」を選択→
「（アダプティブなどになっている項目を）全ての色を割り付け」
で書き出すと、改善できる場合もあります。
もちろんその分ファイルサイズは増えますが、微々たるものなので、
PCサイトにおいては見栄えを優先しても良いケースが多いと思います。
■JPEGの圧縮率について
グローバルナビのロールオーバー時の画像のように、
文字が入ったJPEGは、圧縮しすぎると文字周りのぼやけが
目立つようになってしまいます。
（これをモスキートノイズといいます）
グローバルナビのような主要な部分は非常に目立つので、
圧縮率を下げるか、他の画像形式（GIF等）にするのもありです。
また、どうしてもJPEGを使いたければ、
Fireworksの「修正」→「圧縮率によるJPEG」を使って、
文字部分のみ画像品質を良くするという方法もあります。
（使い方は「圧縮率によるJPEG」で調べてみてください。）
■画像のサイズ指定
全体的に、わずかですが画像の文字にぼけが発生しているようです。
その理由は、HTML内の画像のサイズ指定(<img width="xx" height="xx")にて、
実サイズと異なるサイズを指定していることに起因します。
例えば、ロゴ/Topのメインイメージ/グローバルナビゲーション等ですね。
1pxでも実サイズと違う数値を指定してしまうと
せっかく奇麗に書きだした画像もぼけてしまうので、
HTML側で実サイズ以外にサイズ調整しない方が無難です。
（例外として、縦横比を正確に保ったままであれば、
状況に応じて違う数値を指定することもあります）
細かい部分ではありますが、
プロが見ると一目で気付くほど重要なのがこの部分です。
一度違いを見てみるのが一番だと思いますので、
現状をスクリーンショットにとっておき、
修正前と後で比べてみてみるといいかもしれません。
並べて見れば、違いがよくわかると思います。
■ロールオーバー時の画像
今回、ロールオーバーで画像が切り替わる部分が多く存在していますね。
通常時とロールオーバー時にどのように変化させるかというのは、
なかなか難しく、デザイナーの力量が問われる部分です。
今回の作品で具体的にどうと文章に表すのは難しいのですが、
「お問い合わせ・資料請求」のロールオーバー時に、
若干ですが不自然さを感じました。
おそらく、光や影のバランスの感じや、
（ロールオーバー時に）枠のみ若干ずれているためだと思います。
この点は、様々な優良サイトのロールオーバー時の画像をチェックして、
自然な感じを身につけていってください。
■各ページのメインイメージについて
左にイラストをおいて右にコピーというのは一般的な見せ方の一つですが、
ややデザイン的にさびしい感じがあります。
もう少し作り込みをしてみるといいでしょう。
例えば、
・背景に色をつけたり、グラデーション、テクスチャを入れる。
・大文字の見出しを入れ、コピー文字を小さくして強弱をつけてみる(※1)。
・イラストが現在小さめなので、少しダイナミックにしてみる。
（無理に枠内に納める必要はなく、自由にデザインしてもいいと思います）
(※1)実務ではコピーが決まっていることがありますが、
フリーランスが請け負うような案件は小規模案件が多いので、
こちらの判断でコピーを足すことも結構あります。
もちろんガチガチに文章を指定されている案件の場合は、
文章は足さない方がいいです。
ちなみに、上記はあくまで例であり、
どれが正しいという訳ではありません。
イラストと文字がぽんぽん、と置かれているだけの状態から、
もう一手間何かデザインするとさらに良くなる、
というような意味合いにお考えください。
実務では、一つのページを作るにも当然予算が決まっています。
限られた予算（時間）の中、平均的に予算を割り当てるよりも、
目立つ部分に多めに予算を割り当てる方が良く見えることが多いです。
メインイメージ部分は興味を引かせるために
ページ内でも目立たせたい部分なので、
少し多めにコストをかけて作られるといいと思います。
■終わりに
今回は、今まで以上に細かい部分にも触れさせていただきました。
これは、私としても非常にうれしいことなのですが、
ゆみママさんがワンランク上のステップに上がられたということだと思います。
些細なところでも複数改善していけば、
全体のクオリティがどんどんあがってきますので、
参考にしていただければ幸いです。
馬場誠
こんばんは、馬場です。
今回は大変お待たせしてしまい、大変申し訳ありませんm(__)m
以下、先日のお悩み相談の件、回答させていただきますね！
まず、サイトを閲覧しての第一印象として、
前回よりも細かい部分に
手間がかけられていることが伝わってきました。
1pxのラインやグラデーション、
各ページごとのメインイメージなどから、
いろいろと研究＆試行錯誤されたことがうかがえます。
一般の方が見て気づかないことでも、
これまでずっと拝見してきた私からすれば、
今回はとても大きな変化を感じます。
おそらくゆみママさんとしても、
今までよりも“デザインした！”という
感覚があるのではないでしょうか。
> もっとスマートに綺麗にコーディングが出来るようになりたいです。
とのことですが、見たところ綺麗にコーディングができているように思います。
たとえ時間がかかってしまったとしても、
ここまでできればお仕事でも合格ラインだと思います。
後は経験を重ねるだけで、自然と早くなっていくことでしょう。
ですので今回は、デザインに重点をおいて
感じた点などをお話ししたいと思います。
■グラデーション
グラデーションは、
クールなサイトを作るのに強い武器にもなるのですが、
その反面、ものすごく繊細な一面があります。
基本的なコツとしては、たいていの場合、
控えめがクールに見えることが多いです。
特に白系に変化するグラデーションの場合は、
かけ方が強いと白飛びしているように見えてしまうのと、
さらには上に載るテキストが白の場合は
文字の可読性にも影響が出てくるので注意が必要です。
今回で言えば、グローバルナビゲーション部分はもう若干
控えめにした方がよく見えるかもしれませんね。
（もしくはサイドメニューのグラデーションのような、
オブジェクト全体ではないグラデーションなら白飛びっぽく見えづらいです）
とは言っても、グラデーションのかかり具合というのは
本当に微妙なものなので、ほんとうに“ほんの少し”レベルの話です。
なかなか言葉では表現できないのですが、
これからたくさん試行錯誤して、
適切なかけ具合をものにしてみてください。
■トーンジャンプ
グローバルナビゲーションの
グラデーション部分のお話しついでにおまけです。
該当部分をよく見ると、上から下に横の縞ができているのがおわかりでしょうか。
（モニタによって見え方に違いがあるかもしれませんが、
ブラウザのスクリーンショットをとって拡大すると分かりやすいと思います）
これはGIFで、繊細な階調を表現できていないことにより発生しています。
GIFは使用できる色域が少ないのである程度は仕方が無いのですが、
Fireworksの場合、「最適化パネル」→「GIF」を選択→
「（アダプティブなどになっている項目を）全ての色を割り付け」
で書き出すと、改善できる場合もあります。
もちろんその分ファイルサイズは増えますが、微々たるものなので、
PCサイトにおいては見栄えを優先しても良いケースが多いと思います。
■JPEGの圧縮率について
グローバルナビのロールオーバー時の画像のように、
文字が入ったJPEGは、圧縮しすぎると文字周りのぼやけが
目立つようになってしまいます。
（これをモスキートノイズといいます）
グローバルナビのような主要な部分は非常に目立つので、
圧縮率を下げるか、他の画像形式（GIF等）にするのもありです。
また、どうしてもJPEGを使いたければ、
Fireworksの「修正」→「圧縮率によるJPEG」を使って、
文字部分のみ画像品質を良くするという方法もあります。
（使い方は「圧縮率によるJPEG」で調べてみてください。）
■画像のサイズ指定
全体的に、わずかですが画像の文字にぼけが発生しているようです。
その理由は、HTML内の画像のサイズ指定(<img width="xx" height="xx")にて、
実サイズと異なるサイズを指定していることに起因します。
例えば、ロゴ/Topのメインイメージ/グローバルナビゲーション等ですね。
1pxでも実サイズと違う数値を指定してしまうと
せっかく奇麗に書きだした画像もぼけてしまうので、
HTML側で実サイズ以外にサイズ調整しない方が無難です。
（例外として、縦横比を正確に保ったままであれば、
状況に応じて違う数値を指定することもあります）
細かい部分ではありますが、
プロが見ると一目で気付くほど重要なのがこの部分です。
一度違いを見てみるのが一番だと思いますので、
現状をスクリーンショットにとっておき、
修正前と後で比べてみてみるといいかもしれません。
並べて見れば、違いがよくわかると思います。
■ロールオーバー時の画像
今回、ロールオーバーで画像が切り替わる部分が多く存在していますね。
通常時とロールオーバー時にどのように変化させるかというのは、
なかなか難しく、デザイナーの力量が問われる部分です。
今回の作品で具体的にどうと文章に表すのは難しいのですが、
「お問い合わせ・資料請求」のロールオーバー時に、
若干ですが不自然さを感じました。
おそらく、光や影のバランスの感じや、
（ロールオーバー時に）枠のみ若干ずれているためだと思います。
この点は、様々な優良サイトのロールオーバー時の画像をチェックして、
自然な感じを身につけていってください。
■各ページのメインイメージについて
左にイラストをおいて右にコピーというのは一般的な見せ方の一つですが、
ややデザイン的にさびしい感じがあります。
もう少し作り込みをしてみるといいでしょう。
例えば、
・背景に色をつけたり、グラデーション、テクスチャを入れる。
・大文字の見出しを入れ、コピー文字を小さくして強弱をつけてみる(※1)。
・イラストが現在小さめなので、少しダイナミックにしてみる。
（無理に枠内に納める必要はなく、自由にデザインしてもいいと思います）
(※1)実務ではコピーが決まっていることがありますが、
フリーランスが請け負うような案件は小規模案件が多いので、
こちらの判断でコピーを足すことも結構あります。
もちろんガチガチに文章を指定されている案件の場合は、
文章は足さない方がいいです。
ちなみに、上記はあくまで例であり、
どれが正しいという訳ではありません。
イラストと文字がぽんぽん、と置かれているだけの状態から、
もう一手間何かデザインするとさらに良くなる、
というような意味合いにお考えください。
実務では、一つのページを作るにも当然予算が決まっています。
限られた予算（時間）の中、平均的に予算を割り当てるよりも、
目立つ部分に多めに予算を割り当てる方が良く見えることが多いです。
メインイメージ部分は興味を引かせるために
ページ内でも目立たせたい部分なので、
少し多めにコストをかけて作られるといいと思います。
■終わりに
今回は、今まで以上に細かい部分にも触れさせていただきました。
これは、私としても非常にうれしいことなのですが、
ゆみママさんがワンランク上のステップに上がられたということだと思います。
些細なところでも複数改善していけば、
全体のクオリティがどんどんあがってきますので、
参考にしていただければ幸いです。
馬場誠
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)