Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery

Post on:2023年6月21日

sponsors

Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。

商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。

UI Skeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。

素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。

では、さっそく素材を見てましょう。利用にあたって、登録など面倒なことは一切不要です。

上部の検索バーから、ダークモードとライトモードを変更できます。

ダークモードとライトモードに対応

アクセントカラーを変更することもできます。同じく検索バーからカラーを変更できます。

UI要素にはWebサイトやスマホアプリで使用するものが揃っています。

UI Skeleton Gallery: UIに使用する基本要素

UIのスケルトン素材は、SVGファイルとSVGコードで利用できます。Figmaなどで利用する場合は、SVGをコピペするだけでOKです。

UI Skeleton Gallery: 見出しとテキスト

続いて、カードとセクション。最近はこういったスケルトンを最初に表示させるWebサイトやスマホアプリも増えてきましたね。

UI Skeleton Gallery: カードとセクション

最後はメディアファイル、画像・動画・ファイルの1:1, 4:3, 16:9 が揃っています。

UI Skeleton Gallery: メディアファイル