| 制作期間 | 画像、素材準備 約2時間 デザイン構想 約4時間 コーディング 約17時間 |
|---|---|
| 使用ソフト等 | HTML CSS jQuery Photoshop Javascript |
| ペルソナ | 癒しを求めたい社会人ないし、高齢者 |
| サブターゲット | ちょっと贅沢な旅行をしたい人 |
| キーメッセージ | いつでも帰りをお待ちしております。 |
| サイトのこだわり | 全体的に落ち着いたサイト構成にしたため、 動きの少ない「静的」なサイトを作成。 高齢者でも見やすいように文字は大きめに設定。 いつでも帰りを待っている、温かみのある場所にするため、 サイト全体のトーンを落しつつも、葉山町の綺麗な自然の スライドショーをいれることで安心感を与えるように工夫。 ロゴはPhotoshopで作成。 |
ファーストビューは旅館の外観写真を採用。
いつでも安心して帰ってこられるような雰囲気に。
ご新規様でも旅館のこだわりがわかるように、
料理のこだわり、葉山町への想いが3スクロールで切り替わる。
各スクールページが、
ウィンドウ全体に収まるように高さを設定。
(cssの特性上、スクリーンショット時に、
画像がブラックアウトしています。)
千葉県葉山町の美しい背景画像を5枚用意し、
自動で切り替わるように設定。
可読性を損なわないようにテキストシャドウを設定。
ファーストビューは旅館の外観写真を採用。 いつでも安心して帰ってこられるような雰囲気に。 ご新規様でも旅館のこだわりがわかるように、 料理のこだわり、葉山町への想いが3スクロールで切り替わる。
各スクールページが、 ウィンドウ全体に収まるように高さを設定。 (cssの特性上、スクリーンショット時に、 画像がブラックアウトしています。)
千葉県葉山町の美しい背景画像を5枚用意し、 自動で切り替わるように設定。 可読性を損なわないようにテキストシャドウを設定。
画面が平面的にならないように画像に影を挿入。
立体感を出すことで背景との境界線を強調。
画面が平面的にならないように画像に影を挿入。 立体感を出すことで背景との境界線を強調。
サイトが単調にならないようにサブカラーを背景に、
ボタンの背景にアクセントカラーを挿入。
メリハリをつけ、デザイン性を高める。
サイトが単調にならないようにサブカラーを背景に、 ボタンの背景にアクセントカラーを挿入。 メリハリをつけ、デザイン性を高める。
背景色で続けるのではなく、背景画像を設定し、
テキストエリアを透過させることでデザイン性を向上。
可読性を損なわない背景画像を文字色を使用。
（本来は左側にマップが表示されます。）
背景色で続けるのではなく、背景画像を設定し、 テキストエリアを透過させることでデザイン性を向上。 可読性を損なわない背景画像を文字色を使用。 （本来は左側にマップが表示されます。）
板前の料理風景の動画を背景に設定。
旅館の料理へのこだわりを表現。
板前の料理風景の動画を背景に設定。 旅館の料理へのこだわりを表現。
高級感を出すため、動きや余計なデザインを入れないページ構成に。
背景色をウィンドウ全体にベタ塗りするのではなく、
幅を少し狭めて黒の背景を少し見せることで落ち着いた雰囲気を演出。
高級感を出すため、動きや余計なデザインを入れないページ構成に。 背景色をウィンドウ全体にベタ塗りするのではなく、 幅を少し狭めて黒の背景を少し見せることで落ち着いた雰囲気を演出。
問い合わせのセクションはメインページと同様の
配置とカラーで統一感を出す。
問い合わせのセクションはメインページと同様の 配置とカラーで統一感を出す。
今までは、数ページにわたるサイトを制作していました。
今回は高齢者の方もターゲットにしているため、
色々なページへ飛ぶのではなく、1つのページで、
完結できるように作成しました。
背景写真を挿入するページ、ベタ塗りを採用するページ、
その塩梅が難しく、デザイン構成を何度も変更しました。
今回のサイトも各セクションがウィンドウの高さ収まるように設定しています。
この部分は私のサイトのこだわりと言えます。
今までは、数ページにわたるサイトを制作していました。 今回は高齢者の方もターゲットにしているため、 色々なページへ飛ぶのではなく、1つのページで、 完結できるように作成しました。 背景写真を挿入するページ、ベタ塗りを採用するページ、 その塩梅が難しく、デザイン構成を何度も変更しました。 今回のサイトも各セクションがウィンドウの高さ収まるように設定しています。 この部分は私のサイトのこだわりと言えます。