その他

デザインをHTML・CSSにしてWordPress化する流れ｜Noah Lab制作の実例

PR

当サイトではアフィリエイト広告を利用しています。

はじめに

Webサイトを作るとき、最初に考えるのがデザインです。

しかし、デザインが完成しただけでは、Webサイトとして動きません。

見出しや画像、文章の構造をHTMLで作ります。その後、CSSで色や余白、配置を整えます。

さらに、WordPressを使う場合は、記事やカテゴリーを管理できるようにテーマを作ります。

私もNoah Labを制作する中で、この流れを一つずつ進めてきました。

最初は、デザインをどのようにコードに置き換えるのか迷うこともありました。

そこで今回は、実際に制作しているNoah Labを例にします。デザインからHTML、CSS、WordPressへ進む流れを紹介します。

Webサイトはどのような流れで作る？

まず、Webサイトを作る工程を整理します。

1. サイトの目的や構成を考える
        ↓
2. デザインを決める
        ↓
3. HTMLで構造を作る
        ↓
4. CSSで見た目を整える
        ↓
5. WordPressのテーマにする
        ↓
6. 表示と動作を確認する
        ↓
7. 修正しながら改善する

それぞれの工程には、違う役割があります。

例えば、デザインでは完成形を考えます。一方、HTMLではページの構造を作ります。

そして、CSSで見た目を整えます。最後にWordPressへ組み込むことで、記事を管理できるサイトにしていきます。

STEP1｜Noah Labの目的とページ構成を考える

最初に、どのようなブログを作るのかを考えました。

Noah Labは、Web制作について学んだことや、実際に制作して分かったことを発信するブログです。

そのため、記事を読むだけでなく、カテゴリーから探したり、関連する記事へ移動したりできる構成を考えました。

必要なページを整理する

まず、サイトに必要なページを洗い出します。

  • トップページ
  • 記事一覧ページ
  • カテゴリー別の記事一覧
  • 検索ページ
  • 記事詳細ページ
  • プロフィール
  • お問い合わせ
  • プライバシーポリシー
  • 免責事項

次に、それぞれのページの役割を決めました。

例えば、トップページではブログの雰囲気や新着記事を紹介します。一方、記事詳細ページでは本文を読みやすく見せます。

このように役割を分けておくと、デザインやHTMLを考えるときに迷いにくくなります。

STEP2｜デザインで完成形を考える

ページ構成が決まったら、次はデザインです。

Noah Labでは、柔らかい印象になるように色や余白を考えました。

また、ヘッダーや記事カードなど、複数のページで使うパーツも整理しました。

配色を決める

例えば、Noah Labでは次のような色を使っています。

背景：#FFFDF8
サブ背景：#F7F3EE
本文：#5E5A57
補助文字：#8B8580
アクセント：#A8B8C8
枠線：#E8E1D8

背景、本文、アクセントで色の役割を分けました。

さらに、同じ色を複数の場所で使えるようにしています。

レイアウトを考える

色だけでなく、要素の配置も考えます。

例えば、ヘッダーではロゴ、検索、ナビゲーションの配置を決めました。

記事一覧では、PCで複数のカードを並べます。一方、スマートフォンでは1列にして読みやすくします。

この段階で、PCとスマートフォンの見え方も意識しておくことが大切です。

STEP3｜HTMLでページの構造を作る

デザインの方向性が決まったら、HTMLを書いていきます。

HTMLは、Webページの構造を作るための言語です。

見出しや文章、画像、リンクなどを、役割に合わせて配置します。

Noah Labのメインビジュアルを例にする

Noah Labのトップページには、「ゆるり、学んで、つくって。」という見出しがあります。

その下には、ブログの内容を紹介する文章を配置しています。

この部分を簡略化すると、次のようなHTMLになります。

<section class="home-hero">
    <div class="home-hero-content">
        <h1 class="home-hero-title">
            ゆるり、学んで、つくって。
        </h1>

        <p class="home-hero-text">
            のあのWeb制作、のんびり成長記録。
        </p>

        <a class="home-hero-button" href="/articles/">
            Articlesを見る
        </a>
    </div>
</section>

ここでは、見出しをh1、説明文をp、リンクをaで表現しています。

また、sectionでメインビジュアルのまとまりを作っています。

このように、デザインに含まれる要素をHTMLに置き換えていきます。

見た目よりも先に構造を考える

HTMLを書くときは、色や装飾だけに注目しないようにします。

まず、何が見出しなのかを考えます。次に、文章やリンクがどのような役割なのかを整理します。

そのうえで、必要なHTML要素を選びます。

構造を整理しておくと、後からCSSを調整するときにも扱いやすくなります。

STEP4｜CSSでデザインを再現する

HTMLで構造を作ったら、次はCSSです。

CSSでは、色や文字サイズ、余白、配置などを調整します。

先ほどのメインビジュアルにも、CSSを追加してみます。

.home-hero {
    padding: 80px 24px;
    background-color: #FFFDF8;
}

.home-hero-content {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

.home-hero-title {
    margin: 0 0 24px;
    color: #5E5A57;
    font-size: 40px;
    line-height: 1.5;
}

.home-hero-text {
    color: #8B8580;
    line-height: 1.8;
}

.home-hero-button {
    display: inline-block;
    margin-top: 24px;
    padding: 12px 24px;
    background-color: #A8B8C8;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .home-hero {
        padding: 48px 20px;
    }

    .home-hero-title {
        font-size: 28px;
    }
}

まず、背景色や文字色を設定しました。

次に、文字サイズや余白を調整しています。また、ボタンには背景色と角丸を指定しました。

さらに、画面幅が小さいときは、余白と文字サイズを変更しています。

このように、CSSを使うことでデザインに近づけていきます。

CSSは役割ごとに分ける

サイト全体のCSSが増えてくると、1つのファイルだけでは管理しにくくなります。

そこで、Noah Labでは役割ごとにCSSファイルを分けています。

css/
├── reset.css
├── variables.css
├── common.css
├── layout.css
├── header.css
├── footer.css
├── sidebar.css
├── card.css
├── home.css
├── articles.css
├── category.css
├── search.css
└── single.css

例えば、header.cssにはヘッダーのスタイルをまとめます。

一方、card.cssには記事カードのスタイルをまとめます。

また、variables.cssでは共通の色などを管理しています。

:root {
    --bg-main: #FFFDF8;
    --bg-sub: #F7F3EE;
    --text-main: #5E5A57;
    --accent-blue: #A8B8C8;
    --border-color: #E8E1D8;
}

このようにCSS変数を使うと、同じ色を複数の場所で使えます。

そのため、後から配色を変更するときも管理しやすくなります。

STEP5｜HTMLとCSSをWordPressのテーマにする

HTMLとCSSで見た目を整えたら、次はWordPress化です。

HTMLとCSSだけでも、Webページは作れます。

しかし、ブログでは記事の追加や編集も必要です。

そこで、WordPressのテーマとして組み込みます。

ページごとにテンプレートを分ける

Noah Labでは、ページの役割に合わせてテーマファイルを分けています。

ファイル 役割
front-page.php トップページ
articles.php 記事一覧の固定ページテンプレート
single.php 記事詳細ページ
category.php カテゴリー別の記事一覧
search.php 検索結果
header.php 共通ヘッダー
footer.php 共通フッター
sidebar.php サイドバー
functions.php テーマの機能や設定

このように、役割ごとにファイルを分けています。

例えば、ヘッダーを修正したいときはheader.phpを確認します。一方、記事詳細の表示を変えたいときはsingle.phpなどを確認します。

なお、実際に読み込まれるテンプレートはWordPressのテンプレート階層やテーマの設定によって決まります。

共通パーツを再利用する

WordPressのテーマでは、ヘッダーやフッターを共通パーツとして使えます。

例えば、テンプレートでは次のように記述します。

<?php get_header(); ?>

<main class="site-main">
    <!-- ページごとの内容 -->
</main>

<?php get_footer(); ?>

このコードでは、最初にヘッダーを読み込みます。

次に、ページ固有の内容を表示します。そして、最後にフッターを読み込みます。

そのため、各ページでヘッダーやフッターを毎回書き直す必要がありません。

記事をWordPressから表示する

WordPress化すると、記事のタイトルや本文を管理画面から登録できます。

さらに、テンプレートから記事データを表示できます。

例えば、記事タイトルの表示にはthe_title()を使います。

<h2>
    <a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>
    </a>
</h2>

この例では、記事のタイトルとリンク先をWordPressから取得しています。

実際には、投稿ループなどの中で使います。

つまり、HTMLで固定の文章を書く場合とは違い、登録した記事を自動で表示できるようになります。

STEP6｜必要な機能を追加する

Webサイトによっては、見た目以外の機能も必要です。

Noah Labでは、検索やメニューの開閉なども考えて制作しています。

例えば、ヘッダーのハンバーガーメニューでは、ボタンを押すとメニューが開きます。

ボタンをクリック
      ↓
メニューの状態を変更
      ↓
メニューを表示または非表示にする

こうした操作には、JavaScriptを使うことがあります。

ただし、すべてのパーツにJavaScriptが必要なわけではありません。

そのため、必要な機能に合わせて使い分けます。

STEP7｜PCとスマートフォンで表示を確認する

デザインをコードに置き換えたら、表示を確認します。

コード上では問題がなさそうでも、実際にブラウザで見ると想定と違うことがあります。

例えば、画像がはみ出したり、見出しが不自然に折り返されたりすることがあります。

そのため、PCだけでなくスマートフォンでも確認します。

確認したいポイント

  • ヘッダーが正しく表示されるか
  • メニューを開閉できるか
  • 記事カードがはみ出していないか
  • 画像の大きさは適切か
  • 文章や見出しが読みやすいか
  • サイドバーの位置は適切か
  • リンクやボタンが動作するか
  • 横スクロールが発生していないか

問題が見つかったら、原因を調べて修正します。

そして、修正後にもう一度確認します。

このように、表示確認と改善を繰り返すことが大切です。

実際にNoah Labを制作して分かったこと

デザインをそのままコードにするのは難しい

デザインを見れば完成形は想像できます。

しかし、それをどのHTML要素で表現するのかは別の問題です。

さらに、CSSで位置やサイズを調整する必要もあります。

そのため、見た目を考えることと、実際にコードを書くことの両方が必要だと感じました。

HTMLとCSSの役割を分けると整理しやすい

最初は、見た目を再現することに意識が向きがちでした。

しかし、構造と装飾を分けて考えると、コードを整理しやすくなります。

まずHTMLで構造を作ります。

次にCSSで見た目を整えます。

この順番を意識することで、修正する場所も考えやすくなりました。

WordPress化では別の仕組みも理解する必要がある

HTMLとCSSでページを作れるようになっても、それだけではWordPressのテーマは完成しません。

例えば、記事を表示する仕組みが必要です。

また、共通のヘッダーやフッターを読み込むことも考えます。

そのため、WordPress独自のテンプレートや関数についても学ぶ必要がありました。

完成後も修正は続く

一度デザインを再現すれば、すべてが完成するわけではありません。

実際に表示すると、余白や文字サイズが気になることもあります。

一方で、スマートフォンでは別の問題が見つかることもあります。

そのため、確認と修正を繰り返しながら、少しずつ完成度を高めています。

デザインからWordPress化する流れを振り返る

ここまで、Noah Labを例に制作の流れを紹介しました。

最後に、それぞれの役割を整理します。

工程 行うこと
デザイン レイアウト、配色、文字、余白を考える
HTML 見出し、文章、画像、リンクなどの構造を作る
CSS 色、サイズ、余白、配置を整える
WordPress テンプレートや投稿データを管理できるようにする
表示確認 PCやスマートフォンで確認し、修正する

それぞれの工程は、独立しているわけではありません。

デザインを考えるときには、HTMLで実現できる構造も意識します。

また、CSSを書くときには、スマートフォンでの見え方も考えます。

そして、WordPress化したあとも、実際の画面を確認しながら改善します。

まとめ

Webサイトを作るときは、デザインからHTML、CSS、WordPressへと段階的に進めていきます。

まず、サイトの目的と必要なページを整理します。

次に、デザインで見た目を考えます。

その後、HTMLで構造を作り、CSSでデザインを再現します。

さらに、WordPressのテーマに組み込むことで、記事やカテゴリーを管理できるようにします。

Noah Labを制作する中でも、見た目を考えることだけではなく、構造やファイルの分け方も大切だと分かりました。

また、完成後に表示を確認し、必要な部分を修正することも欠かせません。

これからWeb制作を始める方は、最初からすべてを完璧に作ろうとする必要はありません。

まずは小さなパーツから、デザインをHTMLとCSSに置き換えてみてください。

そして、少しずつWordPress化に挑戦していくと、各工程のつながりも理解しやすくなります。

Related

関連記事