デザイナーが課題発見〜実装まで1人でサービスをつくってみて学んだこと。
どうも、こんにちは！xenodata lab.でCDOをやらせてもらってる「まっこるり」です。
先日「アウトプット大全」という本を読みまして、その中でインプットとアウトプットの比率は３：７が最適であるという驚愕の事実を知りました。
今までは逆に７：３くらいの比率でインプットしちゃってた私ですが、反省を込めてアウトプットを強化しなければ！と決意したわけです。
そこで早速土日の週末時間を使ってマイクロサービスを自分1人だけで作ってみることにしました。
記念すべきサービス第一号はこちらになります！
つくったサービスはこちらになります✌️いえ〜い
※現在は公開停止中です。ごめんなさい！
簡単に言うとデザイナーのためのインプットお題提案サービスです。
もともと自分の中に、本当は有意義に週末を過ごしたいのに結局ダラダラして何も出来なかった…やってしまった……と後悔することが多々ありました。
自分なりにその課題感を深掘りしてみたところ、やりたいことが多すぎて逆に何もできない状態に陥っていたのでは？という仮説が生まれてきました。
もういっそのこと何をすべきなのか誰かに決めてもらいたい！
人間はそもそも自分で考えて動くより、人に指示されたほうが動きやすい生き物なんだ！
と半分開き直りつつ、じゃあおみくじ方式でお題を提示してくれるサービスをつくってみよう！…となったのでした。
初めてサービスつくるなら超王道の流れで行くっしょ！
ざっくり言うとこんな感じの流れです。とくにトリッキーな工程はなく、いたって普通の流れ。
① 課題を見つける
② 解決策を考える
③ デザインをつくる
④ 実装する
⑤ 公開してシェアする
①〜②まではサービス説明のとこに書いたので、③〜ひとつひとつもう少し詳細に書いていきます。
デザインをつくる。 ただし時間はかけすぎない…！
UIデザインはfigmaで作成しました。figmaを選んだ理由は特になくて、普段から使ってて慣れてたというだけです。レスポンシブを想定していましたがメインで使いたいSPの画面だけつくり、PCのレイアウトは実装しながら組む計画で進めました。
とにかく作りきるためにスピード重視！！！ということで世界観やらトンマナなど深い部分はあまり考えず気軽につくりました。
▼こんな感じでfigmaでつくったよ。超シンプル。
実装する。 自分の無力さを痛感してイライラしだす…
シンプルなHTML / CSS / JSでつくりましたが、それでも私のレベルだと丸１日くらいはかかりました。自分のレベルの低さに驚愕ですｗ
今までフロントエンドを業務としてやってきていたので、無難に進められるだろうと思っていたのですが、あくまでもインハウスデザイナーとしての範囲でしかやってきていなかったため、この０→１部分の実装が全然できないことに気が付きました…（泣）
サーバーどこで借りればいいの…最初記述しておかなきゃいけないことって何があったっけ…CSSリセットってどうしたらいいの…Bootstrap入れるの入れないの…などなど初歩の初歩が出来ないｗ
とくにJS部分は完全に初心者だったのでパニックでした。それでもここで挫折しなかったのはprogateで基礎だけでも勉強していたおかげかもしれません。感謝です。
公開してシェアする。人が反応してくれる嬉しさ
最低限の実装が終わったらPV数などをカウントするためにGAを仕込んでTwitterなどでシェアしました。
実際に人に使ってもらって反応をもらえるのってすごく嬉しい。当たり前なんだけどやっぱ嬉しい。
こんなしょーもないアウトプットなのに…反応してくれた皆さま、本当にありがとうございます…！！！
一人で全部やってみたら思った以上に学びが多かった
実践的なスキルが効率的にレベルアップ
今回やってみて得られたこととして一番に言えるのは「実践的なスキルが効率的にレベルアップできた」ということだと思います。
進めていく中で自分が出来ないこと、忘れてることに何回もぶち当たりました。自分の中では知ってるつもり、出来るつもりだったのに、実際にやろうとすると「あれ、これどうすれば良いんだっけ…？」ってなっちゃって出来ない。
具体例で言うと、OGP画像の出し方とかねｗ
絶対パスで書かないと出ないという基本的なことも私は知らなかったし、パスを変更したらキャッシュをクリアしないと即反映されないことも昔は知ってたはずなのに、いつのまにか忘れてて何回もミスった。ダセェ…
上記のように壁にぶち当たった場合は自力で調べるか、もしくは人に教えてもらって学ぶかして進めていくしかない。調べたこと、教えてもらったことを即座に実践してトライ＆エラーを繰り返すことで、本や記事を読むだけとは比べ物にならないリアルな経験値が積めたのはとても良かった。
結局実践しないと、ちゃんと自分のスキルにならないってことですね。
うん。
そしてすぐに聞ける友人達がいることにとても感謝した。フロントエンド詳しい人は貴重である。助けてくれた皆さんありがとう…！！
個別最適ではなく全体最適
次に良かったのは「個別最適ではなく全体最適でサービスを見る練習になった」ことです。
自分で考えて→作って→使ったからこそ、ユーザー/ プロダクト / デザイン全てに対する理解が深い＋実働できるのが物理的に自分1人しかいない。そのような状況になると自然とやることを全体最適で考えられていることに気が付きました。
例えば土日で作りきることを目標としていたので、その限られた時間の中で完成させるにはどうリソース配分するべきなのか？
ボタンにアニメーションを入れたいけど、PC画面も整えないといけない！
さてどちらからやるべきなのか？
そんな事を状況や環境から考えて決めないといけないわけです。
スケジュール、課題の重要度、想定効果、リソース、コスト、スキル、様々な変数をゴニョゴニョしながら次のアクションを自分で考えて自分で決める。この基本的なアクションの考え方を練習しておくのは、普段仕事でも確実に役に立つだろうなと思いました。
そして少しだけプロダクトオーナーやPMの気持ちが分かった気がしますｗ
最後に
初めて一人でワンストップなものづくりをしてみましたが、とても楽しかったです。とくに公開してTwitterで投稿ボタンを押すのは割とドキドキワクワクしましたｗ
今までインプットしてばかりだったので、これからは学びの効率を高めるためにアウトプット多めで続けていけるよう頑張っていきます！
気が向いたら次回は公開した後のサービス改善のお話を書いてみようかな。
良かったらTwitterもやっているのでフォローお願いします^^
目指せ年内にフォロワー1,200人！！
ではまた〜！
読んでいただきありがとうございます！デザイナーのためになる記事を書けるよう頑張ります（＾◇＾）