いま、見ておきたいウェブサイト

第135回Adobe Project Comet、Hermès - Apple、U.S. Web Design Standards

空気の乾燥による風邪の流行を気にしながらも、年に一度のさまざまな秋の味覚の登場に心躍らせている今日このごろ、皆様いかがお過ごしでしょうか。今回も個人的に感じた、素晴らしいサイトの特徴をいくつかお話したいと思います。

ようやく登場した、UIデザインツールの本命

User experience, prototyping and design app | Adobe Project Comet

2015年10月に開催された「Adobe Max 2015」で発表された、Adobeの新しいUIデザインツール「Project Comet」のウェブサイトです。

図1 Adobeが開発している、新しいUIデザインツール「Project Comet」
図1 Adobeが開発している、新しいUIデザインツール「Project Comet」

“the first all-in-one solution for UX designers(UXデザイナーのための最初のオールインワン・ソリューション)⁠とコメントされている「Project Comet」では、⁠Design」「Prototype」の2つのモードが用意されています。ビジュアルデザインを制作する「Design」では、アプリのデザインなどで頻繁に要求される、繰り返されるデザインパターンを素早く制作・変更する機能(Repeat Grid)も用意されています。⁠Prototype」では、制作した各オブジェクトをリンクさせて、画面の遷移をリアルタイムで確認できます。

「Adobe Max 2015」の基調講演で発表された「Project Comet」の紹介動画

始まった“UIデザイン”へのフォーカス

デザイナーがモバイルデバイスにおけるWebやアプリのUIデザインを行う機会が増えている現在、さまざまなUIデザインツール、プロトタイピングツールが利用されています。最近では、Googleが買収したPixateが話題になりましたが、UIデザインだけでなく、画面遷移のアニメーションも設計できるなど、デザインから一歩踏み込んだ機能を盛り込んだツールも登場しています。

UIデザインツールの中で、最も注目されているのがSketchでしょう。新規開発が中止された「Adobe Fireworks」の後継ソフトとしてだけではなく、UIデザインを行うために必要な機能を絞ったことによる使い勝手の良さと軽快な動作が注目され、高い評価を受けています。

図2 すでにUIデザインのツールとして、一定の評価を得ている「Sketch」
図2 すでにUIデザインのツールとして、一定の評価を得ている「Sketch」

こうした⁠UIデザインツール=Sketch⁠という流れの中、2015年6月のアップデートで、Photoshop CCに「デザインスペース」というUI制作のための設計モード、複数のデバイスを対象としたデザイン作業を効率化する「アートボード⁠⁠、iOSアプリ「Adobe Preview CC」を利用したリアルタイムプレビューといった、UI制作のための機能が⁠ようやく⁠追加されました。

もちろん「Sketch」でも、Photoshopに追加されたものと同様の機能が利用できます。しかし、今まで要望がありながら、Photoshopでは実現できなかった機能を実現したアップデート内容から、Adobeが「次にどの分野にフォーカスしていくのか」が見えてきます。

Design with Data - Adobe MAX 2015 - Sneak Peeks

「AdobeもようやくUIデザインの分野に本腰を入れてきたな」と感じさせる「Project Comet」のパブリックベータ版は、2016年の初めに登場し、年内に正式版がリリースされる予定です。PhotoshopやIllustratorとの連携も含め、既存のUIデザインツールやプロトタイピングツールにどんな影響をもたらすのか、注目していきたいと思います。

“ガジェット”から“ファッションアイテム”への変化

Hermès - Apple

2015年9月10日に発表された、AppleとフランスのファッションブランドHermèsとの共同開発による、⁠Apple Watch」の新しいコレクション「Apple Watch Hermès」のプロモーションサイト、⁠Hermès - Apple』です。

図3 AdobeがHermèsと共同開発した「Apple Watch Hermès」のプロモーションサイト、⁠Hermès - Apple』
図3 AdobeがHermèsと共同開発した「Apple Watch Hermès」のプロモーションサイト、『Hermès - Apple』

「Apple Watch Hermès」は、Hermèsの職人によるハンドメイドのレザーストラップと、Appleのデザイナーがによる文字盤を組み合わせて制作されています。レザーストラップやバックルの形状の異なる「Single Tour(シンプルトゥール⁠⁠Double Tour(ドゥブルトゥール⁠⁠Cuff(カフ⁠⁠」の3タイプが用意されています。

図4 ⁠Hermès - Apple』では、スペックではなく、製品の細部をていねいに紹介している
図4 『Hermès - Apple』では、スペックではなく、製品の細部をていねいに紹介している

Hermèsのウェブサイトでも同様の特設ページが用意されており、⁠Apple Watch Hermès」⁠ファッションアイテム⁠であることを強く印象づけるウェブサイトとなっています。

「Apple Watch」はファッションアイテムになれるか

2015年3月、新たなウェアラブルデバイスとして登場した「Apple Watch」ですが、いまだに正確な販売数の公表はありません(アナリストの予想では、約250~600万台と言われています⁠⁠。2015年10月19日に開催されたテクノロジーカンファレンス「WSJDLive」にもAppleのCEOであるTim Cook氏が登壇しましたが、⁠競合他社に有利になる情報となる」という理由で、またしても「Apple Watch」の販売数の発表はありませんでした。

Cook氏からは「発売直後の四半期にはApple Watchを数多く販売しており、その後の四半期ではそれ以上を販売した」というコメントもあり、販売台数が堅実に伸びていることも伺えます。ただ、現在のAppleの業績を支えるiPhone販売台数が2015年第4四半期(9月期)の決算発表で予想を下回っており、まだ余裕があるうちに、今後の新たな収益の柱を作っておきたいところです。

図5 ⁠機械式時計」の有名なブランド、Franck Mullerのウェブサイトには、ファッションアイテムとしての時計が並ぶ
図5 「機械式時計」の有名なブランド、Franck Mullerのウェブサイトには、ファッションアイテムとしての時計が並ぶ

一人ひとりがモバイルデバイスを所持し、誰もが正確な時刻がわかるこの時代では、時計はすでにファッションアイテムのひとつです。当初、Appleは「Apple Watch」自体が「ファッションアイテムとしても利用できる」としていましたが、単なるガジェットのひとつでは、販売数の増加はかなり厳しいでしょう。有名ブランドとコラボレーションし、⁠ファッションアイテム⁠という意味付けをすることで、今後どのような結果を出していくのか注目したいと思います。

政府が主導する、ウェブデザインのスタンダード

U.S. Web Design Standards | U.S. Web Design Standards

連邦機関のウェブサイトの一貫性と使いやすさを統一するため、アメリカ連邦政府が提供を開始した『U.S. Web Design Standards』です。

図6 アメリカ連邦政府が提供を開始した『U.S. Web Design Standards』
図6 アメリカ連邦政府が提供を開始した『U.S. Web Design Standards』
credits:U.S. Digital Service and 18F

『U.S. Web Design Standards』には、アメリカ連邦政府の⁠ウェブサイト間の整合性⁠⁠美しいユーザーエクスペリエンス⁠を作成するため、業界標準と言えるCSSフレームワークの「Bootstrap」のように、視覚的なスタイルガイドやUIコンポーネント(ナビゲーション、グリッド、ボタン、フォーム、ラベルなど)が含まれています。

図7 ⁠U.S. Web Design Standards』のソースコードは、GitHubに公開されている
図7 『U.S. Web Design Standards』のソースコードは、GitHubに公開されている

また、ソースコードはオープンソースとしてGitHubに公開され、より良いものにするためのフィードバックを受け付けながら、定期的に更新されていきます。"Tools for creating beautiful online experiences for the American people(⁠⁠アメリカの人々の美しいオンライン体験のために作られたツール⁠⁠)"という一文が、⁠U.S. Web Design Standards』の高い理想を表しています。

ウェブサイトの統一性から生まれるメリット

日本の行政機関のウェブサイトは、各省庁が中心になって構築しているため、ある程度の自由な表現が可能となっています。その反面、他の省庁との整合性が取れていないため、各省庁が構築した⁠ウェブサイトの作法(構造やナビゲーション、視覚的表現など)⁠に慣れなければ、必要な情報が得にくいというデメリットがあります。

『U.S. Web Design Standards』が提供された背景には、アメリカの連邦機関におけるウェブサイトにデザインの統一性がなかったことが挙げられます。また、一部の政府機関では独自のUIコンポーネントを個別に制作するなど、いわゆる「車輪の再発明」が頻繁に行われ、結果的に納税者からのお金を無駄にしている状態が続いていました。

図8 アメリカの政府機関である、CFPB(消費者金融保護局⁠⁠、USPTO(特許商標庁⁠⁠、Healthcare.gov(オンライン健康保険市場)それぞれが、独自のデザインガイドラインを用意して運用している
図8 アメリカの政府機関である、CFPB(消費者金融保護局)、USPTO(特許商標庁)、Healthcare.gov(オンライン健康保険市場)それぞれが、独自のデザインガイドラインを用意して運用している

『U.S. Web Design Standards』は、ウェブサイトを構築する場合の基本的なUIコンポーネントやデザインガイドを提供することで、ウェブサイトの一貫性と使いやすさを高め、国民の誰もが確実に政府の情報にアクセスできることを念頭に開発されています。もちろん、行政機関が担当する各種ウェブサイトの構築期間の短縮や経費の縮小というメリットも見据えています。

ウェブサイトの表現で⁠独自性⁠の強い日本の行政機関でも、構築・運用コストの削減やアクセシビリティの向上から、今後、ウェブサイトの統一性を求める動きが出てくるかもしれません。今回の事例も含めながら、日本ではその場合にどのような形で実現されていくのか、非常に興味深いところです。

というわけで、今回も最後まで読んでいただき、ありがとうございました。それでは次回をおたのしみに。

おすすめ記事

記事・ニュース一覧