JIN:R「ボタンブロック」一歩先ゆくカスタマイズのヒント
web-kumitatekoubou
ウェブ組み立て工房
WordPressテーマ JIN:Rの全貌を紹介【ハンパない機能性】
web-kumitatekoubou
記事内に商品プロモーションを含む場合があります
たくさん機能があるテーマはいいんですが、私にも使いこなせるか不安なんです…
「JIN:R」は多機能でありながら、ちゃんと初心者にも寄り添っているんで安心ですよ。
たくさんの新しい機能やカスタマイズ性が高いWordPressテーマは魅力的です。でも、これからサイトを作ろうと思っている人にとっては、操作が難しいのではないかと不安を感じることもあるでしょう。
この記事では、WordPressテーマ「JIN:R」が持つ、オリジナルのメニューとオリジナルブロックの全貌と、ユーザーフレンドリーな操作性を掘り下げていきます。
この記事を読めば、JIN:Rの機能の豊富さとオリジナルブロックの種類、テーマ購入後のサポートのことがわかります。
私は、初心者でも簡単に実現できてカスタマイズも可能な点が、JIN:Rの最大のメリットと感じています。
簡単にデザインの整ったサイトが作れる魅力がわかりますので、JIN:Rの購入を迷っている方はぜひ最後まで読んでいってください。
Contents
JIN:RのDEMOと同じトップページが簡単に手に入る
洗練されたトップページのデザインは、サイトを見に来てくれた人にいい第一印象を与えます。見栄えする仕上がりになっていると、しっかりと運営されているサイトという信頼を生み、権威性が高まります。そして、見やすく整っていることで、他にも読んで欲しい記事やクリックして欲しい広告を効果的に届けられます。
問題は自分で最初から作り上げていくと、なかなかセンスのよいトップページが出来上がらないことです。見栄え良く作るのは、WordPressテーマの機能の把握と慣れとアイデアがいります。特に、色選びにはセンスが必要で、おしゃれできれいに見える配色は難しいものです。
同じWordPressテーマで作られたデモサイトがあっても再現が難しい場合もあります。初めて操作をする人にとっては、マニュアルを理解してその通りにすることが大変ということもあります。
JIN:Rには、デザインプリセットという機能があります。
JIN:Rの開発側でデザイン済みのトップページデザインをダウンロードして使える機能です。WordPressの管理画面の中で、DEMOをダウンロードして適用するまで、クリック一つで簡単にできます。公開する前に確認できるので、イメージと違えば何度でも着せ替え感覚で試せます。
そして、それぞれのDEMOで必要な設定を順序立てて解説したマニュアルが用意されています。ダウンロードして適用した後はマニュアル通りに進んでいくと、サイトデザインの基本が出来上がります。マニュアルは、簡単初心者向けは1つにまとまっていて、その他の本格的・こだわりとコーポレートは個別に準備されています。
「JIN:R」の公式マニュアルにある初期設定は、こちらからデザインプリセットで使えるDEMOは、特別にプログラムコードを書いて作っていないです。そのため、JIN:Rに慣れてブロック機能の知識が付いたら、自分でカスタマイズが可能です。
20種類以上あるDEMOをデザインプリセットでダウンロード
- 簡単・初心者向けは、8種類
- 本格的・こだわりは、12種類
- コーポレートは、3種類
簡単で初心者向けのDEMOは、主要なメニューは一緒で配色の違いに特徴があります。
- ChocolateやPinkはフェミニンなオシャレ感強い
- GreenやYellowはナチュラルとか中性的
- Blue系はフォーマルな感じ
このような、カラーから連想するテーマを持たせたデザインになっています。
本格的でそれぞれにこだわりを持たせたDEMOは、発売当初からあるもので使われているブロックやメニューはそれぞれに違いがあります。
CuteやNature、Minimalといったサイトイメージの違いやClassicalといったクラッシックなブログ型から、PortfolioやYouTuber といった珍しいものもあります。
JIN:Rはブログだけに留まらず、コーポレート型のサイトも作れます。
おしゃれなカフェやレストランに使えるデモと、もっと企業的なデモの3種類が準備されています。
「JIN:R」のDEMOの確認は、こちらからJIN:Rオリジナルブロックが充実している
WordPressのブロックエディターに対応しているテーマは、オリジナルブロックを設定できます。このオリジナルブロックの種類や機能でWordPressテーマの良し悪し、ニーズに合う合わないが決まります。
JIN:R オリジナルブロックの18種類の魅力
まず、18個あるJIN:Rのオリジナルブロックの内容を紹介します。
どんな機能かを知るには、ブロック名をクリックすると詳細が見れます。個別に使い方とアレンジのアイデアを記事にしてリンクを追加してますので、使用イメージの参考になさってください。
- ボタン
-
URLをリンクできます。内部リンクや外部リンク、アフィリエイトリンクを設定して使います。
オリジナルメニューのアフィリエイトタグ管理と組み合わせると、アフィリエイトリンクが簡単に設定できます。
合わせて読みたい
JIN:R「ボタンブロック」一歩先ゆくカスタマイズのヒント
Q
- 記事リスト
-
公開済みの記事を一覧表示できます。
表示方法は、新着とカテゴリー、PV順、ピックアップの4通りから選べます。カテゴリーは、カテゴリー内の新着順になる一方、新着とPV順はサイト全体から判断して表示されます。
合わせて読みたい
JIN:R「記事リスト」一歩先ゆくアレンジメントのヒント
Q
- デザイン見出し
-
見出しタイトルとサブテキスト、シンボル（アイコン）などの装飾ができる見出しです。
記事執筆に使う見出しとは違い、トップページなどで装飾目的で使います。色々な表現ができて華やかにデザインできます。
合わせて読みたい
JIN:R「デザイン見出し」の一歩先ゆくカスタマイズ術を紹介します。
Q
- ボックス
-
20種類のデザインと1つの引用に使用するボックスがあります。
色の変更や、タイトル枠がないボックスにもタイトルの追加するなど、色々な強調表現を作れます。
合わせて読みたい
JIN:R「ボックス」一歩先ゆくアレンジメントのアイデア
Q
- アイコンボックス
-
8種類のベーシックと4種類のタイトル付きボックスがあります。
ボックスの色やタイトルの文字、アイコンの種類をカスタマイズできます。
合わせて読みたい
JIN:R「アイコンボックス」一歩先ゆくアレンジのアイディア
Q
- リッチメニュー
-
特に読んでもらいたい記事を選んでリンクできます。
リンクした記事のアイキャッチ画像や記事タイトルと連動しないコンセプト画像やタイトルを設定できます。タイトルの表示位置を選んだり、PCとスマホでカラム数（横並びの数）を切り替えたり、画像のタテヨコ比も選べます。
デザイン性が高まり、サイト内の回遊性が高まります。
合わせて読みたい
JIN:R「リッチメニュー」一歩先ゆくアレンジのアイディア
Q
- 区切り線
-
ページに区切りをつけることで、トップページや固定ページのデザイン性を高められます。
合わせて読みたい
JIN:R「区切り線」一歩先ゆくアレンジのアイデア
Q
- 吹き出し
-
アイコンに吹き出しを表示して対話形式などを表現できます。
アイコンを左右どちらに表示するかや3種類の吹き出しの形、吹き出しの色などが設定できます。
筆者などよく使うアイコンと吹き出しの形を10パターン登録できるので、時短になります。
筆者以外のアイコンがない人も、プリセットが6種類ありますので誰でも会話形式を表現できます。
合わせて読みたい
JIN:R「吹き出し」ブロック一歩先ゆくアレンジのアイディア
Q
- フルワイド
-
画面幅いっぱいにカラーや画像を表示できます。
主にトップページで使います。
合わせて読みたい
JIN:R「フルワイドブロック」一歩先ゆくアレンジのアイデア
Q
- ブログカード
-
記事の中で関連する記事へのリンクを表示できます。
アイキャッチ画像と記事タイトルを参照して表示します。カードのデザインとラベルがカスタマイズできます。
合わせて読みたい
JIN:R「ブログカード」一歩先ゆくアレンジのアイディア
Q
- アコーディオン
-
Q&Aなどで見かけるクリックで開閉できるブロックです。デザインとタイプを通常とQ&A形式から選べます。
このJIN:Rオリジナルブロックの説明に使っているのが、アコーディオンです。
合わせて読みたい
JIN:R「アコーディオン」一歩先ゆくアレンジのアイデア
Q
- タイムライン
-
手順や工程など、順序が大切なことを説明するときに使います。
テキストだけではなく記事をリンクさせることもできます。
デザインを選択したり、ラベルをSTEPからテキストや非表示に変更できます。
合わせて読みたい
JIN:R「タイムライン」一歩先ゆくアレンジのアイデア
Q
- コード
-
各種プログラミングコードを見やすく表示させておくためのブロックです。
Q
- 背景
-
色や模様、画像を他のブロックの背景に配置できます。
影や枠線、パターン、色が選べて、記事の中で文章や箇条書きの強調に使えます。
パターンはベタ塗りの他に、ドットや斜め線などが選べておしゃれに表現できます。
合わせて読みたい
JIN:R「背景ブロック」一歩先ゆくアレンジのアイデア
Q
- プロフィール
-
登録してある筆者のプロフィールを表示できて、デザインやSNSの表示、非表示が選べます。
合わせて読みたい
JIN:R「プロフィールブロック」一歩先ゆくアレンジのアイデア
Q
- カテゴリー区別
-
ウィジェットエリア専用のブロックです。
合わせて読みたい
JIN:R「カテゴリー区別」で効率的にPRを強化する方法
Q
- 有料コンテンツ
-
記事の中に限定公開エリアを作れるブロックです。
限定公開エリアには記事の続きのほか、YouTube動画なども記事執筆できるのもならOKです。限定を解除する範囲は1記事や複数記事などから選べます。
JIN:Rの中で、決済機能も搭載しています。でも、決済手数料はstripeに支払う正規料金だけになっています。
合わせて読みたい
JIN:R「有料コンテンツ」ブロックで知識を製品にしてみませんか
Q
- 比較表
-
画像とテキスト、評価用星マーク、ボタンを使った比較表専用のオリジナルブロックです。
適度な余白を取り見やすくて横スクロールにも対応した表が簡単に作成できます。
合わせて読みたい
JIN:R「比較表ブロック」一歩先ゆくアレンジのアイデア
Q
18個のJIN:Rオリジナルブロックの中で、有料コンテンツはとっても珍しいブロックです。国内のWordPressテーマでは、標準で含まれているものがないです。
収益化の幅が広がり、広告主が少なくてマネタイズが難しい分野でも稼げる可能性が高かまります。
デザイン見出しは、アイデア次第でトップページやカテゴリーページがおしゃれに区切れてアピール力が高まります。背景は、パターンとカラーをうまく使うと、Boxを使うほどではないときのデザインの幅が広がります。
全てを覚えておくのは難しいので、記事を書くページの上にショートカットキー一覧のリンクがあるので参考にしてください。
デザインされたブロックの組み合わせが使える
オリジナルブロックがどれほど優秀でも、効果的な配置や設定の仕方が分かっていないと、その魅力は半減してしまいます。
JIN:Rにはデザイン見本帳が備わっています。
”見本”となっているが、ただの見本・サンプルではありません。JIN:Rの開発側でデザイン済みのパターン一覧が用意されていて、コピー＆ペーストで使えます。
機能を知り尽くしていれば作れるが、購入者では発想が追いつかない組み合わせがたくさんあります。このデザイン見本帳を見ることで、オリジナルブロックの活用方法のアイデアを見つけることもできます。
JIN:R公式のコピーできるデザイン見本帳
11種類あるデザイン見本帳のパターンは次の通りです。どんな用途に使えるか知りたい方は、クリックすると詳細が見れます。
- コンセプト
-
大きめの画像を置けて、テキストで思いや物語を語れるような作りになっています。トップページなどで、サイトやメインプロダクトのコンセプトを伝えるために使えます。
Q
- ナビゲーション
-
サイト訪問した人に読んで欲しい記事へのリンクを、たくさん並べられる作りになっています。フッターエリアなどで、メニューのように他の記事へ誘導するのに使えます。
Q
- ボタン
-
背景を使ったり色々なボタンの配置の方法がデザインされています。トップページや記事内で使えるものがあります。
JIN:Rのアフィリエイトタグ管理と合わせて使え、とても便利です。私もよく利用します。
Q
- ランキング/CTA
-
ランキングは商品比較をするときに役立つ組み合わせが2パターンあります。画像や内部リンクができて、文章や表を使うよりも目を引くことができます。
CTAは、3パターンありPR商材の成約に繋げるために使えます。
ここでのCTAは「Call to Action」の略語でサイト上で訪問者に特定の行動を促すメッセージやボタンのことです。
トップページや記事下ウィジェット用があります。
Q
- 画像加工
-
画像に影や背景を付け加えられる見せ方の見本です。
画像自体を加工できる訳ではないです。
Q
- リッチメニュー
-
デザイン見出しとリッチメニューの組み合わせでできた見本です。
トップページなどで特に読んで欲しい記事を表示できます。
Q
- 記事リスト
-
記事リストのボックスをベースにして組み立てた見本です。
スライド出来るものやサイドバー用があります。
Q
- インフォメーヨン
-
トップページで、新着情報などを表示するデザイン設定の見本です。
記事リストのボックスをアレンジしています。
Q
- プロフィール
-
筆者プロフィールエリアの組み合わせ見本です。
トップページや記事下（上）ウィジェットなどで使えます。
Q
- サイドバー
-
サイドバーのウィジェットで使えるリッチメニューの設定見本です。
Q
- チェックボックス
-
囲みのボックス有無と2種類のチェックのデザインから選べます。
記事を書くときの箇条書きは、点（ビュレットポイント）と数字だけですが、パターン見本帳を使えばチェックボタンも表現できます。
Q
まだあるJIN:Rの特徴を語る
- スマホ専用機能が便利
- メインビジュアルを4種類から設定できる
- 広告管理のメニューがある
- アフィリエイトタグ管理のメニューがある
- YouTubeとの連携に強みがある
- オリジナルアイコンが400種類ある
スマホ専用機能は、スマホメニューとスマホコンバージョンボタンの2つあります。
スマホメニューは、メニュー名とアイコン、リンク先のURLを設定できます。リッチメニューの画像がアイコンに置き換わったような機能です。
スマホコンバージョンボタンは、アピールしている商品の成約ページへの誘導ができる機能です。表示する範囲を全ページか、カテゴリーを指定するかで分けられます。
スマホ専用機能ではないのですが、記事を書くときにボックスの表示範囲を、PCだけ、スマホだけ、両方で表示と切り替え可能です。
トップページのメインビジュアルは、次の4種類から選べます。
- 記事スライドショー：特定の記事を選ぶことも自動表示を選ぶこともできます。
- 画像スライドショー：画像にURLを設定できます。
- ヘッダー画像
- ヘッダー動画
広告管理は、初めの見出し上、記事終わり、関連記事上、Multiplex広告の4カ所に一括して広告を設定できるメニューです。全部の記事に表示するパターンと、4つのカテゴリーごとに表紙する内容を変える設定できます。
アフィリエイトタグ管理は、30個まで登録ができてアフィリエイトコードを一元管理できます。ここに登録したアフィリエイトタグは、ボタンのブロックで選択して設定ができます。
JIN:RはYouTubeの動画をPIP（ピクチャー イン ピクチャー）で表示できるだけではないです。記事のアイキャッチとして設定したり、記事スクロールに追尾してきたり、記事リストのアイキャッチ上に表示できたりします。
記事リストのアイキャッチ上に表示できるので、トップページなどで一覧表示が可能になります。
オリジナルアイコンが400種類あり、オリジナルで可愛いと差別化といっただけではなく、別途アイコンを読み込まないので表示速度が早まるという実益もあります。
WordPressテーマ購入後も充実している
- JIN:R 公式のマニュアルが充実している
- 2種類の購入者限定コミュニティに参加できる
JIN:Rのマニュアルは、YouTube動画付きで初心者にも分かりやすく説明されています。特に初心者の方が迷い諦めてしまわないように、デザインプリセットを使った初期設定の方法を順序立てて解説されています。
初期設定につまずいてWordPressに難しい印象を持ってしまい、疎遠になってしまうという悪循環は是非とも避けたいです。
「JIN:R」の公式マニュアルページは、こちらからJIN:Rの購入者限定で、JIN:R フォーラムとBLOG CAMPに参加できます。参加とサポート費用は無料です。
フォーラムは、マニュアル通りに上手くいかないときやトラブルなどの技術的なお問い合わせサポートの位置付けです。
BLOG CAMP は、JIN:RとJINを購入した人が参加できる交流や学びが中心のコミュニティです。
日々の活動宣言やちょっとした相談で交流できます。開発者のひつじさんが相談に回答してくださったり、ブログ診断などのイベントが不定期で行われています。
「Blog Camp wiki 」のサイトが立ち上がり、過去の相談やよくある質問がまとまっています。不定期イベントのブログ相談の「YouTube Liveのアーカイブ」と議事録も限定公開されています。
著名なアフィリエイターの視点が学べるブログ相談のイベントだけでも、超有料級のコミュニティです。
WordPressテーマ 「JIN:R」の基本情報はこちらの記事にまとめています。
まとめ：サイトデザインのサポートが手厚い
WordPressテーマ JIN:Rの全体像を紹介しました。
綺麗にデザインされたDEMOは飾りではなくて、デザインプリセットを使えば簡単に同じトップページが作れます。
JIN:Rのオリジナルブロックは18個もあり、有料コンテンツというstripeの決済機能の利用を簡単にする他に類を見ない機能があります。
たくさんあるオリジナルブロックを有効活用できるデザイン見本帳が備わっていて、コードをコピーするだけで使えます。
このデザインプリセットもデザイン見本帳も「特別なプログラムコードを配布していない」というのが嬉しいポイントです。なぜなら、ブロックの組み合わせをアレンジしてオリジナルを作ったり、自分でブロックを組むときのヒントになるからです。
記事を書いて伝え届けることと、サイトや記事を綺麗に見やすくするのは少し違うセンスが必要かなと思っています。
サイトデザインのサポートが凄いことは、本当にサイト運営の助けになります。
実績豊かなアフィリエイターが開発したテーマだから、「あったらいいな」や「みんなが使えたらいいな」が詰まっていると感じます。
この記事が、WordPressテーマ JIN:Rの購入に迷っている方の不安解消になれば幸いです。
ABOUT ME
2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。
