mikke のサイトは、白い余白とティール（青緑）を一色だけ効かせた配色でまとめられ、不動産会社のサイトにありがちな情報の詰め込みを避けた作りになっています。トップページを開くと、画面の左半分に室内の写真、右半分にロゴとタグラインという左右2分割のファーストビューが目に入ります。
運営しているのは、大阪市西区西本町に本社を置く mikke株式会社です。不動産の仲介と管理を手がけ、住まいの引っ越しから店舗や企業の移転、その後のサポートまでを扱うと案内しています。ここでは、大阪市北区・大阪市中央区でのオフィス仲介や、大阪市でのオフィス移転といったテーマでサイトを探している方に向けて、このサイトのデザインと情報設計を読み解いていきます。
左右2分割のファーストビューが担う二つの役割
結論から言えば、このサイトのファーストビューは「写真で雰囲気を伝える左」と「名前を覚えてもらう右」に役割を分けた構成です。画面の左半分いっぱいに室内の写真が入り、右半分の白地には、中央よりやや下がった高さに「m!kke」のロゴが置かれ、その下に「日本の企業・働く人に輝く未来を！」というタグラインが続きます。写真から視線を右へ移した先で、社名がちょうど待っている配置です。
左の写真は1枚を貼り付けているのではなく、複数の室内写真が右から左へ途切れなく流れ続けるスライドショーになっています。画面の左半分が窓のように切り取られていて、そこを写真が通り過ぎていくため、静止して見えるページの中で、この部分だけがゆっくり動きます。写真が入れ替わっても右側のロゴの位置は動かないので、ブランド名の見え方は一定に保たれます。
ヘッダーは白地で、左にロゴ、右に「サービス」「会社概要」「問い合わせ」の3項目だけを並べています。項目の左には小さなティールの縦バーが置かれ、白と黒だけになりがちな帯に一点だけ色が差し込まれています。写真の右上には鍵のアイコンを入れたティールの円形バッジも重なっていて、最初の画面から色の使い方がそろえられています。
ティール一色に絞ったアクセント
配色は白・チャコール・ティールの3色でほぼ完結しています。ロゴの「m」と「!」、タグライン末尾の「！」、ナビゲーション脇の縦バー、円形バッジ、地球のアイコン、電話のアイコンといった小さな面積にだけティールを置き、文字と図版はチャコールでまとめています。
色数を絞ると、写真の色がそのままページの表情になります。左の写真が入れ替わるたびに画面の印象は変わりますが、ティールと白の骨格は動かないため、全体が散らかって見えません。動くものと動かないものを切り分ける考え方が、配色にもそのまま表れています。
セクションごとに左右を入れ替えるレイアウト
スクロールしていくと、Company Profile では左に建物を線だけで描いたワイヤーフレーム風の図版、右に理念のテキストが並びます。続く Service では左にテキスト、右に写真のグリッドと、左右が入れ替わります。さらに Contact では左にアイソメトリックで描いた街のイラスト、右に相談内容という配置です。
同じ左右分割でも、図版とテキストの位置を交互に入れ替えることで、スクロールの単調さが抑えられます。ファーストビューで作った「左に絵、右に言葉」という関係を基本にしながら途中でひっくり返すので、読む側は見出しを読む前に、別のセクションへ入ったことに気づけます。
セクションの間には広い余白が取られています。1画面に一つのテーマだけを置くつもりの間隔で、写真グリッドや円環グラフといった密度の高いブロックが並んでも息苦しくなりません。
英字ラベルと日本語見出しの二段構え
各セクションの角には「Company Profile」「Contract rate」「Service」「Contact」といった英字のラベルが小さく置かれ、内容そのものは日本語の見出しで示されます。英字は場所の目印、日本語は意味の説明と、役割が分かれている形です。
Company Profile の右側の見出しは「m!kkeとは」、Service の左側は「m!kkeにできること」と、ロゴをそのまま文中へ組み込んだ書き方になっています。ロゴが文字として何度も現れるので、読み進めるほどブランド名が印象に残ります。
形をそろえた「more」ボタン
各セクションの締めには、黒地に白抜きで「more」と入れたボタンが繰り返し置かれています。角の一部を切り欠いた特徴的な輪郭で、字間を広めに取った小文字が中央に収まっています。
色も形も文言も同じボタンを Company Profile・Service・Contact の3か所で使い回しているため、「続きはここから」という合図が迷いなく伝わります。ボタンの種類を増やさない判断が、そのまま導線の分かりやすさにつながっています。
イラストと実写の使い分け
このサイトの図版は、実写とイラストが役割ではっきり分けられています。Company Profile の建築ワイヤーフレーム、Contact のアイソメトリックの街、ページ下部のフラットな街並みは、どれも線と面で描いたイラストです。一方で、扱う対象そのものを見せる部分には実写が使われています。
考え方や姿勢を語る場面ではイラスト、実際の空間を見せる場面では写真、という切り分けです。Contact のイラストの街には、ロゴの「m」の形を立体に起こしたアーチが建物へ紛れ込んでいて、遊びも仕込まれています。ページ下部の街並みには人や車、街路樹まで描き込まれ、フッターの手前で視線が緩みます。
住まいと仕事場を並べた写真グリッド
Service の右側には、3列2段の6枚の写真が並びます。革張りのソファのあるリビング、屋根裏のような寝室、デスクの並ぶオフィス、緑を取り込んだラウンジ、窓の大きな執務室、カウンターのある店舗と、住まいと仕事場が混ざる並びです。
文章を読まなくても、住宅も店舗もオフィスも扱うのだと伝わる構成になっています。写真は正方形に近い比率でそろえ、細い隙間だけを空けて敷き詰めてあるため、1枚ずつを見るというより面として印象に残ります。
円環グラフで領域を見せるブロック
Contract rate のセクションには、太い円弧で描いた円環グラフが4つ横に並びます。円の中央に項目名を置き、弧の長さで割合を示す作りで、賃貸・店舗移転・オフィス・サポートという4つの領域が同じ形式でそろえられています。
同じ大きさの円を等間隔に置いて見比べさせる見せ方は、文章で列挙するよりも早く「扱う領域が4つに分かれている」と伝わります。グラフの上には地球のアイコンと日本語の見出しが置かれ、引っ越しや移転からその後のサポートまでを一続きで扱う姿勢が図として示されています。
離れた2か所に置かれる同じバナー
ページの中ほどと下部には、住宅の模型を撮った写真に「その他物件を探す」と重ねた横長のバナーが置かれています。深いカーキがかった背景色で、白と黒でまとめた周囲から浮き上がる面になっています。
同じバナーを離れた2か所に同じ見た目で置くことで、スクロールのどこで手が止まっても同じ入口に出会えます。色を持つ面がここだけに現れるので、目印としても働いています。
問い合わせまでの導線
Contact のセクションは、右側に相談を促す見出しと本文を置き、その下にティールの電話アイコン、受付時間、大きな文字の電話番号を縦に積んでいます。さらに下にはメールでの問い合わせへ進む一文と、他のセクションと同じ「more」ボタンが続きます。
電話番号はページの中でもとりわけ大きな文字で、全国の不動産を扱い、ネットに出ていない物件の資料も紹介するという説明のすぐ下に置かれています。読んで納得した直後に連絡先が目へ入る順番です。受付は平日で、土日祝を除くと添えられています。
グローバルナビゲーションは「サービス」「会社概要」「問い合わせ」の3項目だけです。フッターにもロゴと同じ3項目が並び、ページのどこにいても選択肢が変わりません。項目を絞り込む判断が、コーポレートサイトとしての分かりやすさを支えています。
条件を受け取るための入力項目
問い合わせページには、相談内容や名前、連絡先に加えて、入居を希望する時期、希望する面積、希望する場所を選ぶ項目が用意されています。面積の選択肢には、1人あたりの目安となる坪数の注記も添えられています。
物件を一覧から探させるのではなく、条件を受け取ってから提案する流れが、フォームの項目の並びからも読み取れます。希望条件を伝えれば非公開の物件資料も紹介する、というページの案内とも重なっています。
大阪市でのオフィス移転という文脈で読むと
大阪市北区や大阪市中央区でのオフィス仲介、あるいは大阪市でのオフィス移転を検討する場面では、エリアや面積、入居したい時期といった条件が先に決まり、そこから候補を絞っていくのが一般的です。サイトに求められる役割も、物件を大量に並べることだけではなく、相談の入口として機能することにあります。
mikke のサイトは、後者に寄せた構成です。トップページに検索の絞り込みを並べず、理念、扱う領域、実際の空間の写真、そして相談窓口という順で読ませます。写真グリッドが住まいと仕事場の両方を映しているのも、オフィスだけ、住まいだけと切り分けない立ち位置を表しています。
デザインの見本という観点では、扱う情報が多くなりがちな業種でも、色数と導線を絞れば軽やかな印象を作れる、という例として参考になります。白い余白を広く取り、動く要素をファーストビューの写真に限定する引き算が効いています。
まとめ：余白とティール一色で軽く見せる不動産サイト
mikke のサイトは、左右2分割のファーストビューでブランド名と空間の写真を同時に見せ、以降のセクションでは図版とテキストの左右を入れ替えながらリズムを作っています。ティール一色のアクセント、形をそろえた「more」ボタン、3項目に絞ったナビゲーションと、細部まで判断が一貫しています。
運営する mikke株式会社は、大阪市西区西本町の西本町ソーラービルに本社を構え、不動産の仲介と管理を手がけています。会社概要のページでは、大阪府知事免許の番号も公開されています。
白い余白とイラストで不動産のサイトをここまで軽く見せられるのか、という点は、写真が流れる動きも含めて実際の画面で見るとよく分かります。大阪市でオフィス移転を考えるときの相談先としても、mikkeのサイトデザインを確かめてみてください。
