DAY 32 WEBサービス部 Lesson1_5 (1)

DAY 33 Webサービス部 Lesson1~5 / HTML&CSS 自主練 【ウェブカツ 】

本日のプログラミング学習

Webサービス部 2hour

HTML & CSS / 2hour

Aug / 65.0hour

Total / 90.0hour

 

実際に企業や個人が何かサービスを作る、となった時の流れは以下のように考える。

コード書く前に絶対必要なこと

 

マーケティングとターゲティング

まず重要なことは、「そのサービスは誰に向けたものなのか?」という根本を考えること。

区分しては主に三つあり、B to B / B to C / C to Cとなる。

コードを書くにしろ、Webデザインをやるにしろ、まずここをしっかりと固めないと意味がない。

 

収益をどのように作るか

サービスを作っても「利益がありません」だと、ただのボランティアになってしまう。

どのようユーザーにお金を落としてもらうのか、を考えるところ。

何かモノを売る、課金してもらう、会員費用を払ってもらう、広告掲載などによって収益をあげていく。

 

まず最重要なのは上記二つ。ここがしっかりと練られていないと、実際にサービスをローンチしても徒労になってしまう。

(でも、ウェブのいいところはある程度固めて上でサービスを開始し、フィードバックを得つつ改善できるというところなので、考えすぎたり、悩みすぎるのもNG。要はバランス。)

 

サービス実装までのステップ

マーケティングと収益化を固めたら、実際にWebサービスに落としこんでいくフェーズ。

どのような機能が必要か、を洗いだす。

作りたいWebサービスは、どのような機能で構成されているかをリストアップする。

ツイッターのようなサービスであれば、

・ユーザー管理(登録、ログイン、ログアウト、退会、プロフィール作成・編集など)

・コンテンツ(ツイート、リツイート、ブックマーク、リツイートなど)

 

といったように、Webサービスは機能一つ一つの集合体で構成されているので、それを過不足なくMECEにリストアップする。

 

画面設計ーワイヤーフレーム

機能の洗い出しが終わったら、実際にウェブ上で公開するページの構成を考える。

つまり、「ページの完成形をラフな形で作り、どこに・何を・どんな形で配置するのか」ということを考えるフェーズ。

これをワイヤーフレームと呼ぶ。実際の作成にあたっては、Photoshopや手書きなどを用いて作成するが下記のようなサービスもあるので自分にあったやり方で行う。

 

Webサイトやアプリを作る際に無くてはならない「ワイヤーフレーム」。ディレクターが作成するデザインの設計図で、制作をスムーズに進めるために必要な要素です。専用のツールを使うことで「スムーズに」かつ「分かりやすく」作成することができます。そこ[…]

 

テーブル設計ー必要な機能を実装するために、データベースを設計する

例えばユーザー登録という機能を実装するには、名前・住所・電話番号・年齢・・・・など様々な情報を保存し、それが呼び出された時にいつでも表示できるようにしないといけない。

これを実現するためには、データベース上で情報を管理・保存・表示する必要がある。

 

1.実装したいサービス内でどんな情報を扱っているのか、を洗い出す。

ただ闇雲にデータベースを作成するのではなく、「どんな情報がやりとりされているのか」をまたMECEに切り分けてリストアップする。

 

2.テーブルを管理しやすい形に組み替える。

繰り返し出てくる・変更が加えられた際に大変なもの、などをなるべく簡潔に管理できるようにテーブルを切り分ける。

 

実際に各機能を実装していく。

HTML/CSS/JavaScript/PHP/MySQL・・・上記で必要となる機能に対してコードを書き、実装していく。

 

以上のような流れでWebサービスを作っていく。

コードを書くのは工程でいうと最終段階。まず大事なのはその上流にあるマーケティング・収益化・機能の洗い出し。

この土台がしっかりしていないと、方向性を見失う。今後もコードを書く際は「今、どの工程・機能を実装するためにコードを書いているのか?」を意識して書くこと。

 

学習は全てウェブカツ!!というプログラミングスクールで学んでいます。

プログラミングスクール「ウェブカツ!!」

大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]

DAY 32 WEBサービス部 Lesson1_5 (1)
最新情報をチェックしよう!