アーカイブ: コラム

通常のWeb制作案件は会社サイトや採用サイトなど、誰でも閲覧可能なオープンサイトの制作依頼が主ですが、ファンクラブやセミナー・研修といった、クローズドな会員制サイトの構築依頼が来ることがあります。会員制サイトはプラグインや有料テーマを利用すれば、WordPressでも作ることが可能ですが、セキュリティ対策や運用後のメンテナンスなどを考慮すると、外部のサービスを利用する方が望ましい場合があります。

そこで今回は、国内でよく使われる会員制サイト構築システムの「SPIRAL」「クライゼル」「Smart Core」について、それぞれの特徴やメリット・デメリットを交えて紹介したいと思います。

1. SPIRAL（スパイラル）

[ SPIRAL® ver.2 – ローコード開発プラットフォーム ]

「SPIRAL」は、スパイラル株式会社が提供する、ローコードでアプリケーションやWebサイトが作成できるプラットフォームです。メールマガジン、アンケート、問い合わせ管理、会員サイトなど、様々なWebアプリを作成することができます。

「ローコード開発」と謳っているとおり、本来であればプログラミングの知識が必要なWebアプリを、クリック操作だけで簡単に作ることができます。また、セキュリティ対策にも力を入れており、金融・製造・学校・官公庁など13,000社を超えるあらゆる業界での導入実績があります。

メリット

・国産サービスであり、金融機関レベルの高いセキュリティが標準装備。
・データベース・フォーム・メール配信など、会員制サイトに必要な要素がオールインワン。
・開発知識がなくても比較的簡単にフォームや管理画面を構築できる。

デメリット

・柔軟なデザインや動的な表示の自由度はやや低い。
・高機能ゆえに、初期設定や運用にある程度の学習コストがかかる。
・月額利用料が数万円〜と、個人や小規模事業者には少しハードルが高め。

2. クライゼル（KREISEL）

[ クライゼル ]

「クライゼル」はトライコーン株式会社が提供する、顧客管理やメール配信、フォーム作成、会員サイト作成などの機能を備えたクラウド型のCRM（顧客管理システム）サービスです。

Webマーケティングの現場のヒアリングをもとに開発されたサービスのため、マーケティングに必要な機能がそろっています。また、料金はレコード数変動性のため、データベース、メール配信数、フォーム作成数は使い放題となっています。サービス開始以来事故ゼロの高セキュリティで、官公庁や大企業など1,000社を超える導入実績があります。

メリット

・日本製のツールで、各機能ごとのマニュアルやカスタマーサポートが充実している。
・ドラッグ＆ドロップで構築できる編集機能により、非エンジニアでも管理しやすい。
・Salesforceやkintoneなどの外部システム、APIや外部決済システムとの連携が可能。

デメリット

・自社ドメイン利用や細かなカスタマイズには別途相談・見積が必要なケースがある。
・プランにより、利用ユーザー数やコンテンツ容量に制限がある。

3. Smart Core（スマートコア）

[ SmartCore ]

「SmartCore」は株式会社イーストゲートが提供する会員管理システムです。会員データベース管理やマイページ、コンテンツ作成、メッセージ配信など、会員管理と団体ポータル運営に必要な機能が揃っています。
30以上あるオプション機能はニーズに合わせて、自由にカスタマイズすることができます。そのため最初は基本機能のみで開始して、サービスの発展に合わせてオプション機能を追加していくことで、無駄なコストを抑えて運用することができます。

メリット

・高い柔軟性と拡張性があり、団体種別に合わせた独自機能を追加できる。
・使用するデータベース容量を要素ごとに設定できるので、低コストで運用できる。
・個人情報の保護を第一に考えられたシステムでセキュリティが充実している。

デメリット

・パッケージ価格制のため、初期費用や月額費用がやや高め。
・専用環境での開発・運用となるため、カスタマイズにはエンジニアの関与が必須。
・デモや設計打ち合わせなど、導入までに一定のリードタイムが必要。

おわりに

今回は会員制サイト構築システムについて紹介しました。冒頭で述べたように、WordPressでも会員制サイトを構築することはできますが、セキュリティ対策や障害対応などをすべて自社で担うことを考えると、やはり選択肢としては厳しいかと思います。一方、SPIRALやクライゼル、SmartCoreといった外部サービスを使えば、セキュリティや運用体制の整備が前提となっているため、安心して運用することが可能です。ランニングコストはかかりますが、長期的に見れば非常に合理的な選択肢と言えます。
目的・規模・社内体制に応じて最適なシステムを選ぶ際の参考になれば幸いです。

ChatGPTがリリースされてから、この記事執筆時点で約2年が経過しました。この記事を見ている皆さんは、すでにChatGPTをある程度使ったことがあり、その便利さを実感していることでしょう。ただ、実際の仕事の現場でフルに活用できている人は、まだそれほど多くはないのではないでしょうか？
本記事では、WebデザイナーがChatGPTをどのように活用すべきか、具体的な事例を交えて紹介します。

ChatGPTで良い回答を得るためのコツ

まず初めに、ChatGPTから明確な回答を得るためのポイントを3つ紹介します。

①質問の意図を明確にする

質問の意図を明確にして、一度の質問で求めている回答が返ってくるようにしましょう。
会話を続けながら条件を与えることも可能ですが、長い会話の中では最初の質問と整合性を保つ必要が生じ、精度が落ちてしまうことがあります。

②条件や制約を具体的にする

①とも関連しますが、条件や制約はできるだけ具体的に記載しましょう。

③期待する回答のフォーマットを指定する

ChatGPTではフォーマットを指定して質問を投げることができるので、求めているフォーマットを記載しましょう。（〇〇文字以内で〜、ですます調で〜、初心者でもわかるように〜、など）

次に、具体的な活用例を紹介します。

1. ワイヤーフレームの作成補助

１つ目は「ワイヤーフレームの作成補助」です。
ワイヤーフレームはサイトのレイアウトや全体の構成を決めるものです。
それぞれの要素にダミーのテキストを入れる必要がありますが、「ダミーテキスト」だけだと、どのような文章を入れればよいのか、クライアントが判断できません。
そのような時に、以下のような質問を投げることで、実際の情報に近い文章を提案してくれます。

Web制作会社のサイトトップページにサービスを3つ掲載します。それぞれのサービスのタイトルを10文字以内、概要を100文字以内で作成してください。タイトルと概要の頭には「ダミー。」とつけてください。

ワイヤーフレーム作成時はダミーテキストをいれる箇所が多いので、自分で全て考えるのは大変ですが、ChatGPTにお願いすることで時間が削減できます。

2. コーディングの補助

次に「コーディングの補助」です。
ChatGPTはコードの生成やエラー修正にも役立ちます。
HTMLのタグやCSSの生成にももちろん使えますが、HTMLやCSSのジェネレーターはインターネット上にも割と存在します。
そのため、JavaScriptのエラー特定など、インターネット検索で解決するのが難しい問題に使うと、時間が削減できます。

ボタンをクリックすると表示/非表示を切り替えたいのですが、動作しません。考えられる原因を教えてください。
以下が現在のコードです。

const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    document.querySelector('.content').style.display = 'block';
});

補足:
・content は最初 display: none; に設定されています。
・表示・非表示を切り替えたいので、クリックするたびに display: block; と display: none; を切り替えるようにしたいです。

また、普段見ているサイトのアニメーションが、どのように実装されているか知りたいとき、わからない箇所のソースコードをChatGPTに投げることで、理解できることがあります。

以下のJavaScriptがどのような処理をしているのか、コメントアウトでわかりやすく教えて下さい。
〜　JavaScriptのコードを貼り付ける　〜

3. WordPressのカスタマイズ

ChatGPTはWordPressのカスタマイズにも活用できます。
WordPressをカスタマイズする際、テンプレートタグやカスタム投稿タイプの設定など、ChatGPTに聞くと適切なコードを提案してくれます。

カスタム投稿タイプ 'news' を作成する functions.php のコードを書いて

【提案コード】

function create_custom_post_type() {
  register_post_type('news',
    array(
      'labels'      => array('name' => __('News'), 'singular_name' => __('News')),
      'public'      => true,
      'has_archive' => true,
      'supports'    => array('title', 'editor', 'thumbnail'),
      'menu_position' => 5,
    )
  );
}
add_action('init', 'create_custom_post_type');

上記は一例ですので、他にカスタマイズの要望がある場合でも、ChatGPTに必要な情報を共有すれば、コードの大枠を生成してもらえます。

4. コミュニケーションの効率化

クライアントとのやり取りの中で、自分で作成した文面がわかりづらいと感じるときには、ChatGPTにブラッシュアップしてもらうことができます。

クライアントにお見積り詳細について返信します。
以下の文章を添削してください。適宜改行したり、箇条書きを使用してください。

本件については、ご要望を踏まえた形で対応させていただきます。作業内容としてはデザインやコーディングを行い、納期は〇月頃を予定しています。費用はだいたい〇〇円くらいになる見込みです。なお、追加対応が発生した場合には、別途ご相談の上で調整させていただきますので、よろしくお願いいたします。

【提案文面】

本件については、ご要望を踏まえた形で対応させていただきます。

■作業内容
デザイン
コーディング

■納期
〇月頃を予定しています。

■費用
おおよそ〇〇円になる見込みです。

なお、追加対応が発生した場合には、別途ご相談の上で調整させていただきますので、よろしくお願いいたします。

「良い回答を得るためのコツ」でも触れましたが、ChatGPTは回答のフォーマットも指定できるので、メールで送る想定ということを伝えれば、件名を考えてくれますし、ビジネスメールらしい文章にしてくれます。

おわりに

いかがでしたでしょうか？
ChatGPTの活用法は、今回取り上げたもの以外にも、アイデア次第で無限に存在します。
ぜひ業務の自動化・効率化を進めながら、よりクリエイティブな作業に時間を使うために、ChatGPTを積極的に活用してみましょう！