WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 建設・不動産
  4. fil（フィル）

webcan analyze fil-toyama.com

CONSTRUCTION & REAL ESTATE · 富山県 · PICKED 2026.10.27

fil（フィル）建設・不動産のホームページデザイン参考 — モノクロ・線のモチーフ・複合施設

fil（フィル）のトップページ（PC）
PC（1440px）
fil（フィル）のトップページ（スマホ）
スマホ（375px）
出典：fil-toyama.com ↗確認日 2026.10.27
fil（フィル）建設・不動産 · 富山県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

学生シェアハウス・食堂・ランドリー・庭園を1ページにまとめ、施設ごとに営業時間と連絡先まで答える。

富山市荒町の学生シェアハウスを核にした複合施設「fil」のサイト（施工・運営は株式会社富山市民プラザ）。白と黒だけの配色で、ロゴの縦横の線をそのまま大きな飾りとして使っている。ファーストビューに3つの受賞バッジを並べ、「filとは」で建物の断面図と4つの施設を紹介したあと、食堂・ランドリー・まちなか庭園を写真と文章の交互で見せ、受賞・サポートクラブ・アクセスと続く。

  1. 01ロゴの縦横の線を、ファーストビューやフッターの大きな飾りとして繰り返し使っている
  2. 02「filとは」で、建物の断面図にフロアごとの用途（シェアハウス・ランドリー・食堂）を書き込んでいる
  3. 03食堂・ランドリーそれぞれに、営業時間・電話番号・支払い方法・Instagramを載せている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / サポートクラブお問い合わせ
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

ファーストビューに受賞歴を並べる

コピーの下に、不動産業アワード特別賞・グッドデザイン賞・土地活用モデル大賞の3つのバッジを並べている。初めて見る人にも、取り組みが外部から評価されていることがすぐ伝わる。

入居者と地域の利用者で入口を分ける

右上には入居希望者向けの黒い「入居募集要項」ボタンと「内見申込」のリンク、ページの中では食堂・ランドリーの営業時間や駐車場の案内を載せている。スマホでは画面下に「入居募集要項」のボタンを固定している。

施設ごとの「今すぐ知りたいこと」に答える

ランドリーは「年中無休 / 24時間」と台数、空き状況の確認ページへのボタン、食堂は朝食・ランチ・カフェの時間とノマドワークの可否まで書いている。来る前に確かめたいことがその場で分かる。

チェック項目は 2026.10.27 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#000000ロゴ・線・ボタン
#333333本文テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Sans JP（Adobe Fonts）
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h222px / 5001.0018px / 500
h312px / 5001.0010px / 500
本文（p）11px / 5001.0011px / 500
ボタン0px / 500NaN0px / 500

実測値（PC 1440px・SP 375px、2026.10.27 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    学生シェアハウス・食堂・ランドリー・まちなか庭園・アクセス・お問い合わせのナビと、右上に黒い「入居募集要項」ボタン。その下にサポートクラブ・内見申込のリンク。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    コピーの下に写真のスライドと3つの受賞バッジ。右にロゴの線の飾りと縦書きのキャッチ。

    ファーストビュー／写真＋実績バッジ型
  3. 03

    filとは

    説明文と建物の断面図、4つの施設へのボタン。

    コンセプト／写真＋メッセージ型
  4. 04

    Facility Image

    共用部・外観・食堂・居室などの写真を横にスライドし、場所の名前を添える。

    事例・実績／写真グリッド型
  5. 05
  6. 06

    食堂・ランドリー・まちなか庭園

    写真と文章を左右交互に。営業時間・電話・支払い方法・Instagramのボタン。

    強み・選ばれる理由／写真とテキストの交互型
  7. 07

    受賞

    3つの受賞バッジと説明、「詳しく見る」。

    イベント・キャンペーン／特集バナー並び型
  8. 08

    fil サポートクラブ

    線の枠で囲み、黒い「サポートクラブお問い合わせ」ボタン。

    行動喚起／資料請求・来場予約型
  9. 09

    アクセス

    住所と「荒町駅」から徒歩約1分、Google Mapへのリンク。

    アクセス／地図＋時間表型
  10. 10

    フッター

    施設ごとのInstagram、施工・運営会社と施設ごとの電話番号。

    フッター／店舗情報＋ナビ型
  11. 11

    スマホ追従ボタン

    画面下に「入居募集要項」。

    行動喚起／SP追従ボタンバー型
fil（フィル）の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

01ヘッダーヘッダー／ロゴ＋ナビ＋1ボタン型
fil（フィル）のヘッダー（PC）PC
fil（フィル）のヘッダー（スマホ）SP
02ファーストビューファーストビュー／写真＋実績バッジ型
fil（フィル）のファーストビュー（PC）PC
fil（フィル）のファーストビュー（スマホ）SP
03filとはコンセプト／写真＋メッセージ型
fil（フィル）のfilとは（PC）PC
fil（フィル）のfilとは（スマホ）SP
06食堂・ランドリー・まちなか庭園強み・選ばれる理由／写真とテキストの交互型
fil（フィル）の食堂・ランドリー・まちなか庭園（PC）PC
fil（フィル）の食堂・ランドリー・まちなか庭園（スマホ）SP
07受賞イベント・キャンペーン／特集バナー並び型
fil（フィル）の受賞（PC）PC
fil（フィル）の受賞（スマホ）SP
08fil サポートクラブ行動喚起／資料請求・来場予約型
fil（フィル）のfil サポートクラブ（PC）PC

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.27 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01色を白と黒に絞り、ロゴの形をそのまま飾りとして繰り返す
  2. 02受賞歴はファーストビューにバッジで並べる
  3. 03複数の施設があるなら、施設ごとに営業時間・電話・支払い方法を同じ並びで載せる
  4. 04入居・契約の入口はヘッダー右上とスマホの追従ボタンに固定する

FAQよくある質問

filのサイトで使われているフォントは？

Adobe Fonts で配信されている Noto Sans JP です。Google Fonts の Noto Sans JP でも同じ見た目にできます。

白と黒だけの配色でも、温かみは出せますか？

このサイトでは、木の内装や料理、庭の緑など色のある写真を大きく使い、文字や線を白黒に絞っています。写真に色を任せると、配色を絞っても冷たい印象になりにくくなります。

どんな業種の参考になりますか？

シェアハウスや賃貸住宅、カフェやコインランドリーを併設した複合施設、まちづくりの拠点施設など、利用者の種類が複数ある施設のサイトに応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はfil（フィル）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの建設・不動産の参考サイト

建設・不動産のすべてを見る6件
webcan design --sitemap fil-toyama.com

fil（フィル）のサイトマップ

  • 2ページ
  • 5ページ内セクション
  • トップページ/
    • 食堂/#kitchenページ内
    • ランドリー/#landryページ内
    • まちなか庭園/#gardenページ内
    • アクセス/#accessページ内
    • サポートクラブ/#supportページ内
  • 学生シェアハウス/sharehouse.html

外部リンクInstagram

2026.10.27 にトップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の建設・不動産会社のサイトを。

「fil（フィル）のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら