Nomora：人間工学に基づいたパソコン作業空間の構築

Nomoraは、パソコン作業空間の家具（デスク、椅子、モニター）サイズが人間工学の推奨に適合しているかを確認できるツール型Appです。

※本プロジェクトは個人プロジェクトです。プロジェクト制作範囲には、UXデザイン、UIデザイン、App開発が含まれます。

※制作期間：2023年7月〜2023年8月

プロジェクト着手のきっかけ

インタラクションデザイン学科に入学して以来、UI/UXデザインを学び始め、同時にWebやAppの自学も始めました。2年間の学習（大学2年時）を経て、初めて自分のデザインをコードで再現し、その2年後（大学4年時）には卒業制作の開発を単独で担当できるまでに成長しました。

このようにプログラミングスキルが成長したことで、「Appを制作し、リリースする」という可能性について考え始めました。将来UI/UXデザイナーとして働くことを目指している私は、設計から開発に至るまでのすべてのプロセスをできるだけ深く理解したいと思っています。実践を通じてそれらを学ぶことで、他職種とのコミュニケーションが円滑になり、最終的にはより優れたUI/UXデザイナーになれると考えています。

この想いから、本プロジェクトが誕生しました。

プロジェクトの範囲設定

正式に着手する前に、自身の時間と能力を精査し、プロジェクトの範囲と目標を設定しました。iOS Appの開発・リリース経験がなく、制作可能な期間も限られているため、小規模で実現可能なテーマに絞りました。

• 目標：UI/UXに優れたiOS Appを設計・開発し、最終的にApp Storeに公開する
• テーマ：小規模で、自身のプログラミングスキルで対応可能な内容
• 制作期間：夏休みから新学期までの約3ヶ月

テーマの発想と探索

まず「ツール系App」にテーマを絞り、発想・探索を始めました。これは、一般的に内容がシンプルで、制作難易度が低いAppジャンルだからです。

その中で、大学の授業中に紹介された「机と椅子の人間工学的サイズ推奨値」に関する研究を思い出しました。そこで、これらの複雑で多数あるサイズ推奨値を直感的に操作できるツールとしてApp化するアイデアを思いつきました。

ペルソナ

典型的なオフィスワーカーをターゲットとしてペルソナを設計しました。この層は長時間パソコンデスクに向かうため、家具サイズの快適さが非常に重要です。

黃詩涵（ホウン・シーハン）さんは都市に住む若い女性のホワイトカラーです。仕事の大半をデスクワークに費やし、長時間合わない家具を使用した結果、疲労や身体の痛みを感じるようになりました。

この不快感を軽減するためにネットで情報を検索しましたが、情報は玉石混淆で、特に家具サイズの調整方法については具体的な対策が見つからず、諦めかけていました。

カスタマージャーニーマップ

黃詩涵さんはオフィスだけでなく、在宅勤務やビデオ会議、さらには家庭内での娯楽目的でもパソコンを使用するため、複数のシーンにまたがって快適な作業空間を提供する必要があります。

アプリUIデザイン

後続の開発やリリースにリソースを残すため、UI設計ではネイティブUIコンポーネントを中心に構成しました。操作フローは以下の通りです：

1. 新しいテストを作成
2. ガイドに従って家具サイズ（天板の高さ、奥行き、モニターの高さなど）を入力
3. 結果とアドバイスを確認
4. 家具を調整し、快適なパソコン作業空間を獲得

ワイヤーフレームとユーザビリティテスト

Wireframe完成後、身近な友人や家族にテストと簡単なインタビューを行い、以下の3つの問題点が判明しました：

プロトタイプ

ユーザビリティテストの結果を反映したプロトタイプを作成しました。

測定位置イラストの設計

測定項目が多いため、イラストも多数必要になります。すべてを手描きすると時間がかかり精度も不安なため、3Dレンダリングを採用しました。図中のモデルは著作権付き素材または自作です。

全体のデザインは単色調で統一し、測定箇所の視認性を高めました。

デザインシステム

ページ間でデザインを統一し、開発効率を上げるために簡易なデザインシステムを構築しました。

アプリ開発

本作の主なフレームワークはAppleが2019年に発表したSwiftUIです。リリースから日が浅く、UIKitに比べ支援は少ないものの、習得難易度が低く、現時点で最も習熟しているため採用しました。

SwiftUIで大半の要件をカバーできると判断し、万一カバーできない場合にはUIKitで補完する計画です。

デザインと開発の深い統合による効率的な制作

SwiftUIの宣言的記述の利点を活かし、デザインシステムの名称と一致するコードスニペットを事前に構築。これによりUI実装の効率化を実現し、さらにダークモード対応のようなシステムレベル機能の実装も容易になりました。

デザインの特徴

全測定項目に図解を用意し、迷わず測定可能

すべての測定項目にイラストが添付されており、項目をタップするだけで詳細説明と図解を確認できます。

評価を通じて空間状況を素早く把握

テスト完了後、Appトップ画面に合格項目と評価が表示され、ユーザーは詳細画面に入らずとも大まかな状況を把握できます。

個人のサイズ好みを保存し、場所を問わず同じ体験を

快適なデスク・チェアの高さは人によって異なるため、Nomoraでは個人の好みを保存できる「プリファレンス」機能を提供しています。

インサイトチャートで実空間と好みの差を可視化

各測定項目において、インサイトチャートで実際の数値と好みとの比較を視覚的に表示します。

ローカライゼーション（多言語対応）

多くのユーザーに届けるため、多言語対応（繁体字中国語、簡体字中国語、英語）を実施しました。

その他のデザイン作業

本プロジェクトでは、Appに加え、イメージWebサイトやAppプレビュー画像も制作しました。

イメージWebサイト

個人Webサイト内のサブページとしてRWD対応で公開。既存のデザインシステムを活用し、品質と開発スピードを両立しました。

Appプレビュー画像

App Storeで使用するスクリーンショット画像を多言語版でデザインしました。