お世話になっております。
株式会社オーエスの高橋でございます。
「音楽教室のPCサイトのデザイン（簡単、一部のみ）」
のデザインを制作いたしましたので、ご案内いたします。
※提案段階のため、多少荒い作りの部分などもございます。
実際に制作する際には修正・ブラッシュアップいたしますので、ご了承ください。
※下記URLを閲覧するには、別途お伝えいたしますユーザーIDとパスワードの入力が必要です。
①ご提案1「フルスクリーン動画で惹きつける」
http://xweb01.xsrv.jp/alive-web.tech/video/index.html
※動画は仮のため低画質のものを使用しています。
②ご提案2「渾身のキービジュアルで惹きつける」
http://xweb01.xsrv.jp/alive-web.tech/index_01.html#index_01
※キービジュアルは仮です。
③解説（導線設計・パララックス・アニメーションなどの詳細）
http://xweb01.xsrv.jp/alive-web.tech/index_01.html#index_01-explain
順にご説明させていただきます。
--------------------------------------------------
①ご提案1「フルスクリーン動画で惹きつける」
http://xweb01.xsrv.jp/alive-web.tech/video/index.html
--------------------------------------------------
フルスクリーンの動画による効果は、下記の通りです。
・ユーザーの興奮と期待を高める
実際にサックスを奏でている動画を見ることで「やっぱりサックスはかっこいい！」という興奮と期待を喚起することができます。
・入会した未来を想像させて後押しする
「入会したら私もこんな風に演奏できるようになれるのかな」という未来を想像させ、入会への一歩を後押しします。
つまり、「動画の方が、人に行動を起こさせる力が強い」といえます。
動画は、下記のような素材サイトのものであれば変更可能です。
https://www.shutterstock.com/ja/video/
http://www.istockphoto.com/jp/%E6%98%A0%E5%83%8F%E7%B4%A0%E6%9D%90/%E3%82%B5%E3%83%83%E3%82%AF%E3%82%B9?excludenudity=true&page=1&phrase=%E3%82%B5%E3%83%83%E3%82%AF%E3%82%B9&sort=mostpopular
既にお持ちの動画を使用する場合や、これから撮影される場合などについては、別途ご相談ください。
可能であればプロの動画カメラマンに撮影を依頼されますと、訴求効果はかなり変わってきます。
--------------------------------------------------
②ご提案2「渾身のキービジュアルで惹きつける」
http://xweb01.xsrv.jp/alive-web.tech/index_01.html#index_01
--------------------------------------------------
静止画によるキービジュアルの場合にも、下記のようなメリットがございます。
・キメのシーンをじっくり見られるので与えたい印象を強く残せる
・キャッチコピーなどの文字にも集中させることができる
・複数枚のスライド式にして多面的にアピールしたりストーリーを持たせたりできる
・読込速度が軽減され、ユーザーの離脱を減らせる可能性がある
また、現在のところ提供いただいている画像も高品質ではありますが、より訴求力の高い画像を
プロカメラマンに依頼していただいた方が、成約率が変わってくる可能性が高いと思われます。
--------------------------------------------------
③解説（導線設計・パララックス・アニメーションなどの詳細）
http://xweb01.xsrv.jp/alive-web.tech/index_01.html#index_01-explain
--------------------------------------------------
デザインについての詳しい内容を記載したページです。
当初、弊社より提案させていただきました内容にもございましたが、
最新のギミックにつきましては、下記の実装を考えております。
・動画
背景にフルウィンドウサイズの動画を配置し、サックスの魅力を直感的に訴えかけます。
参考サイト :
https://www.kalexiko.com/
・パララックス
視差効果と呼ばれる「立体的な奥行き感」を演出し、その臨場感によってサイトに引き込みます。
参考サイト :
http://sanyotan.co.jp/
・アニメーション
要所に適度な動きを加えることで、読み進めようという気にさせ、内容も入りやすくさせます。
参考サイト :
https://www.yamaha-motor.co.jp/mc/life/cc/2016/
以上、ご不明点や修正希望などございましたら、遠慮なくお申し付けください。
内容やボリュームによってはお応えできかねる場合もございますが、できる限りご対応させていただきます。
申し訳ございません。
本日、再度内容を確認していたところ、
参考サイトとして提示していた下記の外国のデザイン会社のURLが
SSLの有効期限切れとなっており、参照できない状態になっておりましたので、
＞・動画
＞ 背景にフルウィンドウサイズの動画を配置し、サックスの魅力を直感的に訴えか＞ けます。
＞ 参考サイト :
https://www.kalexiko.com/
変わりにこちらのURLをご用意致しました。
ご参照頂ければと存じます。
http://www.theqcamera.com/
引き続きよろしくお願い申し上げます。
