HP

こんにちは、Webデザイナーの菊地舜です。今回は私が制作した架空の写真館のデモサイト 「PHOTO STUDIO KIZUNA」 をご紹介します。 過去にフォトスタジオでアルバイトをしていたことをきっかけに、フォトスタジオのデモサイトを作成しました✨ この記事では、サイト制作の背景やコンセプト、各ページの紹介、配色の工夫、期待できる効果までを詳しくお伝えします。 制作の背景と目的 「PHOTO STUDIO KIZUNA」という名前には、「撮影を通して家族の絆を深めていく」という想いを込めています。結婚、出産、七五三、成人式など、人生にはたくさんの節目がありますよね。その瞬間を写真として残すことは、ただの記録ではなく「大切な人とのつながりを形にすること」でもあります。 このデモサイトを制作した目的は、大きく2つあります。 「見やすく」「わかりやすく」「安心できる」サイト体験を目指したのが今回のデザインの背景です。 コンセプト サイトのコンセプトは 「人生の大切な瞬間をしっかり残せる写真館」、「撮影を通して家族の絆が深まる」の2つです。デザイン面では「温かみ」「信頼感」「上品さ」の3つを柱にしています。 フォトスタジオのホームページに必要なのは、「安心して任せられる雰囲気」と「思わず自分も撮影したくなる」と感じてもらえること。その両方を表現することを意識しました。 サイト構成と各ページの紹介 今回のデモサイトは、シンプルに以下の4ページ＋フッターで構成しています！ 順番にご紹介します。 1. 当館について まずはファーストビューです。 シンプルに背景は撮影した写真のスライドショーにしています。このスライドショーにもこだわっていて…最初はウェディングフォト、次はマタニティフォト、その次が、ベビーフォトやキッズフォト、ファミリーフォト…という順番で写真を設定しています。 「人生に寄り添う写真館」ということを感じてほしくて、結婚から家族が増えて、幸せな家庭…というストーリーを感じられるようにしました。 実際のスライドショーを見てください！！ そして、「当館について」。 こちらは家族写真を含めて当館の説明をすることで、実際に撮影できる写真を知り、安心感を与えられるようにしています。 「当館概要」は上品さを感じられる薄い紫で背景を切

【ホームページ】脱毛サロンciao　（サンプルサイト） こんにちは、Webデザイナーの菊地舜です！今回は、私が制作した「脱毛サロンのデモサイト」についてご紹介します。デザインの背景やコンセプト、各パートの工夫や狙いを詳しく解説し、どのようにサイト全体を作成したかをまとめます。 制作の背景と目的 今回の脱毛サロンのホームページは、「見る人がこのサロンで受けられるサービスがしっかりわかるように」というところを重視しました。脱毛は数十万円もする大きな出費です。そのため、サービス購入をする人は慎重にいくつものサイトを調べていると思います。それを踏まえて、このサイトの目的は2つあります。 情報過多なサイトでは訪問者が迷子になりやすいため、できるだけシンプルで明快な構成を心がけました。 コンセプト コンセプトは「シンプルで信頼感のあるWebサイト」。余計な装飾を省き、情報が整理した見やすいデザインにしました。さらに、訪問者が迷わず行動できるように、ボタンを固定で配置しています。結果として「見やすく」「使いやすい」サイト体験を提供できる構成になっています。 サイト構成と各パートの説明 ヘッダー ページをスクロールしても固定されるナビゲーションを設置しました。また、「お問い合わせ」に飛ぶナビゲーション内も設置しています。 ファーストビュー ファーストビューはサイトの第一印象を決める重要な部分です。キャッチコピーと背景画像を大きく配置し、ブランドの方向性を直感的に伝えられるようにしました。また、右側に女性の画像を置くことで自然とキャッチコピーに目線が行くようにしています。さらに、サイトを開いてすぐに店舗情報が分かるように営業日、営業時間、電話番号を設置しました。 選ばれる理由 選ばれる理由は3つに絞りました。そして、画像についてです。Webデザインの基本として、「誰が見るのか」を意識したビジュアル選びが欠かせません。特に女性をターゲットにしたサイトでは、女性の写真を多く使うことで自然と共感を得やすくなるんです！ 人物写真は「自分に近い存在」としてイメージしやすいです！そのため、女性が登場する画像を多めに配置すると、閲覧者の目を引きやすくなります。 たとえば、カウンセリングのところでは女性同士が話している画像を使用しています。そうすることで、施術者が女性である安心感や実際のカウンセリ