「ソリッド」を使った今時のWebデザインの作り方がかっこいいUIキット・ページレイアウトのまとめ

ソリッドなラインを使ったアイコン、テキストを矩形で囲ったゴーストボタン、ラインで描いた幾何学模様など、ソリッドを使ったUIキット、Webページやアプリのレイアウトやテンプレートを紹介します。
いくつかはPSDファイル(無料/有料)もダウンロードできます。

サイトのキャプチャ

BrandaLoka

斜めのグリッドをはじめ、ダイアモンドやサークル状のエレメントなどにソリッドを取り入れたスタイリッシュな縦長1ページ用のテンプレート。100MB超えのPSDがダウンロードできます。

サイトのキャプチャ

Dashboard

カード状のフラットなスタイルのレイアウトに、ソリッドを巧く使い洗練されたデザインに仕上がっています。

サイトのキャプチャ

Cleanly

クリーニング屋さんのiOSアプリのモックアップで、シンプルなカラースキームがソリッドスタイルにはまっています。ソリッドの細部の作り込みにこだわりを感じます。

サイトのキャプチャ

iOS 7 Style UI Kit

iOS 7のソリッドなスタイルとブラーな背景や半透明のパネルを使ったUIキット。ページ用のアイコンやソーシャルサービスのアイコンもセットになっており、統一感のあるデザインになっています。

サイトのキャプチャ

Aves UI

カード状のレイアウトにソリッドなエレメントを使用した美しいUIキット。ちょっと太めのストロークとカラースキームがあっておりかっこいいです。PSDは有料でダウンロードできます。

サイトのキャプチャ

The New Heros Pioneers

ホワイトスペースをたっぷり使い、写真を美しく見せるレイアウトがかっこいい。ミニマルなデザインにもソリッドは映えますね。

サイトのキャプチャ

TIMMANA App Landing Page

スマフォアプリのランディングページで、アプリのチュートリアルやページの各種エレメントに使用しているソリッドなアイテムは、メインとなるプロダクトをよりかっこよく引き立てています。

サイトのキャプチャ

Penguin Random House

最近はソリッドなラインを矩形に使ったボタン(ゴーストボタン)をよく見かけますが、その最大の欠点はボタンに見えないこと。ここで使われているゴーストボタンは間違いなくボタンに見えます。

サイトのキャプチャ

Shotfolio PSD Theme

写真を美しく見せたポートフォリオサイトのレイアウト。ソリッドなアイコンは写真をより魅力的に見せています。デスクトップの各サイズやスマホ・タブレットなど、柔軟なレイアウトでレスポンシブに対応しています。

サイトのキャプチャ

Mtv.com Redesign

Mtv.comをリデザインしたコンセプトで、幾何学模様とソリッドなエレメントを使ってかっこよくデザインされています。ソリッドな幾何学模様とかローポリならアー写に使ってもOKがもらえそう。

サイトのキャプチャ

Speedometer

GPSを使ったスマホアプリのUI、静止画でも十分かっこいいですが、元ページのアニメーションを見るともっとかっこいいです。iOS/Android両対応です。

サイトのキャプチャ

Bedrenaetterdk

ちょっと太めのソリッドなラインを随所に使ったページレイアウト。クリック・タップ可能な箇所と単なる囲いが混在していますが、迷うことはないでしょう。

sponsors

top of page

©2018 coliss