最近のWebサイトで使われているレイアウト・コンポーネント全102種類が揃ったデザイン素材 -Frames

最近のWebデザインでよく利用されるヘッダやフッタのレイアウト、プロダクト、フィチャーページ、フォーム、リストなど、さまざまなレイアウト・コンポーネントが用意されたデザインのベースとなる素材を紹介します。

Webサイトのデザインで最初の作業となるカラーやフォントの定義、スタイルガイドのテンプレートなども含まれており、勉強にもよいと思います。

デザイン素材のキャプチャ

Frames

FramesはSketchのデザイン素材で、レスポンシブ対応のさまざまなレイアウト・コンポーネントが収録されています。

サイトのキャプチャ

FramesをSketchで開いたところ

中身を順番に紹介します。
まずは、デザインのスターターとして、カラーとグラデーション、シャドウ、タイポグラフィの定義です。

Sketchのキャプチャ

Get Started

スタイルガイドでは、カラー、タイプフェイス、コンポーネント、モックアップ、アイコンが用意されており、これをベースにWebサイトやアプリをデザインできます。

Sketchのキャプチャ

Style Guide

ページで使用する要素はすべてシンボル化して、一括で管理できます。

Sketchのキャプチャ

Symbols

レイアウトやコンポーネントは102種類、用意されています。
その中から一部を掲載します。

まずはヘッダのレイアウト、確かにこういうデザインのWebサイトをよく見かけます。

デザイン素材のキャプチャ

Headers

デザイン素材のキャプチャ

Products

デザイン素材のキャプチャ

Features

デザイン素材のキャプチャ

Blog

デザイン素材のキャプチャ

Ecommerce

デザイン素材のキャプチャ

Forms & Contacts

デザイン素材のキャプチャ

Team

デザイン素材のキャプチャ

Testimonials

デザイン素材のキャプチャ

Footers

素材のダウンロードは、下記ページから。

サイトのキャプチャ

Frames

価格に「0」を入力し「これが欲しいです」ボタンを入力すると、ダウンロードできます。
Gumroadに未登録の人は、メールアドレスが必要です。

Demo版なので、ライセンスをメールで確認しました。
CC BY 4.0で個人でも商用でも無料で利用でき、改変したり、別の作品のベースにしたり、複製したり、再配布することもできます。

top of page

©2017 coliss