この度、ウェブサイト制作者・運用者向けに特化したCMS「CORTE」を運営する株式会社Clannは、沖縄県の令和5年度ICTビジネス高度化支援事業に採択され、CORTEの次期バージョンである「CORTE2.0」の開発を開始したことをお知らせいたします。

当社について

弊社は2014年にホームページ制作会社として創業し、これまでに多くのホームページの制作を行ってきました。ホームページ制作だけでなく、お客様のマーケティング課題を解決することを価値として提供しており、マーケティング、システム開発、デザインやブランディング、コンサルティングなど、ウェブビジネスで必要なメソッドを活用し、多角的な目線でお客様の課題を一番効率の良い方法で解決してまいりました。

現在はウェブサイトやウェブシステムの受託開発する「受託開発事業」、弊社が開発するウェブサイト制作者・運用者向けに特化したCMS「CORTE(コルテ)」の開発・販売・導入の「CORTE事業」、ウェブビジネス・マーケティング顧問を主軸とする「マーケティング事業」の3つを主要な事業柱として展開しており、それぞれが連携したソリューションを提供しています。特にCORTEには力を入れており、2022年にリリースされ、多くのお客様にご利用いただいています。

CORTEとは？

CORTE(コルテ)は2022年にリリースされた、弊社が開発・運営する「ウェブサイト制作者・運用者向けに特化したハイパフォーマンスCMS」です。

現代ではウェブサイトの重要性はますます高まっており、ウェブサイトを持つことが当たり前の常識となりつつあります。それに伴いウェブサイトの提供と運営に関わる需要が急速に増加しました。特に、COVID-19パンデミックによるITの加速によって、企業やフリーランスがウェブサイト制作業を提供する市場が急成長しました。この市場の動向に対応するため、ウェブサイト制作者・運用者向けに特化したCMS「CORTE」は開発され、現在では40社ほどにご利用頂いています。

CORTEは、コンポーネントとカルテを組み合わせるデザインシステムにより、従来のテンプレートに頼るCMSよりもデザイン性の高いコンテンツを、誰でも簡単にコーディングのスキルなしで作ることができます。

また、「全コンテンツ編集可能」「様々な要件に対応できる豊富な機能」「ハイパフォーマンスでセキュリティに強い」という3つの特徴を持ち、制作だけでなく運用面にも考慮した、自由なデザインと機能性を実現するCMSとなっています。

CORTEは、ウェブサイト制作や運用に関わる人々のニーズに対応し、効率的で柔軟なウェブサイト制作を実現することを目指しています。

CORTE2.0

開発に至った背景

CORTEは、お客様から「マーケターが管理・更新・作成できるWordPressがほしい」という要望を受け、「CORTE1.0」の開発が始まりました。そして開発初期の頃から、お付き合いのある企業や新規でご相談いただいた会社様の一部の方に開発中のCORTEを利用していただき、多くのご要望やフィードバックをいただきながらCORTEをより完璧なプロダクトに成長させる努力をしてきました。そして、2022年10月にて一般公開する流れとなりました。

そんな中、利用者のフィードバックの中には現状の構造では互換性を担保できず、下記のような対応できない課題が見つかりました。

• 管理画面のパフォーマンス
• 使いやすさが一歩足りないコンポーネントエディタ
• WordPressの使っていない機能があって分かりづらい
• 集計データを管理しやすくできない

また、開発者のフィードバックにおいても、CORTE1.0は2つの言語とフレームワークを使用しているため必要な技術範囲が広くなり、一つの機能の実装に時間がかかっていました。さらに、技術範囲の広さからCORTEの開発者育成にも時間がかかっています。このような開発コストや教育コストなど、開発者目線での課題も同時に見つかりました。

そこで、このような課題を改善するため、課題全体のボトルネックとなっているWordPress依存を解消した「CORTE2.0」の開発を進めることにいたしました。

CORTE2.0について

CORTE1.0で発生した課題を解決するために、CORTEはWordPressを完全に排除し、CORTE2.0の開発を計画しました。CORTE2.0の開発はCORTE1.0の一般公開と同時に始まりました。
そして、CORTE2.0完成へのアクションプランとして、以下の取り組みが計画されています

ユーザビリティを向上させたCORTE専用管理画面

CORTE1.0はWordPressの管理画面を使用しています。しかしWordPressの仕様により、ページコンテンツが増えると管理ページの重さが問題となることがあります。

そこでCORTE2.0では、オリジナルの管理画面を実装することで動作が軽くなり、ユーザビリティが向上いたします。また、オリジナルの管理画面を使用することで、従来のCMSでは出来なかった独自のシステムの実装も可能となります。

誰でも簡単に直感的に作成できるコルテエディタ

現在のエディタはWordPressのプラグインをカスタマイズして実現していますが、カスタマイズ範囲に制限があるため、ユーザビリティの向上には限界がありました。たとえば、コンポーネントを配置した場合、必ず情報を入力しないとデザインが表示されないため、ユーザにとってストレスとなっていました。
また、コンポーネントの配置には条件があり、条件を破るとコンポーネントが消えるという問題も発生していました。このような制約の中では、ユーザが自由に好きな場所にコンポーネントを配置することができませんでした。

そこで、CORTE1.0の課題を解決するため、新たにCORTEエディタを作成いたします。CORTEエディタは、マーケター、ホームページ運用者、コーダー、デザイナーなどが使用することを想定したエディタです。それぞれの立場とリテラシーに合わせて使いやすいエディタにするため、全てのユーザーが利用できるよう、使いやすいシンプルな操作性を重視します。

新たなCORTEエディタでは、利用者がウェブページを作成する際に、真っ白なキャンバスに好きなコンポーネントを配置して情報を作り上げていくスタイルとなっています。使いやすさを重視し、サクサクとサイトを作り上げる体験を提供します。事前に用意されているコンポーネントを組み合わせるため、コーディングの知識がない方でも簡単に、直感的に使用することが可能です。例えば、サイトのPDCAをどんどん回したいけどいちいちコーダーに依頼すると時間がかかると感じているマーケターの方にも、誰でも簡単にテキストや画像が変更できるため、試行錯誤を繰り返しながら情報を整理し、好みのサイトを実現できるようなツールとなっています。

よりこだわりたい方へのテーマブル、スタイラブル機能

従来のCMSでは、決められたテンプレートにテキストや画像を入れて作成するため、細かいデザインやスタイルの設定を行うことが難しくなっていました。

CORTEでは、CORTEエディタにより使いやすいエディタブルな体験を提供しながら、コンポーネントごとやページごとにスタイルを自由に定義したい方に向けて、「テーマブル」「スタイラブル」な機能を実装いたします。

テーマブル

CORTEエディタではウェブサイト全体のフォントサイズや色などのトーンをテーマとして定義します。例えば、スタイリッシュなモノトーンのデザインでは、フォントサイズを小さめにし、カラーはモノトーンに設定します。一方、子供向けのカラフルなデザインでは、フォントサイズを大きめにし、原色のカラーを使用するなど、これにより、サイト全体のトーンが一括して固定されます。提供されるコンポーネントは、テーマの設定によってスタイルが変化します。ここで定義した内容は全コンポーネントに反映されるため、異なる経緯で作成されたコンポーネントでもデザインの統一感を保つことができます。

スタイラブル

スタイラブルな機能は、テーマブルとエディタブルを経て、さらに細かなスタイルの設定を行いたいユーザー向けの機能です。これにより、コンポーネントごとやページごとにスタイルを自由に定義することができます。特にスタイルシートを利用したいコーダーやデザイナーにとって便利な機能です。

テーマとエディタでページを作成するのが基本ですが、さらにこだわりのデザインをしたい場合には、スタイルシートを利用できます。各コンポーネントには固有のクラス名が付与されてます。例えば、以下のような形です。

const componentName = "Header1";

- {componentName}
- {componentName}-{subCompnentName}-{modifide}
- {componentName}-navLink
- {componentName}-navLink-active:md
- {componentName}-drawer::button
- {componentName}-drawer-wrap
- {componentName}-drawer-nav

また、ページごとにもbodyに固有のクラス名を付与します。

- page-{pageId}
- page-{permalink.replace('/', '-')}

これにより、ページクラスとコンポーネントクラスを組み合わせて、柔軟なスタイリングが可能となっています。

コンポーネント開発

CORTE1.0では、弊社が開発したコンポーネントによりサイトの作成を行えます。しかし従来のコンポーネントはどれを使えばいいか分かりづらいという問題がありました。

そこでCORTE2.0では、コンポーネントもよりわかりやすく、ウェブサイトに必要なシチュエーション別コンポーネントとして大幅に追加し表現力のボトムアップを図ります。

開発者の育成スキーム構築

CORTE1.0では、WordPress(PHP)とNext.js(JS)の2つの言語とフレームワークを使用しているため、必要な技術範囲が広くなっていました。これが原因で下記のような問題が起きていました。

• 一つの機能の実装に時間がかかる
• CORTEの開発者になるために必要な知識が多い

そこで、Next.jsのみを使用することで、技術範囲を絞り込んで学習コストを削減し、多くの開発者が参入しやすいCMSへと改善することにいたしました。この技術範囲の狭まりにより保守性が向上し、開発の複雑さが低減し、ウェブサイトのパフォーマンスも向上するというメリットがあります。

CORTE2.0のモニター募集

ここまでは、CORTE2.0へ向けて、開発背景や内容についてご紹介しました。そしてCORTE2.0を使っていただける代理店制度を2024年に検討しています。

代理店制度では代理店の方へ向けて下記のようなサポートを予定しております。

• 利用者向けドキュメントサイト
• 代理店向け管理サイト
• 代理店向けの営業支援
• 代理店向けコミュニティ展開

現在、モニターとなっていただける企業を募集しており、フィードバックを求めています。代理店制度をご検討いただける方は、下記よりお問い合わせください。

CORTE公式サイトお問い合わせ