モックアップの必需品!「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]:blankは、Facebook Designが公開している、macOSのUIパーツを集めたSketchの素材集です。
Windowsの素材集は、Microsoftが優秀な素材集を公開していますが、macOSのUIパーツに関しては、これまで体系的なものは公開されていませんでした。
Desktop Kitでは基本的なデスクトップアプリケーションのパーツを同じ大きさで配布しているので、活用する価値は大いにありそうです。含まれているのは、20種類を超えるマウスカーソル、SafariとGoogle Chromeのブラウザウィンドウ、メニューバー、Dock、Finder、通知メニューなどです。
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を活用してみるといいでしょう。
3. Messenger Platform Design Kit
最近ではメッセンジャーを使ったボットの開発が加速していますが、そうしたボットのデザイン面での開発に、このUIキットが使えそうです。多くのモックアップが収録されているので、必要なものだけを選んで活用することができます。
4. iOS 10 GUI(iPhone)
[iOS 10 GUI(iPhone)]:blankは、iOS10で用いられているiPhone用のiOSのGUI素材をダウンロードできます。こちらは、Sketchのほか、PSD、Figma、Adobe XD用の素材としてもダウンロードできます。
基本的なボタンやキーボード、アイコン、ラベル、タヌメニューなどが利用できます。こうした素材を活用できれば、まず画像モックアップを作成して、それからプロトタイピングに入ることができます。Photoshopでは2倍までの倍率で利用することができます。
5. Diverse Device Hands
[Diverse Device Hands]:blankは、App Storeなどでのアプリのスクリーンショット画像作成に便利な、スマートフォン端末を持っている手のモックアップです。
*「Diverse」*の名前が示すように、様々な肌の色の手が選べるので、アプリを配信する国などに応じて画像を作成し、わけることができます。手に握っている端末も、iPhone・Android・Windows Phoneと3種類の中から選ぶことができます。
6. Virtual Hands
VRでのタッチインタラクションをプロトタイピングで動かす機会は、以前に比べて増えてきました。VRアプリケーションにおけるストーリーボードを作成する際に、こうしたさまざまな手の形を表現した画像は大変重宝するでしょう。
7. VR Prototyping Template
このテンプレートが便利なのは、SketchやPhotoshopで作成した静止画のプロトタイピング素材を、そのままUnityプロジェクトで動かすことができることです。Oculus RiftやGear VRと接続することで、ある程度の臨場感を持った体験もプロトタイピングで作り出すことができるでしょう。
まとめ
GUI部品からVRのプロトタイピングキットまで、様々なデザイナー向けの素材がFacebook Designから提供されています。しかもありがたいことに、これらは全て無料で使うことができるのです。
おそらくデザイナーとは言ってもそれぞれの専門分野があると思いますが、ぜひ様々な素材をダウンロードして、モックアップ作成にお役立てください。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング