最近のWebサイトで使われているレイアウト・コンポーネント全102種類が揃ったデザイン素材 -Frames
Post on:2017年10月3日
最近のWebデザインでよく利用されるヘッダやフッタのレイアウト、プロダクト、フィチャーページ、フォーム、リストなど、さまざまなレイアウト・コンポーネントが用意されたデザインのベースとなる素材を紹介します。
Webサイトのデザインで最初の作業となるカラーやフォントの定義、スタイルガイドのテンプレートなども含まれており、勉強にもよいと思います。

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

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

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

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

Symbols
レイアウトやコンポーネントは102種類、用意されています。
その中から一部を掲載します。
まずはヘッダのレイアウト、確かにこういうデザインのWebサイトをよく見かけます。

Headers

Products

Features

Blog

Ecommerce

Forms & Contacts

Team

Testimonials

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

価格に「0」を入力し「これが欲しいです」ボタンを入力すると、ダウンロードできます。
Gumroadに未登録の人は、メールアドレスが必要です。
Demo版なので、ライセンスをメールで確認しました。
CC BY 4.0で個人でも商用でも無料で利用でき、改変したり、別の作品のベースにしたり、複製したり、再配布することもできます。
sponsors