コーポレートサイト(企業ホームページ)を作る手順 その1 一回目打ち合わせからサンプル作成まで

今回はちょっと実践的なBLOGです。

habakiri

habakiriはWordPressのテーマです。
特徴として

  • 柔軟なカスタマイズ性
  • Bootstrapを使っていてレスポンシブ対応(スマートフォン対応)
  • その他もろもろ

のステキなテーマです。

このテーマを使って以下のホームページを構築してみます。

サンプル要件

制作の例として

  • 建築デザイン会社 「ヨキデザイン」
  • ホームページが古くなったので今風にしたい
  • ブログはしないけど制作物件を追加していきたい
  • 明るい感じにしてほしい。緑ベースで。

という要件にします。

追加条件として

  • ロゴはすでにある(データで大きいサイズがある)
  • 会社案内等は古いものの内容で
  • 制作物件は写真あり

とします。
これらは第一回目の打ち合わせで聞き取りが済んだものとします。

制作工程1 構成

それでは制作に入ります。まずはサイトマップ。
基本的な構成として

  • Topページ(ホームページ)
  • 会社案内
  • 事業案内
  • お問い合わせ
  • ブログ(物件紹介)

の5ページ、ブログはどんどん追加できるものとします。

制作工程2 枠を決める

ホームページの大体の枠を決めます。

A.サイドバーなし

no_bar
サイドバーなしです。
今回のように内容が少ない場合はこのパターンが適しています。

B.サイドバーあり(右側、左側)

r_barl_bar

EC(通販サイト)などに多い形です。
店舗様で、商品を多数掲載したい場合にも使います。

今回はA.サイドバーなしを採用します。

製作工程3 サンプルの作成

第二回目の打ち合わせまでに、サンプルを作成します。habakiriは色調も変えられるので大活躍します。
とは言ってもカスタマイズ項目にないような変更ももちろん出るので、とりあえず子テーマを作成します。

habakiri-child 子テーマの作成

WordPressにテーマhabakiriをインストールその後、FTPでテーマのフォルダに子テーマをアップロードします。
子テーマは一応habakiri-childにします。(この規則は今はちがってもOKみたいです)
必要ファイルはとりあえずstyle.cssのみ

内容は

/*
Theme Name: habakiri-child ヨキデザイン用
Description: Habakiri の子テーマです ( テーマの説明 )
Author: ヨキワークス
Author URI: http://joki-works.com ( 作者のURL )
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: habakiri
*/

これでOK。本来functions.phpにスタイルの継承を記述しなくてはいけませんが、habakiriはなくてOKなのです。
style.cssを記述したら先程のフォルダにアップロードします。

子テーマに切り替え

忘れずに子テーマにまず切り替えます。そうしないと泣きを見ます。

ロゴをアップロード

ロゴとホームページの色調を合わすため、まずロゴをアップロードします。
依頼側がロゴの色等にこだわりがない場合、変更もします。
sample_logo
今回このようなロゴを用意していただきました。とりあえずはめ込みます。
001
それなりに見えますね。

ページを作成

とはいったもののやはりB.グローバルメニューがとTOPページがないとイメージが湧きません。
作りましょう。WordPressでは固定ページで各ページを作ります。
固定ページのレイアウトはPageBuilderでゴリゴリカスタマイズできます。
今回作るページは

  • Topページ(ホームページ)
  • 会社案内
  • 事業案内
  • お問い合わせ

の4ページ。ブログ(物件紹介)は一旦忘れておきます。

002

ちょっとレイアウト崩れてますが、こんな感じになります。メニューの字ちっさ。

全体調整

では調整していきましょう、

TOPの黒帯

habakiriの機能で各ページにヘッダー画像や帯を出すことができません。今回は使わないので切ります。
カスタマイズ、設定からページヘッダーを表示 いいえ!
003

ヘッダーとグローバルナビを2行に

レイアウト、ヘッダーを2行に!

004

グローバルナビの字を大きく!

005

レイアウト、グローバルナビで変更します。

色調の調整

http://paletton.com/ こういうツールで作ります。
今回明るい緑なのでグリーっと回して、
006

こんな感じに決定
007
これを
もとに配色を調整します。

008

なかなか整ってきました。
この後各ページの調整を行ってサンプル作成終了
2回めの打ち合わせに臨みます。

力尽きたので次に続く!