【WP】Nishiki Proで作った企業・コーポレートサイト｜オシャレなサイトの作り方をサンプル付きで解説

そんな疑問に答えます。

WordPressテーマ「Nishiki Pro」でどんな企業サイトが作れるかを紹介します。今回紹介するのは無料テーマの「Nishiki」ではなく有料版の「Nishiki Pro」です。

NishikiとNishiki Proの違いは次の記事で詳しく解説しています。

【比較】WordPressテーマ「Nishiki」と「Nishiki Pro」の違いは？

WordPressテーマ「Nishiki Pro」で作った企業サイトデザイン

企業サイト制作に役立つNishiki Proの機能

Nishiki Proはコーポレート系のサイトを作るのがかな～り簡単なテーマです。テーマ固有の「クセ」がなくデザインの自由度が高いので何でも作れる系の万能テーマです。

メインビジュアルに動画を指定できる

サイトのトップページに動画をフルアワイドで設置できます。コーポレートサイトって第一印象が大事。ファーストビューに動画を配置できるのでインパクトある企業サイトを制作できます。

動画を背景にして、キャッチコピーやボタンを表示できます。

動画と文字の色がかぶらないよう、動画には色を指定してオーバーレイと透明度を自由に設定できます。
これ、マジ便利です！

ちなみにメインビジュアル部分は動画以外にも静止画、スライドショーを設置できます。

コンテンツエリアにフルワイドなデザインも作れる

旧式のクラシックエディターテーマだと、この機能をサポートしているテーマを見たことがありません。
さすがブロックエディター対応テーマです。

コンテンツエリアにフルワイドでデザインできるブロックがあると、表現できるデザインが変わってきます。

フルワイド化したエリアには、背景に静止画像だけでなく動画も指定できます。

レイアウトブロック

Nishiki Proのレイアウトブロックは、横並びに要素を配置するオリジナルブロックです。

旧式のクラッシクエディターテーマだとHTML＋CSSでコーディングしないと実現できませんでしたが、レイアウトブロック機能を使うとサクッと出来上がります。

パソコンだけでなく、スマホやタブレットで1列に表示するブロック数を指定できる点が特に便利だと感じます。
いろんなテーマを使っていますが、ここまで自由に制御できるテーマはありません。

流れを分かりやすく伝えるタイムラインブロック

タイムラインブロックはサービスの流れなど紹介する際に使うNishiki Proオリジナル装飾ブロックです。サービスや商品を提供している事業の場合、お問い合わせから納品までの流れを伝えるページに活用できます。

予約の必要な医療系や整体、お客さんのニーズごとに商品やサービスが変化する工務店なんかのホームページでも使えそうです。

お知らせの見せ方もアレンジできる

WordPressにはお知らせやコラムといったコンテンツを一覧で表示させる機能があります。Nishiki Proでは一覧表示のデザインのオプションが多くアレンジし放題だと感じました。

などなど、かなり選択肢があります。

投稿の並び順も公開日だけでなく、更新日やランダム表示にすることが可能です。

地味に便利なのが「Newマーク」の機能。

アニメーションブロックで高級感を出す

指定のブロックをフンワリ上から表示させるアニメーションが標準で搭載されています。

今回紹介したデモサイトでも試しに使っています。Nishiki Proのアニメーションはエフェクトの種類が豊富。例えばフェードインならエフェクトの向きまで設定できます。

アニメーションはエフェクトの種類のほか、実行時間、遅れ（Delay）といった値までブロックオプションからチューニングできます。

ECサイトをノーコードで作れる

Nishiki ProはECサイトプラグイン「WooCommerce」に対応しています。

以下、Nishiki ProとWooCommerceで制作したサンプルのECサイトです。

サンプルサイト

WordPressには無料で使える便利なECサイトプラグインがたくさんあります。その中でもWooCommerceプラグインは世界的に人気で、インストール数は5,000,000を超えています。

海外のプラグインは日本語に対応していないものが多いんですが、 WooCommerceは日本語にバッチリ対応しています。粗管理画面も全て日本語になっているので、Nishiki Proの便利なブロックと組み合わせてオシャレなECサイトをノーコードで制作出来るというメリットがあります。

Nishiki Proのサイト制作・運営にかかる費用

有料テーマNishiki Proで会社のHPを制作し、自分で運用する場合の費用についてです。

Nishiki Proで会社のホームページを作る際の初期費用

初期費用

項目	費用
Nishiki Proライセンス	17,800円（税込み価格）
新規ドメイン	1円～
レンタルサーバー	0円～3,000円

Nishiki Proのテーマは無料のお試し版もありますが、会社のホームページを作るならライセンスををしっかり購入しましょう。

ライセンスは一度支払うだけの買い切りタイプです。更新料金は一切かかりません。

ドメインは取得するドメインの形態と、取得代行会社により料金が異なります。

例えばレンタルサーバー会社のエックスサーバーだと新規ドメイン取得費用は次のとおりです。

種類	取得費用
.com	1円
.net	1円
.xyz	33円
.site	99円
.fun	108円
.space	108円
.website	108円
.online	108円
.info	308円
.org	946円
.blog	1,078円
.co.jp	4,136円

ドメイン取得費用は2021年7月6日にエックスサーバー公式ページに掲載されている情報です。
変動する場合がありますので、詳しくは公式ページを確認してください。

サイトのランニングコスト

初期費用とは別にWordPressサイト運営にかかる毎月の料金です。

サイト運営費用

費用の目安です。

項目	費用
レンタルサーバー	1,000円 / 毎月
ドメイン更新料	1,000円 / 1年間有効

毎月かかる料金はレンタルサーバー料金の1,000円。

ドメインは1年間ごとの更新で年間料金は1,000円程度です。

レンタルサーバーのほとんどはメールアカウントも使い放題です。レンタルサーバー代は会社のホームページとメールアカウントの料金だと考えましょう。

レンタルサーバーで使えるメールアドレスは独自ドメインのメールアドレスです。

独自ドメインが 「nishiki.com」の場合

独自ドメインのメールアドレスを解説します。会社の独自ドメインが「nishiki.com」の場合、自分と会社の社員が使えるメールアドレスは次のような形態です。

会社のHPアドレス	http://nishiki.com/
会社のメールアドレス	tanaka@nishiki.com contact@nishiki.com ※独自ドメインに組み合わせて自由に作れます。

独自ドメインのメールを受け取った取引先は「〇〇会社の人からだ」と認識しやすくなります。

フリーのメールアドレスはなりすましの捨てアカウントとして使われることがあります。ビジネスで使うなら独自ドメインのメールアドレスのほうが信頼度が高くなります。

Nishiki Pro向けのレンタルサーバーと料金プラン

企業サイト定番カスタマイズ

クライアントのサイト制作をしていると、ほぼ毎回相談される企業サイトデザインの定番をシェアします。

企業サイトの定番

ヘッダーに電話番号・問い合わせボタンを設置したい

この仕様を実装したデモサイト

「ザ・企業サイト」といった感じのコーポーレートだと、ヘッダーに必ず電話番号入ってますよね？営業時間やキャッチフレーズ、問い合わせページのボタンなんかも設置されているデザインをよく見かけます。

Nishiki Proには専用フックがあるので、出力テンプレートを直接編集しなくても任意の要素を追加できます。

ヘッダーにサブメニューの追加

グロナビにリンクを並べすぎるとゴチャゴチャしている印象を与えます。メインのコンテンツへの導線はグロナビに入れておくのが一般的なデザインです。

グロナビに入れるほど優先度が高くないもので、ヘッダーに導線を設置したいなんて時に便利なのがサブメニュー。

電話番号の表示と同じようにNishiki Proには専用フックがあるので、出力テンプレートは編集しなくてもサブメニューを追加できます。テーマの運用を考えると、テンプレートの編集よりフックを使うのが効率良いですよね？

まとめ

WordPress有料テーマ「Nishiki Pro」で作る企業サイトについてでした。

Web制作を長年していていますが、Nishiki Proは非常に使いやすいテーマだと感じます。

公式 WordPressテーマ「Nishiki Pro」