⚫︎ デザイン意図

このサイトは、デザインカンプからのコーディング課題を元にした作品で、セクション構成は課題と一緒です。HTML/CSSでコーディングから、WordPress化まで行いました。

コーディングには HTML、SCSS、jQuery を使用しています。SCSSは1ファイル構成ですが、BEMでクラス設計を行い、ネストや変数も活用しながら、可読性と整理しやすさを意識しています。

jQueryでは、ホバーやスクロールに応じたアニメーションを実装しています。動きは最小限にとどめ、全体の印象に合わせて静かなトーンを保ちながら、必要な箇所にアクセントとして取り入れました。

スマートフォン表示にも対応しており、各デバイスでのレイアウト崩れがないように調整。フォントサイズや余白、要素の配置など、基本的なUI調整も含めて仕上げています。

カンプの再現だけでなく、デザイン面では、色使いやフォント選定、要素の間隔やサイズ感、視線の流れなどを全体的に見直し、もとのビジュアルイメージとは異なるコンセプトで再構成しました。信頼感や落ち着きといった印象をベースに、情報の整理と読みやすさを重視したデザインに調整しています。

幼稚園の「温かみ」や「安心感」を大切にしながら、保護者の方が直感的に情報を得られるようデザインしました。柔らかい色合いと親しみやすいイラスト・写真を用いることで、園の雰囲気を視覚的に伝え、子どもたちの笑顔や活動の様子が伝わるデザインを意識しています。また、情報を見やすく整理し、入園案内や行事予定など、保護者がよく利用するコンテンツへ簡単にアクセスできるよう設計しました。

さらに、スマートフォンやタブレットからも快適に閲覧できるレスポンシブデザインを採用し、忙しい保護者の方々にとって使いやすいサイトを目指しました。園の魅力が伝わり、安心してお問い合わせや見学につながるよう工夫しています。