mannaka みんなのまんなかに

TOPIC

mannakaの話題

ゼロからのサービスサイト開発の進め方

2020-07-23

Webマーケティング・制作の話

ゼロからのサービスサイト開発の進め方

 

新しいウェブサービスを立ち上げる時、サービスを告知するためのLPや、ウェブサービス上でどんな機能が必要になるのかなど、サービスの要件を整理することから始まります。今回、mannakaでウェブサービスをゼロから開発するにあたり検討した過程を紹介します。

 

開発したサービスサイトについて

 

今回開発したサービスサイトは、LPとウェブ上で行う機能が一体になったようなウェブサイトです。1枚のLP上でサービスの概要を伝え、LPの申し込みフォームから注文をし、サービスを利用できるというシンプルな内容です。

検討した主な内容は、次の3つです。

・LP上で伝えるコンテンツ

・デザイン

・ウェブサービスに実装する機能

 

1.世界観をとらえる

まったくゼロからウェブサイトを作成するとき、「どんな世界観にするか?」のすり合わせが重要です。サービスを開発するにいたったきっかけ、経験や思い、開発までのストーリーを共有することで、デザインの大まかな方向性を捉えることができます。今回は、「やさしさ」や「あたたかさ」がテーマになるサービスという方向性になりました。

そのうえで、実際デザインのサンプルを作成する前に、他社のウェブサイトでイメージに近いものをいくつかピックアップしていただき、ベースとなる色やフォント、全体的な色味や明度の認識を具体的にすり合わせします。

 

2.LP上で伝えるコンテンツを整理する

1枚のLP上でどんな情報を伝えるべきかを洗い出し、伝える順番を整理します。類似サービスがすでにある場合は、他社のサイトも参考にしながらコンテンツを整理します。

LP上に表現される情報は次のような内容です。

・ユーザーの悩み

・サービスの特徴(ユーザーの悩みに対する解決策)

・利用料金

・利用方法の説明

・お客様の声

・FAQ

・申し込みフォーム

 

上記の基本的な情報に加えて、開発するサービスに特に必要となる情報(免責事項や、利用上の注意点)などを洗い出し、同じくLP上にあてはめていきます。

 

3.機能を整理する

次に、ウェブサービス上で必要になる機能を整理します。機能を整理するとき、ウェブ上で行う機能だけをフォーカスして考えるのではなく、ウェブを使って行う業務や作業のプロセスをすべて明らかにしてから、どの部分がウェブ上の機能になるのかを落とし込みます。

プロセスを書き出すときには、

・登場人物

・作業プロセス

を書き出すと分かりやすいです。

フロー図の例

 

必要になる機能を洗い出し、それぞれの機能について、ウェブ開発担当の方と共有できるよう概要を記載します。また、洗い出した機能を「絶対必要な機能」と「あったらうれしい機能」に分類し、サービスリリース時に実装する機能と、将来的に実装する機能に分けておきます。リリース時は予算や期間が限られていますし、サービスを運営していくうえで方針が変更になる場合もあるので、極力スモールスタートにできることが望ましいです。

機能一覧の例

 

4.画面の遷移を整理する

機能が整理出来たら、ウェブ上の画面遷移を整理します。画面遷移は、ページの切り替わりごとに1画面と考えて、それぞれの画面でできることや、画面同士の関係、切り替わりの順番をフロー図で表したものです。

紙面上で画面遷移を確認することは、実際に開発する前にサービスの挙動をシミュレーション・共有するためにとても有効な方法です。

 

ここまでできた状態で、デザイナー・コーダー担当の方と相談し、具体的な開発を進めていきました。

まだ世の中にないサービスを新しく作っていくとき、そのサービスの価値は何か、そもそもサービスでどんなことができるのか、イメージだけで話すと空中戦になりがちです。 ウェブサービス開発は時間とお金がかかるだけに、「こんな感じ」と伝えて出来上がったものが、イメージと違う、機能がちぐはぐだ、となるとお互いにとって負担になります。「実現したいこと」と「アウトプット」の整理をしてから進めるようにしましょう。

 

▷▷mannakaの事業についてはこちら

 

 

オウンドメディア
活用資料DL