
資格勉強用サイトを0から作ってみた#1
こんにちは、ogiです!
Figmaの使い方や基本的なUIデザインの構成などをインプットしてきました。
Googleのmaterial designを読んで、UIデザインの基本のキを知ったところで、いざ!
サービスを0から作ってみます!
まだまだ勉強途中ですが、実際に行動してみて自分に足りない部分や
思ったより理解できていた部分など肌で感じたいと思います。
初めてつくるサービスは「資格勉強用サイト」!
新入社員の方向け、資格勉強を頑張っている方に向けて家でも、移動中でも、いつでも勉強できるサイトのUIを0から作っていこうと思います。
知り合いのエンジニアに話したところ、じゃあバックエンド作るからサービスとして実装までやろうよと言ってくださいました!!
初のサービス作成で自己満足で終わる予定でしたが笑
かなりモチベーションが上がったので、用件定義からユーザーテスト、実装までの過程を書いていこうと思います。
要件定義を作成
まずは、どんな方が課題を持ちデザイナー、エンジニアに提案してきたかを定義するいわゆる要件定義を仮定で作成していきます。

ペルソナシートの作成
次にどういった方が課題を提案してきたかペルソナシートを用いて作成していきます。
ペルソナとはマーケティング用語で自社の製品やサービスの典型的なユーザーを体現する仮想的な人物像のことです。
ペルソナを用いてマーケティング戦略を組み立てることで、よりユーザーに寄り添った施策を展開することが可能となります。
つまり、「誰に、何を、なぜ」伝えたいのかが明確になるということです。

今回は社内の資格研修の講師を担当しているエンジニアから提案を受けたという程でサイトを作っていくこととします。
アイキャッチの定義
さて、ペルソナも完成し次は5W1Hの作成に移ります。
提案してきた方はどのような方にサービスを届けたいか、何を届けたいかを明確に定義していきます。

実際に要件定義を作成してみて、今回は私が作成しやすいように課題、目標を設定しましたが、ITの知識がない方や抽象的な課題の提案があったときに、抽象的な課題を言語化し提案できるUIデザイナーになりたいと思いました。
次回は、ログイン画面の作成に移りたいと思います。