CNI Blocksとは？デザイン性と更新しやすさを両立する独自WordPressブロック集
naoto
CNI Blocksとは？
CNI Blocksは、「簡単に更新できるホームページ制作」サービスを提供するために開発している、独自のWordPressブロック集です。
ホームページは、完成したときにきれいであることはもちろん大切です。
ただ、その後にお知らせを追加したり、サービス内容を変更したり、新しい情報を掲載したりと、実際に使い続けていくことまで考えると、完成後の更新しやすさも同じくらい重要だと考えています。
そこで、実際のホームページ制作を行う中で感じた、「もっと簡単に編集できたら便利」「専門知識がなくても同じデザインを追加できるようにしたい」「CSSを書かなくても、きれいなレイアウトを作れるようにしたい」といった課題を、一つずつ独自のブロックとして形にしてきました。
CNI Blocksには、デザイン性の高い見出しを作れる「見出し+」、背景や余白を含めてセクションを組み立てられる「Outer+」、画像を用意しなくてもデザイン性のある背景を作れる「背景生成+」など、実際のホームページ制作で必要になった機能を多数搭載しています。
制作する側だけが便利になるための機能ではありません。
ホームページ完成後に、お客様自身でも扱いやすく、長く使い続けやすいサイトにすること。
それがCNI Blocksを開発している一番の目的です。
CNI Blocksでできること
CNI Blocksは、コーポレートサイト制作に特化して開発している24種類のWordPressブロック集です。
会社やサービスの魅力を伝えるためには、文章と画像を並べるだけでは足りないことがあります。
特徴を印象的に見せたい、サービス内容を分かりやすく整理したい、写真を活かしたセクションを作りたい。そんな「もう少しこう見せたい」を、ホームページ制作の知識がなくても形にしやすいように設計しています。
WordPressにはもともと便利なブロックが用意されていますが、実際にコーポレートサイトを作っていると、
「もう少し見出しを自由にデザインしたい」
「背景まで含めて、このセクションをもっと印象的にしたい」
「カードをこう並べたい」
「この情報を、もっと分かりやすく見せたい」
と感じる場面が何度もあります。
CNI Blocksは、そんな「こんな形にしたかった」をできるだけ簡単に実現するために、実際のホームページ制作の中で必要になった機能を一つずつブロックとして追加してきました。
見出しや背景、レイアウトといったデザイン表現はもちろん、投稿一覧、タブ、テーブル、タイムライン、ステップ表示など、企業サイトで使う機会の多い表現を幅広く用意しています。
操作方法も、できるだけ直感的に扱えることを大切にしています。
ブロックを追加したあと、右側のブロックオプションから色や余白、レイアウト、表示方法などを変更していくことで、専門的なコードを書かなくても細かな調整ができます。
難しいことを覚えるためのブロック集ではなく、「こうしたい」をそのまま試してみるためのブロック集。
ホームページ完成後には、ぜひ実際に触りながら、文章を変えたり、レイアウトを調整したり、新しいコンテンツを追加したりしてみてください。
CNI Blocksおすすめブロックを3つ紹介
見出し+
ページの印象を決める見出しを、もっと自由に
ホームページを作っていると、見出しは想像以上に重要です。
同じ文章や写真を使っていても、見出しのフォントや大きさ、余白、装飾が変わるだけで、ページ全体の印象は大きく変わります。一方で、WordPressの通常の見出しブロックだけでは表現に限界があり、「もう少しデザインしたい」と思うとCSSによる調整が必要になる場面も少なくありません。
そこで作ったのが、CNI Blocksの「見出し+」です。
Google Fontsを含むさまざまなフォントを選びながら、文字サイズ、太さ、文字間隔、行間、色、配置などをブロックの設定画面から細かく調整できます。文字サイズはPC・タブレット・スマートフォンごとに設定できるため、大きな見出しを作ってもスマートフォンでは適切なサイズへ変更できます。
さらに、単に文字の見た目を変えるだけではありません。
見出しの一部分だけ色や大きさを変えたり、ルビを付けたり、英字のサブタイトルや番号を組み合わせたり、大きな英字を背景に配置したり、画像を見出しの前後へ加えたりすることもできます。
縦書きにも対応しているため、デザインに合わせてかなり幅広い表現を作れます。
見出しそのものの装飾についても、線やアクセントを使ったデザイン、文字装飾、テキストエフェクトなどを選択できるようにしており、「こんな見出しにしたかった」を、できるだけCSSを書かずに形にできることを目指しています。
また、制作したオリジナルの見出しデザインを登録して利用する仕組みも用意しています。ホームページ全体で同じデザインを使いたい場合にも、毎回一から設定し直す必要がありません。
見出し+は、制作者だけが使うための高度な機能ではなく、完成後にお客様自身が文章を変更したり、新しいセクションを追加したりするときにも触っていただきたいブロックです。
文字を入力して
フォントを選び
気になる設定を
少し変えてみる。
それだけでも
ページの雰囲気が大きく変わります。
Outer+
セクション全体を、もっと自由にデザインする
ホームページを作っていると、実は「見出し」よりも難しいのが、セクション全体の見せ方です。
- 背景画像を入れたい。
- 文字を読みやすくするためにオーバーレイを重ねたい。
- 上下にしっかり余白を取りたい。
- コンテンツ幅を少し狭くしたい。
- セクションの境目に波や斜めの区切りを入れたい。
- 背景を動画にしたい
- 好きな位置にイラストを配置したい
こうした調整は、通常のブロックだけでは思った通りに作りにくかったり、CSSで細かく調整する必要が出てきたりします。
そこで作ったのが、CNI Blocksの「Outer+」です。
Outer+は、ページ内のひとつのセクションをまとめてデザインするためのブロックです。
背景色や背景画像、背景動画、オーバーレイ、グラデーション、余白、コンテンツ幅などを、ひとつのブロックの中でまとめて設定できます。
さらに、PC・タブレット・スマートフォンごとに背景画像や余白を調整したり、画像の見せたい位置を細かく指定したりすることもできます。
そのため、「パソコンでは人物を右側に見せたい」「スマートフォンでは中央寄せにしたい」
といった調整も、画面サイズごとに行いやすくなっています。
また、セクションの上下には、斜め・波・カーブなどの区切りデザインを加えることもできます。
単純に背景色を切り替えるだけではなく、ページ全体にリズムや流れをつけることができるため、サービス紹介やヒーローエリア、CTAなど、印象をしっかり出したい場面で特に活躍します。
Outer+の大きな特徴は、背景だけを設定するブロックではなく、そのセクション全体をひとつのデザイン単位として扱えることです。
背景、余白、幅、区切り、オーバーレイなどをまとめて調整できるため、「このセクションをもう少し印象的にしたい」と思ったときに、いくつもの設定を別々に触る必要がありません。
ホームページ制作では、こうしたセクション単位のデザインが、ページ全体の印象を大きく左右します。
最近は、クライアント側でAIを使ってデザインイメージやモックアップを作り、「この雰囲気で再現してほしい」という相談も増えています。ところが、AIで作られたモックアップは、通常のWordPressブロックだけでは再現しにくいレイアウトが多く、画像の重なり、セクションからはみ出す装飾、自由な配置、複雑な背景表現などが必要になるケースがあります。
Outer+には、そうした要望にも柔軟に対応できるよう、背景・オーバーレイ・区切り・自由配置画像・レイヤー・端末別調整など、セクション全体を細かく作り込める機能を多く盛り込んでいます。
つまりOuter+は、単に「背景を設定するブロック」ではなく、
AIで作ったデザインイメージを、WordPress上でできるだけ忠実に形にするための土台
としても使えるように設計しています。
Outer+は、専門的なCSSを書かなくても、「背景まで含めて、こんなセクションにしたかった」を形にするためのブロックです。
背景生成+
抽象的な背景表現を、もっと手軽に
背景生成+では、画像を用意しなくても、WordPress上でさまざまな抽象背景を作ることができます。
例えば、やわらかな色の重なりを作る「ソフトメッシュ」、光がにじむような「ブラースポット」、浮遊感のある「ぼかしドット」、動きのある「流線・曲線」、立体感のある「流体シェイプ」、少し個性的な「ハーフトーン」や「幾何学模様」など、用途やページの雰囲気に合わせて背景スタイルを選べます。
さらに、背景生成+には「信頼感・法人」「上質・美容」「親しみ・店舗／子育て」「先進的・IT」「キャンペーン／CTA」などのデザインプリセットも用意しています。
「どの背景を選べばいいか分からない」という場合でも、用途に近いプリセットから始めて、色や構図を調整していくことができます。
そして、こうした背景は静止画として使うだけではありません。
背景そのものにアニメーションを付けることができるため、色がゆっくり変化したり、ぼかしが漂ったり、流体シェイプが揺れたりと、通常の背景画像とは違った表現も簡単に取り入れられます。
背景生成+は、様々な背景効果を設定から作り出す事ができますが、その一部を例としてご紹介します！
ソフトメッシュ
複数の色が自然に溶け合う、やわらかく上品な背景。コーポレートサイトやサービス紹介など、幅広く使いやすいスタイルです。
ぼかしドット
ふわっと浮かぶ光のような表現で、やさしさや軽さを出したい場面に使いやすい背景です。
流体シェイプ
Blobのような柔らかな図形を組み合わせて、少し先進的でデザイン性の高い背景を作れます。
ハーフトーン・幾何学模様
少し個性的なデザインや、セクションにアクセントを付けたいときに使える背景です。
グリット
格子状の枠が入った、ノート風の背景デザインを使いたい時などに便利
溶けあう流体
濃い背景色などで不思議な雰囲気を演出できます。
CNI Blocks 全ブロック一覧
デザイン・レイアウト
見出し+
フォントや文字装飾、レスポンシブ設定などを細かく調整できる、自由度の高い見出しブロック。
Outer+
背景・余白・区切り・画像の自由配置などをまとめて設定できる、セクション制作の中心となるブロック。
背景生成+
グラデーションやぼかし、流体シェイプなどの抽象背景を生成し、アニメーションも加えられるブロック。
グリット+
カード型コンテンツをレスポンシブ対応のグリッドで並べられるブロック。サービス紹介や特徴一覧などに便利です。
画像重ねレイアウト+
画像とコンテンツを重ねたレイアウト（ブロークングリットレイアウト）を、左右配置や重なり量まで調整しながら作れます。
画像テキストレイヤー
画像の上に文字やコンテンツを重ね、ビジュアルを活かした表現を作れるブロック。
サークル画像+
人物紹介やスタッフ紹介などで使いやすい、円形画像の周りをテキストがクルクル回る演出が簡単に出来るブロック。
固定表示+
画面の指定位置へコンテンツを追尾型の固定表示が簡単にできます。お問い合わせ導線や案内表示などに活用できます。
情報を分かりやすく見せる
タブ+
複数の内容をタブで切り替えて表示できます。情報量が多いページをコンパクトに整理できます。
ステップ+
サービスの流れや手順を、順番が分かりやすいステップ形式で表示できます。
タイムライン+
沿革や工程、時系列の情報を縦方向のタイムラインとして表現できます。
テーブル+
料金表や比較表などを作れる高機能なテーブルブロック。セル結合やセルの色変え、レスポンシブ表示にも対応しています。
カウンター+
実績数や数字をアニメーション付きで表示し、数値を印象的に見せられます。
イメージホットスポット+
画像上の好きな位置にポイントを配置し、ポップアップの説明などを表示できます。設備紹介や間取り、商品説明などにも使えます。
投稿・コンテンツ表示
投稿リスト+
お知らせ・ブログ・施工事例などの投稿を、さまざまなデザインで一覧表示できます。
選択投稿リスト+
表示したい記事を自分で選び、任意の投稿だけを一覧として表示できます。
カスタムフィールド+
投稿や固定ページに登録したカスタムフィールドの内容をページ内へ表示できます。
パンくず表示+
現在のページ階層を分かりやすく表示するパンくずリストを設置できます。
画像・ギャラリー・地図
スライドギャラリー
複数の画像をスライドやカルーセル形式で表示できます。リンク付きバナーなどにも利用できます。
タイルギャラリー
複数の画像をタイル状に並べ、ライトボックスで大きく表示できるギャラリーです。
地図+
Googleマップを安全かつレスポンシブに埋め込めるブロック。高さや表示幅なども調整できます。
CONTACT
スキルマーケットcoconara
にて依頼受付中！
完成後も更新しやすく、長く使い続けられるホームページを。
WordPressを使った新規制作・リニューアルに対応し、
修正回数無制限、文章や画像のサポート、更新マニュアルまで含めて制作しています。
