2022.09.29WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想ツイートシェアはてブ送るPocket「BusinessPress」は国産の無料WordPressテーマです。*BusinessPress架空のWEBサイト制作シリーズ。前回に引き続き、BusinessPressでのサイト制作「その2」。前回は、テーマ・子テーマをインストールしたところまで進みました。これを最終回までに、以下の状態にまで作り上げます。初心者でも安心なPC教室(架空のサンプルサイトです)今回は、サイトのページ構成や配色についてです。最初にサイトのページ構成を考えておきます。当サイトでは、トップページ含めて以下の固定ページを作成します。お申込お問い合わせアクセスブログ(投稿用トップページ)まあ、ここらへんはそれぞれの事業内容に合わせて作成してください。各ページの作成このページ構成を基に、先に7つの固定ページをWordPress作成画面にて作成しておきます。「固定ページ」⇒「新規追加」ページのみの作成で、取りあえず内容は空白でかまいません。この時、各固定ページを一旦作成後に、パーマリンクの「URLスラッグ」を必ずアルファベット表記に変えておいてください。「BusinessPress」の場合、日本語のままだと、各ページのヘッダーが文字化けします。ちなみに、このサイトの場合は、以下のような「URLスラッグ」にしています。ホームページの表示」⇒「固定ページ」で◇ホームページは「トップ」を選択。◇投稿ページは「ブログ」を選択。コーポレート型のWordPressサイトの場合は、トップページは必ず固定ページを使います。投稿用トップページを作成する理由は、これを作っておかないと「WEBサイトのトップページ」がイコール「ブログのトップページ」と見なされてしまうからです。ブログはブログのトップページがほしいため、それ用の固定ページが1ページ必要です。「ブログのトップページ」この2つを分離できます。各ページのレイアウトは、2カラムと1カラムの選択が可能です。固定ページ:1カラム投稿ページ:2カラム(右サイドバー)でいきます。配色を考えるさらに配色も考えておきます。配色はWEBサイトのイメージを左右し、見る人の心理に大きな影響を与えるものなので、かなり重要です。ここは事前にしっかり考えた方が良いでしょう。WEBサイトに使う色は以下の3パターンが基本。背景色サイトの背景の色です。コーポレート型サイト(ビジネスサイト)の場合は、白やグレーなどの薄い色が多いです。文字が見えやすくなるからでしょう。メインカラーメインカラーは基軸となる色です。法人のサイトだとコーポレートカラーとして固有の色が決まっていたりします。アクション(アクセント)カラーアクションカラーは何らかの行動を誘発する(させたい)色です。注目して欲しい箇所とか、お問合せボタンとかに使ったりします。「ここに注目してほしい」こんな箇所はアクションカラーを使います。ここで色選びの方法をああだこうだと解説する気はないので、詳しくは下記サイトなどを参照されてください。*WEBデザインで押さえるべき配色(ベース、メイン、アクセント)の基本「3つのカラー」また、WEB上には便利な配色ツールもあるので、使ってみてください。このWEBサイトは以下の配色で作成します。出来るだけ、この5色でサイトのカラーを統一します。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。