「ソリッド」を使った今時のWebデザインの作り方がかっこいいUIキット・ページレイアウトのまとめ
Post on:2014年8月5日
ソリッドなラインを使ったアイコン、テキストを矩形で囲ったゴーストボタン、ラインで描いた幾何学模様など、ソリッドを使ったUIキット、Webページやアプリのレイアウトやテンプレートを紹介します。
いくつかはPSDファイル(無料/有料)もダウンロードできます。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-01.png)
斜めのグリッドをはじめ、ダイアモンドやサークル状のエレメントなどにソリッドを取り入れたスタイリッシュな縦長1ページ用のテンプレート。100MB超えのPSDがダウンロードできます。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-02.png)
カード状のフラットなスタイルのレイアウトに、ソリッドを巧く使い洗練されたデザインに仕上がっています。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-03.png)
クリーニング屋さんのiOSアプリのモックアップで、シンプルなカラースキームがソリッドスタイルにはまっています。ソリッドの細部の作り込みにこだわりを感じます。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-04.png)
iOS 7のソリッドなスタイルとブラーな背景や半透明のパネルを使ったUIキット。ページ用のアイコンやソーシャルサービスのアイコンもセットになっており、統一感のあるデザインになっています。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-05.png)
カード状のレイアウトにソリッドなエレメントを使用した美しいUIキット。ちょっと太めのストロークとカラースキームがあっておりかっこいいです。PSDは有料でダウンロードできます。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-06.png)
ホワイトスペースをたっぷり使い、写真を美しく見せるレイアウトがかっこいい。ミニマルなデザインにもソリッドは映えますね。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-07.png)
スマフォアプリのランディングページで、アプリのチュートリアルやページの各種エレメントに使用しているソリッドなアイテムは、メインとなるプロダクトをよりかっこよく引き立てています。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-08.png)
最近はソリッドなラインを矩形に使ったボタン(ゴーストボタン)をよく見かけますが、その最大の欠点はボタンに見えないこと。ここで使われているゴーストボタンは間違いなくボタンに見えます。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-09.png)
写真を美しく見せたポートフォリオサイトのレイアウト。ソリッドなアイコンは写真をより魅力的に見せています。デスクトップの各サイズやスマホ・タブレットなど、柔軟なレイアウトでレスポンシブに対応しています。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-10.png)
Mtv.comをリデザインしたコンセプトで、幾何学模様とソリッドなエレメントを使ってかっこよくデザインされています。ソリッドな幾何学模様とかローポリならアー写に使ってもOKがもらえそう。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-11.png)
GPSを使ったスマホアプリのUI、静止画でも十分かっこいいですが、元ページのアニメーションを見るともっとかっこいいです。iOS/Android両対応です。
![サイトのキャプチャ](/wp-content/uploads-201403/2014080501-12.png)
ちょっと太めのソリッドなラインを随所に使ったページレイアウト。クリック・タップ可能な箇所と単なる囲いが混在していますが、迷うことはないでしょう。
sponsors