NIKKEI TECHNOLOGY AND CAREER

日経電子版を Widget で読む [プロダクト編]

iOS エンジニアの高橋です.2020 年の 4 月から新入社員としてアプリチームに入りました. 新型コロナウイルス感染拡大の影響で,入社後すぐに在宅勤務が始まり,未だに数回しか出社していません.

本記事では,iOS 14 から登場した機能 "Widget" について,プロダクト面から見た特徴を,日経電子版アプリの事例を元にご紹介します. 技術的な内容につきましては,後日 [開発編] のブログを執筆予定です.ご期待ください.

ホーム画面をより便利にする Widget とは

Widget とは iOS 14 からホーム画面に配置可能になった,アプリの部分的なコンテンツです. 大きさは Small,Medium,Large の 3 種類です. iOS 14 以前にも Widget (TodayExtension) は存在していましたが,ホーム画面に配置することはできません. iOS 14 から登場した Widget (以降,Widget) は,ホーム画面に配置できるようになったため,ユーザの目に触れる回数が多くなります. これにより,ユーザとアプリとの接点を今までよりも増やすことができます. (以下, https://www.apple.com/jp/newsroom/2020/06/apple-reimagines-the-iphone-experience-with-ios-14/ より)

widget

なぜ日経電子版で Widget を実装するのか?

Widget はニュースのような定期的に更新されるコンテンツと相性が良い機能です. ホーム画面を通してユーザに記事の一覧を提供することで,アプリを開かずとも,日経のコンテンツをより多くのユーザに届けることができます. もちろん,関心を持った記事があれば Widget 経由でアプリを起動し,記事の詳細を確認できます. また,最新の技術を迅速に実装することで,アプリに新しい技術を取り入れる波を作れると考えています.

Widget で大切なこと

Widget は何を意識してデザインしていくべきでしょうか? Apple は WWDC 2020 にて,以下の 3 つを強調しています( https://developer.apple.com/videos/play/wwdc2020/10103/

  1. Personal: アプリとユーザの感情的な繋がりを強くする
  2. Informational: アプリにおける重要な情報を伝える
  3. Contextual: ユーザのコンテキストに合わせた情報を提供する

日経では,それぞれの品質を高めるために,次のように実装しました.

  1. Personal: アプリと同様のデザイン,体験を提供する
  2. Informational: メインコンテンツである "記事" を提供する
  3. Contextual: 各ユーザが関心を持っているカテゴリの記事を提供する

またユーザへの訴求の観点から,早期開発も大切です. ホーム画面に多くの Widget を配置するスペースはありません. また,ホーム画面を頻繁に編集するユーザも少ないと想定されるため,iOS 14 が正式リリースしてから,できるだけ早い段階で Widget を提供することが必要です. そのような理由で,私たちは Widget を iOS 14 公開後,約 1 ヶ月でリリースしました.

完成した Widget

実際に私たちがリリースした Widget が以下になります.

ライトモード

ライトモード

ダークモード

ダークモード

ライトモードではタイトルやトピック,ダークモードでは背景に日経のメインカラーを使用しました. また記事一覧のデザインや,記事タップ時の遷移先をアプリと同様にしました. これらの体験により,ユーザは Widget がアプリと繋がっていることを意識し,シームレスに Widget に向き合えます. また,記事一覧に画像を載せることで,視覚的に記事を認識できるようにしました. 窮屈すぎない見た目のために,余白にも気を遣いました. Medium,Large サイズの Widget では,各記事のトピックを表示し,何に関連がある記事かを分かりやすくしました.

最後に,ユーザが見たいカテゴリー (ビジネスなど) を選択できるようにしました. 特定のカテゴリーに興味があるユーザは,そのカテゴリーに関連のある記事一覧を見ることができます.

設定

苦労した点

デザイン

デザインを 1 から作成しました. モックアップを作成し,レビューをもらい修正を繰り返しました. 色や余白など細かい要素にも気を遣い,直感的に良いなと思えるデザインを目指しました.

開発

開発速度が重視されていたため,短期集中で実装を行いました. Widget は公開されたばかりの機能だったため,WWDC 2020 の動画や,公式ドキュメントのみが頼りでした. 想定していない動作をする場合もあり,苦労もありましたが,チームメンバーの助けを借りながら乗り越えられました.

最後に

実際に日経電子版アプリの Widget を開発してみて,Widget の体験の良さを感じました. アプリを開かずにコンテンツを確認できる体験は,非常にシームレスです. 今回は,実装速度を重要視したため,ミニマムな機能になりましたが,日経のコアとなる体験を届けられる Widget になったのかなと思います. まだまだ改善の余地があるため,今後も開発を続けていこうと思います.

次回の [開発編] もお楽しみに!

高橋碧
ENGINEER高橋碧

Entry

各種エントリーはこちらから

キャリア採用
Entry
新卒採用
Entry
短期インターン
Entry