はじめに
この連載記事は、私が「みんなのポートフォリオまとめサイト」を作る過程をゼロから発信しながらみなさんに見てもらいつつ、作っている途中からみなさんにアドバイスをいただいて、よりよいサービスにしていきたいというお話です。
あとは「サービスを作っていく過程って初学者の人にとっては結構興味ある内容だったりするのでは？（少なくとも自分は知りたかった！）」と思い、このようなスタイルで記事を書いています。
今後も一週間に一度のペースで完成までゆるく更新していく予定です。
前回の記事
「とりあえずこれから作るからみんな見てて！」と宣言しただけの記事がこちらです。
【第0回】「みんなのポートフォリオまとめサイト」を作ります~宣言編~
前回はやります宣言のみで、実質今週からサービス作りに着手しております。
関連記事
【第0回】「みんなのポートフォリオまとめサイト」を作ります~宣言編~
【第2回】「みんなのポートフォリオまとめサイト」を作ります~SPA認証で死闘編~
これまでやったことと作業時間
| やったこと | 作業時間 ( h ) |
|---|---|
| 仕様決め（競合調査) | 3 |
| サービス名考案 | 2 |
| 手書きでWF作成 | 2 |
| デザイン作成 | 8 |
| その他 | 2 |
| 作業時間計 ( h ) |
|---|
| 17 |
だいたいこんな感じです。（９連休で毎日休日で17hって何やってたんじゃ...という感じですが、最初の３日は長期連休あるあるで体調を崩して全く稼働できなかったので、まあこんなもんかな。。。）
サービス名考案や仕様決めなんかは正直四六時中考えてたりするので時間換算するのはちょっと難しいですが、PCの前に座って「うーん...」を頭をひねっていた時間をカウントしています。
それぞれどんなことやってた？
では、それぞれどんなことやったのかを書いていきます。
仕様決め（競合調査）
まず前提として今回のサービス作りのきっかけは、とあるポートフォリオ公開サービスに「もっとこんな機能があったらいいのに、、、！」と思う部分があったので、じゃあ自分で作っちゃえばいいじゃん！というものでした。
その競合サービスというのが、レジュメ（https://www.resume.id/） というまさにポートフォリオ公開用のサービスです。
このレジュメというサービスを使って、転職活動等で人に見せるためにポートフォリオを公開していました。
自分のポートフォリオを特定の人に見てもらう分には申し分ないサービスだったので、そこについては大満足だったのですが、「もっとこんな機能があったらいいのに、、！！！」と思うことがあったので、その欲しい機能を自分のサービスには取り入れていきたいと思います。
ということで、レジュメ含め他のサービスの機能を改めてじっくり確認し、どこが差別化ポイントになるかを考えながら盛り込む機能を詰めるという作業を行いました。
サービス名考案
これは楽しい作業ですね。でもそれと同じくらい難しい。
過去副業でやった開発案件で、サービス名を考えるということを一度経験したことがあります。そのときは、いくつか候補をあげて最終的にクライアントに判断を委ねる形だったのですが、今回は最終決定も自分です（当たり前）。
そうすると、「あれもいいな、、これもいいな、、あーーこっちも捨てがたい、、」となり、なかなか決められないんですね。人に判断を委ねるって、こんなにラクなことなのか、、とつくづく思います。
サービス名候補を出す作業については、「ネーミングの付け方」をまとめた記事だったり、スタートアップのブランド名の決定方法の記事があったのでこのあたりを参考にしながらやりました。
誰も教えてくれない、商品名やサービス名のネーミング方法
急成長スタートアップから学ぶ、ブランド名の決定方法トップ6
上の記事にも観点としてあげられていますが、「検索優位性」というのはとても意識しました。
そのサービス名でGoogle検索かけたときに、すでに認知されている別サービスがヒットしたり、そもそも世の中に存在しているありふれた言葉の場合は、そことのSEO争いになってしまうのでかなり厳しいことが予想されます。なので、できるだけ今世の中に存在しない言葉（検索したときに1件もヒットしない）が理想です。
そんなこんなで、「決められないなー」と言いつつも、検索優位性OK（検索しても1件もヒットしない）、ドメインOK（.comはとれなかったので、.jpを取得）、語感だったりサービス内容を表せているかなどもOKないい感じのサービス名が思いついたので、それでいくことにしました。
手書きでWF作成
これはもう文字通り、紙とペンで画面の大まかな構成を書いていきます。
この段階では、「どんなページがあって、どんな要素をどんなレイアウトで配置するか」くらいしか決めず、なるべく時間をかけずにスピーディーにやっていきます。
いきなりデザイン作りに入るよりは、頭の中で考えているものを一度ざっくり形にしてからデザイン作りに移った方がスムーズにいくのでやってます。
デザイン作成
手書きのWFを元に、デザインを作っていきます。今回は、AdobeのXDを使っています。
自分が作ったデザインを人に見せるのであればPhotoshop等使ってしっかり作り込んだ方がいいのかなと思うのですが、今回は人に見せることはなく、なるべくスピーディーにやりたいのでXDを選択しました。
前にPhotoshopの操作方法をUdemyの講座で学習し基本中の基本はざっと押さえていたので、XDも同じAdobe社製品ということでショートカットキーが同じだったり応用できる部分も多く、XDに関してはチュートリアルをさらっとやればなんとなく触れるようになりました。
フォトショに遊ばれていた私でも、XDは直感的に操作できてとても快適です。あとPCスペックの問題もあるかもですが、圧倒的に動作が軽い（というかフォトショが重すぎ）。
本来であればこのデザインの段階で、配色から余白からフォントやら何から何までばっちり作り込んでおけばあとはそれに沿ってコーディングするだけ！になるので、おそらく作り込んだ方がいいのだと思います。
ただ経験上、あとから「やっぱりこの機能ほしい！」とか「やっぱりこのボタンいらね！」みたいな仕様変更がほぼ必ず発生してしまい、この段階で細かく作り込んだものが無駄になってしまう可能性大であるので、本当に細かい部分はもう実装しながらブラウザで確認するようにしています。
デザイン作りは全てのページを作るわけではなく、転用できる部分は省略します（たとえば今回だとユーザー登録画面とログイン画面はほぼ同じなので、片方だけ作る。PC版だけ作ってスマホ版は作らないなど）。
現在TOPページと下層２ページのデザインが完成、残り２、３ページ完成したら終了になります。
その他(タイトルロゴ外注、ドメイン取得、Twitter公式アカウント作成など)
タイトルロゴ外注
無料のサービスではありますがちゃんとユーザーに使ってもらいたいと思っているので、看板となるタイトルロゴだけはプロのデザイナーさんに外注することにしました。
今回のデザインの外注だけでなく、「外注するという行為」全般に言えることですが、どの人に依頼するかを決めるのは非常に難しいです！
なので結局、今回は前述の副業の開発案件でお世話になったデザイナーさんにお願いしました。
今回は知ってる方にお願いすることにしましたが、初めての相手だった場合、いろいろと気になるポイントがあるかと思います。たとえば
- レスポンスは早いか
- 上記含め、きちんとコミュニケーションの取れる方か
- 品質は満足いくものか
- 費用はどれくらいか
- どれくらいの期間で仕上げてもらえるか
この辺って、事前にどれだけ調べたところで結局実際にお仕事してみないと分からないところだったりしますよね。（それで一度失敗したことがあります。。）
なので、過去に取引した実績がありさらにその時の仕事ぶりがとても素晴らしい方だったので、もう頼まない理由がなかったです。
、、と、ここまで発注者目線で偉そうに語ってきましたが、自分がエンジニアとして案件を受ける場合は逆にこちらが選ばれる側になるわけです。
自分が発注側になることで、「発注先として選ばれるためにはどうすればいいか」ということが客観的にわかるので、非常に勉強になります。自分も選ばれる人間になるために精進せねば。
ドメイン取得
やはりちゃんとしたサービスにするためにはオリジナルのドメインは必須だろうと思い、サービス名が決まったと同時にドメインも取得しました（ドメインは早いもの勝ちなので）。
Twitter公式アカウント作成
使うかどうかわかりませんが、一応作っておきました。アカウント名も早いもの勝ちなので。
まとめ
こんな感じで開発進めております。
何か気になることがあれば（ないかw）、コメントまたはTwitter（https://twitter.com/kiwatchi1991） でDMいただけると嬉しいです！
おわりに
Qiitaでは週一回の更新ですが、Twitter（https://twitter.com/kiwatchi1991） では日々感じたことや細かい試行錯誤の様子などを発信しております。
また、ブログでも数日に一度個人開発記を書いています。今回でいうと、「サービス名を考える」と「デザイナーへの外注」の話はこのQiita記事よりブログの方が詳しく書いています。こちらもよかったらぜひお願いいたします。
それではまた来週。