概要

富山県高岡市にある高岡庭苑様のデザイン、コーディングを担当。
特に造園や外構に関連したサービスを提供する企業として、自然との調和を重視したデザインをし、訪問者に安心感や信頼感を与えるウェブサイトに制作しました。

ターゲット

和風・洋風造園・庭園管理・外構工事・エクステリアの作業をお願いしたい消費者、庭師を目指す求職者。

デザイン

☑︎ カラースキームとビジュアルの選定 本サイトでは、自然との調和を意識し、緑系と白を基調とした配色を採用しました。これにより、清潔感と信頼感を演出し、庭園や外構工事を行う企業のイメージに合致するデザインを実現しました。また、高解像度のビジュアルを多用し、訪問者に視覚的なインパクトを与えています。

☑︎ 明確なキャッチコピーとメッセージ トップページには、「DESIGNING YOUR TRANQUIL ESCAPE」というキャッチコピーを大きく配置し、庭や外構工事を通じてリラックスできる空間を提供する企業のコンセプトをわかりやすく伝えました。これにより、訪問者に企業のメッセージが強く伝わる構成にしています。

☑︎ サービスメニューの視覚的な整理 造園や外構工事などの各サービスを、関連する画像とともに5つのカテゴリーに分けて配置しました。これにより、訪問者がどのサービスを利用できるかを直感的に理解できるレイアウトとなっており、ユーザビリティの向上を図っています。

☑︎ 施工事例の強調 実績のある施工事例を写真とともに紹介し、企業の信頼性を高めています。また「施工事例一覧」へのリンクを設け、訪問者がさらに多くの情報を確認できるようにしました。

☑︎ 採用情報の透明性 採用ページでは、企業が求める人物像やビジョンを明確に記載し、将来に向けた庭造りの夢を共有できる人材を募集しています。このセクションでは、企業文化と価値観を伝え、共感を呼ぶ工夫をしました。

☑︎ フッターと問い合わせ誘導 フッターには連絡先や企業情報を整理して配置し、訪問者がすぐに問い合わせできるようにしています。また、明確な行動喚起を含め、「お見積もり・ご相談」のセクションで問い合わせを促しています。

コーディング

☑︎ レスポンシブデザインの最適化
現代のユーザーがスマートフォンやタブレットなど、様々なデバイスからアクセスすることを前提に、レスポンシブデザインを実装しました。画面サイズに応じて、レイアウトや画像サイズが調整され、ユーザーに快適な閲覧体験を提供します。

☑︎ アクセシビリティの向上
全てのユーザーが使いやすいサイトを目指し、キーボード操作やスクリーンリーダー対応などアクセシビリティにも配慮しています。視覚的なアクセントとともに、HTMLの適切な構造化を行い、誰にでも理解しやすいコンテンツ設計を実現しました。

☑︎ SEO対策の徹底
SEO（検索エンジン最適化）を意識し、HTMLタグやメタデータの適切な使用により、検索エンジンにとっても理解しやすいコードを実装しました。具体的には、altタグの最適化や見出しタグ（h1〜h3）の正しい使い方を徹底し、サイトの検索順位向上を図りました。

☑︎ 高速な読み込み速度
ウェブパフォーマンスの改善を重視し、画像の最適化やコードのミニファイ化を行い、ページの読み込み速度を高速化しました。これにより、ユーザーの離脱を防ぎ、快適な操作感を実現しています。

☑︎ セマンティックなコーディング
コードの読みやすさとメンテナンス性を向上させました。これにより、後からサイトを改修する際や、他の開発者が関わる場合でも、迅速かつ効率的に対応できるような設計にしています。

制作範囲

☑︎ ビジュアルデザイン
☑︎ HTML、CSSを用いたコーディング
☑︎ ディレクション

制作期間

ディレクション：2か月
デザイン：7日
コーディング：5日

使用ツール

Photoshop/Fireworks/Figma

使用言語

HTML・CSS・jQuery