挨拶
どもども！こんにちは。四月までが残り一月半とのことで、新卒入社から十ヵ月目を迎えた龍ちゃんです。時が経つのは早いですね。技術習得もこれぐらい早く進めばいいのにと常々思っています。まぁ文句たれても技術はつかないので、手と頭を働かせているのですけど….
さて今回はプロダクト開発についてです。企画とプロトタイプ1号が完成したので、ブログにまとめようと思います。今回のシリーズでは、備忘録とエンタメ記事を目指して書いていきます。
それでは始めましょう。
企画
さて！突然ですが、僕はお酒が好きです。いや正確には「お酒と共に出る味の濃い料理やおつまみが好き」です。これは小さいころに食べた揚げ豚足に影響されていると思います（小学校三年生で好きな料理は焦がし醤油味揚げ豚足でした）。そこに二十歳からのお酒が加わって今の僕が完成されたわけです。そんなこともあって食事の機会があれば、８０％ぐらいは僕が店を決めます。
お店を探すのって難しいですよね。僕がお店を探す手段は主に足とInstagramですね。街が気に入ったらとにかくぶらりと歩いてみます。あっちにフラフラこっちにフラフラしながら、気になるお店を見つけたら写真を撮るみたいな街歩きをします。時間が空いたときにお店の情報を調べて、行きたいお店リストを作っていくわけです。Instagramはフォローしている方が永遠とおススメしてくれます。
そしていざお店に行くときに！大焦りするわけです。まとめるといってもInstagramは「いいね」をするだけですし、写真に撮ったのは検索履歴に置いているだけなので、ほぼ記憶だよりになってしまいます。趣味嗜好もなかなか変わらないので、重複も当然のようにあります。ちなみに同期の子に聞いたらInstagramはまとめる機能があるらしいです。ちょっと勉強不足でしたね。
飲み会の予定はいつも突然に生まれるので、記憶との格闘を毎度のようにするわけです。調べて満足することも多くあるので、最近は友達に送る「記憶の外注」を行っています。この「記憶の外注」ですが、アプリにできるなぁ～と思ったわけです。
つらつら書きましたが、背景としては上の理由になります。ちょっとカッコつけるなら「僕が僕のためにアプリを作る」という内容です。
それでは、構想からイメージのためのVol.1の説明を始めていきます。ここからはほぼ企画書になりますね。企画書を作りながらブログを書いていきますので優しい目で見てください。
構想
構想部分について書いていこうと思います。企画レベルの話から要件定義まで行きたいところですが、勉強しながらになるので要件定義前の企画で止めておきます。
スーパー言い訳タイム
ここからは構想について話していこうと思います。ここで四か月前の僕が耳元で「UXデザインはいいんか？？」と囁きました。新卒の研修プログラムで三人チームでプロダクト開発という取り組みをして、その振り返りでUXデザインを考えるべきだったという後悔が耳元に居たみたいです。
という訳でいったん無視します。
まったく日本語的につながっていないですね( ;∀;)今から言い訳タイムで以下に箇条書きで理由を書き連ねますね。
- UXデザインを評価できる方を調達できない
- UXデザインについて無知であり、勉強が必要
- UXデザインを勉強実施してたらなかなか開発できなくてストレス
- 作って壊すのが好き
- 僕が僕のために作るから、僕が欲しいもの作ろうやｗ
いろいろ書いてみましたが、めっちゃ言い訳ですね。考慮はしたいのですが、実装経験とトレードオフの気もしているので手を出しずらいのが現状です。そう考えると自分でプロダクト開発していると、成長の観点からは考えることが膨大になって素晴らしいですね。ですが、早く作りたい気持ちもあり今回は「エンジニア的成長」の観点を重視して「UXデザイン」を無視します（今後のためにもまとめときたいなぁ～….ｶﾞﾝﾊﾞﾛ…）。と思って一昔前勉強でまとめた資料を引っ張り出してきます（こちらのサイトを基に勉強しました）。UXデザインは５段階で分割されます。このフェーズで言うところの「戦略・要件」に関しては、無視して「構造」から考えていくという流れになると思います。怒らないでください（UX勉強して間違ってたらその記事で訂正します…ﾀﾌﾞﾝ）。
でも、反省が生きてこないと反省の意味がないので前回のチーム開発の反省点を踏まえて、実装したい内容の洗い出しと要件定義などを現時点での構想を進めていきます。
機能の洗い出し
現時点での構想について出力していきたいと思います。まだ構想段階なのでスケッチラフで行きたいと思います。ちなみにお布団の上でiPadでお絵描きしました。
上のラフを見てもらったらわかると思いますが、文章でも書いておきます。大きな機能としては以下になると思います。
- ブログ（僕が言ったお店の記録）
- 情報保存（追加するユーザーは限定）
- 情報掲載・検索
- 登録ユーザー特典（お気に入り・コメント）
この機能を実現するために要件定義をする必要があるのですが、今回は構想としてやりたいことを書きだす作業で止めておきます。ちょっと技術的に取り入れたいものもあるのですが、調べる時間が欲しいのであと一週間お待ちください。投稿日から一週間以降に来た方は、一覧から探してみてください。
プロトタイプVol.1
さて、ここでは思考よりも先に手を動かした結果を出しておきます。今までは、GitHubとGitHub Pageを利用してTailwindのサイトを公開していましたが、プロダクトでAzureのサービスを使用することがあったのでリサイクルしてReactのプロジェクトをデプロイしてみました。横文字ばっかりでかっこいいですね～作成したサイトはこちらです。
HTML＋Tailwindの環境とReact＋Tailwind環境を比較して、圧倒的に楽な部分があるとすれば「デザイン適応」です。当然と言えば当然なのですが、同じデザインを適応するために毎度コピペするのは大変ですね。こちらのAPI仕様書のページでは、HTML+Tailwind構成だったのでデザイン作ってる時間より、コンテンツ作成に時間を取られてしまいましたね。
ワイヤーフレーム
今回もなんちゃってワイヤーフレームを作成したので画像で置いておきます。暖かい印象を与えたかったので、暖色ベースで食べログの色と親和性を考えてみました。
こだわりポイント
今回のこだわりポイントは、サイト入室時のアニメーションとスマホ版レイアウトの画面切り替えです。今回初めてサイトに入った際にロゴとメッセージをアニメーションで表示する仕組みを実装しました。Tailwindでアニメーションは初挑戦だったので難しい点はあったのですが、こちらのサイトで簡単にアニメーションをテストすることができました。
スマホ版レイアウトですが、ボタンの押しやすさを考慮して下側に配置しています。今回は、CSSプロパティの「position:sticky」を利用して作成しました。stickyについての知識はこちらから。stickyの部分はスマホ版レイアウトのためにあるかのようなプロパティで、固定と変動を双方に変化します。
まぁ何はともあれサイトを開いてみてください。もう一回置いておきます。
後悔ポイント
今回の後悔ポイントは、情報掲載部分です。情報掲載部分のレイアウトは納得がいっていません。ですが、悩んでも答えが生まれてくれなかったので諦めました。特にスマホ版レイアウトの情報掲載部分です。一スクロール内に何件の情報を掲載するか悩みました。今回は、一件を選択しましたがこれはうれしいのか？と悩むモードに入ってしまいました。情報が少なかったので検索を作りませんでした。なので掲載する情報を大きめにするために一スクロールに一件という選択になりました。
この辺りは答えが出ないので、ヒアリング調査が必要ですね。これから改善していきます！
おわりに
今回は、「Tailwindで遊んでみたシリーズ」の発展版になります。遊び場がTailwind単体からいろいろな形態に変化していることがエンジニアっぽくていいですね。というかもともとReactから入っていたのですけどね。今までのシリーズの成果物をぶら下げておきます。
記事としては、前回の仕様書の記事を置いておきますね。最近はTech系の記事も投稿するようになりました。技術検証はエンジニアにはつきものですが、自分のレベルにあった技術検証しかできないので、レベルアップがんばっていきたいところですね。
というか後一月半で１年たつのがビビり散らかしですよ。
ではまた！！
