制作意図・経緯

「山形を旅するように楽しむ」をコンセプトに、山形県内の写真を中心としたストックフォトサービス「YAMAGATA IMAGES」を開始しました。従来のストックフォトサービス（レンタル写真／写真素材サイト）と大きく違う点は、商用素材の提供に加えて、山形県内の名所・名物の紹介文と紹介サイトへのリンクを併載していることです。

写真利用を目的としない方にも、山形県の美しい風景や貴重な歴史文化施設などを提示し、山形への旅や観光を促進すること、山形のファンづくりを目的に運営しています。

アピールポイント

ストックフォトの検索はキーワードだけでなく、山形県の４つの地域（村山・置賜・庄内・最上）別、やまがたの春夏秋冬・建造物・歴史文化・名物・自然（山・滝）などの各ジャンル別に、写真の閲覧が可能です。写真のほとんどは山形県内で撮影されたものや山形の食などが多く、撮影場所の市町村も明記しました。観光客へのアクセス案内や写真愛好家へのロケーションサービスを充実させることで、山形の観光資源の見直しや再発見に寄与します。

各テーマ内の写真をランダムに表示しています

問い合わせからオリジナルサイズの購入にも対応

a-blog cms を採用した理由、採用して良かったこと

開始当初は、将来的に素材販売を考え「EC-CUBE」で運営していました。ところが、画像のカテゴリーやテーマ分け、また検索したときの表示も思うような結果になりませんでした。そこで、再度、サイトコンセプトやターゲット等を見直し、システムも柔軟にカスタマイズができる「a-blog cms」で再構築することになりました。前システムに登録済みだった写真素材（エントリー）をa-blog cms に移動させるのには苦労しましたが、メンテナンスのしやすさ、機能改良や追加などにも対応できるので、切り替えて良かったと感じています。

撮影場所や状況によって複数項目に登録できるようにカスタムフィールドを作成

感想など

ヤマガタイメージズは、撮影者に写真の投稿をおまかせしています。a-blog cms の投稿画面は分かりやすいので、操作方法の説明も難しくありません。また、すぐに理解していただけていると思います。システムはまだ最新ではありませんが、アップデートとともに「YAMAGATA IMAGES」をブラッシュアップしていき、より使いやすいサービスを目指します。

開発の経緯

私はフリーランスのウェブ制作業をしながら、このJUSO Coworkingの運営を夫婦で行っています。

ながらくWordPressでクライアントのウェブサイトや自社サイトを構築している私ですが、異なった文脈のコンテンツ管理を実際に自分のサイトで試してみたいと思い、2016年からJUSO Coworkingのサイトをa-blog cmsでの運用に切り替えました。

当時はデフォルトテーマをそのまま使用していたのですがもう一歩踏み込んで自分でテーマ制作に挑戦してみようと思い、2017年からちょこちょことリニューアルと開発を進め、2018年夏に無事公開できました。

2017年夏にワイヤーフレームを書き始めました。それからようやくデザインの大まかな完成まで半年、コーディングにまた数ヶ月かかってしまいました。コーディングが終わってからはテーマ開発が楽しく、またJUSO Coworkingでのa-blog cms勉強会でアドバイスを賜われたこともあってものの一ヶ月もしないうちに2018年夏の公開までこぎつけることができました。

テーマ開発のポイント

独自ユニット開発でサイトの表側からガシガシ更新

a-blog cmsの大きな特長はブロック（ユニットと呼びます）を積み上げるようにコンテンツを組める編集画面です。ユニットグループ機能などをつかって、カラム管理などレイアウトまで編集画面で管理できることが大きなアドバンテージです。

管理しやすいサイトを実現するにあたって、サイトを特徴づけるユニットを自作し、これを誰でもページ内に配置できるようにすることがなにより大切なことでした。

設備ステッカーユニット外観

ログインしていればサイトの表側からでも設備リストを更新できる。またステッカーの下につくキャプションについても管理が可能に

たとえば上記の「設備ステッカーユニット」。部屋ごとに備えている設備は変更されることがあるため、この設備情報の更新がしやすいことはとても重要でした。ログインしていれば、サイトの表側からでもこのリストが直感的に扱えることはとても素晴らしい体験でした。

画面幅いっぱいのパララックス画像もユニットに

同じくサイトの表側から画像の差し替えがカンタンに

おなじく、上記のパララックス（視差効果）画像もこのサイトを特徴づけるものですが、これもユニット化してあります。コワーキングスペースのサイトにとって大切なのはできる限り今の状況を捉えた、フレッシュな写真を印象的に見せること。こうした大きなイメージもユニット化することで更新を容易にできました。

見た目の異なる見出しもテキストタグセレクトで実現

h2・h3にもさまざまなバリエーションをもたせている

こちらもブロック編集時に手軽に選択し適用できる

前述したパララックスユニット・設備ステッカーユニットだけでなく、複数の外観をもつ見出しにも拡張ユニットやテキストタグセレクトで対応しています。同じ「大見出し」でも、使用箇所によって外観を変えたいことはよくあること。デザイン・HTMLコーディング時に生じたいくつかの見出しのバリエーションを簡単にユニットとして挿入できるようになりました。

結果、共同運営者も更新しやすいサイトに

リニューアル第一の目標は一緒に運営している妻も更新しやすいサイトを実現することでした。すべてのエントリの写真差し替え・レイアウト改変・独自パーツの追加がしやすいことが理想です。

a-blog cmsの強みの一つは記事を構成するユニットをわりとお手軽に自作できることです。WYSIWYGではなかなか実現しにくいような機能を持ったユニットをわりとお手軽に用意して更新者に使ってもらうことができます。 少し慣れはいりますが、記事のカラム分けなどにもある程度対応しやすいため、専門家でない妻がエディタからレイアウトに関する編集もできるようになりました。

その他便利になったこと

イベントの外部リンクがカンタンに

ここ数年、JUSO Coworkingはイベント情報はサイトに置かず、FacebookイベントやDoorkeeperなどの外部のイベント管理サービスを利用して広報することが多くなっています。そうなったときに外部へのリンクがしやすいことは大変助かりました。a-blog cmsでは各エントリに管理画面から「リンク先URL」を設定することで、カンタンに外部サービスへのリンクを実現することができます。

HTMLの形を規定しないから、思いのままに書ける

新しいユニットやモジュールを開発する必要が出たときも、自由にHTMLを書いて必要な箇所だけ動的コンテンツにできるので、HTMLやCSSの書き方にこだわりのある人にはオススメです。一切HTMLタグやclassの命名を縛らないCMSなので、首尾一貫した設計のコーディングができます。 こちらについては拙ブログの記事に掘り下げて書いてあるのでよろしければご覧ください。

商品、在庫、施工例をそれぞれ行き来できる導線を設計

リニューアル前は静的ページで作成されており、異なるコンテンツ間の行き来の導線が弱い状態でした。そこをCMS化し、商品情報、在庫、施工例それぞれをスムーズに遷移できる導線を追加しました。

商品情報の詳細ページから、その商品を使っている施工例と在庫情報を表示

商品詳細ページ

施工例や在庫情報に、商品ごとに選べる分類を表示

モジュールの入れ子とctxを組み合わせて、商品一覧ブログのデータをそのまま利用して一覧を作成しました。

施工例詳細ページに、「この施工例で使用している古材」として商品ページへのリンクを設置

こちらもモジュールの入れ子とctxを組み合わせ、施工例と商品を紐付けて表示。施工例から商品に興味を持ったユーザーに、商品ページにアクセスしてもらいやすくしました。

ターゲット設定に基づき導線を見直してa-blog cmsで再構築。サイト回遊しやすさを重視して申込み数が増加

サイトからの申込み・お問い合わせを増やすために、以下の点に注力してリニューアルを行いました。

• ターゲット別にサイト構造を設計
• スムーズにページ遷移できる導線
• 好ましいイメージを抱いてもらえるデザイン

ウエディングフェア情報の構築

サイトのコンバージョンとして最も重視しているのが、ウエディングフェア情報です。リニューアル前にも予約システムがありましたが、導線を改善したシステムを構築しました。 ※フェア情報はアップルップルさんにカスタマイズを依頼いたしました

• フェア情報の一覧、詳細を行き来しやすく
• 今週末開催のフェアを今回のリニューアルで新規に作成。具体的に検討しているユーザーにすぐにアクセスしてもらえるように。また、フェアページだけではなく、ウエディング関連ページの下部に「今週末開催フェア」を表示し、他ページからもフェア情報にアクセスしてもらいやすく改善
• フェアの内容で選んだり、日程から選んだりと、選び方の選択肢を増やす
• フェア日程の入力方法改善
• 「このフェアに含まれるコンテンツ」をフェア間で流用できるように、関連エントリーとして登録

今週末開催のフェアを表示

フェア情報の詳細ページ

他コンテンツへのリンクを設置する際はなるべく関連度を高くする

他コンテンツへリンクを貼る際は、「最新エントリーから○件」などとはせず、そのコンテンツになるべく関連するエントリーを表示させています。 例えば、ウエディングプランと関係の深いフェアを、「関連エントリー」の機能を使って手動で選択できるようにしました。

プラン詳細ページ

また、チャペルの紹介ページでは、そのチャペルを使用したユーザーの声（レポート）を掲載しています。ここも、レポート全体の最新情報ではなく、「このチャペルを使った」レポートに絞り込んで関連度合いを高めています。 この絞り込みにはカスタムフィールドを使用しました。

チャペル紹介ページ

社会福祉法人 丸紅基金様のサイトをリニューアルさせていただきました。

丸紅基金様は1974年より総合商社丸紅株式会社ならびに丸紅グループの役員、社員、OB・OG、その他関係者の寄付により、全国の福祉団体へ様々な分野での社会福祉助成を行う団体です。

2010年のWebサイト公開から8年経過し、一部ページが活用されていないなどの構造面から、画面サイズをはじめとしたトレンドの変化やスマートフォン対応などのデザイン面まで、様々な課題を抱えていました。また、運用面でもa-blog cmsではない別のコンテンツ管理システムが導入されていましたが、自由度が高いためにかえって操作が難しく、WYSIWYGエディタを使用している箇所ではレイアウトが崩れるなどの問題があり、事務局から開発会社に問い合わせることが多くありました。

今回、旧サイトのコンテンツ管理システムのサポート終了にともない、リニューアルの提案の機会をいただきました。そこで、ブロック型エディタで分かりやすい操作性に定評があり、グループ企業でも多くの導入実績がある「a-blog cms」をご提案させていただきました。

全ページをCMS化することで、ランニングコストだけでなくイニシャルコストを圧縮

プロジェクトがスタートし、当初は一部分だけCMS化することを提案していましたが、お客様にヒアリングしたところ今までと同様にすべてのページをCMSで変更できるようにしたいというご要望でした。

そこで、コンテンツごとに必要なパーツを洗い出し、2種類の雛形でCMS化することにしました。プロジェクトの工数が削減でき、全体的に統一されたデザインで構成することができました。

1つ目の雛形：固定ページ

固定一覧ページ（index.html）

固定詳細ページ（entry.html）

2つ目の雛形：記事ページ

記事一覧ページ（topics/index.html）

記事詳細ページ（topics/entry.html）

制作時の資料とスタイルガイド

サイトマップで適用するテンプレートと必要なパーツを洗い出し

スタイルガイドをCMSで構築し、ユニットでページを構成する

a-blog cmsではURLコンテキスト機能により、特定のテンプレートを適用したいページと、それ以外の汎用的なテンプレートを適用したいページを簡単に分けることができるので、特定のページだけCMS化することはもちろん、標準的なコーポレートサイトの構築や、また特定のページだけランディングページのように作り込むなど、色々なパターンが同じ設計で構築できます。

必要最低限で迷わない操作

a-blog cmsには「管理ページ」が用意されていますが、閲覧ページから直接編集画面を開くことができるので「見たままの編集」が可能です。雛形によってお客様の操作方法が変わることがなく、迷うことなくページの編集ができるのが何よりの利点です。

変更画面への動線が最小限

どのページもページの下部に「変更」ボタンがあるため、迷うことがない

a-blog cms Ver.2.10から管理ページのメニューも最小限にできる

また、ちょっとした更新が必要な箇所は「モジュールフィールド」や「カテゴリーフィールド」によりカスタムフィールドを設定することができるので、トップページの「おしらせ」や、カテゴリートップ画面のリード文を変更したいといった要望にも簡単に応えることができます。さらに閲覧ページ上でマウスオンで変更ボタンを表示できるので、視覚的に変更箇所が分かりやすくなっています。

トップページのおしらせ

トップページの「おしらせ」にマウスオンすると「モジュール」ボタンが表示される

モジュールフィールドのカスタムフィールドで「おしらせ」の変更画面を提供

カテゴリーのリード文を変更

カテゴリーのリード文にマウスオンすると「カテゴリーを編集」ボタンが表示される

カテゴリーのカスタムフィールドでリード文の変更画面を提供

メディアユニットを活用し画像サイズを統一

丸紅基金様では助成先へ訪問し、その様子をトピックスに掲載しています。これまで丸紅基金様が使っていた別のCMSではトピックスに掲載する際に写真のトリミングや、横並びにする際のサイズ調整が必要でしたが、a-blog cms Ver.2.10以降に強化された「メディア」機能を活用することで、CMS内で操作が完結できるようになりました。

画像の横並びの際にトリミング

2カラム、3カラムの画像の横並びもコツが必要だが、WYSIWYGのようにレイアウトが崩れることがない

a-blog cms Ver.2.10以降に強化された「メディア」機能でトリミング、画角の調整が容易

a-blog cmsとお客様の関係

弊社ではWebサイトの納品後に、1時間ほどの操作説明会を開催するとともに、30ページほどの更新マニュアルをお渡ししています。既存のページを修正したり、新しい記事を作成するところからご説明し、慣れてきたら文字の着色や、ユニットのグループの設定（2カラム、3カラム）にもチャレンジいただいています。

マニュアルの一例

ユニットで再現できるレイアウトを紹介（見出し、リスト、テーブル、ファイル）

ユニットの「配置」「グループ」を使って画像の回り込みや２カラムレイアウトを再現する方法を紹介

モジュールフィールドのカスタムフィールドで作り込んだページの更新方法を紹介

プログラム開発や管理画面での複雑な設定を必要としないので、運用していく中で「お客様からこういうことができないか？」というご要望にもすぐに応えることができ、お客様とコミュニケーションをとりながらじっくりサイトを育てていくことができるのが、a-blog cmsの魅力です。