初心者JIN:Rで会社のHPは作れるの？
どんなデザインになるかサンプルを見たい！
HPに導入した方がいいプラグインなんかも知りたい
そんな疑問に答えます。
JIN:Rを購入し、コーポレート系のデモサイトを作ってみました！
コーポレート制作に使ったJIN:Rの装飾機能や、プラグインについても解説します。JIN:Rで会社のHPを作りたいという人はぜひ最後までお読みください。
※今回紹介するのはJIN:Rです。JINではありません。
JIN:Rで作成したコーポレート系デモサイト
JIN:Rのコーポレートデザインを紹介します。
デモサイト
かんたデモサイトはプラグインやCSSコードなどを追加しています。
企業サイト制作向けのブロック
JIN:Rでの企業サイト制作で便利だな～と感じたブロックを紹介します。
※「ブロック＝装飾機能」のことです！
企業サイト制作向けブロック
- フルワイド
- 記事リスト
- タイムライン
- リッチメニュー
かんたそれぞれのブロックを解説します。
【企業サイト向けブロック①】フルワイド
フルワイドはレイアウト系のブロックです。
画面の横幅いっぱいに、背景画像を設置するケースに使います。背景が真っ白が続くと、どうしても単調な印象を与えてしまいます。
フルワイドを途中に入れると、メリハリのあるデザインが実現できます。
フルワイドは単体として使うことも可能ですが、フルワイド上にその他のブロックを重ねることができます。
かんたカラムブロックやリッチメニューを載せるとオシャレ度が高まります。
【企業サイト向けブロック②】記事リスト
記事リストは投稿記事を固定ページの任意の場所に表示するブロックです。
会社HPの運営時に投稿機能でお知らせを作成し、トップページ上に自動的にお知らせが表示されるといった仕組みを作ることができます。
記事リストで表示する投稿は、カテゴリーごとに分類する機能があります。
「スタッフブログカテゴリーはこっちに表示しよう」「ちゃんとしたお知らせはこっちに表示しよう」といった使い方ができます。
【企業サイト向けブロック③】タイムライン
タイムラインは、業務の流れを紹介するコンテンツ用の装飾です。
例えば、「問い合わせから納品までの流れ」といったフローを視覚的に伝える場合に使えます。
【企業サイト向けブロック④】リッチメニュー
リッチメニューは横並びにメニューを配置するさいに使うレイアウト系のブロックです。
サービスメニューの一覧をリッチメニューで作成し、下層ページへの導線として使うことができます。
例えばカフェなどの飲食店などであれば、以下のような項目を作り詳細ページに移動できる構成などを作る場合に最適なブロックです。
リッチメニューの一例
- 温かい飲み物
- 冷たい飲み物
- ケーキ
- お食事
企業サイト制作向けプラグイン
JIN:Rでの企業サイト制作に向いているプラグインについてです。
プラグイン
- Contact Form 7
- Rich Table of Contents
- VK Filter Search Pro
かんたそれぞれのプラグインを紹介します。
【企業サイト向けプラグイン①】Contact Form 7
Contact Form 7は問い合わせフォームを作成するプラグインです。
ほとんどの場合、企業サイト運営であれば問い合わせフォームは必要です。電話対応と違い24時間無人で問い合わせを受け付けることができるのでコスパの良いシステムです。
WordPressには無料の問い合わせフォーム系のプラグインが多々ありますが、JIN:RにはContact Form 7用のCSSが含まれています。
かんたテーマの雰囲気にあったデザインに仕上げたい初心者の人ならContact Form 7がおススメです。
【企業サイト向けプラグイン②】Rich Table of Contents
Rich Table of Contentsは記事の目次を自動生成してくれるプラグインです。
お知らせやSEO系のコラムなどをサイトに導入したい場合におすすめです。このプラグインはテーマ開発会社が提供している無料プラグインなので、JIN:Rとの相性も抜群です。
【企業サイト向けプラグイン③】VK Filter Search Pro
VK Filter Search Proは、絞り込み検索フォームを作成するプラグインです。
本記事で紹介した不動産業者のデモサイトに使っています。
ブロックエディター上での直感的な作業で複雑な検索フォームを作ることができる、便利なプラグインです。
企業サイト制作向け独自カスタマイズ
独自カスタマイズとは、JIN:Rの機能以外でのカスタマイズのことです。
デモサイトでは以下の独自カスタマイズを行っています。
独自カスタマイズ
- ヘッダー右上に電話番号
- ヘッダー右上にサブメニュー
かんたそれぞれを解説します。
【独自カスタマイズ①】ヘッダー右上に電話番号
ヘッダー右上に問い合わせ先の電話番号とメールフォームへの導線を設置するにはコーポレート系サイトの定番です。
サイト運営の目的が「問い合わせを増やす」ということであれば、ぜひ設定したい項目です。
JIN:Rのカスタマイザーには電話番号をヘッダーに設定するオプションがないので、デモサイトでは独自カスタマイズしました。
かんたこのカスタマイズ方法は次の記事で解説しています。
【独自カスタマイズ②】ヘッダー右上にサブメニュー
優先度はそれほど高くないけど、重要なページってありますよね？
そんなページへの導線をサブメニューとしてヘッダーに表示しました。
サブメニューに設置するコンテンツ例
- アクセス
- プライバシーポリシー
- サイトマップ
- 採用情報
- FAQ
こういったコンテンツを全てグローバルナビゲーションに含めてしまうと、ゴチャゴチャしてしまいます。
一般的なデザインのルールとして、グローバルナビゲーションの上限は７個というものがあります。これ以上のメニューがあると、ユーザーが情報を把握しずらいからです。
メインとなるコンテンツをグローバルナビゲーションに配置し、それ以外をサブナビに配置することで導線のスッキリしたデザインに仕上がります。
かんたサブメニューの追加方法は次の記事で解説しています↓
FAQ
JIN:Ｒに関する疑問FAQ形式で紹介します。
JIN:Rはどこで買えるの？
JIN:R公式サイトでのみ販売しています。
JIN:Rを購入前に試せるテスト版ってあるの？
ありません。
自前の複数のサイトに導入できるの？
できます。
JIN:Rのライセンスについては公式サイトをご覧ください。
サポートは？
JIN:R公式サポートフォーラムがあります。
まとめ
JIN:Rで制作したコーポレートデザインのデモサイトを紹介しました。
JIN:RはWordPress標準のブロックエディター対応テーマです。
旧式のクラシックエディターと違い、編集画面にソースコードが表示されません。HP作りに慣れていない初心者でも直感的な操作でサイトを作ることが可能です。
かんたぜひJIN:Rでの企業サイト制作にチャレンジしてみてください。
JIN:Rは本記事執筆時に利用可能な最新バージョン（1.0.2）の情報です。
バージョンアップにより仕様が変更されることがあります。最新情報はJIN:R公式サイトを確認してください。
