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

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

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

Frames

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

FramesをSketchで開いたところ

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

Get Started

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

Style Guide

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

Symbols

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

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

Headers

Products

Features

Blog

Ecommerce

Forms & Contacts

Team

Testimonials

Footers

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

Frames

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

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