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の組込みを行いながら整理していったというところがポイントなのですが、そこでの検討の詳細については長くなるのでまた改めて書きたいと思います。

このエントリーをはてなブックマークに追加
First  1  Last