Works制作実績
HIMARIBA web design
自身のウェブ制作実績をまとめたポートフォリオサイト。
デザインツールFigmaで設計、HTML/CSS/JavaScriptを用いてコーディングを行い、WordPressで実装しました。
サイト名の「HIMARIBA（ひまりば）」には、「日（太陽）」、「日葵（ひまわり）」、「葉（若葉）」という言葉の響きを込めています。
DESIGN
サイト全体に、ひまわりや太陽を連想させる暖色系のカラーパレットを採用しました。キービジュアルや各セクションには、柔らかな手書き風のひまわりモチーフや、光が差し込むような表現を取り入れ、訪れる人がほっとするような温かい雰囲気を演出しています。
太陽の光に向かって伸びるひまわりの姿からインスピレーションを受け、コンテンツは上から下へ、そして左から右へと自然な視線誘導を意識したレイアウトにしました。
また、各要素には適切な余白を設け、窮屈さを感じさせないことで、開放的で前向きな気持ちになれるような空間を作り出しました。
堅苦しくなく、より多くの人に親しみを感じてもらえるよう、丸みのあるフォントを選定しました。
また、一部に手書き風のシンプルなイラストを効果的に配置することで、サイト全体の温かみと個性をさらに引き立てています。
ユーザーの操作やスクロールに合わせて、控えめでありながらも心地よいアニメーションを導入しました。
例えば、要素がフェードインしたり、ボタンにカーソルを合わせたときにわずかに変化したりと、視覚的な楽しさを加えつつも、サイトの読み込みを妨げないように配慮しました。
CODING
スマートフォン、タブレット、PCなど、あらゆるデバイスで快適に閲覧できるよう、CSSのメディアクエリを駆使し、レイアウトや要素のサイズが柔軟に変化するように調整しました。
誰にとっても使いやすいサイトを目指し、HTMLはセマンティックな構造を意識し、適切なタグを使用しました。
これにより、検索エンジンにも認識されやすくなり、スクリーンリーダーなどの補助技術を利用する方にも情報が正しく伝わるように努めました。
画像の最適化やCSS/JavaScriptの軽量化、ブラウザキャッシュの活用など、ページの読み込み速度を向上させるための工夫を施しました。
ユーザーがストレスなくサイトを閲覧できるよう、快適なユーザー体験の提供を重視しました。
デザインと機能を完全にコントロールするため、WordPressのオリジナルテーマをゼロから開発しました。
これにより、サイトのあらゆる要素を細部までカスタマイズし、かつ将来的な機能拡張やコンテンツの追加も容易に行える、運用しやすい構造を意識して実装しました。