webサイト制作例｜ウエディングフォト写真館

○前提条件

　参加メンバー ： 職業訓練校 訓練生3名

　ページ数 ： 全6ページ

　サイト幅 ： ～1280px

　テーマ ： ウエディングフォトをメインとする写真館

○担当箇所

　TOP及び下層ページのデザインカンプ作成

　プランページ3ページと、共通ヘッダー・フッターのコーディング

○使用言語

　HTML5  /  CSS3  /  javascript・jQuery

○制作環境

　Windows / Illustrator CS6 /  Photoshop CS6 / Dreamweaver CS6

○制作期間

　9日間　（ 約54時間 ）

▼TOPページ　デザインカンプ作成・ヘッダー、フッターのコーディングを担当

▼デザイン

都心部にある、幅広い年代のカップルから「憧れ」として支持される写真館、とのオーダーがあった為、ウエディングを象徴する白をベースとし、華やかなゴールドで装飾、上品な印象を与える濃いネイビーをボタン部分に使用しました。全体的に写真館らしく写真が主役となるよう余白をたっぷりと取り、シンプルなレイアウトで制作しました。

ベースのフォントは可読性の高いヒラギノゴシック、ユーザーにイメージを膨らませてほしいコピー部分や見出しは游明朝を使用し、エレガントな雰囲気を付加しています。

▼ユーザビリティ

グローバルナビゲーションを含むヘッダー部分は常に画面上部に追従するため、ユーザーはいつでも閲覧したいページに移動可能です。また、一定分量スクロールするとヘッダーの高さが縮小し、メインコンテンツの閲覧の妨げないようにしています。

フッター部分も画面をある程度スクロールすると画面下部にフェードインして追従し、すぐにお申込み画面へ移動できるようにしました。

▼プランページ（スタジオフォトプラン）デザイン～コーディングまで全て担当

▼プランページ（ロケーションフォトプラン）デザイン～コーディングまで全て担当

▼全ページレスポンシブ対応

▼サイトを開く