WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想

WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想

BusinessPress」は国産の無料WordPressテーマです。

BusinessPress

GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター(Gutenberg)に完全対応。
レスポンシブデザイン。
コーポレート型(ビジネスサイト)テーマ。

架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その2」。

前回は、テーマ・子テーマをインストールしたところまで進みました。

これを最終回までに、以下の状態にまで作り上げます。
TAKADAパソコン教室 – ○○県○○市 初心者でも安心なPC教室
(架空のサンプルサイトです)

今回は、サイトのページ構成や配色についてです。

~ 目次 ~

  • ページ構成
  • 各ページの作成
  • レイアウトとカラム数
  • 配色を考える

ページ構成

最初にサイトのページ構成を考えておきます。

当サイトでは、トップページ含めて以下の固定ページを作成します。

トップ
(お知らせ・教室特徴・受講手順・受講生感想・Q&A)
講座紹介
講師紹介
無料体験学習お申込
お問い合わせ
アクセス
ブログ(投稿用トップページ)

まあ、ここらへんはそれぞれの事業内容に合わせて作成してください。

各ページの作成

このページ構成を基に、先に7つの固定ページをWordPress作成画面にて作成しておきます。

WordPress管理画面
固定ページ」⇒「新規追加

ページのみの作成で、取りあえず内容は空白でかまいません。

この時、各固定ページを一旦作成後に、パーマリンクの「URLスラッグ」を必ずアルファベット表記に変えておいてください。

「BusinessPress」の場合、日本語のままだと、各ページのヘッダーが文字化けします。

ちなみに、このサイトの場合は、以下のような「URLスラッグ」にしています。
◇トップ:top
◇講座紹介:course
◇講師紹介:teacher
◇無料体験学習お申込:free trial
◇お問い合わせ:contact
◇アクセス:access
◇ブログ:blog

次に、WordPress管理画面「設定」⇒「表示設定
ホームページの表示」⇒「固定ページ」で
◇ホームページは「トップ」を選択。
◇投稿ページは「ブログ」を選択。

コーポレート型のWordPressサイトの場合は、トップページは必ず固定ページを使います。

また、投稿用トップページを作成する理由は、
これを作っておかないと「WEBサイトのトップページ」がイコール「ブログのトップページ」と見なされてしまうからです。

ブログはブログのトップページがほしいため、それ用の固定ページが1ページ必要です。

これで
「WEBサイト全体のトップページ」
「ブログのトップページ」
この2つを分離できます。

レイアウトとカラム数

次に、レイアウト。

各ページのレイアウトは、2カラムと1カラムの選択が可能です。

このサイトでは、
固定ページ:1カラム
投稿ページ:2カラム(右サイドバー)
でいきます。

配色を考える

さらに配色も考えておきます。

配色はWEBサイトのイメージを左右し、見る人の心理に大きな影響を与えるものなので、かなり重要です。
ここは事前にしっかり考えた方が良いでしょう。

WEBサイトに使う色は以下の3パターンが基本。
背景色
メインカラー
アクション(アクセント)カラー

メインカラーは基軸となる色です。
法人サイトだとコーポレートカラーとして固有の色が決まっていたりします。

アクションカラーは何らかの行動を誘発する(させたい)色です。
特に注目して欲しい箇所とか、お問合せボタンとかに使ったりします。
「このボタンをクリックしてほしい」
「ここに注目してほしい」
こんな箇所はアクションカラーを使います。

で、ここで色選びの方法をああだこうだと解説する気はないので、詳しくは下記サイトなどを参照されてください。
WEBデザインで押さえるべき配色(ベース、メイン、アクセント)の基本「3つのカラー」

また、WEB上には便利な配色ツールもあるので、使ってみてください。

このWEBサイトは以下の配色で作成します。

◇メインカラー:青 #00bcd4
◇アクションカラー:オレンジ #ff6f61
◇背景色:白 #ffffff

この基本3色に以下の2色を加えて、

◇メインカラー(濃)#049ca8 一部の文字色に使用
◇メインカラー(薄)#e1ffff 一部の背景色に使用

出来るだけ、この5色でサイトのカラーを統一します。

 

ken
この「BusinessPress」シリーズのまとめページを作成しました。

 

関連記事
WordPressテーマ「BusinessPress」でWEBサイトを制作(その12)追加応用編

WordPressテーマ「BusinessPress」でWEBサイトを制作(その12)追加応用編

2020.10.01
WordPressテーマ「BusinessPress」でWEBサイトを制作(その11)各固定ページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その11)各固定ページの作成

2020.09.28
WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成

2020.09.23
WordPressテーマ「BusinessPress」でWEBサイトを制作(その9)ブログページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その9)ブログページの作成

2020.09.17
WordPressテーマ「BusinessPress」でWEBサイトを制作(その8)続々続・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その8)続々続・トップページのコンテンツ作成

2020.09.10
WordPressテーマ「BusinessPress」でWEBサイトを制作(その7)続々・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その7)続々・トップページのコンテンツ作成

2020.09.04
WordPressテーマ「BusinessPress」でWEBサイトを制作(その6)続・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その6)続・トップページのコンテンツ作成

2020.08.27
WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成

2020.08.24
WordPressテーマ「BusinessPress」でWEBサイトを制作(その4)プラグインの各設定

WordPressテーマ「BusinessPress」でWEBサイトを制作(その4)プラグインの各設定

2020.08.19
WordPressテーマ「BusinessPress」でWEBサイトを制作(その3)テーマの各設定

WordPressテーマ「BusinessPress」でWEBサイトを制作(その3)テーマの各設定

2020.08.12
WordPressテーマ「BusinessPress」でWEBサイトを制作(その1)準備編

WordPressテーマ「BusinessPress」でWEBサイトを制作(その1)準備編

2020.08.03
テーマの知識が無いと困る!? 今後のWordPress制作

テーマの知識が無いと困る!? 今後のWordPress制作

2017.08.09

 

PRリンク