知識を取り込み、そして発信する
前ページで作成したワイヤーフレームは、ページ構成や要素の配置を確認するための仮の設計図にすぎません。
今回、実際のデザイン制作にあたり、ワイヤーフレームの内容をベースに必要な修正を加え、色やフォント、余白などのスタイリングを反映したデザインカンプとして仕上げました。
この段階では、最終的な見た目や配色、細かなレイアウト調整を確認しながら、完成形に向けた具体的なデザイン作業を進めていきます。
デザインカンプとは、ワイヤーフレームをもとに色・フォント・余白などのスタイルを具体的に反映した「完成イメージ」を示す資料のことです。
ワイヤーフレームがページの構造や要素の配置を確認する仮の設計図であるのに対し、デザインカンプは最終的な画面の見た目をほぼ正確に表現しますが、実装時に調整が入ることもあります。
この段階でデザイン全体の印象を確認したり、クライアントやチーム間で共有して修正箇所を検討したりすることができます。
今回はデザインカンプをもとに仕上げていきます。
ここでは、見た目の細かな調整ではなく、HTML構造がどう変わったか、それをCSSでどう補っているかという考え方に注目して解説します。
ワイヤーフレームとデザインカンプではメニューの数が異なります。
さらに、メニューの内容も変わり、ログインのメニューが別の色で追加されています。
そのため、HTML側の修正も必要になります。
それでは、ワイヤーフレームの状態のHTML・CSSコードを確認していきます。
修正前のコード
<header>
<div id="headerInner">
<h1>株式会社サンプル食品</h1>
<div class="rightContents">
<p>
あなたの未来の健康のためにできること。<br>
安全な食品を提供することをお約束します。
</p>
<nav>
<ul>
<li><a href="">商品案内</a></li>
<li><a href="">企業情報</a></li>
<li><a href="">代表挨拶</a></li>
<li><a href="">お問合せ</a></li>
</ul>
</nav>
</div>
</div>
</header>
まずロゴについては、デザイン上は画像が支給されていますが、今回はimgタグを使用せず、h1要素によるテキスト表現を維持します。
これはサイトの主題を示す要素としての意味を優先し、装飾はCSSで担うという考え方に基づいています。
右側のコンテンツには、キャッチコピー、保有ポイント、ナビゲーションメニューが配置されています。
このうち、キャッチコピーと保有ポイントは横並びの2カラム構成とし、ナビゲーションメニューはその下に1カラムで配置する構造とします。
ただし、キャッチコピーと保有ポイントは、どちらもp要素ではあるものの、意味や役割がまったく異なります。
そのため、これらを一つのまとまりとして扱う目的でdivで囲うことはせず、それぞれが独立した情報であることをHTML構造上でも明確にします。
レイアウトの制御はCSSに委ね、要素の意味を崩さないことを優先しています。
修正後のコード
<header>
<div id="headerInner">
<h1>株式会社サンプル食品</h1>
<div class="rightContents">
<div>
<p id="catch">
あなたの未来の健康のためにできること。<br>
安全な食品を提供することをお約束します。
</p>
<p id="point">
保有ポイント：0
</p>
</div>
<nav>
<ul>
<li><a href="">商品案内</a></li>
<li><a href="">企業情報</a></li>
<li><a href="">お問合せ</a></li>
<li><a href="">会員登録</a></li>
<li><a href="">ログイン</a></li>
</ul>
</nav>
</div>
</div>
</header>
このように、キャッチコピーにcatchを、追加した段落にはpointとidを付与します。
また、ナビゲーションメニューをカンプと同じ並びにします。
引き続きCSSを見ていきましょう。
ロゴ画像はCSSで追加することにしました。
imgタグを使って追加してもかまいませんが、ここでimgを使用しない理由を説明します。
ロゴの配置のためにflexを使う目的だけで、HTMLに新たなdiv要素を追加したくないため。
h1要素をinline-blockに変更すると、高さや縦位置の調整に余計な手間がかかるため。
ロゴは見た目上は意味を持ちますが、スクリーンリーダーにとっては読み上げる情報ではないため。
疑似要素の::beforeを使うことで、構造を崩さず、ロゴとテキストをきれいに揃えられるためです。
なお、SEOやアクセシビリティ要件によっては、imgタグを使用する判断になる場合もあります。
追加コード
#headerInner h1::before {
content: '';
display: inline-block;
width: 80px;
height: 80px;
background-image: url(../img/logo.png);
background-size: contain;
vertical-align: middle;
margin-right: 16px;
}
ここで重要なのは、before要素のcontentは必ず何か入れなくてもいいということです。
空のままでもその領域は確保されるため、指定したwidth・heightの領域にcontainでサイズ通りに画像を表示できます。
inline-blockにしたことで、vertical-alignも効くので、h1ときれいに並べられます。
キャッチコピーと保有ポイントは役割が異なるため、意味構造を優先します。
レイアウトはCSSで制御し、HTMLでは意味構造を保っています。
追加・修正コード
.rightContents #catch{
display: inline-block;
box-sizing: border-box;
width: 60%;
}
.rightContents #point {
display: inline-block;
box-sizing: border-box;
text-align: right;
vertical-align: top;
width: 39%;
}
pタグは本来ブロック要素で縦に並びますが、inline-block要素にすることで、横に並べます。
また、内容が役割が異なることもありますが、ここでもdivでまとめなかったのは、flexを使うためだけに追加したくなかったということもあります。
キャッチコピーと保有ポイントは役割が異なるため、divでまとめていません。
レイアウトはCSSで制御し、HTMLでは意味構造を保っています。
追加・修正コード
.rightContents ul li a {
display: block;
padding: 0 16px;
text-align: center;
text-decoration: none;
line-height: 40px;
background-color: #4caf50;
color: #ffffff;
border-radius: 5px 5px 0 0;
font-weight: bold;
}
.rightContents ul li:last-child a {
background-color: #ff0000;
}
.rightContents ul li a:hover {
background-color: #0632c2;
}
ナビゲーションメニューはliは入れ物として扱い、aタグで内容を整えています。
ブロック要素にすることで、liの全体にまで要素が広がり、リンクの下線をtext-decorationで非表示にします。
背景色は一律で#4caf50にし、左上と右上にのみborder-radiusで角丸にします。
ただし、ログインだけは目立つように背景色を赤くしたいため、liの最後の要素のaタグの背景色を変えています。
aタグをlast-childにするとliすべて背景色が赤くなるので注意が必要です。
また、マウスを乗せた際にhoverで#0632c2の背景色に変わるようにしています。
main以降は、画像のリンクと新着情報内のテキストを変更した程度で、技術的に難しいことはしていません。
そのため、省略させてもらいますが、完成したHTMLとCSSを見ていきます。
完成したHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../css/layoutCss.css">
<title>株式会社サンプル食品</title>
</head>
<body>
<header>
<div id="headerInner">
<h1>株式会社サンプル食品</h1>
<div class="rightContents">
<div>
<p id="catch">
あなたの未来の健康のためにできること。<br>
安全な食品を提供することをお約束します。
</p>
<p id="point">
保有ポイント：0
</p>
</div>
<nav>
<ul>
<li><a href="">商品案内</a></li>
<li><a href="">企業情報</a></li>
<li><a href="">お問合せ</a></li>
<li><a href="">会員登録</a></li>
<li><a href="">ログイン</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<img class="imgSize" src="../img/sample1.jpeg" alt="メインイメージ">
<div id="mainContents">
<section>
<h2>新着情報</h2>
<article class="news">
<a href="">
<time>2026.1.10</time>
<p>新製品「花見弁当」早期予約のご案内</p>
</a>
</article>
<article class="news">
<a href="">
<time>2026.1.1</time>
<p>新年のあいさつ</p>
</a>
</article>
<article class="news">
<a href="">
<time>2025.12.1</time>
<p>新製品「冷凍タラバガニ」のご案内</p>
</a>
</article>
<article class="news">
<a href="">
<time>2025.10.1</time>
<p>新製品「根菜セット」のご案内</p>
</a>
</article>
<article class="news">
<a href="">
<time>2026.9.1</time>
<p>サイトリニューアル</p>
</a>
</article>
</section>
<aside>
<a href="">
<img src="../img/adTopBanner.png" alt="広告バナー">
</a>
</aside>
</div>
</main>
<footer>
<div id="footerInner">
<p><a href="">個人情報の取り扱いについて</a></p>
<p>〒000-0000 東京都○○区▲▲町1-2-3 サンプルビル3F</p>
<p>電話番号（代表）00-0000-0000</p>
</div>
</footer>
</body>
</html>完成したCSS
*{
margin: 0;
padding: 0;
}
body{
font-family: sans-serif;
}
/*header*/
header {
background-color: #fff5b9;
height: 100px;
}
#headerInner {
max-width: 1440px;
margin: 0 auto;
display: flex;
gap: 16px;
}
#headerInner h1 {
line-height: 100px;
flex: 1;
}
#headerInner h1::before {
content: '';
display: inline-block;
width: 80px;
height: 80px;
background-image: url(../img/logo.png);
background-size: contain;
vertical-align: middle;
margin-right: 16px;
}
.rightContents {
display: flex;
flex-direction: column;
gap: 14px;
}
.rightContents #catch{
display: inline-block;
box-sizing: border-box;
width: 60%;
}
.rightContents #point {
display: inline-block;
box-sizing: border-box;
text-align: right;
vertical-align: top;
width: 39%;
}
.rightContents ul {
display: flex;
list-style: none;
gap: 16px;
}
.rightContents ul li a {
display: block;
padding: 0 16px;
text-align: center;
text-decoration: none;
line-height: 40px;
background-color: #4caf50;
color: #ffffff;
border-radius: 5px 5px 0 0;
font-weight: bold;
}
.rightContents ul li:last-child a {
background-color: #ff0000;
}
.rightContents ul li a:hover {
background-color: #0632c2;
}
/*main*/
main {
margin: 0 auto;
max-width: 1440px;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.imgSize {
object-fit: cover;
width: 100%;
height: 300px;
}
#mainContents{
display: flex;
height: 400px;
gap: 16px;
}
#mainContents section {
border: 1px solid #4caf50;
width: 70%;
box-sizing: border-box;
}
#mainContents section h2 {
color: #ffffff;
background-color: #4caf50;
box-sizing: border-box;
height: 40px;
line-height: 40px;
padding-left: 16px;
margin-bottom: 16px;
}
#mainContents section .news {
border-bottom: 1px dotted #4caf50;
margin: 16px 16px;
}
#mainContents section .news a {
display: flex;
text-decoration: none;
font-weight: bold;
color: #000000;
}
#mainContents section .news a:hover {
color: #019309;
}
#mainContents section .news a time::before{
content: "•";
}
#mainContents aside{
width: 30%;
box-sizing: border-box;
}
#mainContents aside img {
width: 100%;
height: 400px;
}
/*footer*/
footer {
width: 100%;
height: 80px;
background-color: #cccccc;
box-sizing: border-box;
}
#footerInner {
display: flex;
gap: 16px;
max-width: 1440px;
margin: 0 auto;
}
#footerInner p {
line-height: 80px;
}
#footerInner p:first-child {
flex: 1;
}
#footerInner p:first-child a {
font-weight: bold;
color: #000000;
text-decoration: none;
}
#footerInner p:first-child a:hover {
color: #0632c2;
}
#footerInner p:last-child {
text-align: right;
}
いかがでしょう。
大幅に修正したのはヘッダーの箇所で、その他は調整や配色などを行いました。
ワイヤーフレームで構造の基礎がしっかりできていれば、CSSは調整するだけとなります。
ワイヤーフレームからデザインカンプまでに、変更が入るかどうかはわかりませんが、なぜこの手法を選んだかを考えながら行うことが重要です。
では、最後にここをクリックして書いた内容を確認してみてください。