記事の詳細

main_carerevo

こんにちは、WEBディレクターの横井です。

月額有料会員サイト「けあれぼ〜介護のためのウェブマガジンサイト〜」(https://care-revo.com/)を制作・公開しました。
※2016年8月現在 月額有料会員制ではなく無料会員制に変更しました。

公開したのは2016年6月15日なので、2ヶ月前ですが。
制作期間は1ヶ月ちょっと。

クライアントさんで行っている介護セミナーに積極的に参加し、想いを形に出来るよう努めました。
少しでも関わることが出来て大変嬉しいです、発注いただき有り難うございます。

さて、会員サイトはWebサイトコンテンツの他に、会員情報を修正するマイページ/パスワード変更/メールアドレスの変更など、多くの機能が必要となります。
また、特定商取引法の記載/ご利用ガイド/セキュリティ等様々なページが必要になります。
そして会員サイトが有料ともなれば決済システムの導入が必要になり、とっても大変でした。
今回はパートナーのシステム会社さんと連携しながら制作を進めました。

有料会員サイトのような、システムが必要なサイトは設計が全てだと思います。設計の段階でコケると、後から大規模な修正が必要だったり・・・
大炎上する可能性があるので、今回は設計書の段階で物凄い時間を要したと思います。(コンテンツや機能の抜け漏れがないか一生頭の中で考えていました。)
お風呂の中でもトイレの中でもずーーーーーーーーっと考えます。

そんなとーーーーーーーーっても大事な設計、サイトに設計がいるのか?設計書ってなんやねんってところで、実際の設計書を交えながら少しこの設計書について触れたいと思います。

Webサイトの設計(ワイヤーフレームとは)

Webサイトを制作する際に、どのようなページ(コンテンツ)を制作するのかを確定させる必要があります。
初回打ち合わせの際にある程度の概要をヒヤリングした後、ディレクターがクライアントの目的達成にどのようなコンテンツが必要なのかを想定で作成します。
その作成したコンテンツ(コンテンツリスト)を元に概算で制作金額を見積ります。コンテンツが確定した後、に実際にどのような構成にするのかを設計する、それがワイヤーフレームと呼ばれるWebサイトの設計になります。

ワイヤーフレームの必要性

何故ワイヤーフレームが必要なのか、それは制作する側、制作を依頼する側双方の認識のズレがないようにする為に必要です。
デザインに着手する前にサイトの構成、要件を固めるべきです。

家を建てる前に必ず設計をすると思います、設計もなしに家を建てて「やっぱりここ、こうしたいのですが・・・」なんてなったら大変ですよねって話です。
Webサイトでも同じで、ワイヤーフレームのフローを飛ばして制作を進めた場合、デザインもコーディングも終わった後に大きな変更が必要になったら大変なので、
必ず設計書の段階で内容を確定させるようにします。

今回の会員サイト制作で、実際に使用したワイヤーフレームの一部を公開したいと思います。

wf_01

wf_02

一枚目がトップページのワイヤーフレームになります。
二枚目が記事詳細ページのワイヤーフレームです。私の場合はなるべく繊密に作るように心がけています。
たまーにやり過ぎると、ほぼデザインじゃん!ってデザイナーさんがデザインしづらいことはあるとは思いますが、今回のは割と設計寄りだったんじゃないかなと。
より具体的に、よりイメージが湧きやすいようにワイヤーフレームを作るようにしています。実際に公開したサイトと見比べてみると、ほぼ同じだと思います。

この設計書の中にも仕様がたくさん入っています。
(最新記事4件を別のレイアウトで表示する、アクセスの多い人気の記事を5件表示する、記事詳細の下部には関連記事を6件表示する、リード文以下は会員でないと読めないようになどなどエトセトラ。)
ディレクターさんによって、ワイヤーフレームの作り方や見栄えが違うと思うので、これがワイヤーフレームだ!なんて断言は出来ませんが、大体こんな感じでしょう。
他のディレクターさんのワイヤーフレームがどんな風か見てみたいな〜。

今回の制作ポイント

レスポンシブデザイン、全ページのSSL化などありますが、
主にシステム周りの工夫が今回のポイントになります。システムはWordpressなどを使用せず、フルスクラッチで制作しております。
(今後掲示板機能などを追加したいということでしたので、カスタマイズ性を優先した結果フルスクラッチでの作成に至りました。)
こちらのサイトでは以下のことがクライアントさん側で行えるようになっています。

  • 記事の投稿
  • 動画の投稿
  • セミナー情報の更新
  • お知らせの更新
  • 登録者情報の閲覧(DB情報の反映)
  • ユーザー管理
  • 動画、記事カテゴリーの編集

以前のサイトでは、セミナーの申込人数の把握が大変だったということで
セミナー申込者の人数や詳細情報も管理画面から閲覧できるように作成してあります。以前の手間を効率化できるように制作しております。
動画の投稿に関してもYouTubeのURLを入力し、更新することによって自動的に該当箇所に反映されるようになっています。

とても使い勝手がいい管理画面になっているかと思います。
そんなところですね。

この度はご依頼いただき、ありがとうございました。
現在クライアントさんとはとても仲良しになれて、いい出会いに大変感謝しております。
今後共よろしくお願いいたします。

けあれぼの会員さんが沢山増えるといいな〜。

そういえば告知用のチラシも担当させて頂きました。
a4_001

それではまた!

関連記事

ページ上部へ戻る