photo_studio (課題制作)

デザインカンプ

バナー

HTML

制作にあたり

・制作時間は、約630分

・色合いを吟味しwedding photoに合うものを選択し使用しました。

・背景に写真を使用、写真が遷移するアニメーションを設定しました。

・topの写真も遷移するように設定(Gifアニメーションを使用)。

・Photo galleryのsectionにも写真がフェードインする設定をしました。

・cssにてgridを覚えたため、各Sectionで使用しました。

・Section毎に、授業で習った文字の2重化を設定しました。

・試着会開催を促すバナーを固定で制作しました。(指示書記載の導線を反映)

 topの写真にかぶる前に消す設定のJavaScriptは、この時点で未学習のため未反映

・試着会開催バナーを他の個所と違う色合いで制作しました。(目立たせるため)

・ナビゲーションを1000pxでハンバーガーメニューへ遷移するように制作。

  その際、ナビゲーションの「資料請求」が消えてしまうので、

  「資料請求」の固定バナーが表示されるように設定しました。

・600pxで写真が2列に設定。PHOTOGRAPHERは3列に設定しました。

・Header/footerを固定にし、ロゴと店名が常に表示されるように設定しました。

・ハンバーガーメニュー押下しナビゲーション表示するように設定、

 ナビゲーションのXを押下しハンバーガーメニューに戻るように設定しました。

・Headerのtopを少し開け、スクロールしても背景写真が表示されているように

 設定しました。

指示書内容

■作成目的:
 利用者の集客、試着会の宣伝

■ターゲット:
 20代~30代の男女

■サイトイメージ:
 きれい、落ち着いた感じ、ラグジュアリー

■サイト構成:
 各内容の配置順番は任意
 撮影の予約や試着会の予約につながるような導線を確保

■ブレイクポイント:
 sp版ではコンテンツ幅は600px前後に設定

■ロゴについて: 特定の物を使用

■写真素材について: 配布した写真素材を使用

  別途必要なものがあれば無料のフォトストックサイトからダウンロードし

  使用可。アイコンやイラストは可能な限り自分で作成。

●コンテンツ

■サイト名

  kyouritz photo studio

■サイト説明:
 フォトウェディング専門サイト人気撮影スポットから二人の思い出

 の場所まで。東京都内だけでなく関東近郊までロケーション撮影
 に特化しています!

■ナビゲーション:
 ・PHOTO WEDDING PLAN
 ・PHOTO GALLERY
 ・CLOTHES
 ・資料請求

■メインイメージ:
 キャッチコピーまたは試着会についてや資料請求についてを、
 イメージの中に盛り込む

■ABOUT US:

  幸せな瞬間を私どもがお手伝いいたします

■NEWS:

  決まった文言を使用

■PHOTO WEDDING PLAN(プラン):
  ・スタジオプラン:
    プラン内容:衣装、ヘアメイク、レタッチ、アルバム、

    写真データ、10,800~
  ・ロケーションプラン:
    プラン内容:衣装、ヘアメイク、レタッチ、アルバム、

    写真データ、21,600~

■資料請求:

  資料請求用ボタンを配置

■リンク先:

  「#」ヌルリンク
 
■PHOTO GALLERY(ギャラリー):

  写真を並べる

■CLOTHES(衣装):

  写真を並べる
  「洋服」・「和服」・「メンズ」の見出しをつけて

■撮影スポットランキング:
  1位ビーチ
  2位チャペル
  3位東京駅
  ランキングの最後には「さらにくわしく」の文言でリンクを作成
  リンク先は「#」ヌルリンク

■PHOTOGRAPHER(カメラマン):
   特定の氏名を使用、写真と名前を表示

■バナー:

  「ウェディングドレス試着会」 を作成
   ・内容は日付が入っていること
   ・無料であることがわかるような文言を入れる

■店舗:
・店舗情報:GoogleMapを表示
・店舗住所:〒xxx-xxxxx 東京都中野区x-xx-xx
・電話番号:03-xxxx-xxxx
・営業時間:11:00~20:00″

■フッター部分:
   ©kyouritz photo studio Inc.
   コピーライト以外のリンク等については任意