LUMETRAQ｜コーポレートサイト制作（自主制作）

WORKS
2026.10.11

01WORKS / WEB DESIGN

LUMETRAQ

CONNECT YOUR FUTURE.
総合建設会社 コーポレートサイト
架空企業・自主制作

LUMETRAQ株式会社 PC版ファーストビュー
LUMETRAQ株式会社 スマホ版ファーストビュー

※LUMETRAQ株式会社は架空の企業です。ポートフォリオ用に制作した自主制作のデモサイトで、実在の企業・案件ではありません。
実在する同名・類似名の企業・団体・施設とは、一切関係ありません。

02PROJECT OVERVIEW

制作概要

PROJECT
LUMETRAQ株式会社（ルメトラック） コーポレートサイト（架空企業・自主制作）
CATEGORY
総合建設会社（中規模建築工事・施工管理）の企業サイト
TYPE
1ページ構成のコーポレートサイト
TARGET
建築業界に関心のある20〜30代の求職者
DEVICE
PC / タブレット / スマートフォン対応
SCOPE
情報設計 / デザイン / コーディング
TECHNOLOGY
HTML / CSS / JavaScript

03CONCEPT

CONNECT
YOUR FUTURE.

暮らしと未来を、つなぐ。

建物を「つくる会社」ではなく、人と技術、今と未来を「つなぐ会社」として見せる。青空のような清潔感と、誠実さが伝わる企業サイトを目指しました。

  • 01

    白い余白の中の青

    青はボタン・線・数字などに絞り、余白をたっぷり取って見通しの良い画面にしました。

  • 02

    「つなぐ」を表す青い線

    見出しから伸びる細い青いラインで、人・技術・街のつながりを表現しています。

  • 03

    若手に届く誠実さ

    仕事・人・職場がひと目で分かる構成で、求職者が安心して読み進められるようにしました。

04WEBSITE DESIGN

PCサイト全体像

トップから問い合わせまで、1ページの流れを自動スクロールでご覧いただけます。

lumetraq-sample.example
LUMETRAQ PC版 全体（1/9） LUMETRAQ PC版 全体（2/9） LUMETRAQ PC版 全体（3/9） LUMETRAQ PC版 全体（4/9） LUMETRAQ PC版 全体（5/9） LUMETRAQ PC版 全体（6/9） LUMETRAQ PC版 全体（7/9） LUMETRAQ PC版 全体（8/9） LUMETRAQ PC版 全体（9/9）

自動でスクロールします（マウスを乗せると停止）自動でスクロールします（タップで一時停止／再開）スクロールして、サイト全体をご覧いただけます

05RESPONSIVE DESIGN

スマートフォン表示

LUMETRAQ スマホ版 全体（1/18） LUMETRAQ スマホ版 全体（2/18） LUMETRAQ スマホ版 全体（3/18） LUMETRAQ スマホ版 全体（4/18） LUMETRAQ スマホ版 全体（5/18） LUMETRAQ スマホ版 全体（6/18） LUMETRAQ スマホ版 全体（7/18） LUMETRAQ スマホ版 全体（8/18） LUMETRAQ スマホ版 全体（9/18） LUMETRAQ スマホ版 全体（10/18） LUMETRAQ スマホ版 全体（11/18） LUMETRAQ スマホ版 全体（12/18） LUMETRAQ スマホ版 全体（13/18） LUMETRAQ スマホ版 全体（14/18） LUMETRAQ スマホ版 全体（15/18） LUMETRAQ スマホ版 全体（16/18） LUMETRAQ スマホ版 全体（17/18） LUMETRAQ スマホ版 全体（18/18）

スマホ幅に合わせて、写真と文章の縦積み・大きなタップ領域・読みやすい行間に組み直しました。PCの縮小ではなく、スマホ専用に設計した表示です。

スマホ版 ファーストビュー
FIRST VIEW
スマホ版 SERVICE
SERVICE
スマホ版 RECRUIT
RECRUIT

06DESIGN DETAILS

デザインのこだわり

COLOR

配色

白い余白に、3色の青だけを重ねる配色です。清潔感と誠実さを保ちつつ、ボタンや数字で行動を促します。

  • MAIN BLUE
    #2F80ED
  • SKY BLUE
    #56B4FF
  • DEEP BLUE
    #1456A0
  • BACKGROUND
    #F7FBFF
LUMETRAQ 配色（お問い合わせとフッター）

TYPOGRAPHY

タイポグラフィ

見出しは太めの日本語ゴシックで力強く、英字は字間を広げて軽やかに。本文は行間を広く取り、長めの文章も読みやすく整えました。

LUMETRAQ タイポグラフィ（ABOUTセクション）

INFORMATION DESIGN

情報設計

トップから問い合わせまで、「どんな会社か」「何をしているか」「どんな人か」の順に1ページで読める流れにしました。施工事例は、所在・用途・階数・構造の4項目で統一しています。

LUMETRAQ 情報設計（WORKSセクション）

RECRUIT CONTENT

採用コンテンツ

青い面にメッセージと3つの特徴をまとめ、写真と重ねて見せました。募集職種や選考の流れも、迷わず進める導線にしています。

LUMETRAQ 採用コンテンツ（RECRUITセクション）

07MOTION DESIGN

実際の動き

静止画では伝わらない、スクロールや操作に合わせた動きを、短い動画でご紹介します。再生ボタンで、ご自身のタイミングでご覧いただけます（音声はありません）。

lumetraq-sample.example

PC / 約35秒

スクロールと操作で動く、PCサイト

  • HERO写真がゆっくり現れ、英字コピー・日本語・青いラインが順に表示されます。
  • SCROLL見出しの下線や NOW→FUTURE の線が伸び、要素がふわっと現れます。
  • COUNT UP従業員数などの数字が、カウントアップして表示されます。
  • WORKS矢印ボタンで、施工事例が横にスクロールします。
  • NEWSカテゴリのボタンで、お知らせの一覧を絞り込めます。
  • HEADERスクロールでヘッダーが白くなり、左の進行ラインと「先頭へ戻る」ボタンが現れます。

SMARTPHONE / 約34秒

指で読み進める、スマホサイト

  • HERO写真がゆっくり現れ、英字コピー・日本語が順に表示されます。
  • SCROLL下線や線が伸び、要素がふわっと現れます。数字はカウントアップします。
  • MENUハンバーガーボタンで全画面のメニューが開き、もう一度押すと閉じます。
  • WORKS / NEWS施工事例は横にスクロール、お知らせはカテゴリで絞り込めます。

※LUMETRAQ株式会社は架空の企業です。動画は、実際のLUMETRAQサイトの動きを画面収録したものです（音声なし）。矢印やタップの表示は、操作を分かりやすくするための録画用の表示で、サイトの機能ではありません。HERO の動きは、初回表示と同じ演出を最初から再生して収録しています。

08BACK TO WORKS

WORKS一覧へ戻る

※LUMETRAQ株式会社は架空の企業です。掲載している会社情報・施工事例・社員・採用情報は、すべてポートフォリオ用に創作した架空の設定で、実在の企業・施設・人物・募集とは関係ありません。
実在する同名・類似名の企業・団体・施設とは、一切関係ありません。

コメント