モックアップの必需品！「Facebook Design」が公開するリソース7選

アメリカのテック企業の多くが "デザイナーチーム" や "デベロッパーチーム" を個別に編成していますが、彼らの多くは独自の情報発信ツールを持ち発信しています。

Airbnbのデザイナーチームによる情報発信の場であるAirbnb DesignやAmazonのデベロッパーチームによるAmazon Developer Blogs、UberのデザイナーチームによるMediumサイトであるUber Designなどが、その一例です。

デベロッパーブログやデザイナーブログでは、同社の取り組みを紹介している情報の発信が盛んに行われているので、そうしたブログをフォローしている人も多いのではないでしょうか。中には、特にデザイナーにとってフォローしておいたほうがいいのが、FacebookのデザインチームによるFacebook Designです。

Facebook Designでは、デザイナーによる情報発信もさることながら、世界中のデザイナーにとって有益なリソースを多く発信しています。

そこで今回は、「Facebook Design」が公開しているリソースをまとめていきます。
　　

「Facebook Design」が公開しているリソースまとめ

Facebook Designは、デザインに関する情報だけではなく、デザイナーが今すぐ活用できるモックアップに便利な様々なリソースが配信されています。

Facebook謹製の素材だけあり、使いやすいものばかりなので、試しにダウンロードしてみてはいかがでしょうか。
　　

1. Desktop Kit

Desktop Kitは、Facebook Designが公開している、macOSのUIパーツを集めたSketchの素材集です。

Windowsの素材集は、Microsoftが優秀な素材集を公開していますが、macOSのUIパーツに関しては、これまで体系的なものは公開されていませんでした。

Desktop Kitでは基本的なデスクトップアプリケーションのパーツを同じ大きさで配布しているので、活用する価値は大いにありそうです。含まれているのは、20種類を超えるマウスカーソル、SafariとGoogle Chromeのブラウザウィンドウ、メニューバー、Dock、Finder、通知メニューなどです。

Desktop Kitをダウンロード
　　

2. Devices

Devicesは、Apple製品を中心に、人気のデバイスを模かたどったSketch用のモックアップ素材です。

Appleのディスプレイや、Apple Watch、DellのUltraSharp HD、Galaxy Grand Prime、Galaxy S8やGoogle Pixel、Huawei P8、HTC One M8からMoto 360まで、主要なモックアップのほとんどがこのページで手に入ります。

以前、FacebookはOrigami Studioと呼ばれる独自のプロトタイピングツールを作っていますが、それらと一緒にDevicesを活用してみるといいでしょう。

Devicesをダウンロード
　　

3. Messenger Platform Design Kit

Messenger Platform Design Kitは、FacebookのインスタントメッセージングアプリであるメッセンジャーのUIを集めたSketch用のテンプレートキットです。

最近ではメッセンジャーを使ったボットの開発が加速していますが、そうしたボットのデザイン面での開発に、このUIキットが使えそうです。多くのモックアップが収録されているので、必要なものだけを選んで活用することができます。

　　

4. iOS 10 GUI（iPhone）

iOS 10 GUI（iPhone）は、iOS10で用いられているiPhone用のiOSのGUI素材をダウンロードできます。こちらは、Sketchのほか、PSD、Figma、Adobe XD用の素材としてもダウンロードできます。

基本的なボタンやキーボード、アイコン、ラベル、タヌメニューなどが利用できます。こうした素材を活用できれば、まず画像モックアップを作成して、それからプロトタイピングに入ることができます。Photoshopでは2倍までの倍率で利用することができます。

iOS 10 GUI（iPhone）をダウンロード
　　

5. Diverse Device Hands

Diverse Device Handsは、App Storeなどでのアプリのスクリーンショット画像作成に便利な、スマートフォン端末を持っている手のモックアップです。

*「Diverse」*の名前が示すように、様々な肌の色の手が選べるので、アプリを配信する国などに応じて画像を作成し、わけることができます。手に握っている端末も、iPhone・Android・Windows Phoneと3種類の中から選ぶことができます。

Diverse Device Handsをダウンロード
　　

6. Virtual Hands

Virtual Handsは、VRアプリケーションの作成時に便利な、様々な手の形をレンダリングした3D画像のキットです。

VRでのタッチインタラクションをプロトタイピングで動かす機会は、以前に比べて増えてきました。VRアプリケーションにおけるストーリーボードを作成する際に、こうしたさまざまな手の形を表現した画像は大変重宝するでしょう。

Virtual Handsをダウンロード
　　

7. VR Prototyping Template

VR Prototyping Templateは、VRの世界観を現出するために作成された、VRプロトタイピング用のテンプレートです。Sketch、Photoshopのほか、動的なプロトタイピングを行うためのUnityのテンプレートも用意されています。

このテンプレートが便利なのは、SketchやPhotoshopで作成した静止画のプロトタイピング素材を、そのままUnityプロジェクトで動かすことができることです。Oculus RiftやGear VRと接続することで、ある程度の臨場感を持った体験もプロトタイピングで作り出すことができるでしょう。