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

丸紅基金様は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の魅力です。

制作経緯・意図

写真スタジオフォルム様は、山形市内、山形県庁のすぐそばに店舗を構える写真館。「写真だけの結婚式」や「写真だけの成人式」、証明写真をはじめ、様々な記念撮影サービスを提供されています。

以前、フォルム様のウェブサイトでは、Movable Typeを使っていましたが、リニューアルとともに a-blog cms を導入。Ver.1.7系のころからご利用いただいています。まだa-blog cms に不慣れだった私に、様々なことを試す機会をご提供くださいました。ご不便をおかけしているところもありますが、少しずつアップデートしながら対応しています。

アピールポイント

a-blog cms のシークレットブログ機能を利用した、写真ダウンロードサービスを作成しました。通常、撮影した写真データはCDメディアに保存してお客様に納品するそうですが、ここ数年は、メディア自体の需要が少なくなっているとのこと。ウェブサイトのアクセス状況を確認すると、約７割がスマートフォンやタブレット。この状況を考慮し、ダウンロード機能のご相談をいただきました。

お客様専用の画面（PC表示）

モバイル端末にも簡単に保存できます

お客様を「読者」登録し、ユーザー管理 ＞ カスタム設定 に、画像のカスタムフィールドグループを作成。アップした写真はユーザープロフィールで表示しています。万一、お客様が他のお客様のページにアクセスしようとしても、ログインしているユーザーIDで判別するため、不正なアクセスを防ぐことができます。

お客様がログインして最初に表示されるページ

管理者がログインすると最初に操作方法が表示される

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

a-blog cms を採用した当初は、更新のしやすさはもとより、フォーム機能が標準に備わっており、いくつでも、どこにでも設置できることが大きな理由でした。また、他のCMSでよく聞く「脆弱性」もほぼないため、その安心感は高かったように思います。今では、様々なご要望にも、プログラムを書かずに対応できていることが、採用して良かったと感じています。以前のシステムでは到底考えられないことでした。

オーナーの感想など

最近は、お知らせブログの更新がメインですが、操作方法にも慣れたので面倒なことはないそう。状況やニーズにあわせてウェブサイトを運用できているので、引き続き、ターゲットによりよい情報を発信していきたいとのこと。

『世界の国旗』ミニサイトについて

“デザインを通して世界を学ぼう” をテーマに、世界の国旗について解説するミニサイトです。 国旗の簡単な読みとき方や、デザインの色や形に込められた意味。国旗ができたときの歴史的背景などを、デザインや歴史上の人物にまつわるエピソードを交えながら紹介しています。

ミニサイトって何？

ミニサイトは、簡単に言うと小さいウェブサイトのことです。ニッチなテーマに絞り込んで作るところが特徴で、小さな辞書や説明書のような役割を果たせるサイトのことを言います。

★ミニサイトの特徴

・絞り込んだニッチテーマ ・コンパクトサイズ ・全体設計を重視 ・時系列、投稿順に記事が並ぶブログとは違い、目次順に並ぶ ・ページ数は、5〜40p以上とさまざまなものがある ・基本的には、完成したら特に記事を書く必要がない

参考ページ

自分が好きなもの、詳しいこと、取り組んできたことを生かせるので、個人でも作りやすく、ミニサイトを作る人も増えています。『世界の国旗』はまだまだ記事が少なく、本格的な運用はこれからなのですが、ブログでもなくウェブサイトでもない、少し新鮮なサイトづくりに挑戦しています。

この企画について

このミニサイト運営は、クライアントワークではなく、あくまでも個人の研究と趣味をかねて取り組んでいるものです。もしクライアントワークなら、きちんとしたマーケティングや企画が必要ですが、今回は違います。最初から色々なことを決めていたわけではありません。こういうサイトを作ってみたい！という気持ち以外で、何を印に取り組んできたのか紹介します。

・デザイナーとして「違う文化を横断できる力」を伸ばそう。

少し説明がややこしくなるので、昨年書いたブログ記事を掲載します。 世界中のデザイナーが、”重要になる”と考えている「異文化間スキル」って何？と調べ始めたことがそもそものきっかけです。

このように、最初は国旗はなかったのです。タイトルも『世界のデザイン』にしていました。

・国旗のデザインについて、体系的に詳しく学べるサイトはない！

上に貼った記事を書いてから、図書館で、国旗の本に出会いました。 結局、異文化を知ることでしか文化の壁は超えられないよなあと思っていたところでした。 それなら、世界の色々なデザインを紹介するブログを書こう。と考え、題材を探すために図書館に行ったのを覚えています。

最初は、世界の建築や料理についてなどを検討していましたが、国旗の本を見たとき、なにか、自分にぴったりだと思いました。また、国旗の本はたくさんあるけど、国旗のデザインについて詳しく体系的にまとめたウェブサイトはありませんでした。あ、ないんだ！じゃあ、私が作ろう！みたいな感じで、それから国旗の勉強を始めました。実際に取り組む中で、自分がこれをやっている理由もたくさん発見しました。

・とにかく、自分が納得しながら、楽しく続けること。

実際にやってみて、この挑戦は、自分が想像していたよりずっと高い山なんだ。と気づきました。 国旗について調べていると、たどり着くのはデザインというよりむしろ、世界史でした。各国の歴史は繋がっているので、広大な、歴史の勉強が必要だったのです。また、国旗の由来や歴史について、間違いのない情報を発信するためには、充分な考証が必要不可欠でした。

そんな中で、とにかく続けるために大切にしているのが、自分が好きなようにやる。ということです。 続けていく中でしかわからないことばかりですし、わたし自身が考える正解もどんどん変わっていきます。ですから、このミニサイトがこれからどうなっていくのか、正直まだわかりません。でも、最初に書いた「異文化間スキル」のブログ記事を見る限り、けっこう遠くまできたなあと感じています。

カスタマイズについて

特別なカスタマイズはなにもしていません。 基本的に、システムに時間をかけるのではなく、コンテンツ制作に集中したいと考えています。 a-blog cmsはデフォルト機能が充実していて、デザイナーのわたしでも、やりたいことを簡単に実現できるのでありがたいです。初めて作るミニサイトでも、少しずつ形を模索したり調整できるので安心しています。

今後は、おすすめの国旗本を紹介するコンテンツや、a-bog cmsの機能を使った、記事の英語対応などを予定しています。一旦リニューアルが終わったので、まずは少ない記事を増やしていきたいです。

サイトリニューアルにあたって

冷蔵設備などに使われる冷媒ガスを取り扱う太洋商事株式会社さまのコーポレートサイトのリニューアルをさせていただきました。Webサイトリニューアルにあたり、いただいたご要望は以下の通りです。

• 信頼感のあるブランドイメージを構築したい
• マルチデバイス対応（スマートフォン、タブレット）
• 社内の誰でもサイトを更新できるようにしたい
• 海外進出のためにサイトを英語対応したい

トップページ（PCビュー）

事業案内ページ（PCビュー）

配色・ビジュアルデザイン

「”地球環境の保護”と”快適な暮らし”の共存」というコーポレートメッセージを表現するために、ダイナミックな画像・写真によるブランドイメージ向上と、事業についての情報を伝える具体性のバランスを取ったデザインをご提案しました。 配色には、大地や空、緑、海を感じさせるアースカラーを導入し、見出しのあしらいなどでモダンな印象を演出しています。 Webフォントサービス「FONTPLUS」を導入して、見出しに「筑紫ゴシック Pro」を使用しました。モダンなたたずまいの中にも骨太な印象のあるフォントです。

動き・エフェクト

ご要望を受けて、モダンなアニメーション、エフェクトを導入しました。ブランドイメージ向上、高級感の演出だけではなく、読ませたいコンテンツをより目立たせる狙いがあります。

コンテンツ整理とブランド価値の再発掘

商品写真の撮影も担当しました

以前のWebサイトのコンテンツや既存の会社案内の内容から、よりWebとして伝わりやすく・運用しやすいコンテンツを再設計しました。中部エリアにおける業界のパイオニアであり、幅広い事業と競合他社との違いをアピールすることを意識しています。

Webサイトの掲載コンテンツ刷新のために、冷媒ガスなどの取り扱い商品の写真撮影と取材を行いました。カタログ的な写真だけではなく、商品の新たな一面を発掘できるような華やかなビジュアルを制作しています。

「誰でも運用できる」体制を整える

デザイン性の高いカスタムユニットで柔軟なエントリーを作成

「HTMLの知識がなくてもWebサイトを更新できるようにしたい」というご要望を受けて、a-blog cmsの導入をご提案しました。カスタムフィールドやカスタムユニットを活用して、「ログインして、変更したい部分をクリックする」という基本のルールだけを覚えればWebサイトを自由に更新できるように構築しました。

頻繁に使う機能は目立つボタンを設置

更新頻度が高い「お知らせ」はひと目でわかる位置にエントリー追加ボタンを設置しました。 クライアントさまのオフィスで更新レクチャーをした際には、HTMLの知識がないスタッフの方でも更新ができるとご好評をいただいています。

クライアントさま専用の更新マニュアルを作成し、更新レクチャーを受けていない方でもWebサイトを触れる体制を目指しました。

多言語対応機能でグローバルな情報発信を

多言語ユニット機能とカスタムフィールドを組み合わせた英語版サイト

!クライアントさまに海外拠点があるため、英語での情報発信ができるようにa-blog cmsの多言語ユニット機能を導入して日本語・英語の2言語に対応しました。

ルール機能とエイリアス機能を組み合わせて、ユーザーエージェントと日・英バージョン別に細やかなご要望にお応えできる設定をしています。

a-blog cms の同梱テーマ「extend@beginner2018」をほぼそのまま使用したシンプルなサイトです。複雑なカスタマイズ、凝ったデザイン、大規模なサイトに向いている一方で、こういったオーソドックスな小規模サイトを短納期で仕上げることが可能なのも a-blog cms の魅力です。テーマには scss ファイルが含まれているため、余白や色やフォントをカスタマイズして雰囲気を変えることも簡単です。

手間がかかっていたイベント情報の伝達、参加申込の管理をスムーズに

もともとイベント情報（日時、場所、持ち物、備考など）の伝達はメーリングリストで行われていたため見落としが多いことがお悩みでした。また、外部からの参加申込の管理にも手間がかかっていました。

カスタムフィールド でイベントを登録

このお悩みを解決するため、イベントに必要な情報をカスタムフィールド に入力できるようにしました。JSで開催日と日付、終了日と掲載期限が同期するようになっています。イベント一覧で日付直近順でソートすることができ、イベントが終了する日には自動的にイベントが非公開になります。

フォームモジュールで各イベントエントリーに参加申込フォームを設置

イベント予約フォームの「設置する」がチェックされている場合には、イベント予約フォームが各イベントエントリーに設置されます。a-blog cms のエントリーにフォームを設置するやり方には「動的フォーム」と「フォームモジュール」の2種類がありますが、今回の場合はフォームの内容は一定であるため、「フォームモジュール」を使っています。

内部用カレンダーにはイベントへのリンクがカレンダー形式で表示される

また、シークレットブログとして作成した内部用カレンダーではスタッフの方がカレンダー形式でイベントのスケジュールを確認できるようになっています。