サイト、完成しました！
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
posted by ゆみママさん 2011-10-03
馬場誠様
こんばんは、ゆみママです。
いつもお世話になっております。
やっとサイトが完成しました。
今回は、ＷＥＢデザイナー辞典というサイトに掲載されているホームページ制作課題で、マーケティング会社のリニューアルに挑戦してみました。
今回のイメージは、活動的な赤をメインに使っています。
シンプルに作成しました。
会社のサイト作りは初めてだったので、どんな感じで作ればいいのかよくわかりませんでしたが、いろいろな会社のサイトを見て、自分なりに作ってみました。
ＵＲＬ： http://sample1.webdesign-study.info
今回から作成したサイトは、自分の営業用のサイトに載せたいと考えています。（営業用のサイトは年が明けてから制作にかかる予定です。）
このサイトで、改善点や技術面などアドバイスいただけましたら嬉しく思います。
よろしくお願いいたします。
こんばんは、ゆみママです。
いつもお世話になっております。
やっとサイトが完成しました。
今回は、ＷＥＢデザイナー辞典というサイトに掲載されているホームページ制作課題で、マーケティング会社のリニューアルに挑戦してみました。
今回のイメージは、活動的な赤をメインに使っています。
シンプルに作成しました。
会社のサイト作りは初めてだったので、どんな感じで作ればいいのかよくわかりませんでしたが、いろいろな会社のサイトを見て、自分なりに作ってみました。
ＵＲＬ： http://sample1.webdesign-study.info
今回から作成したサイトは、自分の営業用のサイトに載せたいと考えています。（営業用のサイトは年が明けてから制作にかかる予定です。）
このサイトで、改善点や技術面などアドバイスいただけましたら嬉しく思います。
よろしくお願いいたします。
(注：現在の対象サイトの内容は変更されています)
ゆみママさん
こんばんは、馬場です。
新サイト、制作されたんですね！
じっくりと拝見させていただきましたので、
感じたことなどをお話しさせていただきます。
■デザイン
はじめての会社サイトということで、
なかなか難しかったでしょうね。
率直な感想としては、
後述するコーディングはすでにかなり力をつけていますので、
デザインの方が今後の課題だと思います。
いくつかのポイントを挙げますので、
次回のサイト制作の際に活かしてみてください。
▽1.文字情報の視覚化について
Topページ以外は、文章主体のページ構成になっていると思います。
かけられる時間の都合もあると思いますが、
Top以外はほとんど文字なので、ややさびしい感があります。
「WEBショップ支援」のページで、
がんばって文字をイメージ（棒グラフのイメージ）にされていますが、
このように、文字を視覚化させるというのは非常に大事なことです。
文字に応じたイラストを描いたり、
適切な写真画像を配置したりできるのは一つのスキルですので、
視覚化できそうなものがあれば、積極的に作る練習をしてみてください。
視覚化がうまくなってくると、
少ない文章でも、見栄えの良いサイトを作りやすくなってきます。
実務では、文章のみで、他の素材がほとんどもらえないこともありますが、
視覚化の練習をしておけば、そういった際にも困らなくなるでしょう。
▽2.写真画像について
Topページにて写真画像を利用されていますが、
そのほとんどが少しギザギザしているように見えます。
もし元画像がギザギザしているのであれば仕方がありませんが、
そうでない限りは、きれいに見せるように工夫してみてください。
一般的には、縦横比を変えずに加工すれば、
大抵きれいに表示できると思います。
また、写真画像の上に文字を載せる際は、
読みにくくならないように、特に気をつけてみてください。
現状では、まだちょっと読みにくさがあるように感じます。
▽3.矢印オブジェクトについて
大きめの三角の矢印オブジェクトを多用されていますが、
これが垢抜けない雰囲気を出してしまっているように感じます。
矢印を全体に小さくするか、もしくはパスを多少いじって
縦幅or横幅のどちらかを少し狭める等、
多少変形した方が見栄えが良くなると思います。
また、ものすごく小さな事（しかし重要な事）ではありますが、
灰色の矢印オブジェクトの左端に、
1pxのぼけが入っていることは気付かれましたでしょうか。
（拡大すると分かると思います）
これはFireworksの性質なのですが、拡大縮小したり、
パスを修正したりすると、微妙にぼけてしまうことがあります。
ここに限ったことではありませんが、
シャープに見せたい場合は、そのオブジェクトを選択し、
プロパティパネルから「幅」の値を一度変更＆確定し、
その後でまた「幅」を元の値に戻すことでシャープになります。
1pxの影響力が大きいWebならではですが、
知っておくと非常に有用ですよ。
▽4.デザインの引き出し・作り込みについて
これが、デザインにおいての今後の一番の課題であり、
同時に本メール内で一番お伝えしたいことです。
（なので、ここはちょっと長いです）
それは、以前にもお話ししたかもしれませんが、
デザインの引き出しを増やすことについてです。
同じオブジェクトでも、デザインの引き出しを持っている人は、
より美しく作り込んでデザインをすることができます。
例えばボタンを例に挙げましょう。
矩形ツールで角丸の四角をべた塗りで描き、ドロップシャドウをかけ、
その上に文字を載せるるだけでも、
それなりにボタンっぽくなりますよね。
（資料請求のボタンに近いものになると思います）
それはそれでシンプルなので、適している場合もあります。
しかし、このように簡単・シンプルな加工のパーツ“のみ”で
構成されているサイトというのは、
単調に見えるため、なかなかプロっぽく見えません。
デザインをよく見せるには、適切な箇所に、
適切なデザイン手法でオブジェクトに手をかけること、
つまり作り込むことが重要です。
引き続きボタンで例を挙げれば、
デザイン手法には以下のようなものがあります。
・ベベルをかける。
・グロー（外側・内側）をかける。
・Photoshopライブエフェクトをかける。
・テクスチャを加える。
・グラデーションをかける。
・オブジェクトを複製して、ブレンドモードや透明度を変えて重ねてみる。
・反転コピーして下部に配置し、映り込みを表現してみる。
・ボタンの内側のフチに1pxのラインを引いてみる。
・ボタン上にパスを書いて、上から光が当たっているように見せる。
・ボタン上の文字に、ボタンより少し濃い色のドロップシャドウをかけて読みやすくする。
……etc
上記はあくまで一例であり、これ以外にもたくさんのデザイン手法が存在します。
これらを大抵は二つ以上複合して、オブジェクトを作り込んでいくというわけです。
ここではボタンを例に挙げていますが、
それ以外のオブジェクトに関しても同様で、
写真や文字など、オブジェクトごとに様々なデザイン手法があります。
もちろん、全部が全部凝ってしまうと時間がかかりすぎますし、
何よりうるさすぎるデザインになってしまいますから、
適材適所で作り込むのがプロの技、というようにお考えください。
こういったデザインの手法は、
いきなり「やってみてください」と言われても、
引き出しがないとできないものです。
デザインの引き出しを作るためには、
良いサイトの良いオブジェクトを真似してみたり、
どうやっているのかを分析してみたりするのが大事です。
これに関しては今後少しずつ力を身につけていってください。
これらが上手くなれば、きっと全体的なデザインの印象も
だんだんと引き上げられてくるでしょう。
■コーディング
良くできていますね！
コーディング速度さえ問題がなければ、
今すぐフリーランス活動を開始しても
大丈夫なレベルになってきていると思います。
それを前提とした上で、あえてさらに良くなるように
アドバイスをするとすれば、以下のことです。
▽1.同じ指定の繰り返しについて
右メニュー内のサービス一覧にて下記のようなCSSがあります。
p.service1 {background-image: url(image/bullet.gif);
background-repeat: no-repeat;
～中略}
p.service2 {background-image: url(image/bullet.gif);
background-repeat: no-repeat;
～中略}
p.service3 {background-image: url(image/bullet.gif);
background-repeat: no-repeat;
～中略}
この場合、変更が生じた際には、
全てのCSSを変更しなければならなくなります。
CSSやプログラムの世界では、
同じ指定やコードの繰り返しは、
手間が増えたりミスのもとになるので、避けるのが定石です。
この場合一つずつ指定するのではなく、
この部分の上位である#side_service p{}自体に、
背景をはじめとする共通のCSSを指定されるといいでしょう。
そして、p.service1, p.service2, p.service3には、
個別に指定したい部分のみ、CSSを記述するというわけです。
※ただ、そもそもこの部分はpを外枠に使うという
ややトリッキーな実装なので、
divなどで囲ってそこにborderを割り当てた方が
運用しやすいかもしれません。
（例 ※これが正解というわけではなく、あくまで実装の例です。
<div id="side_service">
<h2>サービス一覧</h2>
<div class="box"><!-- ←ここにborder指定＆paddingを指定しても可 -->
<ul>
<li><a href="webshop.html">WEBショップ支援</a></li>
<li><a href="accessup.html">アクセスアップ</a></li>
<li><a href="marketing.html">マーケティング分析</a></li>
</ul>
</div>
</div>
▽2.class指定を減らすことについて
画面下のナビゲーション部分です。
<ul id="menu2">
<li class="menuline"><a href="index.html">TOPページ</a></li>
<li class="menuline"><a href="webshop.html">WEBショップ支援</a></li>
<li class="menuline"><a href="accessup.html">アクセスアップ</a></li>
<li class="menuline"><a href="marketing.html">マーケティング分析</a></li>
<li class="menuline"><a href="company.html">会社概要</a></li>
<li style="padding-left: 10px"><a href="contact.html">お問合せ</a></li>
</ul>
区切り線を表示するために、class="menuline"を指定していると思いますが、
HTML内でのクラス指定はできるだけ少なくした方がソースがスッキリします。
#menu2 li{}自体に、あらかじめボーダーをつけてしまえば、
下記のようにスッキリできます。
<ul id="menu2">
<li><a href="index.html">TOPページ</a></li>
<li><a href="webshop.html">WEBショップ支援</a></li>
<li><a href="accessup.html">アクセスアップ</a></li>
<li><a href="marketing.html">マーケティング分析</a></li>
<li><a href="company.html">会社概要</a></li>
<li style="padding-left: 10px;border: none;"><a href="contact.html">お問合せ</a></li>
</ul>
※1.最後のスタイルは、外部CSSに記述するとベターです。
※2.余談ですが、menu2, menu3のような名前ではなく、
実際の意味を持たせた方が、後から見て分かりやすいです。
（実務では数年後に見直す事もありますので、分かりやすい方が後で楽です）
上記に限らず、できる限り指定を減らすようにしてみてください。
▽3.tableについて
画面下の「お問合せ・資料請求」ですが、
特に表でない部分は、tableではなく、他のタグを使うといいと思います。
以上になります。
全体的に見ると、やはりコーディングがかなり伸びましたね！
ですのでこれから伸ばしたいのは、デザインの方だと言えるでしょう。
デザインは一朝一夕にはいかない（私もデザインは苦労しました）ので、
日々の実践を重ねることが大事です。
これから少しずつ着実にスキルアップしていってください。
馬場誠
ゆみママさん
こんばんは、馬場です。
> このサイトで、改善点や技術面などアドバイスいただけましたら嬉しく思います。
新サイト、制作されたんですね！
じっくりと拝見させていただきましたので、
感じたことなどをお話しさせていただきます。
■デザイン
はじめての会社サイトということで、
なかなか難しかったでしょうね。
率直な感想としては、
後述するコーディングはすでにかなり力をつけていますので、
デザインの方が今後の課題だと思います。
いくつかのポイントを挙げますので、
次回のサイト制作の際に活かしてみてください。
▽1.文字情報の視覚化について
Topページ以外は、文章主体のページ構成になっていると思います。
かけられる時間の都合もあると思いますが、
Top以外はほとんど文字なので、ややさびしい感があります。
「WEBショップ支援」のページで、
がんばって文字をイメージ（棒グラフのイメージ）にされていますが、
このように、文字を視覚化させるというのは非常に大事なことです。
文字に応じたイラストを描いたり、
適切な写真画像を配置したりできるのは一つのスキルですので、
視覚化できそうなものがあれば、積極的に作る練習をしてみてください。
視覚化がうまくなってくると、
少ない文章でも、見栄えの良いサイトを作りやすくなってきます。
実務では、文章のみで、他の素材がほとんどもらえないこともありますが、
視覚化の練習をしておけば、そういった際にも困らなくなるでしょう。
▽2.写真画像について
Topページにて写真画像を利用されていますが、
そのほとんどが少しギザギザしているように見えます。
もし元画像がギザギザしているのであれば仕方がありませんが、
そうでない限りは、きれいに見せるように工夫してみてください。
一般的には、縦横比を変えずに加工すれば、
大抵きれいに表示できると思います。
また、写真画像の上に文字を載せる際は、
読みにくくならないように、特に気をつけてみてください。
現状では、まだちょっと読みにくさがあるように感じます。
▽3.矢印オブジェクトについて
大きめの三角の矢印オブジェクトを多用されていますが、
これが垢抜けない雰囲気を出してしまっているように感じます。
矢印を全体に小さくするか、もしくはパスを多少いじって
縦幅or横幅のどちらかを少し狭める等、
多少変形した方が見栄えが良くなると思います。
また、ものすごく小さな事（しかし重要な事）ではありますが、
灰色の矢印オブジェクトの左端に、
1pxのぼけが入っていることは気付かれましたでしょうか。
（拡大すると分かると思います）
これはFireworksの性質なのですが、拡大縮小したり、
パスを修正したりすると、微妙にぼけてしまうことがあります。
ここに限ったことではありませんが、
シャープに見せたい場合は、そのオブジェクトを選択し、
プロパティパネルから「幅」の値を一度変更＆確定し、
その後でまた「幅」を元の値に戻すことでシャープになります。
1pxの影響力が大きいWebならではですが、
知っておくと非常に有用ですよ。
▽4.デザインの引き出し・作り込みについて
これが、デザインにおいての今後の一番の課題であり、
同時に本メール内で一番お伝えしたいことです。
（なので、ここはちょっと長いです）
それは、以前にもお話ししたかもしれませんが、
デザインの引き出しを増やすことについてです。
同じオブジェクトでも、デザインの引き出しを持っている人は、
より美しく作り込んでデザインをすることができます。
例えばボタンを例に挙げましょう。
矩形ツールで角丸の四角をべた塗りで描き、ドロップシャドウをかけ、
その上に文字を載せるるだけでも、
それなりにボタンっぽくなりますよね。
（資料請求のボタンに近いものになると思います）
それはそれでシンプルなので、適している場合もあります。
しかし、このように簡単・シンプルな加工のパーツ“のみ”で
構成されているサイトというのは、
単調に見えるため、なかなかプロっぽく見えません。
デザインをよく見せるには、適切な箇所に、
適切なデザイン手法でオブジェクトに手をかけること、
つまり作り込むことが重要です。
引き続きボタンで例を挙げれば、
デザイン手法には以下のようなものがあります。
・ベベルをかける。
・グロー（外側・内側）をかける。
・Photoshopライブエフェクトをかける。
・テクスチャを加える。
・グラデーションをかける。
・オブジェクトを複製して、ブレンドモードや透明度を変えて重ねてみる。
・反転コピーして下部に配置し、映り込みを表現してみる。
・ボタンの内側のフチに1pxのラインを引いてみる。
・ボタン上にパスを書いて、上から光が当たっているように見せる。
・ボタン上の文字に、ボタンより少し濃い色のドロップシャドウをかけて読みやすくする。
……etc
上記はあくまで一例であり、これ以外にもたくさんのデザイン手法が存在します。
これらを大抵は二つ以上複合して、オブジェクトを作り込んでいくというわけです。
ここではボタンを例に挙げていますが、
それ以外のオブジェクトに関しても同様で、
写真や文字など、オブジェクトごとに様々なデザイン手法があります。
もちろん、全部が全部凝ってしまうと時間がかかりすぎますし、
何よりうるさすぎるデザインになってしまいますから、
適材適所で作り込むのがプロの技、というようにお考えください。
こういったデザインの手法は、
いきなり「やってみてください」と言われても、
引き出しがないとできないものです。
デザインの引き出しを作るためには、
良いサイトの良いオブジェクトを真似してみたり、
どうやっているのかを分析してみたりするのが大事です。
これに関しては今後少しずつ力を身につけていってください。
これらが上手くなれば、きっと全体的なデザインの印象も
だんだんと引き上げられてくるでしょう。
■コーディング
良くできていますね！
コーディング速度さえ問題がなければ、
今すぐフリーランス活動を開始しても
大丈夫なレベルになってきていると思います。
それを前提とした上で、あえてさらに良くなるように
アドバイスをするとすれば、以下のことです。
▽1.同じ指定の繰り返しについて
右メニュー内のサービス一覧にて下記のようなCSSがあります。
p.service1 {background-image: url(image/bullet.gif);
background-repeat: no-repeat;
～中略}
p.service2 {background-image: url(image/bullet.gif);
background-repeat: no-repeat;
～中略}
p.service3 {background-image: url(image/bullet.gif);
background-repeat: no-repeat;
～中略}
この場合、変更が生じた際には、
全てのCSSを変更しなければならなくなります。
CSSやプログラムの世界では、
同じ指定やコードの繰り返しは、
手間が増えたりミスのもとになるので、避けるのが定石です。
この場合一つずつ指定するのではなく、
この部分の上位である#side_service p{}自体に、
背景をはじめとする共通のCSSを指定されるといいでしょう。
そして、p.service1, p.service2, p.service3には、
個別に指定したい部分のみ、CSSを記述するというわけです。
※ただ、そもそもこの部分はpを外枠に使うという
ややトリッキーな実装なので、
divなどで囲ってそこにborderを割り当てた方が
運用しやすいかもしれません。
（例 ※これが正解というわけではなく、あくまで実装の例です。
<div id="side_service">
<h2>サービス一覧</h2>
<div class="box"><!-- ←ここにborder指定＆paddingを指定しても可 -->
<ul>
<li><a href="webshop.html">WEBショップ支援</a></li>
<li><a href="accessup.html">アクセスアップ</a></li>
<li><a href="marketing.html">マーケティング分析</a></li>
</ul>
</div>
</div>
▽2.class指定を減らすことについて
画面下のナビゲーション部分です。
<ul id="menu2">
<li class="menuline"><a href="index.html">TOPページ</a></li>
<li class="menuline"><a href="webshop.html">WEBショップ支援</a></li>
<li class="menuline"><a href="accessup.html">アクセスアップ</a></li>
<li class="menuline"><a href="marketing.html">マーケティング分析</a></li>
<li class="menuline"><a href="company.html">会社概要</a></li>
<li style="padding-left: 10px"><a href="contact.html">お問合せ</a></li>
</ul>
区切り線を表示するために、class="menuline"を指定していると思いますが、
HTML内でのクラス指定はできるだけ少なくした方がソースがスッキリします。
#menu2 li{}自体に、あらかじめボーダーをつけてしまえば、
下記のようにスッキリできます。
<ul id="menu2">
<li><a href="index.html">TOPページ</a></li>
<li><a href="webshop.html">WEBショップ支援</a></li>
<li><a href="accessup.html">アクセスアップ</a></li>
<li><a href="marketing.html">マーケティング分析</a></li>
<li><a href="company.html">会社概要</a></li>
<li style="padding-left: 10px;border: none;"><a href="contact.html">お問合せ</a></li>
</ul>
※1.最後のスタイルは、外部CSSに記述するとベターです。
※2.余談ですが、menu2, menu3のような名前ではなく、
実際の意味を持たせた方が、後から見て分かりやすいです。
（実務では数年後に見直す事もありますので、分かりやすい方が後で楽です）
上記に限らず、できる限り指定を減らすようにしてみてください。
▽3.tableについて
画面下の「お問合せ・資料請求」ですが、
特に表でない部分は、tableではなく、他のタグを使うといいと思います。
以上になります。
全体的に見ると、やはりコーディングがかなり伸びましたね！
ですのでこれから伸ばしたいのは、デザインの方だと言えるでしょう。
デザインは一朝一夕にはいかない（私もデザインは苦労しました）ので、
日々の実践を重ねることが大事です。
これから少しずつ着実にスキルアップしていってください。
馬場誠
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)