架空の幼稚園のランディングページを制作しました。自然と触れ合いながら育むことができることを強みとしています。
URL
https://kaorin-portfolio.com/morinoyouchien_site/
担当
デザイン・コーディング(レスポンシブ対応)
サイトの目的
園の認知と園児募集
ターゲット
子供の入園を考え中の父・母(20代〜40代)
デザインについて
・子育てが始まったばかりの父・母が安心して預けたいと思え、且つわくわくするような遊び心を意識しました。
・自然に近い環境の園というイメージなので、サイトをスクロールするとファーストビューから森、青空、大地になるように構成しました。
・元気で明るく、自然のイメージなので空の色、木の色、大地の色の青・茶・緑を使い色数は多めに、全体的に丸みを出しました。
・また、ランディングページのため、ファーストビューで印象が残るようにヒーロー画像は大きく、また各紹介でも大きめの写真で園内のイメージがしやすいようにしました。
コーディングについて
・flexボックスを多用し、各紹介文と画像を横並びにしています。
・ヒーロー画像は高さを100vhにし、ビューポートで画像がいっぱいいっぱいになるようにしています。
・レスポンシブのため、単位はpxとremを併用し、基本を14pxに設定し倍数で変化するようにしています。
・各リンクは横幅を広げ、目に留まりやすく、クリックしやすいようにしています。またマウスで触れたことが分かりやすくするように、filterで色やコントラストの変化をつけました。
使用ソフト
photoshop/HTML/CSS/Bootstrap
制作期間
デザインカンプ: 3週間
コーディング(レスポンシブ): 1ヶ月