Web 全般を運用しながら利益につなげる

もともと Web ディレクターをしていましたが、現在は Web 集客アドバイザーとして、Web を軸にしたプロモーション全般を担当しています。

クライアントは地元のケーキ屋さんや呉服屋さんなど、比較的規模が小さめの B to C のお店が中心。まずは簡単な Web サイトをつくり、そこから数年間かけて徐々に運用と更新のアドバイスを行っていきます。まだ情報発信の仕方が成熟していないクライアントに、いかに Web を活用しながら利益につなげていくかを提案する役割です。

Web 集客アドバイザーとして、Web を活用しながら利益につなげていく提案をしている

一般的に Web 業界の人は、自律的に知識を習得しアップデートしていける人が多いのではないかと思うのですが、私は自分から勉強していくタイプではないんです。

また実務ではディレクションがメインのため、コードを書く時間は仕事全体の2割もありません。a-blog cms を使い始めて 10年が経とうとしている今、私のような受け身のユーザーや、コードを書く時間が少ないユーザーでも無理なく学習していけるというのが、特徴の一つなのかなと改めて感じます。

ノンプログラムでここまでできるのか、と感動した

今から 10年も前のことになりますが、a-blog cms を使う前は HTML による静的サイトをつくっていました。

その頃、自分で更新していけるような動的サイトをつくるには、ものすごく費用が必要だったんです。たとえば検索サイトなら 300万円、当時流行していた mixi のような SNS サイトなら 1000万円といった具合です。

動的な Web サイトをつくるには、PHP が書けるプログラマーさんに頼るしかなかった時代でした。だからこそ a-blog cms は、ノンプログラムでも利用できることがとても画期的で。実際に人材派遣会社の仕事検索サイトを、PHP の外注費なしにノンプログラムでつくれた時には感動したのを覚えています。

また、アップルップルが WCAN という Web 系の勉強会を主催していたことや、当時は海の近くの民宿で a-blog cms の Training Camp があったこともポイントに。その頃の私は手を動かすことのない Web ディレクターだったので、自分が学ぶというより「こうした勉強会なら社内のスタッフも参加しやすく、楽しく学んでもらえそうだ」と思ったんです。

学習機会に恵まれていたおかげで、結果的に a-blog cms と出会ってから、自分でもまたコードを書くようになりました。

分かりやすくスピーディー、合理的な CMS

小売店や中小企業では、ブログすら書いた経験がなかったり、ほぼ Web の知識がない方が Web 担当になるケースも少なくありません。

a-blog cms は、たとえば管理画面の入力順を Web サイト上のレイアウト順にそろえられたり、imgタグの「alt属性」という項目に何を入力すべきか分かるように「この写真を一言で言うと」というラベルに変更できたりと、Web に慣れていない人にも使いやすいように設定できます。通常だと PHP が必要になる作業を、ノンプログラムでサクッと 10 〜 20分程度で手軽にできるところが助かっています。

管理画面の入力順を Web サイト上のレイアウト順にそろえることができる

最近はスマホでの Web サイト閲覧が圧倒的に多いため、最初に CMS プロトタイピングで機能の設定のみをした段階で、クライアントに「お手持ちのスマホで触ってみてください」と言って確認してもらうことも。動画の読み込み速度やスマホで見た時のページの長さなどは、紙のデザインカンプでは確認不可能ですし、クライアントは忙しい方が多いため、試作段階でスピーディーに確認できることが喜ばれています。

「写真はこれから追加すれば良いので、まずはこのまま公開してしまいましょう」という合理的な提案ができるのも a-blog cms だからこそですね。

情報を資産として蓄積し、大きく育てる

a-blog cms は、スマホから SNS にアップするような感覚で気軽に更新することができます。

最初は「何から始めたら良いか分からない」というクライアントも多いのですが、たとえばケーキ屋さんならまずは簡易的な店舗紹介ページをつくり、ケーキの写真を撮ってコツコツと Web サイトにアップしてもらうようにします。

それが 1年続けば素材と情報が蓄積されていくため、それを「オーダーケーキ」「季節限定商品」など、こちらでカテゴリー分けして整理してあげるんです。さらに注文の流れやオーダー方法などの情報をつけ加えれば、商品紹介ページが完成。

単に商品写真をアップするだけなら SNS でもできますが、情報をまとめ直して整理できるのは Web サイトならでは。ペライチやジンドゥーといった他のサービスでも無料で簡単に Web サイトを作成できるのですが、更新のしやすさや膨大な情報量に耐えられる点など、長期的に運用していくことを考えると a-blog cms が断トツに優れています。

「ただ写真をアップするだけ」という最初の敷居は低くしながら、蓄積された情報を資産として Web サイトを大きく育てていける、それが a-blog cms なんです。

価値のある Web サイト活用を提案できたら

こうして Web サイトを更新していく仕組みができていくと、少しずつ利益につながったり、「ブログ見たよ」という声などの反響が増えていきます。そうするとクライアントのモチベーションも上がり、コンテンツをマネジメントする楽しさを知ってもらえるんです。

今の時代、Google マイビジネスや SNS など無料で利用できるサービスがたくさんあり、Web サイトにお金と時間をかけようとしていないお店や企業もたくさんあります。いろいろな選択肢があるなかで、情報を資産としていく意義をクライアントに理解してもらうことこそ、 Web サイト制作の原点ではないかと感じています。

規模は小さくても素敵な商品をつくっているお店が、情報発信の活用法を知らないまま閉店してしまうのは本当にもったいないと思うんです。Web でのサポートやアドバイスをすることで、価値のあるところにきちんと必要なお金をかけていただけたらと思います。

そのために、a-blog cms には今後もさらにクライアントが更新しやすくなる UI の改善や、更新するのがもっと楽しくなるような機能の導入を期待しています。

クライアントや社内との架け橋になってくれた

なかには 8 〜 9年、a-blog cms を使って一緒に Web サイトをつくり上げてきたクライアントもいて、クライアント自身も a-blog cms のアップデートを楽しみにしてくれています。

最近では PC 上でスマホ表示のプレビューができるようになった機能や、文字の大小や中央ぞろえなどの設定を見たまま確認できる Lite Editor 機能などを、特に喜んでもらえました。機能をつくっているのは開発元のアップルップルですが、a-blog cms が便利になる度に、私がクライアントに感謝されるというありがたい仕組みです（笑）　

また Web 業界はディレクターやデザイナーなどの分業化が進んでいますが、職種を問わず扱いやすい a-blog cms というツールを通して、お互いの仕事への理解が深まり溝を埋める役割も。a-blog cms が、クライアントや社内との架け橋になってくれていると感じます。

そして最初に言ったように、自分から学ぼうとする意欲が決して大きいわけではない私のような”パワー控えめ系”ユーザーでも、自然体で続けてこれたのが a-blog cms なんです。無理なく確かなスキルが身につくので、多くの方におすすめしたいですね。

東港タイヤサービス様のサイトをリニューアルさせていただきました。

東港タイヤサービス様は産業車両用タイヤを販売・取り付けされており、大型トラックやトレーラー、フォークリフト、クレーン車などのタイヤを取り扱われています。

トップページは、サービスの特徴などをアピール、３店舗ある店舗案内もしています。 賑やかな感じのトップページは、お客様から大きな反響が有り、スタッフの皆さんからも好評です。

リニューアル公開後に、社長の方からブログで情報発信していきたいと言われ、社長ブログを追加しました。

ブログは多忙な社長自ら更新され、「移動中でもスマートフォンから更新できて便利」と好評です。

その後、さらにスタッフブログも追加しました。 あとから機能を自由に追加できるのも a-blog cms の構築のしやすさのおかげです。

アイウェアブランド「FACTORY900」の公式サイトです。

リニューアルするにあたり、一番重要視したのは更新のしやすさ。 これまで静的HTMLで組まれたサイトを Dreamweaver で更新していましたが、担当者がWeb専属ではなかったのもあり、更新が滞りがちでした。

「専門知識がなくてもブログ感覚で更新できること」

それが、a-blog cms を導入したきっかけでした。

ハイブリッドな多言語サイト

既存のサイトにはすでに日本語と英語サイトがあり、更新の煩わしさが少しでも減るようにサイトを設計しました。

ユニットの多言語化

一部のカテゴリーに 多言語ユニット を導入することで、更新作業の簡略化を図りました。 例えば：商品紹介ページでは画像は共通で使用できるため、テキストユニットのみを多言語化。

サイズ等の共通の情報は、カスタムユニットで英語タブの入力欄が空のときは日本語の情報を表示するようにカスタマイズ。英語タブに入力があった場合のみ日本語の情報を上書きします。

日本語と英語のブログコードを統一

「お知らせ」は日本語と英語で完全に別の情報だったため、それぞれを個別の子ブログにしました。 ここで問題となったのが 子ブログで同一のブログコードを使用できないということでした。 ですが、日本語も英語もお知らせは「news」にしたいのです。そこで、ブログコードを以下のように設定しました。

• 日本語のブログコード: news
• 英語のブログコード: en/news

エイリアスを使った多言語化 をすると、設定したコードが自動でURLに含まれます。

このままでは、英語のお知らせのURLが en/en/news と en が重複してしまうため、校正オプションの拡張 を使って出力する文字列を修正しています。

複数サイトを一元管理

これまで外部のフリーブログを利用していましたが、HTTPS対応が未定ということもあり、サブドメイン拡張ライセンスを使用してブログを a-blog cms 内に移行しました。 もとのブログからMovable Type形式のテキストデータを書き出すことができたので、インポートも問題なくできました。

ひとつの a-blog cms 内で情報を管理できるようになり、ブログ記事と商品ページの関連付けも容易になりました。今後、より情報が探しやすくなるように改善していく予定です。

子ブログとして個別のデザインのサイトをどんどん追加できるのも嬉しい機能です。

テーマを継承したり、親ブログで設定済みのモジュールを子ブログで流用したりと、メンテナンス性が高いのも助かっています。今後増えるであろう特設サイトも管理しやすくなるはずです。

a-blog cms を導入して

カスタマイズの多様性は目を見張るものがあり、クライアントがやりたいことはカスタマイズで大概できてしまうのも a-blog cms の魅力です。 導入から2年半近く経ちますが、更新の頻度は劇的に上がり、公式サイトとして最新の情報を随時お届けしています。少しずつ機能を追加しているのも良い方向に作用していると思います。

福岡県行橋市にある水産加工会社「株式会社元気水産様」より地元「行橋市箕島」でとれる鱧と牡蠣のブランディング、自社の広報のためにオウンドメディアマーケティングもできるホームページを作成したいとのご依頼がありました。 公開後はご担当者様での運用を行うとのことでしたので初心者でも使いやすいCMSであるa-blog cmsを導入させていただきました。

動画コンテンツを使ったブランディング

こだわりページ (抜粋)

ファーストビューでは、仕入れ（競り）から加工、製品の出荷、そしてお客様の食卓に製品が届けられるまでの動画を設置し、「食卓の笑顔が見られるように皆様へ元気をお届けする」という企業理念をユーザーに伝える工夫をしています。 また「こだわり」ページでは「仕入れ」「加工」「配送」「笑顔の食卓」と言う4つのセクションで区切り、動画とドキュメンタリー形式の文章で、各セクションのこだわりをユーザーに対して訴求しています。

スマートフォンから大型モニターまで対応させたレスポンシブデザイン

ビジュアルやコンテンツは意図した形で読み手に伝えなくてはいけません。 そのため「どの端末」ではなく「あらゆる表示サイズ」でビジュアルとコンテンツが読み手に最適な形で伝わるよう、サイト内では5つのブレイクポイントでデザインを調整し、デザインがシームレスに変動するようにしています。

レスポンシブデザインに対応した運用しやすい仕組みを目指して

カスタムユニットによるコンテンツの作成

カスタムユニットによるグラフィカルなコンテンツ（PC表示時）

（SP表示時）

運用担当者がHTMLやCSSの知識を必要とせず、どうやったらレスポンシブデザインに対応したコンテンツを作成できるだろう？と考えた時、ブロック型エディタを採用しているa-blog cmsの採用を決定しました。その結果、お客様に実際にコラム記事を作成して頂いたところ「Facebookを更新するぐらいの感覚で記事を作成できるので運用するのが楽しい！」「パソコンの操作に慣れていない人でも更新ができるのでありがたい」などと言った嬉しいお言葉をいただけました。

また予め決めていたデザインレイアウトを挿入できるカスタムユニットや余白を調整できるカスタムユニットを実装することにより、より一層グラフィカルなコンテンツを運用担当者でも簡単に作成できるような工夫もしています。

運用性や保守性を考慮したデザイン設計

Japan Web Production StandardsのXDファイル

Japan Web Production StandardsのXDファイルを元に作成したXDファイル

良いWebデザインは見た目だけではなく、運用性や保守性も考慮したデザインだと思っています。 そのような点を考慮していないデザインや設計では、公開後に修正やデザインパーツの新規追加などがあった際に不必要な工数が発生します。

そこで今回はWeb制作会社の（株）ワクグミさんとサムライデザインの小佐々さんが連携して制作した、CSS と JavaScript の UI コンポーネントを組み合わせた Web サイト用のフレームワーク（Japan Web）を使用して制作を行いました。

このフレームワークを使用したことにより、決められたルールに沿ってのデザインと構築を行うことができ、自身の行うべき作業に集中して制作を進めることができました。