TOP > コラム一覧 > [デザイン・プログラミング編(3/5)]webサービスの作り方

[デザイン・プログラミング編(3/5)]webサービスの作り方

2020年08月25日

こんばんは。
Sakaseru代表の小尾です。

今回のコラムは、全5回のコラムの内の第3回となります。
全5回のコラムを通じて、webサービス・アプリの作り方をご紹介させて頂く試みです。

全5回の流れ
はじめに
↓
着想・構想編
↓
デザイン・プログラミング編(いまここ)
↓
収益編
↓
本番リリース〜運用編

前回までのコラムで、ミンサカの構想が完了しましたので、
今回のコラムでは、その構想をどの様に形(スマホやパソコンの画面で動作させる)にするのか
ご紹介致します。

まだwebサービスを作ったことのない読者の方の中で、これからwebサービスを作りたい、と思われている方におすすめの記事です。

webサービスの作り方は沢山ありますので、
Sakaseruはこんな風に作ったのだな、と一例として捉えて頂ければ幸いです。

それでは早速webサービスを作っていきます。

お客様体験を設計した。

実際にデザインとプログラミングに着手する前に、これからミンサカのお客様になる方の行動や思考を整理していきます。
お客様体験の事を、別名ユーザーエクスペリエンス、UX等と呼んだりします。
UXの事はインターネットで検索すると色々出てきますので、興味があれば調べて見て下さい。

ミンサカの場合は、前回行ったインタビュー結果を元に、次のようにまとめました。

[認知]
SakaseruのTwitterアカウントのTweet、でミンサカの事を知る。

[訪問]
認知したTwitterのリンクからページに訪問。
ミンサカのサービス紹介ページを見て、気軽に企画を立てられる事を知る。
企画作製も簡単そうで、お金のやり取りも安心であることを知る。

[利用中]
近日フラスタを贈りたいイベントがあるので、ミンサカで企画を作成する。
作成した企画をTwitterで拡散して、参加者の方に参加してもらうようお願いをする。

[利用後]
無事フラスタ贈り、出金が完了し、参加者の方にも喜んで頂けた。
主催自身の想い、沢山の参加者の想いが込められたフラスタに感動し、参加者、出演者共に喜んで頂けた。

[リピート]
サービスも使いやすく、多くの方に喜んで頂けたので、次回イベント時にもミンサカを使おうと決める。

文量の関係で少し簡略化しましたが、この様なUXを作製しました。
このUXが非常に大事で、これから始まる開発の途中、作っているプロダクトがUX、つまり
インタビューさせて頂いた方々の体験に沿っていて、課題の解決が出来るのか立ち返ることが出来るからです。

作成したUX・インタビューを元に、画面を作って行きます。

画面全体の見通しを最初に作った。

この工程はどれくらいの画面数を作るのかによって、省くか省かないか決めても良いのかなと思います。
ミンサカは、予め画面数が多いことが分かっていましたので、スタッフの小柴が画面の全体像を作ってくれました。
具体的には、ミンサカでどの様な画面が登場し、それぞれの画面がどの様なつながりを持っているのか。
主催・参加者共に不都合が無いか把握するための全体像です。
全体像は、Adobe XDと呼ばれるツールを使いました。
スタッフ小柴と僕とで、リアルタイムで全体像を共有できるので便利でした。

例えば、次の画像は企画ページ新規作成画面の全体像です。

企画ページ新規作成画面の全体像です。

ミンサカ全体を表す全体像です。

一つのサービスが沢山の画面で構成されていることが分かります。

一つの画面に対してデザインや仕様についてのコメントが細かく描かれています。

スタッフの小柴と画面を作っては全体像を見直し、不整合が起きていないか確認し合います。
必要な画面は付け足し、不要な画面は消していきます。
地道な作業を繰り返し、サービスの全体像を作り上げました。

全体像をデータベースのテーブルに落とし込む

webサービスは、画面を表示するフロントエンドと呼ばれる物と、お客様のデータや企画データなどを保存したり、取り出したりするバックエンドと呼ばれる物で構成されています。
バックエンドを構成する要素の一つに、データベースと呼ばれる物があります。
このデータベースの構成さえ、不整合が起こらないように設計してしまえば、ほぼエンジニアの仕事は終わりです。
データベースの構成を終えた後は、初歩的なプログラミング技術でサービスを作り上げることが出来てしまいます。

簡略化したミンサカのデータベースは次のようになります。
※実際はもっとテーブルがあります。

各テーブルに保存する情報を決め、テーブル間で関連性を持たせるように設計を行います。
ER図とも呼ばれるそうですが、僕は面倒なので、小柴の作った全体像を見て、頭の中にあるテーブル全てをいきなりデータベースとして作っていきます。

ここまで完成すれば、殆ど出来上がったような物です。
後は、好きなプログラミング言語でテーブルの内容を読み出したり、更新したりするだけです。

デザインを作る

先程作成した全体像を、小柴がHTMLとCSSと呼ばれる言語を使って、パソコン・スマートフォンで閲覧出来るように作っていきます。
作られた画面は静的な画面、つまり、表示するデータ等が反映されていない状態ですので、
プログラムを書いて、画面を完成させていきます。

HTML/CSSの記述
↓
プログラミング

この作業工程を繰り返していきます。

プログラムを書く

この節は話そうと思うと、とてつもなく長くなってしまいますので、簡単にお伝えさせて頂きます。

ミンサカはLAMPと呼ばれる、ごく一般的な構成で作られています。
L : linux(コンピュータが動く基盤のようなものです)
A : Apache(webサービスを画面に表示するため等に必要な仕組みです)
M : MySQL(先程のテーブルを管理するデータベースと呼ばれる仕組みです)
P : phpと呼ばれるプログラミング言語です。

プログラミング言語phpで、MySQLのテーブルデータをやり取りします。

ただ、ひたすらこの繰り返しです。
小柴の作った画面をプログラミング言語で表現していきます。

実際のプログラミングの様子

プログラミングの作業自体は、4ヶ月程度一人で完了させました。

もし、何かwebサービスを作りたいと思った時に、プログラムを書ける人が周りに居ない場合、
まずは自分自身で書いてみるのがおすすめです。

基本的にプログラミングは、条件分岐と繰り返しと呼ばれる基本動作を抑えておけば誰にでも
扱えます。

プログラミングは難しそう、、エンジニアに頼みたいけど給与が高い、、と思っている方は
まず自分で書いてみるのがおすすめです。

そして、これからプログラミングにチャレンジしてみたい方は、是非ご連絡を下さい。
作りたいプロダクトを教えて頂ければ、僭越ながら学び方をお伝えさせて頂きます。

このコラムの最後に

いかがでしたでしょうか。
ミンサカの着想・構想からプログラミング・デザインの完成まで全部で半年間。
長いようで短い時間でした。
コードを書く4ヶ月間は、構想が着々と現実の画面となり、それは何物にも代えがたい楽しい時間でした。
是非、この楽しみを、コラムをご覧いただいている方にも体験頂ければ、とても幸せです。
プログラミングや、作りたい物のご相談がありましたら、是非お気軽にご連絡下さい。
僕の持っている知見の範囲内で、何かアドバイス出来れば嬉しいです。
ご連絡先 : ryutaro.obi@sakaseru.jp

次回は、ミンサカの収益編となります。
作ったプロダクトで、どうやってご飯を食べていくのか考える回ですので、是非次回もご覧頂ければ幸いです。