Advertisement

show_ios7_gui

 

リリース直後は、前バージョンからの大幅なデザイン変更に、さまざまな議論を呼んだiOS 7。しかし、実際に触れてみると、無駄のないシンプルなインターフェースの使い心地に、心を奪われたひとも多いのではないでしょうか。

 

 

海外デザインブログDesign Reviverで、iOS7に対応したサイト、アプリデザイン作成につかえる、無料UIキットをまとめたエントリー「20 Amazing iOS 7 UI Kits」が公開されていたので、今回はご紹介します。

 

 

忠実に再現されたデザインパーツの数々は、そのまま作成に使うこともできますし、プレゼンテーションなど資料パーツとして活用することもできそうですよ。

 

 

 

詳細は以下から。

 

 

 

iOS 7完全再現、無料でつかえるUI素材キットまとめ

 

iPhone GUI PSD

OSがリリースされる度に、忠実なまでのモックアップGUIを完成させるTeehan+Lax。もちろんiOS 7にもばっちり対応しています。

teehanlax1

 

 

パーツごとに、すべてフォルダ分けされているので、編集作業もラクラク。

teehanlax2

 

 

iPhone 5s、5c本体も同時に収録しているので、ダウンロードしてすぐに利用可能です。

teehanlax3

 

 

 

iPad GUI PSD

そして先日公開されたばかりのiOS 7 iPadバージョン。ピクセル単位で設計されたGUIは、デザインの参考にもなります。

iPad1-big

 

 

 

iOS UI Kit

各種コンポーネント素材に加え、電話帳インターフェースなども再現しています。

ios7_ui_kit_by_darkstalkerr-d69f6dm

 

 

 

iOS 7 UI Componenets

そのままアプリデザインとしても利用できる、半透明レイヤーが美しい、ビジュアル重視のUIデザインキット。

iOS-7-UI-Components-600

 

 

全てのパーツを揃えた様子、アイデア次第でさまざまな、レイアウトを完成できます。

iOS-7-UI-Components

 

 

 

iOS 7 GUI PSD

ベクターPSDで作成された、インターフェース完全キット。各テーマ毎に分けて、デザインされています。

ios_7_gui_psd_by_andreas_hellqvist-d68qy9f(2)

 

 

 

iOS 7 GUI Kit

UIデザインパーツの他に、ロック画面やホームスクリーンなども、追加されたGUIキット。

2427cba060860cc54d0886c01b81f4db

 

 

 

Free iOS 7 UI Kit

ベクターPSDで作成された、iOS 7インターフェース用モックアップ。分かりやすくフォルダ分けされています。

800x518_iOS_7_UI_Kit_Preview1a

 

 

 

iOS7 Design

1000以上のデザインパーツを収録した、Photoshop作成の、ベクターPSD素材。すべてのGUIがセットになっています。

INTRO-iOS7(2)

 

 

 

iGravertical Screen Layers + iOS 7 Screen Converter

半透明レイヤーを使い、プロジェクトに沿った、パネルデザインを作成することができるキット。

4_Screen_Preview

 

 

 

PSD iOS 7 UI Kit

スイッチやラジオボックス、トグルデザインに特化した、iOS用デザインPSD。

ios7_uiKit_flat

 

 

 

iOS 7 iPad Retina Gui Template

Retinaディスプレイでも問題なく表示される、iPad用GUIキット。

preview_by_heritagei-d6pnk73

 

 

 

iOS 7 & Seme-Flat iPhone 5 MockUp

フラットなデザインに陰影をくわえた、新感覚のイラストPSD。タッチキーボードパネルを再現しています。

iphone5-ios7-mockup

 

 

 

iOS 7 iPhone Ai Download

Illustrator用ファイルをお探しの方は、こちらをどうぞ。

kruelo2-iOS_7-Phone-AI

 

 

 

iOS 7 iPad Ai GUI

そしてIllustratorで利用可能な、Aiファイルで収録された、iOS 7 iPadバージョン。

iOS-7-iPad-ai-GUI

 

 

 

iOS 7 UI Kit Lite for Sketch

ベクターデザインアプリSketch用に開発された、iOS 7インターフェースGUIキット。

sketch

 

 

 

The iOS 7 Design Cheat Sheet

サイトやアプリを作成するときに確認したい、ウィンドウサイズやアイコンの大きさ、テキストサイズなど、さまざまな初期設定をまとめたチートシート。

iphone-cheatsheet

 

 

 

参考 iPhone 5sを自由にデザインしたい!無料Photoshopテンプレート素材まとめ

一緒に利用可能な、iPhone 5sのフリー素材もまとめています。ご参考までにいかがでしょう。

12

 

 

 

参考 iOS 7対応のアプリデザイン、モバイルサイト作成ガイド2013

デザインのポイントをまとめてご紹介しています、いかがでしょう。

Designing-for-iOS-7

 

 

サムネイル@ : Introducing iOS 7 GUI PSD – Applidium

参照元リンク : 20 Amazing iOS7 UI Kits – Design Reviver