サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<p>&nbsp;</p>

<h2>はじめに</h2>

<p>オンラインサロン事業部 開発グループ iOSエンジニア担当の鳥嶋です。</p>

<p>オンラインサロン開発チームには、チームビルディングの一環として「5％ルール」という制度があります。</p>

<p>この制度を利用することで、業務時間の「5%」を使って自身の興味のある技術や知識を学んだり、チームメンバー同士でコアな強みを超えたスキル成長に取り組んだりすることができます。</p>

<p>今回はその中で実際に行った「Human Interface Guidelines輪読会」での取り組みと、そこでのアウトプットをどのようにプロダクト開発に役立てているのかをご紹介させていただきます。</p>

<h2>背景</h2>

<p>「Human Interface Guidelines輪読会」を実施した背景は以下です。</p>

<ul>
	<li>開発の効率性と一貫性を確保するために、チームメンバーの共通認識を持ちたい
	<ul>
		<li>共通認識を持つことで、コミュニケーションの円滑化や誤解の軽減、スムーズなタスクの推進が可能となります。</li>
	</ul>
	</li>
	<li>意思決定において、HIGを判断材料として活用したい
	<ul>
		<li>HIG活用により、アプリ開発において一貫性を確保でき、ユーザーが馴染みやすい統一された体験を提供することが可能となります。</li>
	</ul>
	</li>
	<li>iOSアプリ開発において、軸となる指標を示すことを目指したい
	<ul>
		<li>HIGを軸とすることで、アプリの品質向上に寄与し、ユーザビリティを重視した設計や操作性の向上に取り組むことが可能となります。</li>
		<li>またHIGは最新のプラットフォームの変更にも対応しており、開発を常に最新情報に合わせて進めることができます。</li>
	</ul>
	</li>
</ul>

<h2>Human Interface Guidelinesとは</h2>

<p>ここで取り上げる「Human Interface Guidelines(以下HIG）」とは、Appleが開発者に向けて提供するデザインガイドラインのことです。</p>

<p>HIGには、Appleのプラットフォーム（iOS、iPadOS、macOS、tvOS、watchOS）で優れた体験をデザインするのに役立つガイダンスとベストプラクティスが記載されています。iOSエンジニアとしてアプリ開発するうえで、ぜひ一度読んでいただきたいガイドラインです。</p>

<h2>HIG輪読会での取り組み</h2>

<p>オンラインサロン開発チームでは、月・水・木・金の10時30分から11時までの30分間、HIG輪読会を行いました。主にiOSとiPadOSに該当する部分を中心に内容を取り上げ、参加メンバーにはエンジニア、デザイナーおよびプロダクトオーナーが含まれていました。</p>

<p>具体的に読み進めていった箇所は、 Platforms (iOS、iPadOS)、 Foundations、Patterns、Components、Inputs です。この中から重要だと思う箇所を抜粋して読み進めていきました。</p>

<p>読み進めた後は参加者同士で意見交換を行い、特に気になった点や興味深いトピックについては、周辺知識も踏まえながら深掘りしていくようにディスカッションしました。また、気づいたことや学んだことなどは自由に記録できるようにしました。</p>

<p>これにより参加者はHIGに関する知識を深めるだけでなく、メンバーとのディスカッションを通じて新たな視点や学びを得ることができました。また記録されたメモは後で参照したり、さらなる議論や改善策の立案に役立てられたりしています。</p>

<p>以下は実際に輪読会で使用したコンフルの内容の一部です。</p>

<p style="text-align:center"><img alt="" height="747" src="https://image.dmm-corp.com/1mwiku0g8qvlymw7zqcpwbo67hfk" width="594" /></p>

<h2>サロンiOSアプリ開発での取り組み</h2>

<p>ここではHIG輪読会を実施したことで得られたことと、実際のプロダクトにどのようにアウトプットしたかをご紹介します。</p>

<h3>HIG輪読会を実施したことによって得られたこと</h3>

<p>HIG輪読会を行ったことで、開発チームとして得られたことは以下です。</p>

<ul>
	<li>iOSアプリを開発するうえでの共通認識を持つことができた。</li>
	<li>軸となる知識を得ることができたため、「iOSアプリとしてどのように機能開発をしていくのがいいか」を議論するようになった。</li>
	<li>Appleが提供している標準アプリを参考し、機能開発を行うことができた。</li>
	<li>詰まったときや議論が白熱したときなどに、HIGを振り返り、問題解決できるようになってきた。</li>
	<li>リモートワークでのコミュニケーション活性化につながった。</li>
</ul>

<h3>どのようにアウトプットしたか</h3>

<p>現在オンラインサロンアプリではReactNativeからSwiftへ移行を進めています。既存の画面をSwiftに移行するうえで、UI上の改善なども一緒に行っています。今回は直近改善した機能について紹介します。</p>

<p>DMMオンラインサロンでは、サービス機能の一つとしてオンラインサロンの入会プランを複数設定することができます。その機能に関連し、オンラインサロンを運営するオーナーさん向けの、会員がどのプランに入会してるかを一目で確認できる「プランカラー設定」という機能があります。この機能を使うと各プランに対して任意でカラー設定ができ、会員がどのプランに入会しているかを色分けして明確に示すことができるようになります。</p>

<p>上記機能を表現する画面に関して、改修前は以下のUIでした。</p>

<p style="text-align:center"><img alt="" height="520" src="https://image.dmm-corp.com/9j9tdkgjgvb33jhplpis2kfwi1dg" width="248" /></p>

<p>初めて私がこの画面を見たとき、パッと見て何を設定する画面なのかを認識できませんでした。またそのときに疑問に思ったことは以下です。</p>

<ul>
	<li>プランのカラー設定をするのに、タイトルが「プラン設定」となっている</li>
	<li>プラン一覧とカラー設定とが同じ画面に存在していて情報が多い</li>
	<li>フォントやマージン、ボタンのサイズが要素に対して合っていない</li>
</ul>

<p>など、いろいろと気になる点が多い画面でした。</p>

<p>その後こちらの画面を改修し、現在は以下で構成されています。</p>

<p style="text-align:center"><img alt="" height="478" src="https://image.dmm-corp.com/ziqny2d8b6ftzi8mljq11rxxezl6" width="706" /></p>

<p>主な改善点は以下です。</p>

<ul>
	<li>タイトルを「プランカラー設定」に変更</li>
	<li>最低限の説明のみ記載</li>
	<li>プラン一覧とカラー設定の画面を別にし、画面ごとの目的を分ける</li>
	<li>一覧画面では各プランを表示し、そのプランにどのカラーが設定されているかがパッと分かるような表現にする</li>
	<li>カラー設定画面はあらかじめいくつかの色を準備して選びやすいようにしておく</li>
	<li>一番下のセルをカスタムでカラー選択できるようにし、さらにタップすると標準カラーピッカー画面が表示され、任意のカラーに設定できるようにする</li>
	<li>画面を３つ並べたときに機能全体の構成がすぐに分かるように設計されている</li>
	<li>標準アプリのUIと近い形に設計したことにより、アプリを使い慣れていないユーザーでもすんなりと使えることが期待でき、学習コストが低いUIとなっている</li>
</ul>

<p>上記のように、より直感的に操作しやすくなるように設計しました。</p>

<p>使い手の学習コストを下げることは非常に重要だと考えています。HIGではそういった点もより細かく記載されています。上記の他にもフォントやマージンなど細かく修正を行い、修正前の画面と比べて「この機能は何ができるのか」ということがより分かりやすくなったと思います。</p>

<p>こちらの画面を改修するにあたっては、以下を参考にさせていただきました。</p>

<ul>
	<li><a href="https://developer.apple.com/design/human-interface-guidelines/modality" target="_blank">modality</a></li>
	<li><a href="https://developer.apple.com/design/human-interface-guidelines/lists-and-tables" target="_blank">lists-and-tables</a></li>
	<li><a href="https://developer.apple.com/videos/play/wwdc2022/10001" target="_blank">Explore navigation design for iOS</a></li>
</ul>

<p>また標準アプリのUIなども参考にしました。参考にしたアプリは、Apple標準のカレンダーアプリ、リマインダーアプリなどです。</p>

<p>上記の機能改善ほんの一部ではありますが、HIGを読んだことによってその周辺知識も向上し、iOSアプリとしてどのように機能開発をしていくのがいいかという感覚や知識をより一層深めることができたと実感しています。</p>

<p>単にHIGに忠実に従ったりAppleの標準アプリを真似たりするだけでなく、各要素や振る舞いなどを十分に理解したうえで、HIGで学んだことを活かし、<strong>サロンアプリとしてどのように設計するべきか</strong>を考えられるようになったのではないかと思っています。</p>

<p>このようにオンラインサロンアプリ開発では、日々改善に向けて取り組んでいます。</p>

<h2>まとめ</h2>

<p>HIG輪読会をしたことによって、より良いiOSアプリ開発ができるようになったと感じています。HIGの量は多いですが、一つ一つの項目がしっかりと書かれているため、Appleのネイティブアプリを開発するうえで非常に効果的だと思っています。</p>

<p>また、チームで輪読会をすることによって非常に大きな効果も得られますし、リモートワークでのコミュニケーション不足の改善など副次的効果も得られました。</p>

<p>「<a href="https://developer.apple.com/jp/wwdc23/" target="_blank">WWDC2023</a>」のタイミングで新たに日本語にも対応したため、より読みやすくなっています。この記事を読んで少しでも興味が湧いた方は一度読んでみてください。</p>

<p style="line-height:1.38; margin-top:16px; margin-bottom:16px"><a href="https://developer.apple.com/design/human-interface-guidelines" style="text-decoration:none" target="_blank">Human Interface Guidelines英語版</a></p>

<p style="line-height:1.38; margin-top:16px; margin-bottom:16px"><a href="https://developer.apple.com/jp/design/human-interface-guidelines" target="_blank">Human Interface Guidelines日本語版</a></p>

<p>DMMオンラインサロンでは開発チームのメンバーを募集しています。少しでもご興味を持たれた方、まずはカジュアル面談で気軽にお話ししてみませんか？</p>

<div data-oembed-url="https://speakerdeck.com/onlinesalon/for-software-engineers">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allowfullscreen="" scrolling="no" src="//if-cdn.com/3KHBOZi" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
</div>

<p><a href="https://speakerdeck.com/onlinesalon/for-software-engineers" target="_blank">speakerdeck.com</a></p>


DMMオンラインサロン

コミュニティ

オンラインサロン

アプリ

デザイン

オンラインサロン事業部　Human Interface Guidelines輪読会の取り組み

オンラインサロン事業部　Human Interface Guidelines輪読会の取り組み

シェア

一緒に働く仲間を募集しています！

関連する求人

関連する記事

関連するサービス

オンラインサロン事業部 Human Interface Guidelines輪読会の取り組み

シェア

一緒に働く仲間を募集しています！

関連する求人

関連する記事

関連するサービス

オンラインサロン事業部　Human Interface Guidelines輪読会の取り組み