Webデザインのレイアウトや配色の参考になるPhotoshop用の無料素材のまとめ

Webデザインのセンスをアップさせるには、一つひとつのUIを観察し、考えてからPhotoshopを起動し、作業をすること。最近のトレンドをうまく取り入れたレイアウトや配色・タイポグラフィの参考になるPSDがダウンロードできるUI素材を紹介します。

縦長ページ用のさまざまなコンポーネント、斜めやサークルや幾何学を使ったもの、Material Design、ミニマルなど、参考になるものばかりです。

素材のキャプチャ

EventRay UI Kit
(PSD)

イベントやアクティビティの情報を管理するさまざまなGUIエレメントが揃ったUIキット。情報の取得や通知をはじめ、コメントやフィードバックやシェア、管理や販売などユーザーのインタラクションを容易にするようデザインされています。

素材のキャプチャ

Awesome UI Kit for Free
(PSD, Sketch, Axure, Omnigraffle)

ヘッダ、フッタ、ギャラリー、打ち出し、フォームなど、よく使用するコンポーネントが30種類まとめられたUIキット。ダウンロードできるのはサンプル版ですが、個人商用利用無料でクライアントワークにも使ってください、とのことです。

素材のキャプチャ

Freebies PSD Flat UI kit
(PSD)

Bootstrapをベースにフラットなスタイルで実装するさまざまなエレメントを備えたUIキット。

素材のキャプチャ

Modern Website Design
(PSD)

モダンなカラースキームと斜めのカットが特徴的なレイアウト。半透明の使い方も非常に面白いです。PSDのダウンロードは要連絡。

素材のキャプチャ

Free Quadruple Ferial
(PSD)

かわいい幾何学のアクセントを取り入れたミニマルなMaterial DesignのUIキット。カラースキームも非常にかわいいです。

素材のキャプチャ

Zet Free One Page Template PSD
(PSD)

各コンポーネントに共通のデザインテイストを使うことで統一感を出した縦長ページ用のテンプレート素材。

素材のキャプチャ

Unity UI Kit
(PSD)

落ち着いたパステルカラーがかわいいイラストを使ったUIキット。バナナとかう○このアイコンがかわいいw

素材のキャプチャ

55+ Elements FREE UI KIT
(PSD)

ブラック・ホワイト・グレーをベースにミニマルにデザインされたUIキット。画像やタイポグラフィが非常に映えますね。

素材のキャプチャ

Designer Naut UI Kit
(PSD)

かわいくデザインされた40のウィジェットと100以上のエレメントを備えたUIキット。落ち着いたカラースキームとアクセントカラーが効果的です。

素材のキャプチャ

Free PSD. Accessories Template
(PSD)

プロダクトをカード型レイアウトやスライダーにレイアウトしたPSDのテンプレート素材。

素材のキャプチャ

FREE Landing Website
(PSD, HTML)

ミニマルにデザインされたポートフォリオ用のテンプレート。レスポンシブ対応でHTMLもそのまま利用できます。

素材のキャプチャ

Gumballz Web UI Kit
(PSD)

ベクトルの図形とスマートオブジェクトだけを使って制作されたUIキット。春らしいパステルのカラースキームもかわいいです。

top of page

©2017 coliss