母が運営する不動産サイトを制作しました。このサイトは、母が取り扱う物件の魅力を最大限に伝えることを目的とし、シンプルでありながら視認性が高く、使いやすいデザインを心掛けました。

サイトのデザインとロゴ

物件名が「ブリランテ」ということもあり、サイト全体のデザインは明るく洗練された印象になるように工夫しました。カラーリングは柔らかいトーンを基調としつつ、アクセントカラーを適用することで、視線を誘導しやすいレイアウトを実現しました。

また、サイトの顔となるロゴも制作しました。ロゴデザインでは、物件の名前に合ったエレガントでモダンな雰囲気を意識し、シンプルながらも印象に残るようなデザインを採用しました。フォントの選定やベクター画像の調整を行い、サイト全体の統一感を持たせることにも配慮しています。

物件情報の掲載と画像の工夫

物件の特徴やアピールポイントを視覚的に伝えるために、説明文だけでなく画像を効果的に配置しました。外観写真はもちろん、内装の細部や周辺環境の写真も取り入れることで、訪問者が実際にその物件に住むイメージをしやすいようにしています。

特に、ギャラリーページには複数の画像を掲載する必要があるため、最適な表示速度を実現するための工夫が求められました。そこで、Nuxt.jsの画像最適化モジュール「NuxtImg」を活用し、デバイスの画面サイズや解像度に応じて適切なサイズの画像を配信するように設定しました。これにより、ユーザーの環境に最適化された画像を提供し、サイトのパフォーマンスを向上させることができました。

問い合わせフォームの実装

物件の詳細情報を閲覧した訪問者が、気になる物件についてすぐに問い合わせできるように、問い合わせフォームを設置しました。フォームの構築にはNewtのForm Appを使用し、管理画面上で問い合わせ内容を確認できるようにしています。Newtを利用することで、問い合わせデータの管理がしやすくなり、母がスムーズに対応できる環境を整えることができました。

ホスティング環境とパフォーマンス向上

サイトのホスティングにはCloudflareを採用しました。CloudflareのCDN機能を活用することで、ページの読み込み速度を向上させ、ユーザー体験の向上を図ることができました。また、セキュリティ面でもCloudflareの機能を活かし、DDoS攻撃などのリスクを軽減する対策を施しています。

制作を通じて得た学び

今回のサイト制作を通じて、特にパフォーマンス最適化の重要性を再認識しました。画像の最適化やCDNの活用だけでなく、Nuxt.jsのSSG（静的サイト生成）機能を活用することで、ページの読み込み速度をさらに向上させることができました。これにより、検索エンジンの評価向上にもつながり、SEO対策としても効果が期待できます。

また、問い合わせフォームの実装では、単なるメール送信ではなく、データ管理のしやすさを考慮した仕組みを取り入れることで、実際の運用を見据えた設計の大切さを学びました。

まとめ

母の不動産サイト制作は、デザイン・機能・パフォーマンスのすべてにおいてバランスを考慮しながら開発を進める良い経験となりました。今後も運用を続けながら、ユーザーの声を取り入れ、さらなる改善を図っていきたいと思います。

JSフレームワーク：Vue/Nuxt.js (TypeScript)
API：Newt (CMS)
インフラ：Cloudflare Pages
リンク：https://nuxt-portfolio-39y.pages.dev/

ARTICLES

Webメディアサイトを制作 (React.js / Next.js)

Death Stranding フォトモードを楽しむ

2024年度フレッシュ屋外大撮影会初撮りレポート

問い合わせ機能付き不動産サイトを制作 (Vue.js / Nuxt.js)

決済処理が可能なWebサービスを制作 (Astro & Stripe)

大学の研究室でWebのインタフェースを研究する