非美大生が１週間で初めてUIデザインを作ってみた
初めまして。
立命館大学経済学部２年のひなたと申します。
本日の記事は、オンライン人生ゲームのUIデザイン(PC版)の作成過程です。
そもそもなぜ、非美大生が人生ゲームのUIデザインを、１週間で作成することになったのか説明します。
私は、現在、６か月コースのプログラミングスクールに通っています。そのプログラミングスクールで、せっかくだから、同じクラスメイトのみんなで、共同卒業制作を作ろうという流れになりました。
20分間で案を出し合った結果、「インディアンポーカー」や「ビンゴゲーム」、「独断偏見指差しゲーム」等面白そうな案が出ました。その中でも、みんなが作成してワクワクしそうとの観点から、満場一致で人生ゲームに決まりました。
ただし、卒業制作にかけることができる時間はたったの１か月。
しかも、
①機能要件完成・開発スケジュール
②デザイン完成・開発環境構築
③フロントエンド完了
④バックエンド完了・ローンチ
の４つを１か月で終わらせないといけないため、デザインは1週間で作成しないといけないという計算になります。
私はUIUXデザインを1か月間勉強したことがあったので、卒業制作のデザイン制作を任せて頂く運びとなりました。
①作成したUIプロトタイプはこちら
最初に、作成したUIデザイン(PC版)のプロとタイプを貼ります。サービス名はシンプルに「人生ゲーム」に決定しました。
プロトタイプはこちら。全データはこちら。UIデザインの模写は片手で数えることができるほどの数しかやったことがなく、0から一連のUIデザインを作るのは初めてなので、至らない点も多々あるかと思いますが、ご容赦ください。
※「初心者の‘し’の字も無い大学生がお試しデザインやってみたのか〜、ふーん、暇だし見てみるか〜🙄」という心持ちで見てください！！
今回のデザインは、フォントサイズやカラーの選択も含めて、UI/UX思考で考えることができてないです泣
（追記：2024/5/26）
下記からは、このUIデザイン制作の過程を文章化したものです。
②要件定義
最初に、プログラミングスクールのクラスメイトのみんなで、「人生ゲーム」を何のために(目的)・誰に(ターゲット)・どのような機能(機能要件)/品質（非機能要件）を提供するのか、考えました。その理由は、制作物完成に向けて、人生ゲームの要件について共通認識を持つためです。要件定義は以下の通りです。
⑴目的
ゲームとして
オンラインでも交流が深められるようになる
卒業制作（共同制作）として
授業で習った技術や必要な技術を活用・インプットしスキルアップを目指す
複数人での開発手法を学ぶ
ポートフォリオとして活用できる
⑵ターゲット
年齢性別居住地不問
オンラインでコミュニケーションを取っている人たち
⑶機能要件
ゲームボードの表示 : ボード上のマスとそれぞれのマスのパラメータ（-5から5）を表示する。プレイヤーの現在位置を視覚的に表示する。
ゲーム操作のUI : ルーレットを回すアクションを行うためのボタンや機能。ゲームのルールや進行状況に関する情報を表示するためのエリア。
ルーレット機能 : ランダムな数値を生成し、プレイヤーの進行数を決定する。
マスの効果処理 : プレイヤーが止まったマスに基づいて、所持金の増減やその他のイベントを処理する。
プレイヤーの移動管理 : プレイヤーのボード上での位置を更新し、進行状況を管理する。
勝利条件のチェック : すべてのプレイヤーがゴールに到達したかどうかを確認し、所持金に基づいて勝者を決定する。
ルーレット機能 : ランダムな数値を生成し、プレイヤーの進行数を決定する。
マスの効果処理 : プレイヤーが止まったマスに基づいて、所持金の増減やその他のイベントを処理する。
プレイヤーの移動管理 : プレイヤーのボード上での位置を更新し、進行状況を管理する。
勝利条件のチェック : すべてのプレイヤーがゴールに到達したかどうかを確認し、所持金に基づいて勝者を決定する。
プレイヤー情報の管理 : プレイヤーの所持金、現在位置、ゲームの進行状態などを管理する。
ゲームセッション管理 : 複数のプレイヤーが参加するゲームセッションの状態を管理する。
データベースの活用 : ゲームの状態、プレイヤー情報、ゲーム履歴などを保存・取得する。
認証とセキュリティ: ユーザーの認証とセキュアなデータの取り扱いを保証する。
リアルタイム通信 : オンラインで複数のプレイヤーが同時にゲームをプレイする場合、リアルタイムでのデータ同期が必要。
レスポンシブデザイン : 異なるデバイスや画面サイズに対応したユーザーインターフェース。
ユーザー設定とカスタマイズ : プレイヤー名の設定、ゲームの設定（例：ボードのサイズ、ゲームの難易度）など。
⑷非機能要件
パフォーマンス要件 : ゲームはスムーズにロードされ、遅延やラグなく実行される必要がある。レスポンスタイムの目標:95％の機能が2秒以内に実装される。
セキュリティ要件 : ユーザーデータ、ログイン情報、ゲーム進行状況は安全に保存され、不正アクセスから保護される。
可用性要件 : アップタイム: システムのアップタイム目標を設定する（例：99.9%のアップタイム）。障害回復: 障害発生時の迅速な回復計画を策定する。
スケーラビリティ要件 : マルチプレイヤーモードで多数の同時ユーザーをサポートできるようにシステムを使用する。システムに新しい機能やコンポーネントを追加しやすい設計にする。
互換性要件 : さまざまなブラウザやデバイスとの互換性を持つ。当面はGoogle Clomeで使用可能、PC用で作成し、その後レスポンシブ対応をする。
ユーザビリティ要件 : ゲームインターフェースはユーザーフレンドリーで直感的であり、すべての年齢のプレイヤーにアクセスしやすいものである必要がある。当面は日本語のみ対応、その後別言語で使用できるようにする。
法的・規制的要件 : ユーザーデータの取り扱いに関するデータプライバシー法規と規制を遵守する。
③UIデザイン作成(配色/テキスト/フォントサイズ定義)
今回は1週間でUIデザインを完成させる必要があったため、ヒアリングや要件整理、簡易的なプロトタイプでユーザビィリティテスト、サービスリサーチ、パターン出し等々、UIデザインを実際に作るまでの過程は省略しました。
要件定義の次に、配色を決めました。メインカラーは、人生ゲームで遊ぶ上で、穏やかな、優しい気持ち、癒やされてほしいという意味を込めて、ピンク色を選びました。ピンク色の中でも、彩度を落として、目に負荷がかかりにくそうな色に決定しました。背景色は、テーマカラーでもあるピンク色に近いグレーを選択し、全体的なデザインの色味のバランスを整えました。
また、マス目の色は、ユーザビリティを考えて、青はお金が増える、赤がお金が減るという世間のイメージに合わせました。加えて、ルーレットの配色は、全体的なデザインに統一感を持たせかったので、マス目の配色をそのまま利用し、色数を増やさない方向で制作しました。
続いて、テキストの種類とフォントサイズを決めました。
テキストの種類は、日本語(ひらがな・カタカナ・漢字)に対応しているNotoSansJPを選択しました。また、フォントサイズは、タイトル・サブタイトル・説明文などのように、役割ごとに使い分けました。
④UIデザイン作成(ゲーム開始までの同線)
ゲームのリンクをクリックしてからゲーム開始までの同線は、ラウンジを参考にしました。その理由は２つあります。
１つ目は、ユーザー情報を登録する必要があるからです。例えば、Discordに付随しているゲームは、ユーザー登録が必要ないですが、それは、すでにDiscordの認証が入っており、そこからユーザー情報を引っ張ってきているからだと考えたからです。今回はただのWebアプリで、どこにもユーザー情報がないため、ユーザー登録は必須だと判断しました。
２つ目は、ルームを作る必要があったからです。Discordではチャンネル内で全員にシェアされているのでURLのシェアは必要ないですが、今回はWebアプリなので共通で表示されるところがないため、ルームのURLを作成する必要がありました。また、みんなで同じタイミングでWebページにログインして行うという考え方もありますが、そうすると同一時間に1グループしかプレイできない状況になってしまうため、主催者にルーム（URL）を作ってもらい参加者にシェアすることが必要だと考えました。
ゲームのリンクをクリックしてからゲーム開始までの同線のUIデザインは以下の通りです。
⑤UIデザイン作成(ゲーム開始から結果発表までの同線)
オンライン人生ゲームは、私が探したところなかったので、オフラインの人生ゲームを思い出しながら、ほぼオリジナルでデザイン作成しました。こだわった点は、マス目の上部にトップ３までランキングを表示させたところです。また、その上部のランキング部分にフォーカスが当たると、トップ３以下を含めたランキングと、各個人の金額を見ることができるように制作しました。
ゲーム開始から結果発表までの同線のUIデザインは以下の通りです。
⑥感想
率直な感想が２つあります。1つめは、「私、デザイン向いてる(？)」と感じたことです。その理由は単純で、周囲の人たちから「１週間という短時間で、かつ初めてのデザイン制作でこのクオリティはすごい！」とお褒めの言葉を沢山いただいたからです。２つ目は、「私ってやっぱり集中力すごいな！」と感じたことです。このデザイン制作を１週間で終わらしたことに加え、このnoteも約9時間で完成しました。約5000文字も書いているので、やりがいがありました！
真面目に改善点も話すと、今回は、ヒアリングや要件整理、簡易的なプロトタイプでユーザビィリティテスト、サービスリサーチ、パターン出し等々、UIデザインを実際に作るまでの過程を省略してしまったので、次回はこれらの過程も踏まえてデザインを作ろうと思います。
なにより、デザイン制作もnoteを書くのも楽しかったです。
この楽しい機会を与えてくれたプログラミングスクールのクラスメイトにとても感謝しています。ありがとうございます。
ですが、機会は自分から作れるよう、行動していきたいと思う”私”です。
今後の”私”の成長にどうぞご期待ください！笑
最後まで読んでくださった皆さんありがとうございます！！
この記事が気に入ったらサポートをしてみませんか？