タグ検索：web制作

a-blog cmsのビックイベント「a-blog cms Training Camp」

2024/11/15に名古屋国際センタービルで開催された「a-blog cms Training Camp 2024」に参加してきました。
a-blog cms Training Campは、年に1度a-blog cmsのユーザーが全国から集まる非常に大きなイベントです。

イベントでは登壇された方の事例やノウハウの紹介、そしてa-blog cms開発元であるアップルップルさんからは、今後のリリース予定や新機能紹介などの報告などがありました。a-blog cmsユーザーはもちろんですが、他のCMSを利用中の方やこれから使ってみたい方などにも有益な情報が多く、会場が満員になるほど多くの人で賑わっておりました。

当日開催されたセッション

今回は有料リアルイベントということですので、個々のセッション内容の詳細は省略させていただきます。非常に有益なものばかりで、休憩を挟みながらも約5時間の長丁場でしたが、自分を含め参加者の皆さんが集中をしながら情報収集をされている姿をみて、リアルにWeb制作の現場で使われているa-blog cmsの凄さを体感しました。

セッション内容

・公式テーマを活用して、効率よく開発するすすめ
　フォルトゥナ 坂本 邦夫さん

・Webサイトのサーバー間移行作業での気づき −アップデートは主体性が大事だと思った経緯
　株式会社ルーコ 川﨑 絢加さん

・「Ver3.0 こんなつまずき」集 −3系のアップデートで遭遇した「えっ！こんなこと」とその解決方法
　株式会社データファーム 勝又 孝幸さん

・a-blog cms on AWS - アップルップルさんのコーポレートサイトをAWSにお引越し！
　アルブストリクス株式会社 平山 智則さん

・いまクライアントに提供するユニットのかたち
　A-Systems株式会社 石川 寿刀さん

・事例紹介2024 - ましじめ株式会社
　ましじめ株式会社 田村 章吾さん

・エントリーの運用体験を改善するVer.3.2のアップデート
　有限会社アップルップル 宇井 陸登さん＆ 新井 慎之介さん

・a-blog cms Ver. 3.2 アップデート：機能強化と新たな可能性
　有限会社アップルップル 伊藤 淳さん

セッションの紹介は下記のページに記載がございますので、興味がある方はぜひご確認ください。
開発元のアップルップルさんや、実際のユーザーの皆さんと直接会って話す機会は大変貴重ですし、Wordpressなど他のCMSからの乗り換えを検討されている方や、企業のWeb担当の方にも有益な情報だったと思います。
また後日にはなりますが、a-blog cmsの次期バージョンなどの情報も配信されるとのことですから今から楽しみです。

・a-blog cms Training Camp 2024（DoorKeeper）

イベント終了後は懇親会へ

イベント終了後は、昨年同様に名駅にある「奇跡の居酒屋 楽々さん」へ行き懇親会になりました。
こちらでは食事・お酒をいただきながら、和やかな雰囲気でアップルップルの皆さんや参加者の皆さんと意見交換を行いました。

初めてお会いする方も多く、ご挨拶をしつつa-blog cmsがどの様に活用されているを気軽に話せて楽しかったです。こういう時に開発元のアップルップルさんにお客様からの要望をお伝えしたりすることも出来ますので、イベント終わりの懇親会って実はとても大切だったりします。

a-blog cms expertに認定されました！

弊社はa-blog cmsはビジネスパートナーとして15年、前身のa-blog時代から合わせると17年ほど愛用させていただいておりますが、この度、私（新 謙二）がa-blog cms expertの1人として、認定していただくことになりました。

a-blog cms expertは今回新しく作られた制度で、全国で最初に選ばれた16人のうちの1人ということです。
a-blog cmsのユーザーとして技術・知識に長けている方や、数多くのa-blog cmsサイトを制作し豊富な実績やノウハウがある方などが対象となっている様です。大変光栄です。長年a-blog cmsを愛用してきて本当に良かったと思える出来事でした。

これを機に取り組みを加速し、a-blog cmsの高いパフォーマンスを皆さまにお届けできる様に、経験やノウハウの蓄積をしながらお客様をサポートさせていただきます。

最後に

a-blog cmsは今後も益々パワーアップをしていきます。
来年の春にリリースが予定されているVer3.2では、今までに無い新しいバージョンアップ機能や、a-blog cmsの特徴であるユニットシステムの強化、管理画面の強化、そして新たにTwigテンプレートの追加など、様々な実装が予定されているとのことでした。また、新しい拡張アプリなども予定されていますので、来年も目が離せません。

弊社ではa-blog cmsを利用したWebサイト制作やSEO対策、Web Vitalsの改善、Webマーケティング施策はもちろん、a-blog cmsの機能を利用した社内システムによる業務改善・情報ツールとしての活用なども考えておりますので、ぜひa-blog cmsを利用した取り組みに興味がございましたらお気軽にご相談ください。どうぞ宜しくお願いいたします。

・a-blog cmsをお勧めする理由
・a-blog cms公式サイト
・a-blog cms Training Camp 2024（DoorKeeper）

競合サイトの流入キーワード調査とは？

競合サイトがどのような言葉（キーワード）で検索エンジン（Google）からお客様を集めているのかを調査・分析するものです。
この調査により、特定の業種やジャンルで人気のキーワードの発掘や、競合サイトがアクセスを稼いでいる主な流入ページの発見につながります。

外部専用ツールにて調査いたしますので、目安的な数値にはなりますが、普段見ることのできない競合サイトの情報がわかりますので、Webサイトの運用において非常に重要な情報源となります。

そこで今回は、競合サイトの流入キーワード調査をおこなうメリットをご紹介します。

（1）効果的なキーワード戦略が立てられる

Webサイトに訪問者を増やすためには、検索エンジンで自社サイトを上位に表示させることが重要です。検索で上位表示されている競合サイトの主要キーワードを知ることで、効果的なキーワードを自社サイトにも取り入れ、お客様を集める施策を行うことができます。

例：
競合サイトが「〇〇サービス 名古屋」や「〇〇の価格 比較」といった具体的なキーワードで多くの訪問者を得ている場合は、自社のサービスや商品にも同様のキーワード（この場合「地域名」や「価格 比較」）を使うことで、競合サイトからお客様を奪ったり、より多くの見込み客を集められる可能性があります。

（2）顧客の興味やニーズを把握できる

流入キーワードは、ユーザーが実際に検索している言葉です。そのため、競合サイトの流入キーワードを調べることで、どのような問題や興味を持っている人がサイトを訪れているのかを把握することができます。

例：
競合サイトが「〇〇の使い方」や「〇〇のメリット」といったキーワードで集客している場合、それは顧客がその製品やサービスの具体的な使い方や利点に興味を持っていることを示します。これにより、自社サイトのコンテンツやサービスをより効果的にアピールする方法を見つけられます。

検索キーワードには、検索の「動機」や「意図」が含まれていますので、競合サイトのキーワードを知ることで、競合サイトの施策方針を推測したり、業界のニーズを知ることができます。

（3）競合サイトとの差別化が可能

競合サイトの流入キーワードを知ることは、ただ競合サイトを真似るだけではなく、差別化にもつながります。競合サイトが取りこぼしている重要なキーワードを見つけ出し、そこに注力することで、独自の強みを強調した集客が可能になる場合があります。

例：
競合サイトが「安さ」をアピールしているキーワードを使っている場合に、あえて差別化し「品質」や「サービスの充実度」を強調するキーワードを選び、異なる角度でお客様にアプローチすることが可能です。

流入キーワード調査の実施によって期待できる結果

より多くの訪問者が自社サイトに集まる

競合サイトと同様、あるいはそれ以上に効果的なキーワードを選定することで、検索エンジンからの流入が増え、Webサイトの集客力が向上します。

売上やお問い合わせの増加

ターゲット層が使っているキーワードを把握することで、より見込みの高いお客様を自社サイトに誘導でき、結果として売上やお問い合わせの増加が期待できます。

最後に

この様に競合サイトの流入キーワードを調査することで、自社サイトを効率よく強化し、競争力を高めるための貴重な情報を得ることができます。

また、様々なユーザーの欲求や需要を知ることは、今までアプローチが出来なかった層へ訴求でき、新たな顧客を発掘することに繋がります。Webサイトで効果を上げるための施策は様々な方法がありますが、「競合サイトの流入キーワード調査」はその施策の方向性を定めるために非常に有効な調査だといえます。

弊社では今回ご紹介した「競合サイトの流入キーワード調査」もおこなっております。Webサイトで効果をあげたい、アクセスアップをしたいなど、Webサイトの運営についてお悩みの方は、ぜひお気軽にご相談ください。

2024年の世の中を賑わせている生成AI。ChatGPT、Gemini、Copilot、Perplexity、Genspark、Claudeなど、様々なAIが登場していますが、皆さんはもう利用されていますか？

これらの生成AIを利用した、文章・書類の生成、画像・イラスト生成、プログラム開発、図形チャート生成、教育サービス、複数のAIを組み合わせたオートメーション処理など、業務や用途に特化したサービスが次々と生まれていますので、今後は様々なシーンに特化したサービスが展開されていくことが予想されています。

このAIを利用する際におこなう指示や定義づけを「プロンプト」と言います。
AIはこの「プロンプト」から答えを導き出しますので、「プロンプト」の出し方により、回答の品質は大きく左右されます。

そこで今回は「プロンプト」の書き方とフォーマットをご紹介いたします。今回の情報は基礎的なものになりますが、「プロンプト」はAIを使う側として、非常に重要なスキルのひとつになりますので、ぜひご覧ください。

おすすめのプロンプトの書き方

「プロンプト」の書き方は、生成AIの目的や用途に応じて異なりますが、効果的な「プロンプト」にはいくつかのポイントやフォーマットがあります。

具体性を持たせる

「プロンプト」にできるだけ具体的で明確な指示を含むと、AIが正確な回答を出しやすくなります。抽象的な指示よりも、詳細を指定したほうが期待に近い結果を得られます。

悪い例: 「ブログを書いて」
良い例: 「中小企業向けのウェブサイト運用のメリットについて、SEOの観点から説明するブログを書いてください」

コンテキストを提供する

「プロンプト」の前後の文脈や状況を共有すると、AIが正しく解釈しやすくなります。例えば、どの様な目的で使うか、誰が対象かなども含めると、結果がより的確になります。

例: 「デジタルマーケティングの初心者向けに、SEOの基礎について優しい言葉で解説する内容を書いてください」

出力形式を明確にする

文章を生成する場合、どのような形式で返答を期待しているかを指定するとよいです。箇条書き、短文、ブログ記事、説明文など、形式を具体的に指定するとAIの出力が一貫します。

例: 「箇条書きで、5つのSEO対策のヒントを簡潔にリストアップしてください」

トーンやスタイルの指定

必要に応じて、文章のトーンやスタイルも指定すると、よりターゲットに合ったアウトプットが得られます。

例: 「カジュアルで親しみやすいトーンで、SNS初心者向けにインスタグラムの使い方を説明してください」

長さを指定する

どれくらいのボリュームが必要か、簡潔なものなのか、詳細に渡るものなのかも指定すると、望ましい長さでの応答が得られます。

例: 「100文字以内で、会社のビジョンを簡潔にまとめてください」

目的やゴールを伝える

どの様な目的でその情報を使うのか、ゴールを伝えると、AIもその方向に合わせて最適化された応答が可能です。

例: 「この文章は、顧客に当社の新サービスを紹介するためのメールで使います。丁寧で信頼感を与えるトーンでお願いします」

効果的なプロンプトフォーマット

1. 指示 + 対象 + トーン/スタイル + 出力形式 + 目的

例:「中小企業の経営者向けに、ウェブサイトのアクセス解析ツールの利点について、簡潔でプロフェッショナルなトーンで説明するブログ記事を書いてください」

2. 問題設定 + 解決策の提案 + 出力形式

例:「新しいデジタルマーケティングツールを導入した際に、企業が直面しやすい課題を3つ挙げ、それぞれの解決策を提供する形式で書いてください」

最後に

この様に「誰に」「何を」「どのように」伝えたいのかを明確にすることが、AIにとって理解しやすく、精度の高い結果につながります。

ただし、残念なことに現在はまだAIが回答する内容がすべて正しいとは言えません。もっともらしく間違った内容が含まれている場合もありますので、回答には目を通し、情報に間違いがないかをご確認いただくことをお勧めいたします。

間違った内容を検証する意味では、Gensparkの様に情報の提供元（ソース）を明示するサービスもありますので、不確かな情報の場合は複数のAIを利用するというのも良いかもしれません。

弊社では、Web制作を中心に今後AIを導入した業務への取り組みもおこなっていきますので、今後も便利な情報がございましたら発信させていただきます。便利なWebサービスを利用した、Webサイトの改善や業務改善のご提案もおこなっておりますのでお気軽にご相談ください。ぜひ皆さまのAIの活用にお役立ていただければ幸いです。

今回はWebサイト訪問者の行動を記録し、UX・UIの改善に役立つ無料サービス「Microsoft Clarity（マイクロソフト クラリティ）」をご紹介させていただきます。

期間中ずっとアクティブではなかったので数値は少なめです。参考になりづらくてすみません…

Microsoft ClarityはWebサイトの訪問者の行動を簡単に分析できるツールで、Webページのどの部分がよく見られているか、どの部分がクリックされているか、どの様にスクロールされているかなどをセッション毎に記録し、視覚的に分かりやすく画面の状態で確認が出来るサービスです。

・Microsoft Clarity
Microsoft Clarityのオフィシャルサイトはこちら

Microsoft Clarityの主な特徴

セッション録画

Webサイトの訪問者が行った操作を録画して、動画で実際の動きを見ることができます。
セッション毎に記録が分かれているため、ユーザー環境の違いなども確認できます。

ヒートマップ

ページのどの部分が最もクリックされているか、どの部分までスクロールされているかを画面で視覚的に確認できます。
ヒートマップはクリックした箇所だけでなく、リンクのエリアなどでも確認ができます。

完全無料サービス

利用されたデータ量や機能・期間に制限なく、無料でご利用可能です。

Microsoft Clarityを使えば、ユーザーの行動をより深く理解し、Webサイトを改善するためのヒントを得ることができますので、初めての方でも直感的に使いやすく、導入してすぐにご活用いただけると思います。

また、ダッシュボードでは近いエリアを短い期間で何度もクリックされた場合に、「イライラしたクリック」として判定されたりと、ユニークですが非常に重要な機能や、最近話題のAI（Copilot）も導入されており、AIに質問をするだけで、特定の数値などを教えてくれたりと、とても便利でわかりやすい機能が備わっています。

他にもヒートマップ機能を持つサービスは幾つかありますが、高額な契約のものが多いなか、なんとMicrosoft Clarityは高機能な上に無料で全ての機能が制限もなくご利用いただけます。

最後に

今回は非常に便利かつ無料のツールMicrosoft Clarityをご紹介させていただきました。
Microsoft Clarityをご利用いただくためには、Webサイトへのコード組み込みや、Google Analyticsとの連携、各種設定などを行う必要がございますが、Microsoft Clarityを導入していただければ、他では得られない訪問者の行動が把握できるため、今後のWebサイトの改善にも繋がります。

もしMicrosoft Clarityに興味をもっていただいたり、使ってみたい方がおみえでしたら、ぜひお気軽にご相談ください。有料とはなりますがサポートさせていただきます。

弊社では便利なWebサービスを利用した、Webサイトの改善や業務改善のご提案もおこなっておりますのでお気軽にご相談ください。

a-blog cmsのカスタムフィールドはとても強力で、ブログ、カテゴリー、エントリーなど、あらゆる箇所に専用のフィールドを設けることができます。非常に便利なため、a-blog cmsでサイトを制作する方は、皆さん利用されているのではないでしょうか。

このカスタムフィールドを使い選択項目を「追加・編集」出来る様にして管理したい場面があります。例えば「ブログ」のカスタムフィールドで設定した項目を、「カテゴリー」のカスタムフィールドで表示して設定項目として利用するという事もできます。

この様な使い方は非常に便利なのですが、a-blog cmsのカスタムフィールドは、選択した値が直接データベースにセットされるため、元の値が変更されてしまうとそれぞれの関連性が切れてしまうという特徴があります。

そこで今回は、ブログのカスタムフィールドグループで設定した項目を、カテゴリーのカスタムフィールドで選択した場合に、ブログのカスタムフィールドの値を変更しても関連性が切れない方法を考えてみます。

まずはブログにカスタムフィールドグループを設定

まず管理ページのブログ管理にカスタムフィールドグループを設定します。
例なので何でも良いのですが、今回は色を設定することにしました。
設定するカスタムフィールドグループの項目は以下の2つです。

・category-color-id（カスタムフィールドのID）
・category-color-value（カスタムフィールドの値）

「category-color-id」がそれぞれを結ぶキーになります。こちらは変更されない様にしたいので、一度保存されると「readonly」で編集不可にしています。IDが重複するといけませんので、今回は作っていませんがjsで自動で連番をふる様な処理をつけると良いかもしれません。

<!-- カテゴリーのカスタムフィールド -->
<!-- カテゴリーの色マスター -->
<h2 class="acms-admin-admin-title2">カテゴリーの色</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <thead class="acms-admin-hide-sp">
	<tr>
	  <th class="acms-admin-table-left acms-admin-admin-config-table-item-handle"> </th>
	  <th></th>
	  <th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
	</tr>
  </thead>
  <tbody>
	<!-- BEGIN category-color-group:loop -->
	<tr class="sortable-item">
	  <td class="item-handle acms-admin-table-nowrap">
		<i class="acms-admin-icon-sort"></i>
	  </td>
	  <td>
		<table>
		  <tr>
			<th>ID</th>
			<td>
			  <input type="text" name="category-color-id[{i}]" value="{category-color-id}" class="acms-admin-form-width-full" readonly />
			</td>
			<th>色</th>
			<td>
			  <input type="text" name="category-color-value[{i}]" value="{category-color-value}" class="acms-admin-form-width-full" />
			</td>
		  </tr>
		</table>
	  </td>
	  <td class="acms-admin-table-nowrap">
		<input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
	  </td>
	</tr>
	<!-- END category-color-group:loop -->
	<tr class="sortable-item item-template">
	  <td class="item-handle acms-admin-table-nowrap">
		<i class="acms-admin-icon-sort"></i>
	  </td>
	  <td>
		<table>
		  <tr>
			<th>ID</th>
			<td>
			  <input type="text" name="category-color-id[{i}]" value="" class="acms-admin-form-width-full" />
			</td>
			<th>色</th>
			<td>
			  <input type="text" name="category-color-value[{i}]" value="" class="acms-admin-form-width-full" />
			</td>
		  </tr>
		</table>
	  </td>
	  <td class="acms-admin-table-nowrap">
		<input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
	  </td>
	</tr>
  </tbody>
  <tfoot>
	<tr>
	  <td colSpan="3">
		<input type="button" class="item-insert acms-admin-btn-admin" value="追加" />
	  </td>
	</tr>
  </tfoot>
</table>
<input type="hidden" name="@category-color-group[{i}]" value="category-color-id" />
<input type="hidden" name="@category-color-group[{i}]" value="category-color-value" />
<input type="hidden" name="field[]" value="category-color-id" />
<input type="hidden" name="field[]" value="category-color-value" />
<input type="hidden" name="field[]" value="@category-color-group" />

ブログのカスタムフィールドグループの値でカテゴリーのカスタムフィールドを生成

カテゴリー管理のカスタムフィールドには、ブログのカスタムフィールドグループで設定した値をプルダウンで表示しています。こちらを選択するとカテゴリーのカスタムフィールド「category-color-select」に値がセットされます。
設計のポイントはブログのカスタムフィールドで設定した「category-color-id」を値として使い、プルダウンの表示にだけ「category-color-value」を利用しています。
a-blog cmsのテンプレートは変数を解決する順序がありますので、「バックスラッシュ」でエスケープ処理が必要な場合があります。その点だけご注意ください。

<!-- カテゴリーのカスタムフィールド -->
<h2 class="acms-admin-admin-title2">カテゴリーの色</h2>
<table class="adminTable acms-admin-table-admin-edit">
  <tr>
	<th>カテゴリーの色
	  <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="カテゴリーの色を選択してください"></i>
	</th>
	<td>
		<!-- BEGIN_MODULE Blog_Field -->
		<select name="category-color-select" class="acms-admin-form-width-full">
			<option value=""></option>
			<!-- BEGIN category-color-group:loop -->
			<option value="{category-color-id}" \{category-color-select:selected#{category-color-id}\}>{category-color-value}</option>
			<!-- END category-color-group:loop -->
		</select>
		<input type="hidden" name="field[]" value="category-color-select" />
		<!-- END_MODULE Blog_Field -->
	</td>
  </tr>
</table>

カテゴリーの表示ページに実装する

最後に表示部分をカテゴリーのページに実装します。
こちらのポイントはまず「Blog_Field」でブログのカスタムフィールドの値を利用可能にします。
そしてループ処理をしながら、IFブロックでブログのカスタムフィールドグループ「category-color-id」と、カテゴリーのカスタムフィールド「category-color-select」の値を比較し、真であればブログのカスタムフィールド「category-color-value」の値（今回はpタグ）を出力します。

<!-- カスタムフィールドの選択項目をブログ管理で動的に操作する -->
<!-- BEGIN_MODULE Blog_Field -->
<!-- BEGIN category-color-group:loop -->
<!-- BEGIN_IF [{category-color-id}/eq/<!-- BEGIN_MODULE Category_Field -->{category-color-select}<!-- END_MODULE Category_Field -->] -->
<p style="color: {category-color-value};">文字の色が変わったよ</p>
<!-- END_IF -->
<!-- END category-color-group:loop -->
<!-- END_MODULE Blog_Field -->

最後に

今回はa-blog cmsのカスタムフィールドの値を変更した時にも、接続が切れずに値を管理する方法をご紹介しました。

この様に、ID（category-color-id）をキーにカスタムフィールドの設計をすると、元になるブログのカスタムフィールドの値を変更しても、接続を切らずに値を動的に反映することが出来ますので非常に便利です。こちらの方法をさらにカスタマイズしていくことで、チェックボックスなどの複数項目への対応も可能です。

変数が入れ子になった場合のエスケープ処理などで少し戸惑う事もありますが、慣れてくれば勝手がわかってきますので、ぜひ皆さまも一度チャレンジしてみてください。

少しマニアックな内容だったかもしれませんが、a-blog cmsユーザーの方でしたら嬉しい情報ではないでしょうか。この様なTIPSは今後もご紹介させていただきますので、皆さまのa-blog cmsでのサイト制作に役立てていただければ幸いです。