制作経緯・意図

魚町商店街振興組合さんからのご依頼で北九州市の小倉にある商店街、魚町銀天街さんのホームページをリニューアルをさせて頂きました。 魚町商店街とは日本で最初のアーケード商店街で、「銀天街」と言う呼び方は魚町商店街からはじまったとのことです。 また、SDGsの取り組み活動も行なっておりSDGsに関するアワードをいくつか受賞されている積極的な商店街さんです。

今回のリニューアルに関していくつかポイントがありましたが、a-blog cmsを導入することでスムーズ且つ、スピード感ある制作を実現することができました。

アピールポイント

メディアモジュールの公開期限機能の活用

メインビジュアルの画像は決まった画像があり季節ごとに変更したいという要望がありました。 こちらは標準で付いている公開期限を活用することで実現可能でした。 複雑な条件をテンプレートに指定することもなく管理画面の設定から年間の表示を管理することが可能です。

別で運用されているサイトの一覧を表示

SDGsの活動はa-blog cmsとは別のシステムであるWordPressですでに運用されていましたが、最新記事の一覧をトップページに表示したいという要望がありました。 トップページ一覧表示の部分は a-blog cms とは切り離してJavaScriptのVue.jsを使用して表示しています。 こういった場合、a-blog cms にかぎらず CMS と JavaScript の記述方法がぶつかってしまうことがよくありますが、``を使用することで、テンプレート内で JavaScript の記述をストレスなくスムーズに使用することができました。

一覧から直接エントリー編集画面へのリンクを設置

店舗様ページはご自身のホームページがあれば「リンク先を設定」して直接ご自身のホームページへリンクさせています。こちらも標準の機能で実現可能です。
しかし、各店舗様のページを修正したい場合に詳細ページへは移動できなくなるため、管理ページ内のエントリー管理から変更する必要があります。
若干の手間がありましたので「リンク先を設定」に関係なく管理権限でログインしているユーザーにはエントリーの修正ページへ直接移動できるリンクを設置することで管理画面に移動することなく詳細ページへ遷移可能になりました。

PDFプレビューの活用

多言語ガイドマップがあるのですがPDFプレビューを活用することで視覚的に表現することができました。PDFを添付するだけでなく、こういったより見やすい機能が標準で搭載されているところが嬉しいですね。

ctxを使うことで特殊な一覧表示もシンプルに管理可能

店舗マップページは実際の店舗の並び順と同じ順番で表示したいという要望がありました。
このような特殊な一覧表示もカスタムフィールドで条件を絞り込みこめば表示可能なのですが、条件毎にモジュールIDが増えると後のメンテナンスが大変になる場合があります。
今回、表示の条件を満たすには12個のモジュールIDが必要なことがわかりました。
そこでctxを使用することで1つのモジュールIDを使い回す形にできたためシンプルな管理を実現することができましした。

プロジェクトに a-blog cms を採用した理由、採用してよかったこと

画像の公開期限機能やPDFプレビュー、詳細ページを別ページへのリンクなどどれも標準の機能で表現することができました。標準でできることの幅が広く大変助かりました。 またスケジュールに関しても商店街さんのご協力もありデザインから構築までの流れをスムーズに進めることができました。 デザインとCMS構築、データの確認を同時進行することができ、制作期間は1ヶ月ほどで完了することができました。 このカスタマイズ性高さ、スピード感は a-blog cms ならではの良さだと実感しています。

a-blog cms の基本機能を活用

リニューアル前のサイトは静的なHTMLで旧サイトとその前のサイトが2つ公開されている状態で、コンテンツの重複やスマートフォンに対応しているページとそうでないページが混在していたことから、混乱した動線を整理し、訪問者にわかりやすい構造にするためにリニューアルを行いました。

疾患の説明はエントリーで作成

内科・小児科などの各科の中に、「気をつけておきたい○○科の疾患」というセクションがあり、それらはすべてエントリーで作り、エントリーボディモジュールで表示しています。

ユニットにせずにエントリーにしているのは、各疾患について、医師が詳細な情報や最新の知見などをコラムとして追加できるようにしているためです。

各科のページに表示するのは、カスタムフィールドで作った概要文のみとし、詳細が追加された場合には、「詳細ページへのリンク」にチェックを入れることで、個別ページへのリンクが追加されます。

この場合、疾患ごとにページができてしまうため、概要しか入っていないエントリーには、noindexが出力されるようにカスタマイズしています。

お知らせに2種類のモジュール

制作途中に新型コロナウイルスのワクチン接種を行うという話がでてきたため、通常のお知らせと新型コロナウイルスにのお知らせの両方がありますが、メディアバナーモジュールとエントリーサマリーモジュールを併用しています。

メディアバナーモジュールは画像バナーで使われることが多いですが、自由にHTMLを書けるため、コロナ対応で急な変更が生じた際にもすぐに文言を変更できるようにしています。

またエントリーサマリーモジュールはお知らせの中でも「トップページに表示する」ことを指定したもののみ出力するようにし、それ以外についてはお知らせページで一覧表示させるようにしています。

a-blog cms ならではの更新性・運用性に期待

どうしても新型コロナウイルスの影響を受ける状況ではありますが、いつ緊急的な要素が飛び込んでくるかわからない現在の状況だけでなく、終息後も必要なときに必要な情報に更新してもらえるように、管理画面上で必要な部分を変えられるように設計しています。

自身でコンテンツを準備できる人にとって、特別なランニングコストを使わせることなく、きちんとサイト運営ができる a-blog cms に合ったサイトであると考えています。

歌手サイト制作

三ツ屋亜美は、中学校、高校と陸上部に所属し400mハードルでインターハイ、国体に出場した異色のアーティストで、2020年７月に徳間ジャパンより「黄昏のカフェ」でメジャーデビュー。

今回、彼女の支持者からの依頼でa-blog cmsで「三ツ屋亜美公式サイト」を制作。

歌手は、顔や名前を売り、人脈を築き、人々に広く認知されるよう歌手活動を展開しています。そういった意味で、公式サイトは、情報発信のツールとして、ファンとの絆を深める重要な役割を担うことになります。

ナビボタンは英語表示

サイトオーナーは若く、若い世代の支持も期待できるので、ナビボタンを英語表示にしました。

コメント機能を実装

そして日々の歌手活動が気軽に投稿できるように「ブログ」のカテゴリーを作成し、ファンの反応が把握できるようにコメント機能を実装しました。さらに「いいね」機能があると歌手活動のモチベーションが上がる効果が期待できるので、将来実装できたら幸いです。

スケジュールの設置

さて、ファンが一番気になるのはライブ情報ですので、「スケジュール」のカテゴリーを作成し、サイトオーナーが書き込みできるようにしました。また校正オプションでリンクも付けられるようにしました。スマホでスケジュール表の横幅がスマホの横幅とほぼ同じで、ご案内メッセージがセル内に収まらないときには自動的に折り返してくれるのがとても気に入っています。

カレンダーを設置

またエントリーした記事が探しやすいようにカレンダー機能を追加しました。塗りつぶされた日をタッチすると、その日に投稿されたエントリーを確認できるので、ファンの皆さんに喜ばれるのではないでしょうか。

動画の活用

歌手の人柄ですが、写真だけでは伝えられない面があるので動画を活用しました。カテゴリーに「ビデオ」を作成し、YouTube公式チャンネルに掲載している動画が公式サイトでも視聴できるようにしました。現在、新曲「黄昏のカフェ」に因んで全国の素敵なカフェ店を取材に回っている動画をご案内しています。

サイトオーナー好みに柔軟に対応できるa-blog cms

エントリ作成は基本的にサイトオーナーが行います。サイト公開前にエントリー作成の手順について一通りオーナーに説明しましたが、突然トップページの表紙が大きく変わっていたり、サイトロゴマークやログインヘッダーの画面が変わっていたので大変驚いたことがあります。ですがサイトオーナーの好みで写真やイラストが差し替えできるのはサイトへの満足度を高めることに繋がるので、過度に干渉することは控えるようにしています。オーナー好みに柔軟に対応できるのも a-blog cms のメリットではないかと思います。

a-blog cmsを採用して

サイトオーナーがカテゴリーを間違えてエントリーした記事を別のカテゴリーに簡単に移行して修正できるなど、柔軟性が高く、とても使い勝手の良いCMSだと思いました。 今後もホームページ制作は a-blog cms 一筋でがんばりたいと思います。

全国詩曲音楽連盟は、「作家と歌い手を結ぶ虹のかけ橋」をキャッチフレーズに、「より良い歌の創作」と「より良い歌を後世に残すこと」を目的に1973年に設立しました。

全国詩曲音楽連盟はすでにホームページを開設していましたが、全てHTMLで制作されていたためにサイトオーナー側で更新作業ができない、またスマホに対応していないとのことで、リニューアルの依頼がありました。

a-blog cmsならオーナーのご要望に簡単にお応えできると思ったので、二つ返事で承りました。

制作にあたって

ユーザーは高齢の方が多く、スマホではメニューのナビボタンが操作できない危惧が考えられたので、ホームナビのトップページにナビボタンの項目をリストモジュールを利用して全項目をリスト表示させました。

校正オプションで解決

作家（作詞・作曲家）会員のリスト項目ではランダムで３名を表示するようにしましたが、「作家会員は３名しかいないのか？」とご指摘をいただいたので、校正オプションで「（３名ランダム表示）他多数」の一文を追記しました。

作家一覧は文字情報のみでご案内

作家一覧では顔写真を掲載しないで欲しいとのことだったので、文字情報のみでご案内しました。

また作家紹介ページでは、顔写真を小さくして欲しいとのことだったので、幅を140pxに設定しました。

カスタムフィールドでご要望に応える

作家一覧は自動的に作家名の50音順に並び替えて表示して欲しいとのことだったので、カスタムフィールドで「ふりがな」項目を作成することでご要望にお応えしました。

作家と歌手を結ぶCD化

全国詩曲音楽連盟は会員作家の作品を紹介して、その作品を歌って下さる歌手を募集してレコーディング。そしてCDを発売することで作家と歌手を結ぶ役割を果たしています。

運用後に新たなご要望が入る

サイトリニューアル後に会員の方々から全国詩曲音楽連盟に作品のミュージックビデオが幾つか寄せられ、サイトオーナーから「YouTubeに掲載して欲しい」と急きょ依頼がありました。それで新規に「YouTube」のカテゴリーを作成し、YouTube公式チャンネルを開設して全国詩曲音楽連盟のリニューアルサイトにもYouTube掲載ビデオが視聴できるように組み込みました。 さらにオーナーから「YouTubeが目立つようにして欲しい」とのことで、「YouTubeのナビボタン」を「ホームナビ」の右隣に新規に作成してトップページの「お知らせ」項目欄の下にもリスト表示でご案内しました。

a-blog cmsを採用して

運用後にもオーナーのご要望に柔軟に対応できるのはありがたい限りです。 カテゴリーを作成してナビボタンを追加したり、ナビボタンの順番を簡単に変更できる、子ブログのエントリーを親ブログに移行するのも簡単、エントリーを作成するときに「複製」を使うとエントリーの入力時間が短縮できるのはとても便利です。

今後は

a-blog cmsの理解をさらに深めて他社様のように素敵なホームページが制作できるように精進していきたいと思います。

大阪府立花の文化園様は、四季折々の花や、マルシェや各種教室など、花に関する様々な文化を楽しむことができる施設です。

業務アプリのリプレースなどをご検討いただく中でWebサイトについても、2016年からWordPressでサイトを運営されていましたが、管理画面の操作性が良い a-blog cms へのリプレースをご検討いただきました。

WordPressからの移行

2,114件の記事の移行もインポート機能でスムーズに

リプレース前は2,114件と膨大な数の記事がありましたが、a-blog cms のWordPressインポート機能で、スムーズに移行することができました。

WordPressからのインポート機能

インポートした記事はテキストユニットに格納される

「先頭に固定表示」など WordPress と同じことができるように

WordPress にあり、a-blog cms に標準機能でないのが「先頭に固定表示」「アイキャッチ画像」の機能です。ただし、カスタムフィールドと記事一覧のモジュールの設定ですぐに実装が可能です。これまでと同様のオペレーションができるように気を配りました。

お知らせ記事一覧では画面上部に固定表示された記事が並ぶ

記事編集画面では「先頭に固定表示」、アイキャッチ画像の登録が可能

参考

• a-blog cms zoom up 2021/05 1つのモジュールで特定のエントリーを固定表示する方法
• a-blog cms zoom up 2021/03 WordPressサイトから a-blog cmsへの移行案件で工夫したこと
• アイキャッチ画像のIDからアイキャッチ画像のパスを取得する校正オプション
• WordPressからインポートした本文中の画像からサムネイル画像を取得する校正オプション

OGPモジュール、パンくずリスト、構造化データ（JSON-LD）によるSEOの強化

リプレース前はSEO用のプラグインや、パンくずリスト用のプラグインが入っておらず、TwitterやFacebookなどでの表示（OGP）も対応していない状態でした。a-blog cms の標準機能であるOGPモジュール、トピックパスモジュールを使用することで、OGPや構造化データによるSEOの強化を実施いたしました。細かくSEOを調整できるのも、a-blog cms の魅力です。

OGPの設定によりサムネイルが表示されている

OGPと構造化データの出力

記事一覧をCSVで出力することで、WordPress のURLから a-blog cms のURLへリダイレクトを実装

リプレース前では各記事のURLが記事タイトル＆ドメイン直下で生成されていました。a-blog cms では各記事のURLが「entry-○○○.html」という形式でカテゴリのディレクトリ以下で生成されるため、WordPress のURLから a-blog cms のURLへリダイレクトが必要でした。

WordPress側はWordPressプラグインの「WP All Export」でCSVをダウンロード。a-blog cms側はダウンロードモジュールで移設が終わった後の全記事一覧のCSVをダウンロード。Excelで照合を行い、.htaccessのリダイレクト用の記述を生成しました。

a-blog cmsで用意した全記事ダウンロード画面

リダイレクト用の記述をExcelで作成

記事ページだけでなく、固定ページもユニットでメンテナンスしやすい構成に

記事ページ

リプレース前と同様に、「お知らせ」「イベント」「見頃の花」などは a-blog cms のエントリーとして、日々更新できるようにいたしました。

お知らせ一覧

お知らせ詳細

固定ページ

リプレース前では固定ページもテンプレートとして作られていましたが、a-blog cms のユニットで構成できそうな内容については、a-blog cms のエントリーとして登録してお客様のほうでメンテナンスできるようにいたしました。

カフェ・ショップ 表示画面

カフェ・ショップ 管理画面

お客様でメンテナンスできるようにマニュアルを充実

a-blog cms のエディタはブロック型のUIを採用しているため、WYSIWYG型のようにレイアウト崩れすることなく自由度の高いレイアウトを再現できますが、複雑な操作は慣れていただくまでに少し時間が必要です。どの案件でも作成させていただいていますが、お客様がメンテナンスしやすいようにマニュアルも充実させています。

テキストユニット（見出し、リスト）

テーブル、ファイルユニット

YouTube、地図ユニット

画像の回り込みの構成方法

２カラムレイアウトの構成方法

囲みの構成方法

メディアバナーモジュールによるスライドショー管理

トップページのイメージが固定されていると、魅力を十分に訴求することができません。そこで、メディアバナーモジュールで随時差し替えが可能な構成にいたしました。

トップページ

スライドショー管理

使いやすいイベントカレンダーを構築

大阪府立花の文化園様では、マルシェや屋外イベント、各種教室や展示など、日々さまざまなイベントが開催されており、視覚的に分かりやすく伝えるためにカレンダー形式で表示しています。

リプレース前は「The Events Calendar」というプラグインでカレンダー形式で表示されていましたが、休園日（毎週月曜日、月曜日が祝日の場合は翌日が休園、年末年始やGWは不規則に変動）があることが課題でした。特に、各種展示やフォトコンテストなど長期間に渡って開催するものは、日程の中に休園日も含まれるので、休園日中も開催されているように見られないように、複数の日程でカレンダーに登録が必要になっていました。（6/1(火)～6/10(木)のイベントだとしたら、6/1(火)～6/6(日)、6/8(火)～6/10(木)でカレンダーに登録するなど）

今回のリニューアルではスケジュールモジュールによる休園日管理を行うことで、管理者がイベントを登録する際に休園日を意識しなくても済むように設計を行いました。また、イベントカレンダーをfullcalendar.jsで実装することで、画面遷移することなくシームレスにイベントを表示するようにしています。

ぜひ実際の画面でご覧ください。

イベント | 大阪府立花の文化園

大阪府立花の文化園

スケジュール管理で休園日を登録

イベントをエントリーに登録。毎週火、木の繰り返し予定や、複数の開催日時にも対応

イベントをJSON形式で取得し、fullcalendar.jsによりカレンダー形式で表示。休園日と祝日が塗り予定で表示される。開催日時が休園日をまたがるものは休園日を除いて表示される