最近のWebサイトで使われているレイアウト・コンポーネント全102種類が揃ったデザイン素材 -Frames
Post on:2017年10月3日
最近のWebデザインでよく利用されるヘッダやフッタのレイアウト、プロダクト、フィチャーページ、フォーム、リストなど、さまざまなレイアウト・コンポーネントが用意されたデザインのベースとなる素材を紹介します。
Webサイトのデザインで最初の作業となるカラーやフォントの定義、スタイルガイドのテンプレートなども含まれており、勉強にもよいと思います。
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100301.png)
FramesはSketchのデザイン素材で、レスポンシブ対応のさまざまなレイアウト・コンポーネントが収録されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100302.png)
FramesをSketchで開いたところ
中身を順番に紹介します。
まずは、デザインのスターターとして、カラーとグラデーション、シャドウ、タイポグラフィの定義です。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100304-01.png)
Get Started
スタイルガイドでは、カラー、タイプフェイス、コンポーネント、モックアップ、アイコンが用意されており、これをベースにWebサイトやアプリをデザインできます。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100304-02.png)
Style Guide
ページで使用する要素はすべてシンボル化して、一括で管理できます。
![Sketchのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100304-03.png)
Symbols
レイアウトやコンポーネントは102種類、用意されています。
その中から一部を掲載します。
まずはヘッダのレイアウト、確かにこういうデザインのWebサイトをよく見かけます。
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-01.png)
Headers
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-02.png)
Products
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-03.png)
Features
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-04.png)
Blog
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-05.png)
Ecommerce
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-06.png)
Forms & Contacts
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-07.png)
Team
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-08.png)
Testimonials
![デザイン素材のキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100305-09.png)
Footers
素材のダウンロードは、下記ページから。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017100306.png)
価格に「0」を入力し「これが欲しいです」ボタンを入力すると、ダウンロードできます。
Gumroadに未登録の人は、メールアドレスが必要です。
Demo版なので、ライセンスをメールで確認しました。
CC BY 4.0で個人でも商用でも無料で利用でき、改変したり、別の作品のベースにしたり、複製したり、再配布することもできます。
sponsors