Fledgling

美容室サイト

サンプルサイト「Hair make You-Sou」

ホームページ課題配布：
WEBデザイナー辞典 > 課題配布ページ
課題内容：マーケティング会社のリニューアル。赤い活動的なイメージを希望。サービスを目立たせたい。

サイト作成概要

• XHTML1.0 Strict＋CSSでのコーディング。xml宣言はIE6のCSSバグ回避のために省略しました。
• 規定のページ：トップページ、ビューティウッソンとは、アクセス、メニュー、カリスマスタッフ、お問い合わせ
• すぐにデザインに取り掛かるのではなく、仮想クライアントの設定・ターゲットユーザの設定など、プランニングから始めました。その結果、ほとんど原型をとどめていません。
• 制作期間：2007.06.22～2007.07.13

サイト設定

このサイトの設定を以下のように決めました。

サイトの目標

実店舗の広告の一つとなるように。新規の顧客の獲得。

ターゲットユーザ

高校生～20代女性をメイン。

クライアントのテーマ

普段のカットにも、特別な日の為のおしゃれなセットも出来る、オールマイティな美容院。

クライアントからのデザイン要望

スタイリッシュでおしゃれなイメージ。サイトは名刺代わりに使う程度、イメージ戦略で美容院のブランド力をアップ。

サイトデザインプラン

カラー

キーワードは「高校生～20代女性、スタイリッシュ、オールマイティ」
具体的な色の指定は無いため、キーワードから考える。「高校生～20代女性」という若い女性がターゲットだということから、高級感のある色は避けるようにする。また、「スタイリッシュ、オールマイティ」というキーワードから、彩度を落とした色をベースカラーとすると決める。

ここで、他の美容室のサイトを40件無作為に抽出し、そこで使われている色を調べた。
最も多かったのは、ベージュや茶の系統の色で、それとの組み合わせとして、橙や濃い緑が使われることが多かった。また、白と青の組み合わせも多かった。

ベージュや茶色が最も多く、この色をあえてはずすことで、他のサイトとの差別化が図れると思った。ベースカラーとして彩度の低い色と決めていたが、ここで無彩色であるグレーを使うことを決める。

サブカラー、アクセントカラーには、オレンジやグリーンを使うことで、美容院のサイトとしてかけ離れないようにする。そこで、サブカラーが彩度明度ともに高めの青緑、アクセントカラーが彩度明度ともに高い橙、と決める。

テキスト

既存ページは、確かにウィッグやカツラがメインで、普通じゃない美容院の設定なのだが、Webデザインの勉強のための仮想クライアントには向いていないと思った。
なので、ウィッグやカツラなどの設定をすべて無くして、汎用的な美容院となるように文章を書き換えていった。その結果、まったくの別物になったので、美容院の名前も変えました。

コンテンツ

上記のとおり、汎用的な美容院のサイトということで、コンテンツもそのように作っていった。

• トップページ
• プライス（料金表）
• キャンペーン（割引情報）
• スタッフ
• カットモデル募集
• リクルート（求人情報）
• メール
• プライバシーポリシー
• サイトマップ

また、キャンペーンのページで、クーポン用のページとして、携帯電話用のページをつくり、QRコードでアクセスできるようにした。

ユーザビリティ、アクセシビリティ

クライアントから、ユーザビリティやアクセシビリティは重要視していない。とのことと、デザインを重視したサイト作成の課題でもあるので、強く意識はしていない。

が、画像にはすべてaltで適切な文をいれ、一応、アクセスキーを設定した。また、基本的に文字の大きさは可変になるようにした、が、場所によってはpx指定しているので、どっちつかずかもしれない。

デザイン

ロゴなどに使ったのは、マニアッカーズデザインさんのSkinnyというフォントです。今回このフォントのおかげでとても助かりました。

また、サンプルサイトのホームとキャンペーンのページの夏祭りセットの浴衣の女性の写真は冷麺 -RAY MAN-さんの素材を使わせていただきました。ありがとうございます。人物の写真で、無料のものはなかなか無くて、探すのには苦労しました。皆さんどうやって探しているんでしょう？やっぱり有料素材を買っているのでしょうか。

デザインで使った角丸の画像は、allef.comさんのセラミックインタフェースのページを見て作りました。

横幅は744px。画像を大きく使いたかったので、上部メニューの形にしました。

一言

クライアントからのデザイン要望で、「サイトは名刺代わり」、「イメージ戦略」とあり、インパクト重視、見た目重視と受け取ったが、そのようなサイトにするには、Flashなどを駆使した動きのあるページでなければ効果は薄い。
自分がFlashを使えない為、このクライアントの要望を十分果たせなかった。

XHTMLでのコーディングでしたが、Weblogでも言っていますが、CSSでのフォントの指定について調べた結果、フォントを指定しないことにしました。そして今回、もっとも参考にさせていただいたのは、CSS HappyLifeさんのコーディングコンテストで最優秀賞を獲得したにんさんのコーディングデータでした。

最優秀賞ということで、とても参考になるつくりになっていました。

マーケティング会社サイト

サンプルサイト「USOマーケティング株式会社」

ホームページ課題配布：
WEBデザイナー辞典 > 課題配布ページ
課題内容：マーケティング会社のリニューアル。赤い活動的なイメージを希望。サービスを目立たせたい。

サイト作成概要

• HTML+CSSでのコーディング（トップページのみ一部テーブルレイアウト使用）。
• 規定のページ：トップページ、Webショップ支援、アクセスアップ、マーケティング分析、会社概要、資料請求
• 追加したページ：サイトマップ、お問い合わせ、プライバシーポリシー
• デザインよりも、ユーザビリティ、アクセシビリティをを優先する。
• 制作期間：2007.05.28～2007.06.12

サイト設定

このサイトの設定を以下のように決めました。

サイトの目標

資料請求の獲得、見積もり客の獲得

ターゲットユーザ

ネットショップを新規に作成しようとする個人経営の店舗、または中小企業。

クライアントのテーマ

ネットに強い、マーケティングの会社。

クライアントからのデザイン要望

赤い活動的なイメージ。サービスを目立たせたい。

サイトデザインプラン

カラー

キーワードは「赤・活動的」
具体的な色の指定（赤）と、抽象的なイメージ（活動的）が一致しているのでベースカラーは赤に決め、ビジネスサイトなので、信頼感を出すために明度、彩度ともに低めにした。

記事部分のリンクの色は、色相はブラウザの基本色から変えず、サブカラー（明度高、彩度高）の明度と彩度にあわせた。
アクセントカラーは、補色である緑系の色にした。
補助色として、灰色に近い赤を背景色にして、赤のまぶしさを減らした。

テキスト

既存ページの文章は、変更しないでほぼそのまま使用。
サービス名の「Webショップ支援」は、「ネットショップ支援」に変更。
これは、キーワードで検索したときに、Webショップよりもネットショップのほうが若干ヒット件数が多かったことと、サービス名を並べたとき、ひとつだけ英語が混ざっているのは、見た目的に良くないと思ったため。

コンテンツ

サイトマップがないのは、ユーザビリティが悪いと思ったので追加。
個人情報の入力があるので、プライバシーポリシーのページを追加。
資料請求以外の問い合わせページが無かったので、お問い合わせページを追加。
資料請求を増やしたいとのことなので、キャンペーンを実施。

ユーザビリティ、アクセシビリティ

デザインよりも、優先。なので、画像文字は極力使わないようにした。
キーボードでのページ閲覧が出来るように、メニューにアクセスキーを指定。
テキストブラウザや画像非表示、CSSオフなどの状況でも、サイト閲覧に支障が出ないように心がけた。

デザイン

一般的な、左メニューのデザインで、横幅800pxに収まるようにした。
あまりカッチリしすぎないように、メニューやトップページのメインイメージをグリッドからはみ出させた。
個人経営の方がターゲットユーザなので、トップページのメイン画像も個人経営の店舗の写真を使った。
トップページと各サービスのページに資料請求のページへのリンクバナーを張った。
印刷のときに、ページの横が切れないように、印刷用CSSを作成。
会社のロゴが無かったので、作成。

一言

HTMLとCSSをCSS着せ替えテンプレートプロジェクトで配布されているものをベースに作成しました。

初めてのWebデザインがこの課題です。フォトショップでデザインを決めてからコーディングするというのも初めてで、手探りでやりました。
会社のロゴのデザインにはすごく苦労しました。ロゴデザインは難しいし、どうすればいいかよく分からないです。
グローバルな感じを出したく、Oの中に地図の模様を入れたが、ただのシミにしか見えない…。