プロジェクト着手時に意識した大切なこと

プロジェクト着手時に意識した大切なこと Tomomi Kimura

写真 • Tomomi Kimura @coco0411529 • 株式会社マイベスト業務委託（リモート） • モバイルエンジニア
• React Native 2年目 • 愛犬家柴推し🐕🐕 自己紹介

月間利用者数 3,000 ユーザーの “選択”をサポートするサービス万人以上（2024年11月時点）

プレゼンの内容 • React Nativeアプリケーションを開発する際、プロジェクト着手時に意識した大切なことフォーカスしたいポイント ◦ デザインレビュー ◦ コンポーネントの複雑性
◦ マルチデバイスサポート

デザインレビュープロセス 1. フローを理解する。ユーザーの立場に立って考える ◦ ユーザーは新しい機能をどのように使うのか？ ◦ ユーザーは新しいコンテンツや画面にどう遷移するのか？ ◦ 不可解な点があれば、今が質問するタイミング！ 2.
機能やプロジェクトのコア部分を明確にする ◦ タイトな締切のプロジェクトでは、全ての要望に応えるのが難しい時もある。ビジネスにとって本当に重要なことを理解することで、優先度把握や相談タイミングなどの手助けに 3. 隠れた複雑性を探す

デザインを深掘りする • 新しく作成が必要なスクリーン数はどのくらい？ • 変更が必要なのは何箇所あるか？ • 新しいコンポーネントはいくつか？ • デザインシステムは適切に使われているか？ •
コアなコンポーネントの変更は必要か？ • 機能の中で、最も複雑なコンポーネントやインタラクションは何か？

コンポーネントを分解する（Component breakdown）

隠れた複雑さの見極め (Hidden complexity)

隠れた複雑さの見極め (Hidden complexity) 変更の可能性がある箇所を明確にする

意識したこととできる対応 • ビジネスによって、変更が必要になる可能性のある領域や機能を特定する ◦ プロモーションバナー ◦ お金やポイントなどに関する表記 ◦ 法的文言に関する表記
◦ ユーザーアカウントや進捗に関連するUIコンポーネント • ユーザーがアプリを更新しない可能性を加味して実装する • 可能であればOTA（Over the Air）更新をサポートする

動作確認は、複数のデバイスでテストする

異なるデバイスの SafeAreaを考慮する

<SafeAreaView> <BaseBox> {/* ... */} </BaseBox> </SafeAreaView> const insets =
useSafeAreaInsets(); return ( <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom, }}> {/* ... */} </View> ); SafeAreaView: (‼) useSafeAreaInsets: • SafeAreaView from React Native • iOS version 11以降対応 (iOS version10以前のバージョン　 Android非対応) • useSafeAreaInsets hook from react-navigate-safe-area-context library • React Navigationも推奨

const insets = useSafeAreaInsets(); const device = useWindowDimensions(); const height
= device.height - insets.top - NAVIGATION_BAR_HEIGHT - BOTTOM_TAB_BAR_HEIGHT - insets.bottom;

実際どのくらいレスポンシブにする必要があるか？

マルチデバイスサポート • 自分のアプリのカバーしているデバイスを把握 • デザイン面の考慮点：SafeArea, aspect ratio (width x height)
• 動作確認時の推奨デバイス ◦ iOS: iPhone SE, iPhone 16 Pro Max ◦ Android: Galaxy, Google Pixel ◦ 動作確認時の簡単コマンド ▪

まとめ • プロジェクト着手時に意識した大切な事 ◦ デザインレビュー ▪ 深掘り ◦ コンポーネントの隠れた複雑性 ◦
マルチデバイスサポート ▪ SafeAreaに配慮したデザイン実装 ▪ iOS&Androidの複数のデバイスでの動作確認

ご清聴ありがとうございました！

プロジェクト着手時に意識した大切なこと

プロジェクト着手時に意識した大切なこと

Tomomi Kimura

Featured

Transcript