このページの本文へ

SketchやPhotoshopで使えるAndroid NougatとiOS 10のUIキットまとめ

2017年05月22日 08時00分更新

文●Ada Ivanoff

  • この記事をはてなブックマークに追加
本文印刷
効率的なUIデザインに欠かせない、OS標準のUIキット。Android NougatとiOS 10に対応した最新のUIキットを紹介します。

AndroidやiOSがバージョンアップされるたびに、デザイナーや開発者はアプリをアップデートしなければなりません。最新版のAndroid 7 Nougat(ヌガー、Android N)とiOS 10用のUIキット(主に無料のもの)を紹介します。

LollipopにはたくさんのUIキットがありましたが、Android Nは半年以上前にリリースされたにも関わらず専用のキットやデザインリソースは多くありません。iOS 10には多くの選択肢があります。

1.Sketch向けAndroid N GUIキット

Sketch向けのAndroid N 用GUIキットです。Sketch 3.8.2とGoogleのAndroidシステムフォントRobotoが必要となります。

Android N GUI Kit Sketch Resource

このキットには、もっとも使われるAndroid Nの画面のうち25個のベクター画像が含まれます。いくつか新しい画面ではないものもありますがAndroid Nでも利用できます。新しくなった画面は、メール、音楽プレーヤー、カレンダー、ハングアウト、カメラ、ビデオなどのほか、Android Nスタイルの通知画面や設定画面です。アプリに必要な画面は基本的にすべて揃っています。必要な画面がなくても、少し修正することで希望の画面を作れます。

2. Photoshop用のAndroid Nougat(ヌガー)UIキット

Photoshopでデザインしていて、優れたUIキットにお金を使えるなら、Android N UI Photoshopキットがおすすめです。有料ですが、大変優れたキットです(Photoshop用で無料のUIキットは限られます)。

Android Nougat UI Kit for Photoshop

インターフェイス、コントロール、シェイプ、コンテナー、アイコンと要素が豊富なベクターキットです。設定、インボックス、カレンダー、グーグルマップなどの画面が含まれています。

3.Sketch向けAndroidのパーミッションダイアログ

Android Marshmallow(マシュマロ)でパーミッションのダイアログが導入されましたが、Android Nでは見た目が変りました。新しい画面をデザインするならSketchパーミッションダイアログを試してください。

Android Permissions Dialogs Sketch Resource

4. Sketch向けAndroid-Nショートカットテンプレート

選んだ画面や機能にすばやくアクセスできるアプリのショートカットは、Android Nの新しい機能の1つです。ショートカット用のシンボルなら、Sketch向けAndroid N ショートカットテンプレートです。Google NowランチャーやPixelランチャーなどはAndroid 7.1以降サポートしています。

Android-N Shortcuts Template Sketch Resource

5.Sketch向けAndroid Nボトムナビゲーション

マテリアルデザインの原則に従ったボトムナビゲーションならAndroid Nボトムナビゲーション用スケッチリソースがおすすめです。リリースされたばかりで、最新のマテリアルデザインコンセプトのすばらしい機能をすべて取り入れています。

Android N Bottom Navigation Sketch Resource

6. iOS 10用 無料ベクターGUIキット

iOS 10用の無料ベクターGUIキットにはとにかくたくさんの要素が含まれています。iPhone 6(375x667ピクセル)用に作られており、バージョンアップはされていないようですが、依然として優れたキットの1つです。SF UIフォントが必要です。

Free Vector iOS10 GUI Kit

iOS 10用の画面62種類とデザインに必要な主要なコンポーネントがすべて含まれています。画面とコンポーネントの両方が、名前付きのレイヤーで作成され、カスタマイズも可能です。Sketch、Craft Library、Figma、Adobe Photoshop、Adobe XD、Adobe Illustratorで利用できます。

7. Apple UI用のデザインリソース

Appleが提供するアイテム抜きでiOS 10用のUIリソースの紹介は終われません。AppleのUIキットは、ただのキットではありません。iOSのGUIデザインの基礎について、例を挙げながら解説するビデオとテキストのチュートリアルが提供されています。基礎をよく知らない場合は、学んでからデザインを始めてください。

Apple UI Design Resources

キットには、UIKitコントロール、ビュー、グリフが含まれています。PhotoshopとSketchで利用できます。

8. iOS10用のUIキット

このキット、URLにだまされてはいけません。iOS 10 UI kitはURLではiOS 8に見えますがiOS 10用です。古いバージョンへのトラフィックを維持するためURLの変更をしていないのだと思います。

iOS 10 UI Kit

ベクターキットではありませんが、iPhone 5/SE, iPhone 6/7, およびiPhone 6 Plus/7 Plusの画面に合うように複数のサイズが用意されています。システム画面、通知、ナビゲーション、タブバー、キーボード、ピッカー、アクションシートなどiOS 10アプリを設計するのに必要なものはすべて含まれています。SketchとPhotoshopで利用できます。SFフォントが必要です。

9. iOS 10用UI

これまでに紹介したiOS 10用キットでiOS 10アプリのデザインはできると思いますが、選択肢が多いに越したことはありません。非公式のデザインキットですが、iOS 10 UIには、iOS 10のGUIで使える画面、アプリ、アイコン、エフェクトなどの膨大な要素が含まれています。シンボル、ウィジェット、通知テンプレートなどもあり、ベクター形式のオープンソースで提供されているのが良い点です。

iOS 10 UI

10. iOS 10用GUI (iPhone)

iOS 10 GUIキットは、Facebook iOS 10 Lightとも呼ばれます。使わないのはもったいないリソースです。iOS 10で公開されている数多くの画面やコンポーネントが含まれます。Photoshop、Sketch、Figma、およびXDで使えます。スケーラブルではないコンポーネントもありますが、多くはスケーラブルで、iPhoneではなくほかのデバイス用にデザインすることも可能です。

iOS 10 GUI

最後に

紹介したiOS 10用の5つのキットで足りなければ、このリストをチェックしてみてください。Sketch専用ですが、頻繁に新しいリソースが追加されています。Android N用はiOS用ほど良いキットは多くありません。将来的にはリリースされるでしょうが、いまのところ、Android N の無料キットに選択肢はほとんどありません。

(原文:10 Free UI Kits for Android Nougat and iOS 10

[翻訳:関 宏也/編集:Livit

Web Professionalトップへ

WebProfessional 新着記事