Kyouritz photo studio

kyouritz photo studio

▲ スライド全10ページ

画像左下の< >ボタンでページ送りできます

制作内容

■ 学校課題 架空サイト制作 / 2024年8月
デザインカンプ / コーディング(HTML/CSS/jQuery)
■ 制作時間 学校12時間+その他4日間
■ 使用ツール Photoshop / Dreamweaver
■ 対応機種

レスポンシブ対応

■ 制作依頼書 サイト内のテキストは、クライアント様の指定あり。
写真素材等は指定のものか、商用利用可能な無料素材を使用する。

デザイン

■ サイト設計

  • ターゲットの年齢や社会的背景から、スマートフォンでのサイト流入が多いと考え、スマホファーストなデザインにしました。
    そのため、スクロールの負担軽減を優先し、上質感を出すための余白は少なめにしました。
  • 顧客が欲しい情報の優先順位上位に「作風」「クオリティ」「価格」「プラン内容」があると考え、トップページに配置しました。
  • 結婚式の準備や仕事に忙しく、時間に追われる中でフォトスタジオを検索する方も多いと考えます。そのため、”選択疲れ”に配慮し、文字を少なく、良質な作品をたくさん掲載することで第一印象で好感を持ち、CTAボタンのクリックにつながるよう考えました。
    もっと情報が欲しい方に向け「資料請求」ボタンも設置しています。
  • たくさんの作品を見ることで、サービス購入後のイメージがふくらみ、ベネフィットを想像することができます。
  • マウスホバー時の動作は「ふわりとしたゆっくりな動き」でラグジュアリーな世界観を表現しました。
  • 他店のwebサイトのトップページはスタジオで撮影した写真を採用していることが多かったため、記憶に残るよう夜景のロケーションフォトを使用しました。
    ドレスからもれる光がより印象的になるよう、Photoshopでレタッチし、ドレス部分の照度を上げて、反対に景色の照明の照度を下げています.

■ サイトカラー

ベース:ベージュ

#c7bfb3

メイン:ネイビー

#202f55

ペルソナである30代男女に対して、「かわいい」ではなく「上品でラグジュアリー」なイメージとなり、写真が映えるよう、やや低彩度のベージュ×ネイビーとすることで、落ち着いた印象を与え、男女ともに印象のよい色になるよう考えました。
また、写真が色鮮やかなため、アクセントカラーは使用していません。

■ フォント

フォントの見本
上品でラグジュアリーな雰囲気を演出するため、セリフ体を採用し、英字には「Cormorant Garamond」「Playfair Display」を使用しました。

フルスクリーンショット

キョウリツフォトスタジオwebサイト キョウリツフォトスタジオwebサイト

※ PC・SP共通デザインです