ブログ「ウェブ制作の舞台裏」

「kiki verbオフィシャルホームページ」制作の舞台裏

昨年4月にオフィシャルホームページを立ち上げてから、今回で3代目となるデザインリニューアル。

kiki verbでは通常、お客様からホームページ制作を承った場合は「抱えている問題や課題」「目指すべき具体的な目標」「デザインや運用管理などに関するご要望」という3点を、お打ち合わせを通してしっかりと固めてから制作作業に入ります。

ところが自分自身のサイトを作るとなると、どうしてもその部分を固めきらなかったり、最新技術の導入や自身の趣味趣向に走ってしまうきらいがありました。

なので今回のリニューアルに際しては、実験的に自分自身をクライアントと見立てることで、その方法論を自サイトの構築にも用いることにしました。

課題と目標

それまでのkiki verbオフィシャルホームページは、いくつかのユニークな仕掛けを施していました。

「アクセスのたびにサムネイル画像がランダムで変わる仕掛け」や「画面遷移せず、すべて1ページ内に内容を記述して、Ajax技術でユーザーのクリックごとに内容を差し替える仕組み」など、ユーザーへの利便性やちょっとした面白みを与えるのが主な目的でした。

ですが、リニューアルに先立ってアクセス解析を注視して調べてみたところ、その仕掛け自体はあまり効果が無く、むしろ制作実績や制作工程の詳細などといったコンテンツの充実が望まれているということが見えてきました。

また、サイト自体にアクセスを集められ得るコンテンツがなく、運営している各種ウェブサービスやブログからのリンクか、わずかなSEOキーワードからでしかkiki verbの存在を知る手段がありませんでした。

これらを当該サイトの課題として、対する目標を「それぞれのコンテンツ内容の充実」と「認知経路の増加」と定め、3ヶ月後までの数値目標として「平均ページビュー数と各コンテンツの滞在時間を、リニューアル前よりも10%向上させる」と「各種ウェブサービスやブログからのアクセス流入数と、サイトへの直接アクセス数との比率を1:1にする」という2点を掲げました。

目標に到達できるようなソリューション

課題と目標を定めたところで、自分自身がkiki verbオフィシャルホームページの所有者としての要望を考えました。

そこで「増えていく制作実績や最新トピックスをカンタンに管理できるバックエンド」「ホームページデザインギャラリーのようなサイトに掲載されても違和感がないデザインクオリティ」「同業他社に無いような特色のあるコンテンツや仕掛け」といったモノを定めました。

これらの要望を組み入れつつ、抱える課題を克服して、設定した目標に到達できるようなソリューションのひとつとして浮かんだのは、「CMSとしてWordPressを導入して、既存コンテンツを更新可能にするとともに、新たにブログコンテンツを立ち上げる」という方策。

WordPressはバージョン3.0以降、「カスタム投稿タイプ」という機能を使うことで、ブログ形式のコンテンツを1つのサイト上にいくつも設置できるようになりましたので、これを活用すれば、最新トピックスや制作実績のような更新を要する複数のコンテンツでも、管理が非常にカンタンになります。

また、新たにブログメディアを立ち上げれば、有用な記事をエントリーすることで検索エンジンからのアクセス流入も見込めますし、ご来訪頂いた方々に対して多少なりともkiki verbの仕事ぶりや人となりがお伝えできるかもしれません。

他にもいくつかソリューションのアイディアは浮かびましたが、総合的に判断した結果、上記の方策での構築を決定致しました。

特色のあるコンテンツや仕掛け

ここまででリニューアル後のおおよそのコンテンツは決まりましたが、ひとつ「特色のあるコンテンツや仕掛け」という要望が組み入れられていないままでした。

何か面白いアイディアは無いかと思案していた中、その当時インターネット上では「Gumroad」という、誰でもカンタンにデータコンテンツを販売できるというウェブサービスが話題になっていました。

当時すでにたくさんの方々が音楽データやテキストデータを販売している状況でした。

中には「使わなかったロゴデータ」や「昔作ったアイコン画像」といったモノも販売されており、それらを眺めていた時にふと思い浮かびました。

今まで個人的に作って愛用してきたツールや、開業当時に作例サンプルとして用意したウェブデザインなど、kiki verbにも倉庫に眠っているようなデータがあります。

そういった、いわば「アウトレット」なデータを表舞台に引っ張り上げて、見本市のようなコーナーを設けたら面白いんじゃないかと。

そうして生まれた発想が、当サイトのコンテンツのひとつ「プロダクトアウトレット」です。

導線を少しでもシンプルに

掲載すべきコンテンツが出揃いましたので、次はどうすれば効果的な配置となるかを詰めるワイヤーフレーム制作段階となりますが、ここで悩んだのが「お問い合わせフォームの掲載方法」について。

通常であればひとつの独立した問い合わせ用ページを設けるものですが、今回はあえてフッター部分に常時表示させるレイアウトにしました。

お問い合わせに繋がる導線を少しでもシンプルにしたいという思いから生まれたアイディアですが、これによって来訪した方が問い合わせ用ページへ行くためのクリック数を、たった1つですが減らすことができます。

これがコンバージョン率の向上に繋がるかどうかはまだ分かりませんが、結果が楽しみな感触は感じています。

細部のデザインに

ワイヤーフレームの制作でレイアウトが固まったところで、Photoshopを使って細部のデザインに着手する段階へ。

配色は今まで同様「グレー × 青 × 黒」のまま。

アイキャッチ部には、昨年から今年にかけてのウェブデザインのトレンドである「丸型モチーフ」を、kiki verbのロゴデザインを意識したカタチで導入しました。

それに合わせて各コンテンツのタイトル部分にも丸型モチーフを用いて、全体を通しての統一感を持たせました。

これらが出来上がったところで各パーツごとに画像として書き出して、続くコーディング作業に向かうのですが、今回はWordPressを使用するため、まずはトップページをHTML + CSSで作成しました。

続いてブログ型コンテンツとページ型コンテンツの雛形を同じくHTML + CSSで作り込み、そこで細かな修正を施してから、最終的にWordPressのテーマとしてphpに変換しつつ要所をプログラミング。

このタイミングで、必要となる各種WordPressプラグインを導入して、それぞれの設定をしながら動作確認を並行します。

今回は、お問い合わせフォームに「Contact Form 7」というプラグインを、twitter連動機能には「Tweetable」を、facobook連動機能は「Wordbooker」を用いました。

「Contact Form 7」にはプラグイン内部に手を加え、「送信ボタンを画像に差し替える」という改造を施しました。

無事リニューアル

全ての制作が完了したところで最終的な動作確認を行い、2012年4月1日にデータを本番環境に移行、無事リニューアルを遂げました。

今回はWordPressという手馴れたCMSを使ったことで、比較的短期間で滞りなく制作を行うことが出来ました。

まだ「プロダクトアウトレット」が準備中だったりしますが、こちらも近日中に公開できるよう準備を進めていますので、ぜひともご期待下さい!

»戻る

最新トピックス

  • 2016年12月16日

    本年もありがとうございました。年末年始のお休みは12/29~1/5までとなります。

  • 2016年12月10日

    「制作実績」に「Notify Duplicate Title」を追加致しました。

  • 2016年10月20日

    「制作実績」に「BotDept」を追加致しました。

»トピックス一覧

ポートフォリオ

[ウェブサービス]

ネコサーチ | 迷子猫と保護情報の専用掲示板

[担当]
  • コーディング
  • システム
  • デザイン
  • 企画
  • 運営

»制作実績