2025年8月、1年がかりでお手伝いしてきた「シャーメゾン（ShaMaison）」のブランド・物件検索サイトがフルリニューアルされました。
シャーメゾンは、積水ハウスの賃貸住宅です。
入居者が安心して暮らせることを何よりも大切にしながら、毎日の心地よさ、理想のライフスタイルを叶える住まいづくりを特徴としています。
そんなシャーメゾンのウェブサイトについて、neccoは「ブランドサイト×物件検索サイト」2つの機能を兼ね備えた形にリニューアルするお手伝いをしました！
この記事では、ブランドとして伝えたい価値と使いやすさを、どう両立させるか。ずっと考え続けながら進めたリニューアルプロジェクトの裏側について、担当ディレクターの視点で振り返ってみます。
語りたいことは山ほどありますが、プロジェクトの中でも特に重要なポイントとなった、企画・情報設計・デザインの舞台裏を、できるだけ詳しく紹介します。
- 制作期間：2024年8月〜2025年8月末（1年）
- 担当範囲：情報設計・ディレクション・デザイン・ライティング・物件のレコメンド機能実装・インタラクションやアニメーションの指示など
- サイトURL：https://www.shamaison.com/
シャーメゾンサイト制作の流れ
プロジェクトにおける課題や詳細は後述しますが、今回の大規模なブランド・物件検索サイトリニューアルは、次の流れで進みました。
- リサーチ・企画・デザイン提案（コンペ）
- ページ・リンクの整理
- 検索導線の最適化
- ワイヤーフレーム作成
- ホーム・物件一覧・物件詳細のデザイン
- 配下へのデザイン展開
- 全ページの仕様・遷移先記入
- アイコン・画像作成
- 実装
neccoは主に1〜8の範囲を担当しました。基本的な実装と「シャーメゾンとは」のデザインは、他社に担当していただきました。クレジットの詳細は、制作実績をご覧ください。
ひとつひとつの工程に思い入れがありますが、すべてお話しすると2〜3日かかってしまいそうなので、前述したように、プロジェクトの重要なポイントとなった部分にしぼってお話します。
課題の整理と企画・デザイン提案
シャーメゾンのサイト制作のはじまりは、コンペでした。
neccoはあまりコンペに参加しないのですが、今回はシャーメゾンに住んでいるメンバーが数人いたこと、代表の阿部さんが不動産業界で働いていた経験があることなどから、前のめりで参加させていただきました。
コンペの準備はデザイナー、ディレクターチーム総出で実施。短い期間ではありましたが、リサーチ、コンセプト設計、企画・デザイン案を全力で準備しました。
当時わたしは、シャーメゾンの住人でした。コンペの準備やリサーチを通じて、「なぜこの良さに気づいていなかったのか？」と疑問に思うくらい、知れば知るほど、シャーメゾンの魅力が実感できます。
「戸建て品質のつくり」
わかる。建具がめっちゃしっかりしてたのも、引っ越しを決める理由のひとつだった。窓が大きくて明るいのも最高です。
「音が響かなくて静か」
わかる。隣人の生活音がぜんぜん聞こえない。ドアを閉めるだけで、隣の部屋の音がだいぶ小さくなる。朝から晩まで音の心配をせずに暮らせること、とてもありがたいです。
「インターネット無料（物件による）」
わかる。うちも無料です。毎月の出費が浮いて助かります。
そんな「言われてみればわかる良さ」がじわじわと自分の中に染み込んできました。
でも残念なことに、このシャーメゾンの良さをまとめてしっかり伝えられる場所がどこにもない。もっとも厚くあってほしい公式サイトが、そうなっていない。そんな住人として感じた課題感は、チームでも共有しました。
そして、2024年7月31日、みんなで作った資料を提出しました。以下、資料の一部をご紹介します！
リニューアル前のサイトは、「物件検索サイト」としての機能は果たしていましたが、物件やブランドの魅力をうまく伝えられていませんでした。
サイトリニューアルにおけるコンセプトは、クリエイティブ・ディレクターをつとめた阿部さんと一緒に考えました。
お客さまから事前にご共有いただいていた課題感をもとに、neccoではデザイン・コンテンツ・利便性からなる3つのコンセプトを策定しました。
1、シャーメゾンの上質さと優位性を、デザインや写真で、視覚的に体験できるようにする。
2、網羅的な情報と独自コンテンツを用いて、シャーメゾンの魅力と価値を具体的に体験できるようにする。
3、サイトの導線など利便性を改善し、ユーザー体験（UX）を向上させ、お問い合わせ率を高める。
上記のコンセプト等をふまえ、デザインチームと話し合いながら、上質かつシャーメゾンの世界観や目指す方向が伝わるビジュアルを設計しました（MVの写真は、実際に存在するシャーメゾンの物件です）。
よりイメージを具体的にするため、Figmaのプロトタイプ機能を使った動画もご用意しました。
リニューアル後のサイトをご覧いただければわかるのですが、ホームのデザインやコンテンツのイメージは、コンペの段階でほとんど完成していました。物件詳細ページについても同様です。
サイトの入口になるホーム（トップページ）では、これまでうまく訴求できていなかった魅力的な物件をビジュアルで伝え、その下のセクションでは、シャーメゾンの特徴や選ばれる理由、さらに住みはじめてからの暮らしをイメージできるコンテンツの企画・提案を行いました。
あまり時間がない中で、上質でありながらも敷居をあげすぎない、ちょうどいいバランスのデザインをつくってくれたデザインチームには、心から感謝していますし、尊敬します。
そして、資料を提出した2日後。2024年8月2日に、新宿にある積水ハウス不動産ホールディングスさんのオフィスを訪問し、阿部、中川、田口の3人でプレゼンを行いました。
そこから数日後、正式にサイトリニューアルのご依頼をいただき、本格的なプロジェクトの幕開けとなりました。次のメッセージは、担当者の上遠野（かとの）さんからいただいたメールの一部です。
先日はシャーメゾンサイトのデザインリニューアルに関するご提案をいただきましてありがとうございました。 社内で検討を重ねた結果、本件は貴社を起用させて頂くこととなりましたのでご連絡差し上げます。
短い期間で当社への理解を深めていただき、課題解決が期待できるデザインになっていたこと、動画を作成いただき非常にご提案がわかりやすかったこと、検索性はもちろん、上質イメージの反映とつたわりにくい優位性を両立させていたこと、課題を理解した独自コンテンツであったこと、コンテンツが乱雑に配置している当社のサイトを整理したうえで、 いまある課題をデザインで解決するというご提案に、今後のパートナーとしてお願いしたいという結果となりました。
今後、１つのチームとなってプロジェクトを成功させていきたいと思っておりますので、 何卒よろしくお願いいたします。
過去のやりとりを掘り返して見つけたメッセージですが、いま見ても感激してしまいます。
わたしたちが、シャーメゾンの素敵なところを世に届けるお手伝いができる。そんなうれしさで歓喜した夏でした。
ページとリンクを整理し、サイト構造を最適化する
プロジェクト開始から3か月くらいは、情報設計や導線の最適化を中心に進めました。
まずはディレクターの夏井さんやアシスタントチームに手伝ってもらいながら、サイト全体のページを洗い出し、Figmaにキャプチャーを並べたり、スプレッドシートでサイトマップを作るところからはじめました。
ページや機能の棚卸しが終わったら、次は「整理」です。
大量のキャプチャー画像とサイトマップを照らし合わせながら、ページやサイト構造の最適化を進めます。
- このページはリニューアル後も必要か？
- このページは何のために存在しているのか？
- どこをどのように改善すべきか？
- ページ名はこれが最適か？
- 新しく作るべきページや導線はないか？
このとき特に注意していたのは、ページの削除に伴う遷移先の消失でした。いわゆるリンク切れです。
「本当にこのページを消しても問題ないか？」「遷移先を失って孤立するページが現れないか？」各ページへの入口や遷移が多い検索サイトでは、1ページの削除が意外な導線に影響することもあります。
また、単に「物件を探している人に必要がないから」という理由でページを削除することもできません。
シャーメゾンのサイトは、シャーメゾンの物件を取り扱う賃貸営業所の方や、不動産会社さんも利用されます。そうしたお部屋探しをサポートする人にとっても扱いやすいサイトでなければなりません。
（そうして生き残ったのが、上記の「エリアトップ」と呼ばれるページです）
「ページやリンクの最適化」と「保つべき整合性の多さ」は情報設計フェーズで苦労した部分のひとつでしたが、週1回の定例ミーティングや密なチャット連絡を通して、お客さまと丁寧に整理していきました。
使いやすく迷わない、検索導線の設計
ページやリンクの整理がひと通り進んだところで、次の難題に立ち向かいます。本プロジェクトの肝となる、物件検索の導線改善です。
まずは既存サイトの検索導線を洗い出し、ユーザー視点で使ってみて感じたことをFigmaに整理しました。
実際に「自分が引っ越すとしたら…」という想定で物件を検索してみて、どう思ったか、不便な点、改善したい点、良い点などを記入していきました。
- ホームからすぐ、好みの方法で物件検索をはじめたい
- はやく物件一覧を見たいのに、検索フローが長くたどり着けない
- 1度の検索中に、エリアをたびたび選ばなければいけない
- 通勤・通学時間から探す際、都道府県を指定したい
- ハイグレードな物件だけを見たいが、どれかわからない
他にも課題はありましたが、とにかく物件を探しやすく、かつSUUMOやアットホームのような一般的な賃貸検索サイトではなく「シャーメゾンの検索サイト」であることを大前提とした、理想の検索導線をつくることに燃えていました。
検索のしやすさを確保しながら、シャーメゾンらしさを盛り込むには？積水ハウス仕様やシリーズ展開、人気のカテゴリについて知りながら検索をしてもらうには？
週1回の定例ミーティングを重ね、ひたすら改善を続ける日々。「これじゃん！これが最高だ！」と確信のようなものを感じては、「やっぱりこっちかな…」と試行錯誤を繰り返し、頭から煙がでそうなほど悩んだ約2か月でした。
検索導線の改善中、担当者の上遠野さんは定例ミーティング以外にもFigmaコメントやスポット通話で相談に乗ってくださいました。
本当に本当に熱量が高く、Figma使用経験がなかったにも関わらず、カーソルチャットの使い方を教えたらすぐにマスターし、そのうちFigmaで作業中のメンバーを見つけて「田口さん呼べますか？」と声をかけられるまでになっていました。メンバーから口頭で「上遠野さんが呼んでます」と声をかけられたときは、その使いこなしに笑ってしまったのを覚えています。
↓Slackで「上遠野さん カーソルチャット」検索してみました。
検索導線の改善はとても大変で骨の折れる作業でしたが、「検索や機能が多いサイトを作るの、むずかしいけど好きかも」「ディレクションの仕事、やっぱり楽しいな」と思えた時間でもありました。
たくさん相談に乗ってくれた阿部さん、膨大な改善案をレビューし続けてくれた上遠野さん、途中からUIデザインの視点で一緒に改善を進めてくれた中川さん、チーム一丸となって新しい検索導線を作りあげたころ、季節は秋になっていました。
シャーメゾンの特徴を活かした、3つの物件詳細デザイン
検索導線の改善が落ち着きはじめたころ、デザインチームには「物件詳細」と「物件一覧」のデザインを進めてもらいました。いずれもプロジェクトの中で特に時間をかけ、大切に仕上げたページです。
物件詳細のデザインはコンペでご提案しており、それをブラッシュアップする方針でした。
また、シャーメゾンには大きく分けて3つのシリーズがあり、「いま見ている物件が、どのシリーズに該当するかをわかるようにしたい」というご要望のもと、3つのテンプレートを作成しました。
- シャーメゾンR（リノベーション物件）
- シャーメゾンセレクション（ハイグレード物件）
- スタンダード
シャーメゾンセレクションは、シャーメゾンの中でも特に上質な物件を厳選したハイグレード物件です。シャーメゾンRは、フルリノベーション物件。スタンダードは文字通りで、前述した2つのシリーズに含まれない物件です。
なかでもシャーメゾンセレクションは、積水ハウス不動産ホールディングスさんがこだわり抜いて提供しているシリーズです。一般的なお部屋探しサイトにはめずらしい黒背景のデザインで、ほかのシリーズとの差別化や高級感を表現しました。
見て、触れて、シャーメゾンセレクションを深く理解する
2024年10月には、シャーメゾンセレクションを実際に見て体験するために、物件見学の機会をいただきました。
ここではneccoメンバーたちの「賃貸物件の常識」をくつがえした、シャーメゾンセレクションの写真を少しご紹介します。
「セレクションの物件は、東横線沿いにありますか！？」
「ペット可のセレクション物件もありますか！？」
「いつかはセレクションに引っ越したい！！」
帰り道はセレクションに住みたい人でいっぱいになってました。
百聞は一見にしかず。現地に足を運び、身をもって体験したことで、シャーメゾンセレクションに対する解像度がグッとあがりました。この良さをもっと多くの人に伝えたい。いや、伝えなければ！そんな使命感とチームの士気があがった1日でした。
引っ越し先を探している方がいたら、ぜひシャーメゾンセレクションも視野に入れてみてくださいね。
使いやすさと整合性にこだわり抜いた物件一覧
だいぶ振り返りが長くなってきましたが、今回のプロジェクトで最後の最後まで粘り強く改善を重ねた「物件一覧」についても、紹介させてください。
物件検索サイトというと、どうしてもトップページや物件詳細が目立ちがちですが、実際にお部屋を探す人がいちばん長く過ごすのは、条件を変更したり、複数の物件を見比べたりする「物件一覧」のページです。
ここが見づらかったり、ほしい情報が得られなかったりすると、本当はその人の求めている物件があったとしても埋もれてしまいます。比較に疲れてサイトから離脱してしまうこともあるでしょう。
つまり一覧ページは、「良い物件と出会えるかどうか」「問い合わせまでたどり着けるかどうか」を左右する、意思決定の場とも言えます。
- 物件の魅力が伝わるレイアウトになっているか？
- 掲載情報は多すぎず少なすぎず、ちょうどいいか？
- すぐお気に入りに追加できるか？
- スマホでもPCでも等しく、使いやすいページになっているか？
- 建物や物件の詳細ページへの導線が明確か？
- 情報の優先度をデザインで正しく表現できているか？
ひとつひとつの要素を調整するのは地道な作業ですが、その積み重ねが「探しやすさ」「シャーメゾンへの良い印象」につながると考えていました。
整合性の壁にぶつかりつづけたのは、このページが最後にデザインFIXしたから、というのもあります。
カード内の要素やデザインについて改善したいけど、ひとつ変えると、他の全ページのデザインに影響がでてくるかもしれない。でも、よくなるなら全ページ改善したほうがいい。整合性は保ちたいけど、納品までもう時間がない。ヒヤヒヤでしたが、実装会社さんにも待っていただき、無事に完成させることができました。
「すべての道はローマに通ず」という言葉がありますよね。社内では物件一覧で整合性を揺るがす場面が出てくるたびに、「すべての道は物件一覧に通ずる……」「ローマ〜〜〜！」と悲鳴のような声があがっていました。
一部ではありますが、物件一覧の墓場も少しお見せします。
実際はカード単位、パーツ単位でもデザイン検証が行われ、この3倍くらいは墓場行きとなりました。
最後まで粘り強く検証してくれたデザイナーの龍神さん、中川さん、一緒にレビューしてくれた阿部さん、上遠野さん、本当にありがとうございました。おつかれさまでした。
実装につなげる、全ページの仕様・遷移先の整理
すべてのデザインが完成したあとも、デザインと実装をつなげる作業が続きます。
実装会社さんにお渡しするファイルを用意し、PC・SPのデザインをカテゴリやページごとに整理。それぞれのページやパーツについて、機能・仕様・遷移先などを記入しました。
もちろんデザインデータだけでなく、FigmaのフレームURLを記載したサイトマップや、インタラクション・アニメーション指示のためのプロトタイプ、動画などもお送りしました。
できるだけスムーズかつイメージ通りに実装してもらえるように。またリンク切れやページの孤立が起きないように。
自分なりに努力したつもりではありましたが、制限時間が少ない中で重すぎて動かないFigma、詰めきれていない仕様やアニメーションの指示、デザインや表記の細かな揺れなど、頭を抱えることも多かったです。キーボードを叩きすぎて腱鞘炎になったのもはじめてでした。
もうちょっと実装の知識があれば。デザインを見る目が育っていれば。早く気づいていれば。そんな反省を何度もして、ディレクターとして多くの学びと課題が見えた冬の終わりでした。
ラストスパート！大量のオリジナルアイコン作成
全ページのデザイン完成後も、デザインチームとディレクターの戦いは続きます。今年の春には、物件の機能や特徴をわかりやすく伝えるための「アイコン作成」を行いました。その総数は88コ。
事前に覚悟はしていましたが、いろんな都合で制作期間は約3週間。
動けるデザイナーが少なかった当時、やれるか…！？最終手段ではあるけど、わたしも作ったほうがいいかも…！？そんなヒリヒリする瞬間もありましたが、心配無用でした。
デザイナーのアシスタントチーム、安達さん、福井さん、八田さん、夏目さんが爆速で作ってくれました。爆速といっても、みんなひとつひとつ丁寧に、シャーメゾンらしさやそれぞれの特徴をとらえたアイコンになっています。
スケジュールはギリギリ3週間で組んでいましたが、実際は2週間でほとんど完成。最後の1週間はブラッシュアップや修正対応に使いました。
想定より早くアイコンが完成したのは、アシスタントチームが集中して作業してくれたことに加え、ベースのトーンづくりや場所の用意、グリッドを決めておくなど、事前準備を先輩デザイナーチームがやってくれていたことも大きかったです。
また、すべてのアイコンのクオリティを保つため、阿部さんと今さんはまめにレビューをしてくれました。夜な夜な大量のアイコンを見て、レビューコメントを送り、修正が完了したらまた再レビューをする。アイコンを1から作る作業も大変ですが、88コすべてが完成するまでレビューし続けるのも、とても大変だったと思います。
積水ハウス不動産ホールディングスの上遠野さんも、すべてのアイコンをレビューしてくださいました。気になる箇所や要望を的確に伝えていただき、両社の連携により、想定を上回るスピードで完成させることができました。
作成したアイコンたちは、主に物件詳細ページで使用されています。
文字だけではわかりづらい情報も、アイコンがあるとより伝わりやすく、目を引きます。また、トーンが統一されたオリジナルアイコンの使用によって、サイト内の世界観が引き締まり、「シャーメゾンらしさ」が強化されます。
短期間で素敵なアイコンを仕上げてくれたデザインチームのみなさん、本当にありがとうございました！
お客さまの声
無事にサイトがリニューアル公開されたあと、積水ハウス不動産ホールディングスの上遠野さんからコメントをいただきました。
デザインでここまで変わるのかと、
期待値を大幅に超えました。従前のお部屋探しサイトを「ブランド価値が伝わるお部屋探しサイト」にしたいという想いを叶えてくださいました。
デザインのみの依頼にも関わらず、公開後のコーディング課題も指摘・改善くださるなど、まさにプロジェクト完遂までのパートナーでいてくださったことが印象的で、非常に感謝しています。
ここがゴールではなくスタートとしてこれからもよろしくお願いいたします！
積水ハウス不動産ホールディングス株式会社
経営企画部
上遠野 智衿
わたしたちもとっっっても感謝しています！
コンペを開催してneccoに決めていただけたこと、わたしたちがやりやすい環境づくりをサポートしていただけたこと、そして最初から最後までこだわり抜いて一緒に走り続けていただけたこと、本当にうれしかったです。
これからもどうぞよろしくお願いいたします！！
1年がかりのプロジェクトを振り返って
シャーメゾンのサイトリニューアルプロジェクトは、neccoにとって、過去最大規模のお仕事でした。まだまだ語りきれないストーリーがあり、苦しい、楽しい、もっと知りたい、もっと力がほしい、いろんな思いが詰まった1年でした。
実はわたしがディレクターになったのは、本プロジェクトの開始3ヶ月前でした。まさか数ヶ月後にこんな大きなお仕事をまかせてもらえるとは思いませんでしたが、とにかく全力で、ひたすらベストを尽くせるように取り組み、ディレクションのおもしろさや奥深さにも気づけたお仕事になりました。
ディレクターとして得た学びは数えきれませんが、少しだけ箇条書きにしておきます。
- 全体像と現状を、常に最新の状態で把握すること
- 自分で手を動かしすぎないこと（上手にまかせること）
- 現場に足を運び、一次情報を仕入れること（解像度を上げる）
- 環境やツール、仕組みを整えること
- 実装やデザインについて学ぶこと
- チームで良好な関係を築くこと
「物件検索サイト、もう一生やりたくない！」と思う瞬間がなかったと言えばウソになります。でも、それは完全にわたしの未熟さゆえの揺らぎであって、いまはディレクションも、物件検索サイトの制作も、もっとやりたい！まだまだやれる！と思っています（お仕事お待ちしてます！）。
また、「シャーメゾンの価値を、世の中にもっと広げたい！」そんな熱い想いをもった担当者の上遠野さんと出会えたこと、一緒にお仕事ができたことも、本当に本当にうれしかったです。きっとこの1年のことは、ずっと忘れません。これからも尊敬するお客さまとして、パートナーとして、一緒に走り続けていけたらうれしいです！
おわりに・お知らせ
以上、シャーメゾンサイト制作の裏側について、担当ディレクターの視点で振り返ってみました。お伝えしたいことはほとんど出し切ったので、最後に少しお知らせをさせてください！
まず、制作実績！シャーメゾンの実績詳細については、以下のページでご紹介しています。ビジュアルをメインにご紹介しつつ、制作に関わったメンバーのクレジットやコメントも掲載しています。ぜひご覧ください！
ギャラリーサイト掲載のお知らせ
大変ありがたいことに、シャーメゾンのサイトがギャラリーサイトに掲載されました！ MUUUUU.ORGさん、81-web.comさん、MARPさん、ありがとうございます！
一生懸命つくったサイトを、良いサイトだと思ってメディアに掲載していただけること、とてもうれしく、光栄に思います！
お客さまインタビュー動画・記事も準備中です
実は、シャーメゾンサイト公開後にお客さまインタビューも実施しました！といっても、まだ記事や動画は編集中です。社内と自分に圧をかけるため、ここでお知らせしちゃいます！あべさん、編集がんばりましょうね！
neccoアドベントカレンダー2025🎄
この記事は、neccoアドベントカレンダー2025、4日目の記事です！
neccoメンバーの知見や振り返り、そして多様な視点をみなさまにお届けし、わたしたちの想いや取り組みを知っていただく機会になればと思いますので、ぜひ毎日、ご覧ください！
ということで、これで本当の終わりになります。このたびは1万字を超える制作の振り返りにお付き合いいただき、誠にありがとうございました！
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
- アシスタントデザイナー
- フロントエンドエンジニア
- アシスタントフロントエンドエンジニア
🗒 会社案内資料もご活用ください。
会社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
2025年12月3日更新
