コーポレートサイトの基本構成（UI/UXの実務基礎）
コーポレートサイトは、企業の「顔」となるWebサイト。 実務では以下の構成がほぼ必須で、どの企業でも大きくは変わらない。
- ヘッダー
- メインビジュアル
- 事業紹介
- ニュース・お知らせ
- 会社概要
- フッター
ここからは、初心者でも理解できるように、実務レベルのUI構成 → コード例 → 深掘りポイントの順で解説する。
ヘッダー（Header）
ヘッダーの役割
ヘッダーは「企業の第一印象」。 ユーザーが迷わないように、ロゴ・ナビゲーション・問い合わせ導線をシンプルに配置する。
HTML構造（例題）
<header class="header">
<div class="header__logo">MONO Corp.</div>
<nav class="header__nav">
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">事業紹介</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
SCSS（初心者向けに噛み砕き）
.header {
display: flex; // ロゴとナビを横並びにする
justify-content: space-between;
align-items: center;
padding: 20px;
&__logo {
font-size: 24px;
font-weight: bold;
}
&__nav ul {
display: flex;
gap: 20px; // メニュー同士の間隔
list-style: none;
}
&__nav a {
text-decoration: none;
color: #333;
font-weight: 600;
&:hover {
color: #0078ff; // ホバー時のアクセントカラー
}
}
}
深掘り：なぜ SCSS の「&」が重要なのか
SCSSの & は「親要素を引き継ぐ」記号。 .header__nav a:hover のような階層構造を、読みやすく・管理しやすく書ける。
初心者が最初につまずくポイントなので、ここはしっかり覚えてほしい。
メインビジュアル（MV / Hero）
実務での役割
企業の理念やサービスを「一瞬で伝える」ための最重要エリア。 写真＋キャッチコピー＋ボタンの3点セットが基本。
HTML例
<section class="hero">
<h1>未来をつくる企業へ。</h1>
<p>MONOはテクノロジーで社会を前進させます。</p>
<a href="#" class="hero__btn">事業を見る</a>
</section>
SCSS例
.hero {
background: url('hero.jpg') center/cover no-repeat;
color: #fff;
padding: 120px 40px;
text-align: center;
&__btn {
display: inline-block;
margin-top: 20px;
padding: 12px 32px;
background: #0078ff;
border-radius: 4px;
color: #fff;
text-decoration: none;
&:hover {
background: #005fcc;
}
}
}
深掘り：background: center/cover の意味
- center → 画像の中心を基準に表示
- cover → 画面いっぱいに拡大して隙間をなくす
実務ではほぼ必ず使うので、覚えておくとデザインの質が一気に上がる。
事業紹介（Service Section）
HTML例
<section class="services">
<div class="service">
<h3>AIソリューション</h3>
<p>企業のDXを支援します。</p>
</div>
<div class="service">
<h3>Web開発</h3>
<p>高品質なWebサイトを制作します。</p>
</div>
</section>
SCSS例
.services {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
padding: 60px 20px;
.service {
background: #f8f8f8;
padding: 20px;
border-radius: 8px;
h3 {
margin-bottom: 10px;
}
}
}
深掘り：Grid の「repeat(2, 1fr)」とは
- repeat(2, 1fr) → 「幅1frの要素を2つ並べる」
- fr → 余白を均等に分配する単位
初心者は grid-template-columns: 1fr 1fr; と書きがちだが、repeatの方が保守性が高い。
ニュース・お知らせ（News Section）
HTML例
<section class="news">
<article class="news__item">
<time>2026.08.10</time>
<p>新サービスをリリースしました。</p>
</article>
</section>
SCSS例
.news {
padding: 40px 20px;
&__item {
border-bottom: 1px solid #ddd;
padding: 12px 0;
time {
font-size: 14px;
color: #666;
}
}
}
フッター（Footer）
HTML例
<footer class="footer">
<p>© 2026 MONO Corp.</p>
</footer>
SCSS例
.footer {
background: #222;
color: #fff;
text-align: center;
padding: 20px;
}
まとめ：初心者がまず覚えるべき3つのUI設計ポイント
- レイアウトはFlexとGrid
- SCSSの入れ子構造で管理性UP
- 余白・フォント・色の3要素がデザインの質を決める
