当オフィスによるホームページ制作事例を掲載

当オフィスにて受注したホームページ制作案件の納品が本日終わりました。

11月30日に先方を訪問。面談にて制作を承り、そして、12月16日に無事納品完了した次第となります。

先方は、「相続と不動産のワンストップサービス」が売りの不動産コンサルタント会社様でありまして、株式会社SEKI不動産コンサルティング 様と仰ります。

先方が望むコンセプトは、「シンプルな名刺代わりのホームページ。販促でのツールとして予約受付フォーム、問い合わせフォームも備えたホームページ」との事でした。

「ワードプレスとは何か」、「他類似ASP(アプリケーションサービスプロバイダ)との違い」からご説明させて頂き、ウェブ環境構築のサポートまでを承り、ワードプレスにてウェブサイト制作・納品となりました。

無事納品が終わり嬉しい限りです。

下記、今回納品したホームページについて簡単にご紹介いたします。

【事例ホームページトップ画像】

SEKI不動産コンサルティングHPスクリーンショット
株式会社SEKI不動産コンサルティング 様ホームページ(オフィス友添による制作事例)

【事例ホームページ詳細】

注文者株式会社SEKI不動産コンサルティング 様
納品したホームページのURLhttp://www.fconsul.co.jp
ご依頼のコンセプト販促ランディングページを兼ねたシンプルな会社ホームページ
推奨ブラウザ現行のEDGE(エッジ)、クローム、Safari、OPERA、FireFox
CMS使用の有無ワードプレス
ベースとなるテーマLIQUID PRESS社 レスポンシブ対応テーマ「 LIQUID LP」
CMS、テーマ改修の有無SEKI不動産コンサルティング様向け カスタム仕様
・ヘッダータイトル、トップナビ表示仕様の一部変更
・キャッチコピー表示機能付きヘッダースライダー実装と管理機能の追加
・CTA(Call To Action)管理機能、会社情報管理機能の追加
ホームページ構成1カラム、1ページタイプ
(A4に換算して概ね6ページ)

使用したベースとなるテーマは、LIQUID PRESSの「LIQUID LP」です。

LIQUID PRESSのテーマについてお知りになりたい方は下記バナーよりLIQUID PRESSのウェブサイトへとお進みください。

日本語対応高品質WordPressテーマ

【仕様変更点】

①ヘッダータイトル、トップナビ表示仕様を変更

(BEFORE、デフォルト)

トップタイトルデフォルト仕様
デフォルトテーマ「LIQUID LP」のトップタイトル部画像

デフォルトテーマであります「LIQUID LP」のトップタイトル部分は、ブートストラップを使ったグリッドレイアウト手法がとられており、まず、幅960px固定のコンテナ(class:container)がリキッドレイアウト配置されており、そのコンテナ内に、①「ロゴ画像またはページタイトル」、②「ナビゲーション」、③「CTAボタン」が横並びに表示される仕様でありまして、そして各部内部コンテナ幅は、①col-md-3、②col-md-7、③col-md-2、という具合に、3:7:2の比率で横並びの仕様です。

(AFTER、改修後)

トップタイトルカスタム仕様
(株)SEKI不動産コンサルティング専用テーマ(LIQUID LP子テーマ)のトップタイトル部画像

デフォルト仕様では、ページタイトル表示部分がcol-md-3と幅が狭く、折り返し表示となってしまいます。そこでキャッチなページタイトルを横一杯に表示させるべく、上記のとおりレイアウト変更に及んでおります。

まず、画面幅一杯のコンテナ(class:container-fluid、左右パディング15px)を作成し、そのコンテナ内に、①「ページタイトル」、「ナビゲーション」を縦並びに格納、②独自CTAボタンを横並びに配置。各部内部コンテナ幅は、①col-md-8、②col-md-4、という具合に、8:4の比率に変更しております。

これにより、キャッチーなページタイトルが一目で見やすくなりました。

②キャッチコピー表示機能付きヘッダースライダー実装と管理機能の追加

実はデフォルトテーマであります「LIQUID LP」にはヘッダースライダー機能はありません。独自に実装した機能となります。

トップヘッダーメディア画面
トップヘッダーメディアスライダー画面

トップ画面に①画面一杯のヘッダースライダーを配置し、相続や不動産、承継等を想起させる画像を表示させ、その中央部に②キャッチフレーズ(メタディスクリプション)を表示させる仕様にしております。

スライダー画像は管理画面に独自管理メニュー(「ヘッダースライダー」)を追加。画像の差し替えや追加を容易にしております(最大10枚)。

ダッシュボード画面
独自管理メニューを追加したダッシュボード画面
ヘッダーメディア設定画面
ヘッダーメディア設定画面
スライダー画像設定画面
スライダー画像選択画面

③CTA(Call To Action)管理機能、会社情報管理機能の追加

・CTA表示ウィジェット、会社情報表示ウィジェットを独自に作成し実装している

独自ウィジェット実装
お客様専用のウィジェットとして「CTA」と「会社情報」ウィジェットを実装

CTAウィジェットは、テーマデフォルトの好きなウィジェットエリアに配置可能。

CTAウィジェット配置事例
CTAウィジェット配置例。モバイルナビ画面(ドロワー)にCTAウィジェットを配置

会社情報ウィジェットも好きなウィジェットエリアに配置可能。

会社情報ウィジェット配置事例
会社情報ウィジェット配置例。納品したウェブサイトはフッターエリアに配置した。

・会社情報管理メニュー

会社情報ウィジェットやCTAの電話番号等は、会社情報をあらかじめ独自管理メニューで設定しておき、それを表示する仕様。会社情報に変更等あっても簡単に情報の変更が可能です。

会社情報設定画面
会社情報設定画面

【事例ホームページ フルスクリーン画像】

〇PCでのスクリーンショット

PCフルスクリーンショット

〇モバイルスクリーンショット

モバイルフルスクリーンショット

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です