実装サイトはこちら⇩
□ 制作年月 ：2021年10月
□ 制作期間 ： 10日間（１日8時間）
□ページ数 ：6ページ
□使用ソフト ：VScode / jQery /photoshop/llustrater
[ 企画概要 ]
- 所在地 ｜ 東京都23区内のマンションの一室
- 規模 ｜ カウンセラー１名の個人経営
- Webサイトを立ち上げる目的 ｜ 性愛問題に特化した女性向けカウンセリングルームを新規オープン⇨新規顧客の獲得、ブランディング、認知を広める⇨信頼感、問題解決能力の高さをアピールし、初見の方に安心感を与え、申し込みへと導きたい。
- ペルソナ ｜ 20代〜30代半ばの女性。性格は真面目、自信がない。親子関係に問題あり。男性問題で悩んでいるが、周囲に相談できず専門のカウンセラーを探している。or 30代〜40代の夫婦。２人だけでは話し合いが成立しなくなっているためカウンセラーに介入してもらいたい。
[ ロゴ ]
フォントはラフで自由な雰囲気のBradley Hand。
悩める女性が自由な気持ちを手に入れ、Core（自分の本質、核）からハートの芽が成長することを表現しました。
[ カラー ]
メインカラー ｜ ピンク（女性的、恋愛、幸福、思いやり）
ポイントカラー ｜ オレンジ（レスキュー・応援⇨依存など悩みがある人が気になる色）、水色（平和、冷静、誠実）、ベージュ（優しさ、安心感、リラックス）、紫（高貴、神秘的、奉仕の精神⇨カウンセラーの人柄を表現）
・F1層女性がメイン顧客ですので、全体的なカラーで安心とスタイリッシュさを感じさせる彩度を抑えた灰色がかった色を使用しています。
[ フォント ]
游明朝体 ｜ 柔らかで丸みがある、女性的な字形です。
[ レスポンシブ 対応]
・ハンバーガーボタンにNAVを入れ、トグルボタンにしました。メインターゲットの女性向けにマカロンをあしらいました。
[ Topページ ]
・メインビジュアルはペルソナ顧客の共感を呼ぶようなアニメ風のスライドショーにしました。少女が、作り笑顔⇨我慢⇨泣く⇨笑顔になる、流れになっています。
・どんなカウンセリングルームか分かりやすいよう、「恋愛カウンセリング」「夫婦カウンセリング」のビジュアルと悩み一覧を配置。ホバーするとピンクになり、そのままそれぞれのページへとリンクされています。
[ 下層ページ ]
初めての方へ ｜ 初見の方がイメージしやすいようカウンセリングの流れを作成。背景を水色にして誠実さを表現しました。
プロフィール ｜ 顧客の安心感のために作成。カウンセラーが匿名希望のため似顔絵を作成（photoshop）。親近感が湧くようカウンセリングと関係がない項目も入れた。
恋愛 ｜ 悩める女性をメインビジュアルにして、共感性を得ます。また、クライアント様からの声を掲載し、実際にカウンセリングによる効果があることを示します。最後に自由を象徴するような女子のビジュアルを入れ、カウンセリング後の晴れやかな気持ちを表現。
料金など必要事項も記載し、情報不足による不安を解消します。
夫婦 ｜ 険悪な夫婦をメインビジュアルにして、共感性を得ます。また、クライアント様からの声を掲載し、実際にカウンセリングによる効果があることを示します。最後に仲睦まじい夫婦のビジュアルを入れ、カウンセリング後の関係を表現。
料金など必要事項も記載し、情報不足による不安を解消します。
お申込み/お問い合わせ ｜ 窓口が分かりにくくならないよう、お申込み/お問い合わせを同じフォームにしています。
カウンセリングという特性上、「お問い合せ」でカウンセリングを流れで行うことがないよう、明確に「お申込み/お問い合わせ」の選択肢を作成しています。
[ 制作を終えて ]
一番気を遣ったこと ｜ 納期。すべて自分の裁量で行う楽しさと難しさを知りました。
作成のために特に勉強したこと ｜ レスポンシブ対応⇨過去の授業制作を組み直し、構造を再勉強。女性向けのデザイン⇨デザインの書籍を購入したり、pintarestを隙間時間に見て目を養う。
楽しかったこと ｜ すべて。なかなか思うようにならず辛いこともありましたが、調べて解決する能力がこ制作で高まり、つまずくことも解決への楽しみと考えられるようになりました。。
総論 ｜ 自分はWebサイト制作が向いてると深く感じました。