webエンジニアのポートフォリオの作り方【設計編】〜設計作業とは?サービスのコンセプトの整理〜
webエンジニアを未経験から目指す際、ポートフォリオが必要になると思います。
でも、どんな手順でポートフォリオを作るか体系的に学べる記事って意外と少ないですよね。
このシリーズでは未経験からwebエンジニアになった私が、
初心者目線でポートフォリオの作り方を解説します。
今回の記事ではポートフォリオを作る流れと、
ポートフォリオを作る際にはじめに行う設計方法について説明します!
動画でサラッと見たい方はこちらから
ツイッターでありがたい感想をいただきました!
🌸ポートフォリオ作りに悩んでる方🌸
— まさきち (@masakichi_eng) January 26, 2021
✅何から手をつけて良いか分からない
✅アイデアが浮かばない
✅画面の構成に悩んでいる
方はぜひ視聴をおすすめします☺️
最後の画面構成の部分は特に私の欲しい情報でした✨ありがとうございます🙇♂️#駆け出しエンジニアと繋がりたい#今日の積み上げ https://t.co/IyhcLRGkdD
ポートフォリオを作る手順
ポートフォリオを作る手順は、
1. サービスの企画と設計
2. 実際にコードをかいていく実装
3. テスト
4. デプロイ
という流れになります。
今回は、webサービスを作るにあたって一番最初に行う
Webサービスの設計方法について説明していきます。
なぜwebサービスを作る最初に設計作業が必要なのか?
設計作業をすることによって、
ポートフォリオ作成全体の作業時間を短縮でき、
作るサービスのクオリティが上げることができるからです。
設計をすることによって、コードを書くときにどう書いたらいいか迷う時間が減りますし、何をテストすればいいかも明確になります。
また、サービスのコンセプトもはっきりとするので、画面、機能含めてクオリティを上げることができます。
ですが、設計は非常にめんどうなため、コードから書きはじめたいという人もいると思います。
コードから書き始めるのはプログラミング初心者にとって、とても難しいことなのでおすすめしません。
例えて言うならば、設計作業をせずコードから書き始めることは、
作ったことがない料理をレシピなしで作ることと同じです。
想像してみてもらえればわかると思いますが、失敗しますよね。
Webサービスも料理と同じで、作るときレシピが必要です。
そのレシピが設計作業になるのです。
逆に設計作業をすることで、プログラミング初心者でも、料理と同じようにレシピをみながら完成度が高いサービスを作ることができます!
設計作業でやること
Webサービスの設計では主に以下の6つの種類の設計をします。
・コンセプトの整理
・機能設計
・画面設計
・DB設計
・アーキテクチャの設計
・システム構成設計
アーキテクチャ設計とシステム構成設計は
最初から作ることが難しいことと、
作らなくてもポートフォリオは完成させることができるため、
今回のシリーズでは省きます。
それぞれの設計のやり方について説明していきます!
1.コンセプトの整理
まずはじめに作りたいサービスがどんなサービスなのかを整理するため、
サービスのコンセプトの整理をしていきます。
コンセプトの整理が必要な理由
ポートフォリオとして作るサービスは、オリジナルサービスです。
どこかの誰かが作ったものを真似して作るわけではないので、
どんなサービスを作るか明確じゃありません。
そのため、どんなサービスを作るかをあらかじめ整理してから、
サービスをつくる必要があります。
そもそもどんなサービスを作るか迷ったら
とはいえ、どんなサービスを作ったらいいかわからないと思います。
そんなときは、自分の半径1mにある課題を解決するサービスにするといいと思います。
私の場合は、なかなか目標を作っても達成できないことにイライラしていて、目標達成を手助けできるサービスがあればいいなと思いました。
ですが、これだけだと、サービスの内容が具体的に見えてこず、どんな機能を開発すればいいかわかりませんよね。
なので、サービスのコンセプトを整理する作業を行うことによって、
サービスの内容が具体的にしていきましょう!
コンセプトの整理のやりかた
私はxmindというマインドマップ作成アプリを使って、
下記の項目でサービスのコンセプトを整理していきました!
項目内容
・概要
このサービスとは一言でいうと?
・コア機能
このサービスの核となる機能
・競合
このサービスの競合
・ターゲット・ペルソナ
このサービスを使う人はどんな人?
・ユースケース
どんなときにサービスを使う?
・ユーザーの課題
このターゲットが抱えている課題はなんだろう?
・ゴール
その課題を解決できるためのゴールは?
では、一つずつ項目の説明をしていきます。
説明する項目の順番は、この順番から書いたら書きやすいかなと思う順番で書いています。
競合
作りたいサービスの競合を3つくらいかき、それぞれのいい点、悪い点を書きます。
例えば目標達成を手助けするサービスだったら、どんなサービスがあるかググって、人気があるものをピックアップして書いていきます。
これをすることによって、競合と似たようなサービスを作ることがなくなります。
また、競合のいいところは真似して、悪いところは改善できるためクオリティを上げることができます!
例:
みんチャレ
→みんなで習慣化できるアプリ
good:みんなで目標達成できる
good: みんなにやったことを報告することによって自分もやらなきゃとなる
bad: 習慣達成した結果どうなるのか、どうなったのかがわからない
継続する技術
→一つの習慣のみに特化した、シンプルな目標達成アプリ
good: シンプルな機能や、習慣づくりのアドバイスなど、習慣が続くような設計である
bad: 完全に一人でやるため、他の人からヒントを得ることはできない
super better
→ゲーム感覚で自分の目標を達成できる
good:目標に向けた行動を時間など細かく設定できる
bad:日本語版はない
ターゲット・ペルソナ
このサービスを使う人はどんな人かを想定します。
例えばその人が普段どんな生活を送っているか、どんな性格か、年齢はいくつか、どんなことに悩んでいるかを書きましょう。
例えば使う人は20代女性だから、おしゃれに見えるデザインにしたほうがいいな、など使う人を具体的にイメージすることで、より多くの人に使ってもらいやすくなります!
例:
どんな性格
→目標があって、がんばっている好奇心旺盛好奇心旺盛
年齢
→10代後半から20代前半
趣味
→読書、スポーツ
ユースケース
想定したターゲットがそのサービスを使う場面、時間を考えます。
例えば、仕事終わりに使うから、疲れていてもサクッと入力できるように、入力する項目は少なくするなど工夫ができます。
例:
仕事や学校が始まるときと、終わるとき
→仕事とは別で、自分のプライベートな時間
仕事の合間の休憩時間
→スクワットとかならできる
ユーザーの課題
想定したターゲットが抱えている課題を書いていきます。
コンセプトの整理の中でも重要な部分です。
webサービスは課題を解決するためのものであるので、そのユーザーが何を課題と思っているのかを書いていきましょう。
たくさんあるかもしれませんが、本当に重要な課題を3〜5つくらいにしておきましょう。
理由は多すぎると、サービスを作ることが困難になるからです。
例:
1.自分の目標を叶えるには、何をすればいいかわからない
2.良い行動を続けるモチベーションがわかない
3.他の人は何をして目標を達成しているのか知りたい
4.目標に向けて一緒に頑張る仲間を見つけたい
ゴール
ユーザーの課題を解決できるゴールを書いていきます。
ユーザーの課題で書いたものに沿って書いていくとスムーズです!
例:
目標へ到達するために必要な行動がわかり、行動できる(課題1)
→何をすればいいか明白だから、迷わない
良い習慣を毎日続けられる(課題2)
→行動するたびに目標達成のモチベーションが湧く
色んな人の目標をみて刺激を受けられる(課題3、4)
→仲間をみつけられ、いい習慣づくりの環境ができる
→自分の目標達成のヒントになる情報が知れる
コア機能
ゴール達成できる、サービスの核となるコア機能を書いていきます。
このサービスの強みとなる機能ですので、あまりに多すぎるとそのサービスの良さがわかりにくくなりますし、完成させるのが難しくなります。
シンプルに最低限、これだけは実装したい機能を書いていきましょう。
例:
心理学のMACの法則に基づいた、目標登録機能
→科学的根拠のあるやり方で目標達成率を上げられる
→目標のm(測定可能性)、a(行動可能性)c(適格性)を書く
行動すると、木が育つ機能
→木が育つことにより、だんだんと夢に近づいていることがわかる
→モチベーションが上がる
シェア機能
→同じ目標をもつ仲間を見つけられる
→目標達成に向けた行動など決められない場合は参考になる
→他の人の達成度合いをみて、モチベになる
概要
最後に概要を書いていきます。
このサービスとは一言でいうとどんなサービスかを説明するものです。
面接、gituhub等で他人にポートフォリオを説明するときに使えると思います。
大体3つくらいにまとめられると、読む人にもわかりやすいと思います。
例：
macの法則に基づいた目標達成サービス
→目標の達成率を上げられる
目標に向けて行動することで、夢の木を育つ
→進捗がわかるため、モチベUP
色んな人の目標と行動をみることができる
→仲間を見つけたり、自分の行動のヒントになる
以上でコンセプトの整理の作業は終わりです!
最後まで読んでいただきありがとうございました!
役に立ったと思ってくださったら、スキをいただけると嬉しいです。
もし好評でしたら次回は画面設計のやり方を投稿していきたいと思います!
この記事が気に入ったらサポートをしてみませんか？