App Store 10周年:初期のアプリのデザインの進化c

App Store 10周年:初期のアプリのデザインの進化c
App Store 10周年:初期のアプリのデザインの進化c

近年における最も重要なデザイン上の機会の一つが、Appleのウェブサイトへのシンプルなブログ投稿で発表されました。「はっきり言います。iPhoneにネイティブのサードパーティ製アプリケーションが欲しいと思っています。2月には開発者向けのSDKを提供する予定です」とスティーブ・ジョブズは書きました。それから1年も経たない静かな木曜日の朝、500本強のアプリが揃ったApp StoreがiPhoneユーザーに向けてオープンしました。

iPhoneアプリほど、私たちの生活や周囲の世界との関わり方を変えた現代のイノベーションはほとんどありません。発売時に最初に公開された500個のアプリの開発者たちは、その後生み出された何百万ものアプリのデザインの方向性とインタラクション方法を形作るという、またとない機会を得ました。

App Store 10 周年を記念して、App Store のオリジナル アプリ 10 個のビジュアルの進化を研究してみましょう。

アプリ

この記事では、発売日からダウンロード可能で、現在もアップデートが行われているアプリの注目すべきビジュアル変更点に焦点を絞りました。これらのアプリの多くはiPad版でも利用可能ですが、本レビューではiPhone版の変更点に焦点を当てています。(写真をクリックすると拡大表示されます。

iTunesリモート

Appleは、App Storeで自社ソフトウェアを公開することで、発売直後から他の開発者の模範を示しました。最初に開発された2つのアプリは、ゲーム「Texas Hold'em」と、MacやApple TVのiTunesライブラリの再生をWi-Fi経由で操作できるシンプルなユーティリティ「Remote」でした。Texas Hold'emは2011年にApp Storeから削除されましたが、Remoteは現在も生き続けています。

Remoteのデザインは当初から、iPhoneのiPodアプリ(現在は「ミュージック」アプリ)のルック&フィールに大きく影響を受けていました。実際、「再生中」ビューの外観はほぼ同じでした。バージョン2.0では、Louie Mantiaがデザインした新しいアイコンが導入されました。iOS 6では、標準の「ミュージック」アプリが完全に再設計され、iPhoneの動きに合わせて動的に反応する音量スライダーが搭載されたため、両アプリの方向性は大きく変わりました。Remoteはより標準の外観を維持しました。アイコンは、MacのiTunes 11のスタイルに合わせて再度更新されました。

Remoteの最初の大幅な再設計はiOS 7で行われました。ミュージックアプリの真っ白なテーマとは対照的に、Remoteはアルバムアートワークの色で彩られた、暗くぼやけた背景を採用しました。2016年、Appleは第4世代Apple TV向けにApple TV Remoteアプリをリリースしました。これはRemoteに代わる、論理的な前進と言えるでしょう。その後まもなく、RemoteはiTunes Remoteに名称変更されました。アプリは引き続きダウンロード可能でしたが、今年6月に完全に新しいデザインとiPhone Xの縦長ディスプレイへの対応が追加されるまで、実質的に変更されていませんでした。

iTunes Remoteは刷新され、iOS 11のミュージックアプリを彷彿とさせる、より視覚的に保守的なデザインに戻りましたが、大きなタイトルやカードは廃止され、従来のナビゲーションが採用されました。iTunes Remoteは、赤みがかった色ではなく、更新されたアイコンに合わせて青を採用しています。

フェイスブック

iTunes Remoteの控えめな変更とは対照的に、Facebookアプリは過去10年間、継続的にデザインを刷新し、その頻度も高まっています。アプリの包括的なビジュアルヒストリーをまとめると小冊子が1冊分になってしまうため、ここでは特に重要な変更点を8つ取り上げます。

FacebookのiPhoneにおける冒険は、実はApp Storeが存在する前から始まっていました。このサービスは、2007年10月にiPhone初のウェブアプリの一つとして初めて提供されました。App Storeのバージョン1.0は、特徴的な青いナビゲーションバーを除けば、今日のFacebookとはほとんど見分けがつきません。アイコンにも、特徴的な白い「f」がありません。アプリのニュースフィードは、基本的にタブバーの上に装飾されたテーブルビューで、ホーム、プロフィール、友達、チャット、受信トレイの5つのアイコンが表示されていました。バージョン2.0も同じコンセプトに基づいて構築され、メインタイトルバーの下に2つのナビゲーションレイヤーが追加されました。

Facebook 3.0は2009年7月に初めてプレビュー版が公開され、アプリのナビゲーションのバルーン化を解決するために3×3のアイコングリッドが導入されました。初期のスクリーンショットでは、全体が青いタイル状のグリッドになっていますが、このデザインはアプリの正式版ではリリースされませんでした。

2011年10月、Facebook 4.0はナビゲーションに「ハンバーガーメニュー」をいち早く採用しました。アプリの人気により、その後数年にわたり、この物議を醸したデザイン要素は数え切れないほどのアプリやウェブサイトで採用されるようになりました。バージョン4以降、Facebookのデザインタイムラインははるかに複雑になりました。アプリのデザインはより速く反復されるようになり、変更はメジャーリリースまで保留されるのではなく、段階的に展開されることが多くなりました。

2013年4月、FacebookはiOSアプリで「チャットヘッド」の実験を行いました。これは、タップするとチャットウィンドウに展開する、移動可能なプロフィール写真です。iOS 7の新しいデザインでは、ナビゲーション用のタブバーが再導入されるなど、デザインの変更が必要となりました。タブバーのアイコンは、アップデートの合間に定期的に再設計され、位置が変更されています。

Facebookのデザイン上の課題の一部は、その運用規模に起因しています。多くの小規模アプリとは異なり、FacebookはAppleだけでなく、多くのプラットフォームで顧客に一貫したエクスペリエンスを提供する必要があります。2017年8月のアップデートでは、iOS、Android、そしてウェブ全体でニュースフィードのデザインを統一し、コメントをMessengerの会話に似たスタイルに変更しました。

もの

ThingsはMac向けのタスク管理ツールとして開発が始まりました。しかし、最終的にはiOS版が先に1.0になりました。アプリの開発元であるCultured Codeは、リリース記事の中で、オリジナルバージョンはわずか1ヶ月強で開発されたと述べています。これは不可能に思えるほどの期限でした。

Things 1.0にはMac版との同期機能がなく、タグ付けも無効になっていましたが、どちらも重要な機能でした。リリース当初はストレスフルでしたが、アプリの基本的な構成は今日まで変わりません。Flickrの素晴らしいアルバムには、アプリの初期デザイン段階の記録が残されています。最初の大きなビジュアル刷新は、2012年8月にThings 2.0がリリースされたときに行われました。新しいペイントによってiOSの標準の外観が一新され、細かなグラフィック装飾が独自の個性を与えました。

2014年9月のThings 2.5では、アプリのUIがよりフラットな外観と明るい配色で刷新されました。当初はThings 3でも再設計が計画されていましたが、開発は予想以上に時間がかかりました。2017年5月にリリースされたThings 3は、アプリの外観においてこれまでで最も大きな変更点となりました。ほぼすべてのアイコンとUI要素が、基本的なレイアウトを維持しながら再描画されました。アップデートのローンチビデオでは、Cultured Codeがアニメーションの活用によってアプリに全く新しい感覚を与えた点を特に強調しています。この再設計により、Cultured Codeは2017年のApple Design Awardを受賞しました。

オムニフォーカス

App Storeは黎明期から、タスク管理アプリが豊富に揃っていました。The Omni GroupのThingsとOmniFocusは、どちらもリリース当初から利用可能です。どちらのアプリも似たような機能を提供していますが、過去10年間でそれぞれ独自のデザインへと進化を遂げてきました。

iPhone版OmniFocusは当初、ナビゲーションにカスタムアイコンを用いたシンプルなテーブルビューを採用し、2008年にApple Design Awardを受賞しました。Omni Groupは、iPhone 4のRetinaディスプレイに対応して、2010年6月にすべてのアートワークとアプリのアイコンを刷新しました。アプリの最も大きな変更点の一つは、2011年6月に予報モードが追加されたことです。ナビゲーションバーのすぐ下にある光沢のある日付ピッカーは、2013年にiOS 7時代のデザイン変更で光沢がなくなった後も、UIを特徴づける要素となりました。新しいフラットな外観は、空間認識のためにテキストの濃淡色に大きく依存していました。

2015年春のアップデートで、iPhoneのアプリアイコンはより暗くなり、チェックマークの縁はより柔らかくなりました。2012年以降のすべてのアイコンには、長年のユーザーでさえ気づかないかもしれないイースターエッグが含まれています。拡大してみると、カーボンファイバーのテクスチャは実際には小さなOmniロゴの繰り返しで構成されていることがわかります。

OmniFocusの最新のメジャーアップデートは、今年5月にOmniFocus 3.0としてリリースされました。変更点の多くはエンジニアリング関連でしたが、大きなタイトルとiPhone Xへの最適化により、UIが刷新されました。

エバーノート

Evernote のスタイリングのストーリーは、2008 年以降の主要なソフトウェア デザインのトレンドの多くを完璧に反映しています。メモ作成および整理ツールである Evernote は、App Store に登場前にデスクトップ アプリケーションとしてスタートし、最近 iPhone 向けにリリースされる前に、特徴的な象のロゴでブランド変更されました。

初期のiPhoneアプリの多くと同様に、Evernote 1.0は標準のUIKit要素と大きく光沢のあるグラフィックに大きく依存していました。2011年の再設計ではタブバーが再編成され、「すべてのノート」の時系列表示が優先されました。2012年にiPhone 5の大型ディスプレイに対応した際も、アプリはiOSのデフォルトUI要素を使用していました。ナビゲーションバーとボタンは、iOS 6のマット仕上げを自動的に採用しました。

2012年11月、Evernote 5がリリースされました。ゼロから再設計されたこのアプリは、当時の典型的な、豊かな質感とテーマ性を備えたデザインの典型でした。エンボス加工されたアイコン、紙のような質感、そして深いドロップシャドウがアプリに深みを与えました。アプリのアイコンは、古びた光沢のある外観を捨て、艶消しの金属調を維持しました。

Evernoteは発表ブログ記事で、「完全なデザイン変更を行うことは滅多にありません。実際、数年に一度程度です」と述べています。当時はEvernoteもそのことを知りませんでしたが、2013年のWWDCでiOS 7が発表されてから1年も経たないうちに、Evernoteは再びデザイン変更を余儀なくされることになります。Evernote 5は同日、Apple Design Awardを受賞しました。

EvernoteはiOS 7のフラットデザインを全面的に採用しました。あらゆるテクスチャ、影、ベベルが刷新されました。アプリのナビゲーションバーには、テクスチャのない新しいアイコンの色と調和する、明るい左から右へのグラデーションが施されました。2017年初頭のリフレッシュでは、より落ち着いた色調のアイコン、白いナビゲーションバー、繊細な影の付いたノートカード、そして暗いタブバーを採用し、デザインを落としました。その後も、タイポグラフィとタブバーアイコンのさらなる改良が行われました。

イーベイ

この記事で紹介する10個のアプリの中で、eBayのデザインはおそらく最も劇的な変化を遂げました。Appleは2008年のWWDCでeBayをステージ上で紹介しましたが、iPhone版eBayの初期バージョンは、今日の洗練されたエクスペリエンスと比べると、実に粗雑なものでした。2009年11月までに、アプリ全体が再考され、より統一感のあるグレーのUIになりました。

1年後、eBay 2.0は、今後何年にもわたってアプリがどのように構成されていくかの基礎を築きました。eBayは以前からスタンドアロンの販売アプリを提供していましたが、この機能はメインのエクスペリエンスに組み込まれました。アプリのホーム画面も刷新され、ついに真にネイティブなiOSデザインと言えるものになりました。

2013年を通して行われた数回のアップデートにより、eBayは基本的なユーザーエクスペリエンスを維持しながら、新たな外観を実現しました。それぞれの変更は、急速に進化する当時のソフトウェアデザインの傾向を反映していました。こうした継続的なイテレーションにより、iOS 7向けにアプリが再設計された際も、eBayの外観は比較的スムーズに移行しました。使い慣れたカラーパレットとナビゲーション階層を採用することで、ユーザーの操作性は維持されました。

2015年9月、eBay 4.0は従来のデザインを覆しました。アプリの機能の大半はハンバーガーメニューの下に集約され、画面上部には「アクティビティ」「ショップ」「セール」の3つのタブだけが残されました。テキスト中心の簡素なUIとそれに合わせた新しいアイコンを採用したこのデザインは、長くは続きませんでした。2016年5月までに、eBayはアプリの構成をほぼ完全に元に戻しました。現在のレイアウトは、2010年にリリースされた当時のデザインに非常に似ています。

ツイッターリフィック

クレイグ・ホッケンベリーとThe Iconfactoryは、App Storeが発表される前から、iPhone向けの最初のTwitterクライアントを開発しました。Apple愛好家コミュニティが開発した脱獄ソフトウェアのおかげで、開発者はAppleが公式に認可したツールを提供するまでに、数ヶ月分のアプリ開発経験を積んでいました。

Twitterrific 1.0は、脱獄時代のデザイン要素をほとんど取り入れておらず、リリース直後から驚くほど洗練された外観でした。2008年にはApple Design Awardを受賞しました。また、Twitterrificはダークテーマを採用した最初のアプリの一つでもありました。ダークテーマは現在ますます人気が高まっています。しかし、Twitterrificのデザインストーリーは、デザインのトレンドというよりも、サービスとしてのTwitterの歴史を物語っています。それぞれのアップデートは、Twitterプラットフォームの機能や機能性の変化を反映していました。初期の頃は、これらの機能はサードパーティ自身によって先駆的に開発されることが多かったのです。

2012年、Twitterrific 5.0ではすべてのナビゲーションが画面上部に移動し、完全にカスタマイズされたUI要素が採用されました。このレイアウトは今日までずっと維持されています。アプリのデザインと同じくらい魅力的なのがアイコンです。鳥の画像を採用した最初のTwitterアプリであるだけでなく、Twitterrificはモダンな外観を保ちながら、精巧なアイコンを維持している数少ないiOSアプリの一つです。アプリのマスコットキャラクターであるOllieは、iOS 7への移行中もほとんど見た目が変わっておらず、2012年当時と変わらず新鮮な印象を与えます。

インスタペーパー

読書用に開発されたアプリは、コンテンツをクロームよりも優先するため、Instapaperのデザインは当初から控えめなものでした。実際、アプリに最も顕著なビジュアル変更がもたらされたのは、iOS自体の変更によるものでした。ナビゲーションバーとボタンのスタイルはiOS 6と7の両方で変更され、アプリは2度の「無償」ビジュアルリフレッシュを実現しました。

しかし、アプリが進化しなかったと言うのは誤解を招くでしょう。InstapaperはApp Storeで無料ダウンロードとしてリリースされました。その後まもなく、有料版のInstapaper Proがリリースされました。2011年秋には、閲覧体験とUI要素の大幅なアップデートが行われ、Dribbbleの共同創設者であるDan Cedarholmがデザインした新しいアイコンが追加されました。このアイコンは後に、WWDCセッションで優れたアイコングラフィーに関するスライドで紹介されました。

2013年4月、Betaworksは創業者のマルコ・アーメント氏からInstapaperを買収し、アプリは新たな道を歩み始めました。Betaworksの指揮下での最初のメジャーアップデートは2013年9月、iOS 7への対応でした。Pinterestは2016年8月にInstapaperを買収し、アプリは今後も存続すると約束しました。現在のオーナーシップのもと、InstapaperはiPhone XのSuper Retinaディスプレイに対応するためのアップデート後も、比較的安定したビジュアルを維持しています。

PCalc

PCalcの物語は、App Storeが立ち上がる10年以上も前に始まります。開発者のJames Thomson氏は1992年にMac向けのオリジナルアプリをリリースし、その進化は今も続いています。PCalcは当初からiOS向けに完全にカスタム化されたインターフェースを備えており、テーマやカスタマイズオプションの選択肢はますます増え続けています。ここですべてを網羅するには多すぎるため、ここではいくつかのマイルストーンを取り上げたいと思います。

iPhone版PCalcの最初のバージョンはMacのダッシュボードウィジェットから移植されたものでしたが、iPhoneのクラシックなUIによくマッチしていました。光沢のあるボタンと濃い青色の液晶パネルは、アプリのアイコンと調和していました。2008年12月には、より精細なグラフィックとiOSの標準電卓アプリに似た配色を採用した人気のテーマ「Twilight」が追加されました。Twilightはその後、Retinaグラフィックと大型ディスプレイへの対応を追加してアップデートされました。現在でもアプリのオプションとして利用可能です。

PCalcはiOS 7のフラットデザイン化に対応し、「Samurai」という新しいデフォルトテーマとそれに合わせたアイコンを導入しました。以前のテーマもアプリの設定で引き続き利用できます。PCalcのアイコンは2016年3月に再度刷新されました。iOS 10.3のリリース以降、Appleはサードパーティ製アプリがストアに新しいバージョンを提出することなく、アプリアイコンを動的に変更することを許可しました。PCalcは2017年5月からこの機能を最大限に活用し、豊富な代替アイコンを用意しました。その後のアップデートでさらに多くのアイコンが追加されました。

10年間の開発を経て、PCalcはiPhone向け電卓アプリの実用的限界に挑戦してきました。最近のアップデートでは、AR電卓モードなどの斬新な機能が追加され、クリエイティブな自由度が向上しました。iPhone Xディスプレイへの対応により、Samuraiテーマの角が丸くなりました。

イェルプ

Facebookと同様に、YelpのiPhoneインターフェースも長年にわたり大きく変化してきましたが、ナビゲーションバーのカラーリングを統一することで、ブランドイメージを維持しています。このアプリは、Appleマップとの緊密な連携により、人気が高まっています。

2009年8月、YelpはiPhoneアプリに、周辺の店舗を検索できる簡易的な拡張現実(AR)インターフェースをこっそりと搭載しました。当時はまだ目新しい機能に過ぎませんでしたが、ARKitアプリの台頭を考えると、今となっては先見の明があったと感じられます。

2010年1月、Yelpの新しいホーム画面が3×3グリッドのクイックショートカットを備えて公開されました。その後も、同じ基本インターフェースをベースにスタイルが洗練され、2013年10月にはアプリ全体がリニューアルされ、よりフラットな外観と「Nearby」タブの目立つ配置になりました。

Yelpの最新アップデートでは、単純な位置情報に基づく検索結果にとどまらず、ユーザーに関連するコンテンツが表示されるようになりました。キュレーションによる発見というこの手法は、iOS 11で再設計されたApp Storeで大きな成功を収めたユーザーエクスペリエンスデザインのトレンドです。

アイコン

ハイライトした10個のアプリのアイコンの変遷を並べて比較すると、それぞれのアプリが現代性への独自の道を歩んできたことが分かります。過去10年間、わずかな改良のみでほぼ一貫しているアイコンもあれば、数年ごとにデザインを刷新しているアイコンもあります。時系列順に並べてみると、業界全体のデザイントレンドが明らかになります。

App Storeがローンチした当時、光沢のあるアイコンが市場を席巻していました。アイコンの光沢はデフォルトで適用されており、開発者はXcodeでこの効果を明示的に無効にする必要がありました。iOSアプリが成熟するにつれて、多くのアプリで光沢は失われ、非常に精巧なカスタムデザインが採用されるようになりました。

iOS 7は、優れたアイコンの基準を刷新したことで有名です。高度なテクスチャや3Dレンダリングされたアセットは、Appleの新しいアイコンセットと並べると場違いに見え、中には更新された角丸の半径と衝突するものもありました。デザイナーと開発者がアイコンデザインの新しいガイドラインとベストプラクティスを徐々に確立するにつれ、ディテールと控えめなカラーパレットが多くのアイコンに復活してきました。

人格

初期のiPhoneアプリは、未知の世界に真っ向から飛び込んだ。Appleが用意した少数の標準アプリ以外には、アプリの見た目や動作に関する先入観は一切なく、デザイナーと開発者は自由に実験することができた。

それにもかかわらず、初期のアプリの多くは、ユーザーと開発者が共にベストプラクティスを学んでいく中で、見た目も操作感も非常に似通ったものになっていきました。初期のフィードバックと試行錯誤が、それぞれのアプリの進化を急速に形作りました。数年のうちに、ほとんどのアプリは独自のスタイルと個性を確立し、独自の方向性を見出すようになりました。ハードウェアの性能が向上するにつれて、デザインの差別化は静的なグラフィックからアニメーションや動的なインターフェースへと徐々に移行していきました。

iOS 7で導入された画一的なインターフェースガイドラインによって、デザイナーや開発者は設計図に立ち返らざるを得なくなりました。多くのアプリは、見た目ではなく、体感できる体験を提供することで、差別化を図り始めました。思慮深いキュレーションと予測的な情報デザインは、そうでなければ見過ごされてしまう可能性のある、新しく興味深いコンテンツを浮き彫りにするために、しばしば活用されています。インテリジェントなワークフローは、一般的な操作を簡素化し、タスクの完了にかかる時間を短縮します。ピクセルレベルを超えた優れたデザインの重要性が、近年のユーザーエクスペリエンス(UX)デザインの人気上昇につながっています。

次の10年

2008年当時、App Storeがどのように進化していくかを正確に予測することは不可能でした。イノベーションはイノベーションから生まれ、iPhoneユーザーの嗜好や習慣が開発者が開発するアプリの種類を形作ってきました。これは今後も同じことが言えます。今後登場するiPhoneやiOSのバージョンは、アプリを取り巻く状況を予期せぬ形で変えることは間違いありません。新しいデザイントレンドが明日世界を席巻するかもしれません。10年後でも、未来は刺激的です。


Appleのニュースをもっと知りたい方はYouTubeの9to5Macをご覧ください。

havebin.com を Google ニュース フィードに追加します。 

FTC: 収益を生み出す自動アフィリエイトリンクを使用しています。詳細はこちら。