TOP

SOY CMS公式サイトのリニューアル作業でしたこと

SOY CMS公式サイトのリニューアル、まだ一部コンテンツが作りかけのところがあるものの先日やっと行えました!

公式サイト、2008年の公開以来一度も本格的なリニューアルをしておらず、またもともとの設計も全くちゃんとできていなかったため、つぎはぎ状態の非常に見通しの悪いものになっていました。載せる場所が無いコンテンツは右側の空白に無理やり表示したり・・・

どなたかの参考になるかもしれないと思うので、簡単に作業を行った手順を説明しておきます。

・最初に行った作業

当たり前なんですが、まずはサイトリニューアルに当たっての根本的な目的を確認しました。それは、「SOY CMSのユーザ獲得」と「既存ユーザに対する適切な情報発信」です。

キーワード「CMS」について、検索エンジンのアルゴリズム変更で他のCMSはかなり浮き沈みしている中、SOY CMSはGoogleでだいたい1ページ目の最後の方か2ページ目の先頭くらいの順位をずっとキープしています。現時点で平均表示順位9位(ウェブマスターツール調べ)です。そのうえ、より上位の検索結果にはSOY CMSについて言及していただいているWeb担当者フォーラム、@ITの記事が出てきます。

これらの経路から流入してくる方は当然ながら新規訪問である率が高く、サイト内での行動もノーリファラーでくる来訪者や「SOY CMS」等のキーワードによる来訪者とは大きく異なります。新規ユーザ獲得について、そこにどうやったらアピールできるかを考えました。

補助的には、現在会社のサイトへの流入の多くがSOY CMS公式サイトからなのですが、そのトップページに「制作会社向け」「サイトオーナー向け」と大きく書いたバナーを設置してクリック率を比較し、どちらの内容に興味がある人が多いかという点について参考にしました。

詳しくは別の機会に書けたらと思うのですが、今回のリニューアルでは制作者向けの内容は思い切って削り、コンテンツは原則サイトオーナーの方を向いた物にしています。

既存ユーザに対する情報発信については、一番大事なのはマニュアルの整備なのですが、これはまだできていないので改めてまとめます。

・デザイン・HTMLの制作前に行った作業

今回のリニューアルではデザインについてはさぶみっとコンペでコンペを開催させていただきました。そのため、どのようなデザインにすればいいかこちらである程度資料をまとめる必要がありました。

1.ざっくり掲載しなければならないコンテンツをリストアップする

メニューの構成は厳密には後で決めることにしていたのですが、グローバルメニューがどの程度の項目数になるのかは把握する必要がありました。また、過去のアクセス解析等の情報からSOY Appの認知度が十分ではないこと、事例を知りたいというニーズがエンドユーザ、制作者双方から多かったこと、SOY CMSを使用した制作に対応できる制作者の方を紹介してほしい、というお話が多かったことから、SOY Appのサイトを公式サイトに統合すること、事例紹介ページを設けること、制作会社紹介ページを設けることを決めました。

2.トップページを起点にした動線設計を行う

トップページからの流入に対する動線はざっくりとですが事前に設計しました。まだ今の時点でコンテンツが揃っていないところもあるのですが、主に目指したのはファーストビューでコンセプトを伝えること(その上で内部のページのコンテンツを見ていただくこと)と、SOY Appなど拡張機能に関する認知をしてもらうことでした。

・デザイン・HTMLの制作前に行わなかった作業

逆に、サイトマップ、厳密なメニュー構成の作成は行いませんでした。これは、コンテンツの種類、量とも多く未整理だったため、「どう見せるか」について実際にある程度サイトを組み立ててみないとわからなかったためです。時間をかければ済むというところもあるのでしょうが、それをしていると発注するのも遅くなってしまいます。

この状態で、下記の通りコンペを開催しました。

http://compe.submit.ne.jp/request/show/59

そして、採用させていただいた方にリストとか囲み記事とか一通りの要素のある内部ページのパターンを作ってもらい、HTMLコーディングを発注しました。

・HTMLテンプレート完成後にした作業

この時点で出来上がっているものは、トップページ以外はただの骨組みでコンテンツは全くありません。

1.載せるべきコンテンツが決まっているページについて、HTMLファイルのままコンテンツを流し込んでみる

まず、出来上がったHTMLを用いて、だいたいどんな感じになるのか掲載したいコンテンツについてテンプレートの中のどのマークアップに対応させるのが見やすいか考えながら流し込みを行ってみます。具体的には「動作環境」のところでした。ここでひとまずの雰囲気がつかめます。

2.SOY CMS上に必要と思われるページをいくつか作る

「動作環境」のほか、「拡張機能」や「特徴」など、作成が決定しているページをSOY CMS上で追加、テンプレートの組込みを行いました。この時点ではヘッダーやグローバルメニューなどのサイト全体での一元管理化などは行っていません。

ここで気を付けるのは、追加するページを標準ページ(URLひとつで固定のページ)かブログページ(記事の投稿に従い自動的にアーカイブやパーマリンク先のURLが生成されていくページ)かどちらで作るか、ということです。拡張機能はSOY Appの詳細ページ

http://www.soycms.net/extentions/app/SOY_Shop

等を作るためブログページにしていますが、特徴などは1ページ限定で将来的な追加も頻度高くは発生しないと思われるので標準ページで作成しています。制作について、は現時点では1ページだけしか作っていませんが、制作会社リストを追加する予定なのでブログページで作成し、トップページだけを設定、使用するという状態になっています。

3.記事を投稿してみて、調整を行う

まだサイトの制作としては一部のページしかできていない状況ですが、できているページについてはコンテンツの投稿等も含めて試しに操作してみることが可能になります。なので、SOY Appに関するコンテンツ等を流し込んでみて、見やすさ上一覧部分の表示件数をどうするかなどを検討しました。本当ならローカルメニューはスクロールに合わせて移動などした方がよいかなとは思うのですが、それはまた改めて改善していくことにします。

この工程では、マークアップも見やすく区別のつきやすいように適宜変更しています。(見出し、本文としていたところを定義リストに変えてみる等)

これは下記のようなことが簡単に行えるSOY CMSならではの作業です。

4.既存サイトのコンテンツについて、どういう単位の記事に切り分けるか考える

ここまでの工程で、運用イメージとページの構成パターンは決まります(逆を言えば、それらはこの段階までちゃんと決めていません)。それに従って、ほかのページを作っていきます。ただ、ここではページの追加よりも先に記事についての検討をおこないました。たとえば「リリースノート」など、旧サイト設計時には想定しておらず、後から無理やり追加されたコンテンツが存在しています。それらについて、どういう単位で整理するのが見通しがいいか考え、カスタムフィールドやカテゴリー分けの設定などを行いました。

記事の追加→テンプレートの設定→記事の構成やマークアップに関する修正

という手順で試行錯誤を繰り返します。

5.ローカルメニューの修正

ローカルメニュー(内部ページの左カラム上部のメニュー)はこの段階で決めていきました。記事の流し込みをした結果、ローカルメニューはページ内リンクにするところとアーカイブのページにするところと二種類に分かれています。

また、動作環境のところのサーバの選定に関してはわかりやすい図があったほうがいいだろうということで、ローカルメニューと同等のナビゲーションになる画像を作成、設置しました。

http://www.soycms.net/requirements

6.サイト全体での共通部品のくくりだしと設定

ヘッダやグローバルメニューなどをサイト全体で共通管理できるよう、くくりだしの設定を行いました。なぜこの段階化というと、SOY CMSには全ページの設定を一括で変更する機能があるので、ページが出そろってから作業する方が一度に操作ができて効率がいいからです。

 

以降も細かい修正は続くのですが(もちろん公開後もです)、ざっとの流れはこんな感じです。まとめると

・まずは大枠を決める

・以下の内容を繰り返す(情報の配置設計はこの段階で詰める)

- ページの追加

- コンテンツの流し込み

- 見せ方の改善

・仕上げを行う

という手順です。事前にはあまり設計を厳密には行わず、CMSの組込みを行いながら整理していったというところがポイントなのですが、そこでの検討の詳細については長くなるのでまた改めて書きたいと思います。

ひふみ堂、オープンしました!

クリエーター向け法務・経理支援サービス『ひふみ』オープンしました!コンテンツを「作る側」の経験のある法律家が集まって作ったクリエイターサポートのサービスです。

僕は、今はフォームだけですが、今後公開予定の各種のサービスについてシステム面で色々お手伝いさせてもらっています。

第一弾は記帳代行です。確定申告、帳簿つけるの大変だな~とお考えのクリエイターの皆様、是非一度ご検討ください!今ならモニターキャンペーンで今年の分が4万円!

少しでも気になった方はこちらをご覧ください。↓

http://www.hifumido.jp/

見よこのブロッコリー!

今セレクトファームでとれているブロッコリー、このサイズ、この質感!

これが無農薬、無化学肥料栽培で収穫できています。気になる方は↓をご覧ください!

セレクトファーム

Pureな開発のためだけの空間なんて存在しない

この記事を読んだのですが、僕はこのやり方にはあまり賛成できません。

なぜなら、Pureな開発のためだけの空間なんて存在しないと思うから。

ソフトウェアというのは人が使うものです。必ず、使われる現場があります。だから、僕はできる限りエンジニアはその現場を知っているべきだと思っています。開発というのは即、それが営業です

集中力が高まっている状態が中断されないような環境というのは大切ですが、もっと大切なのが「何を作ったらいいのか、どういうソフトウェアが人の役に立つのか」という認識について誤らないことです。

仕様書通りにシステムを開発すればいいのでしたらそんなことに気を回さなくていいのかもしれませんが、自社の独自性をだしていく、特に自社製品・サービスの開発となると、開発だけに没頭できる、まとめられた仕様を見てそれにあわせて開発だけすればよいという環境はあまり望ましいものではないと感じています。

だから、CCやBCCも、「実際にそれを皆が確認していること」を前提に動くからNGなのであって、届くこと自体をダメといっちゃダメだと思います。仕様策定で混乱しているなら、その混乱の雰囲気までエンジニアに伝わったほうがいい。

そもそも、取りまとめる人と開発を実際に行う人がずれているというのはどうかなというのもあります。だから、CCを早くTOに切り替えたほうがいいという意味では、CCやBCCは望ましくないとは思います。

僕としては今のところ、連絡自体を悪とするのではなく、開発のinterruptを防ぐための「カベ役」をプロジェクト毎に、エンジニアチームの中で決めて、interruptに対する対応のルールを定めておけばそれでいいと思っています。仕様のとりまとめは多少ロスがあっても、チームで相談して行ってもらっています。

今まで色々開発は進めてきましたが、そこで感じたこととしては、個々のコーディングの生産性より、何を開発すべきかという意識の共有の方がはるかに全体的な生産性に影響を及ぼします。そこが改善できたのが、今年になってSOY CMS/SOY Shopのバージョンアップの頻度を劇的に上げられ、またハウスオブ奈良などのサービスもリリースできている大きな理由のうちのひとつです。

特に社長の仕事となると、それはプロジェクトをマネージすることではなく、社内のだれがどんなプロジェクトに参加してもどういう方向性で行くのかについてブレが生じないような組織を作ることだと思っています(もちろんそれは課題であって、現状はまだできているとは言えませんが)。

あとはどうinterruptの頻度自体を下げるかですが、それについては第一にはinterruptにはどういう種類のものが多いのか分析しなければならないということ、第二にどういう種のプロジェクトを社外も含めてどういう体制で進めるか、そもそもどういう仕事を取っていきたいのかという問題になってくるということがありますので、また改めて。

毎日新聞に一品本舗に関する記事をご掲載いただきました

毎日新聞に、一品本舗に関する記事をご掲載いただきました!

現在、二点目の商品の公開に向けてコンテンツ準備中です。また逸品と呼ぶにふさわしい商品なので、皆様お楽しみに!

現在販売中の明石櫻庵のいかなごのくぎ煮もおいしいですよ!

原点回帰と、自分がやるべき仕事

昨日の情熱大陸の山田淳さんのインタビューをみて、

自分がなすべき仕事は何か?

ということについて改めて考えさせられています。

つきつめていくと、原点に戻るのかなと思います。

僕の原点は、「人と人、人と機械とのコミュニケーションに関して考えること」だと思っています。

現在、SOY CMSやSOY Shopといったソフトウェアを開発していますが、これらは情報発信者と受信者とをつなぐ、「情報の経路を整備するための道具」です。どのような仕組みがあれば、発信者は受信者にわかりやすい情報を、簡単に伝えられるか?そのために作られているものです。

そして情報の伝達が重要な場面は二つあります。自社と、お客さん。そして、自社内。前者はマーケティングの領域で、後者は業務効率改善の領域です。

この二つのうちどちらが専門か?と言われたら、後者です。今の会社自体、もともとは在庫管理システムや予約管理システムといった業務系のシステム開発を行っていました。最近でも、ちょうどやまどうぐレンタル屋さんへのSOY Shopの導入は売上向上よりも業務効率改善のほうを主眼にしています(くわしくはこちらの記事などをご覧ください)。

ただ、マーケティングに関するノウハウも、幸い多くのSOY CMS導入事例に携わらせていただいた結果、かなりたまってもいます。そして、突き詰めればどちらも、先の「情報をうまく伝達すること」という点で交差するんではないかと感じています。

今はマーケティングと業務効率の改善は別々のものとして扱われているように思いますが、そこをうまくつないでいきたいです。

WebDesigning誌に写真が載りました

すっごく間接的な形ですが、Web Designing 2011年 10月号 に僕の写真が載っています。同誌に顔が出るのはたぶん前回のDotFes以来です。

ハウスオブ奈良のBizrockのときのプレゼン動画

奈良で不動産を探すならハウスオブ奈良!

Bizrockのときのプレゼン動画、実際のプレゼンがアレだったので公開するか迷ってたのですが、ハウスオブ奈良もアルファ版からベータ版になったことですし公開することにしました。

作詞作曲は一応僕ですが、ほとんどループ素材つぎはぎしただけです・・・。歌は初音ミクに歌ってもらっています。

やまどうぐレンタル屋の山田淳さんが情熱大陸に出演します!

SOY Shopで運用されているECサイト、やまどうぐレンタル屋の山田淳さんが情熱大陸に出演します!

登山家、山田淳が運営する登山用品レンタル店。富士登山、トレッキングで使う、登山靴、ザック、レインウエアなどの登山用品のレンタルならやまどうぐレンタル屋

http://www.mbs.jp/jounetsu/2011/10_09.shtml

山田淳さん、実は中学・高校のときの同級生で、かれこれ20年近くの付き合いです。

とはいえ、高校卒業後は全く連絡を取っていなかったのですが、つい去年ぐらいからtwitter等でみつけて、今年の春頃だったかな?久しぶりに会うことになり、ちょうど彼がECサイトの運営で問題を抱えているというお話を聞きました。うちとしても、レンタルECという形態にはかかわったことがなく、しかもものすごく伸び盛りなサービスということで学べることも多いだろうと感じ、サイト構築部分では協力させていただくことになりました。高校の同級生ということで、普通のお客さんよりいいことも悪いことも気軽に相談できますし、お互い。

しかし本当に友人には恵まれているなあって思います。成功した人と知り合うんじゃなくて、もともと知ってた友人が成功していくところを見るのは嬉しいものです。

山田さんもたぶんまだまだこれから、というか今がスタート地点くらいの気分だと思いますが、僕もそうです。

頑張っていかないとなと気が引き締まります。

一品本舗とハウスオブ奈良のリリース!

本日、ハウスオブ奈良に関する記事が日刊工業新聞に掲載されました!

また、先月21日には一品本舗も無事オープンすることができました。記念すべき第一品目は明石櫻庵のいかなごの釘煮(くぎ煮)です!

明石櫻庵のいかなごの釘煮(くぎ煮)

どちらも日本情報化農業研究所から技術供与、出資を行っているサービスです。ハウスオブ奈良の運営のために奈良に詳しくなるため何度も奈良に足を運び、一品本舗はいかなごの写真の一部は僕が撮影しています。つまりどちらも入魂のサービスです。

よりよいサービスに育てていけるよう頑張りますのでみなさまよろしくお願いいたします!