制作経緯

株式会社イシモクのオリジナル桐製品ブランド「桐子モダン」のブランドサイトを a-blog cms で制作しました。 株式会社イシモクは、桐たんすの名産地として全国的に有名な新潟県加茂市にあります。桐の素晴らしさを現代、そして未来へと繋げるため、モダンで新しい形の桐家具や桐製品を開発しています。そんな桐子モダンをPRするため、ブランドサイトを立ち上げました。

桐子モダンに込めた想い

桐の魅力を現代にも広めるべく、イシモク様が立ち上げたオリジナルブランド「桐子モダン」。桐＝桐たんすというイメージを払拭させ、現代の生活に寄り添った商品を製造しています。 オーナー様からは、その桐子モダンが生まれるまでの経緯を、一連の物語としてユーザーに読んでもらいたいというご要望がありました。そこで文章と写真を遅延読み込みによって効果的に表示させ、流れを意識した構成に仕上げました。

家具や職人さんの写真はホームページ掲載用に撮影を行い、高級感や落ち着いた雰囲気を感じられる写真になっています。

ユーザビリティへの配慮

上部にお問い合わせボタンとショッピングサイトボタンを固定表示させることで、アクションを起こしやすくしました。また、製品紹介だけでなくお手入れ方法・よくある質問コンテンツを作成し、ユーザーの不安解消に繋げています。

ショッピングサイト「BASE」との連携

ショッピングサイト「BASE」と連携させ、サイトから商品の購入につなげられるようにしました。エントリー編集画面の該当部分に商品のIDを入力するだけで、商品情報・画像・価格など、BASEに登録している商品情報がすべて反映されるので、先方でも簡単に管理ができます。

手軽に更新できるコンテンツの作成

新規立ち上げのサイトだったため、SEOでの効果をよりスピーディに出す必要がありました。そこで、手軽に更新が可能な「おしらせ」と「納品事例」を子ブログで設置し、サイトの更新頻度を上げていただけるよう工夫しました。更新のしやすさは a-blog cms の最大の特長だと思います。

a-blog cms を採用してよかったこと

以前のホームページは WordPress で構築しており、Webに詳しいスタッフさんが更新を担っていたそうです。しかしその方が退社されてからは、お知らせの更新だけにとどまっていたとのことでした。
a-blog cms に切り替えてからは、パソコンに疎いとおっしゃっていたスタッフさんでも簡単に更新できており、ブログを定期的に更新されています。
また、リニューアル後にお問い合わせが非常に増えたそうで、非常に喜んでいただけました。

制作経緯・意図

魚町商店街振興組合さんからのご依頼で北九州市の小倉にある商店街、魚町銀天街さんのホームページをリニューアルをさせて頂きました。 魚町商店街とは日本で最初のアーケード商店街で、「銀天街」と言う呼び方は魚町商店街からはじまったとのことです。 また、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の理解をさらに深めて他社様のように素敵なホームページが制作できるように精進していきたいと思います。