タグ UIエレメント
人気順 10 users 50 users 100 users 500 users 1000 users最近よく見かけるレスポンシブ対応のUIコンポーネントやレイアウトがよく分かるHTML, PSD, Sketchの素材 -Now UI Kit | コリス
最近のWebサイトやスマホアプリでよく見かける、Bootstrap 4をベースにした180種類以上のUIエレメントやコンポーネント、50種類以上のレイアウト、それらがPSDとSketchファイル、そしてHTMLも揃った無 ...記事の続きを読む 続きを読む
最近のデザインで使われている、ロゴ・ブランディング・Webサイトのガイドラインのまとめ | コリス
Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたい ...記事の続きを読む 続きを読む
[JS]マイクロインタラクションを簡単に!よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt | コリス
カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ(jQueryのプラグインも可)を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落... 続きを読む
Webデザインの勉強にいい!レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめ | コリス
レイアウトの基本構成・展開例、UIエレメントのバリエーション、カラーの使い方など、Webページのデザインの定義がまとめられたスタイルガイドを紹介します。 各リンク先では、スタイルガイドの大きいものやアニメーションなどを見 ...記事の続きを読む 続きを読む
[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll | コリス
コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。 スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。 eco Scroll eco Scroll -GitHub eco Scrollのデモ eco Scrollの使い方 ec... 続きを読む
商用利用無料!ミニマルにデザインされたUIエレメントやコンポーネントが揃ってるCSSのライブラリ -Papier | コリス
セマンティックな実装で、レスポンシブ対応のミニマルにデザインされたかわいいUIエレメントやコンポーネント、グリッドが利用できる超軽量(2.5KB)のCSSライブラリを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Papier Papier -GitHub グリッドやタイポグラフィをはじめ、ボタン、パネル、タブ、テーブル、フォームなどがカラフルなデザインで揃っていま... 続きを読む
デザインの参考になるUIエレメントが揃ってる!次のプロジェクトに役立つユーザインターフェイス用の無料素材 -Elixir | コリス
さまざまなバリエーションが揃っており、デザインのクオリティも素晴らしく、商用サイトにもそのまますぐに利用できるUIエレメントが揃ったPhotoshopのPSD素材を紹介します。 単に使用するだけでなく、レイアウトのバリエーション、エレメントの展開など、デザインの勉強にも役立ちます。 Elixir -PSD UI Kit デモ版と有料版があり、デモ版でもその充実度はかなりのものです。 ダウンロードで... 続きを読む
Apple、WatchKitを公開。デベロッパーはウェアラブル向け開発が可能に - TechCrunch
Appleは、来年発売予定のスマートウォッチ用プラットフォーム、WatchKitを公開した。Apple Watchでは、時計と接続したiPhone内にWatchKitエクステンションを持ち、Watch自身にはUIエレメントを保存しているアプリが、発売時点でサポートされる。主要な作業はiPhoneが行い、出力(通知等)やユーザーからの入力(タップその他のアクション)はApple Watchが受け持つ... 続きを読む
これ便利でいいね!WebページのUIエレメントのサイズやマージンが簡単に計れるChromeの機能拡張 -Dimensions | コリス
Win/Mac対応、Chromeで表示したWebページのUIエレメントのサイズやマージンが簡単に計れてしまう無料の機能拡張を紹介します。 Webページだけでなく、画像をChromeで表示すれば画像も計ることができます。 ...記事の続きを読む 続きを読む
すぐに使える!アニメーションを使ったUIエレメントのスニペットのまとめ -Kickdrop | コリス
そのまますぐに使えて、デザインも素敵! アニメーションを使ったさまざまなUIエレメントのスニペットを配布しているKickdropを紹介します。 Kickdrop Kickdropは、3人のフロントエンドのデザイナーとプログラマーがそれぞれGitHubやDribbbleなどでリリースしたものをまとめたもので、下の一覧をぱっと見ただけでも面白そうなUIエレメントが揃ってますよね。 all drops ... 続きを読む
Appleの新しいデザインをいち早くチェック!「Mac OS X Yosemite」のUIエレメントが揃ったPSD素材 | コリス
先日発表があったこの秋リリース予定のMac OS X YosemiteのUIエレメントを揃えたPSD素材を紹介します。 プレゼンを元に作成したものだと思いますが、非常によく出来ています。 一昨日、紹介した「OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート」も仕事早かったですが、こちらも早いですね。 Free Mac OS X Yosemite UI Templat... 続きを読む
これは快適!iOS 7のUIエレメントを1クリックでさくさく作成できるPhotoshopの無料アクション | コリス
iOS 7用のワイヤーフレームやモックアップを作成するのに便利なさまざまなUIエレメントやアイコン用のテンプレートを備えたPhotoshopのアクションを紹介します。 iOS 7のUIキットは他にも数多くリリースされていますが、これは自分好みにカスタマイズもできる一味違った素材です。 iOS 7 UI Kit Photoshop Action Set 利用するのは簡単で、ダウンロードしたアクション... 続きを読む
商用利用無料、今時のスマフォアプリ用のワイヤーフレーム素材 -App Wireframes Kit | コリス
スマフォアプリ用のさまざまなUIエレメントが用意されたベクターベースのワイヤーフレーム素材を紹介します。 App Wireframes Kit ダウンロードできる素材のフォーマットは、2種類。 .psd .ai どちらもベクターベースで作られているので、サイズ変更やカラー変更なども簡単にできます。 App Wireframes Kitには、スマフォアプリ用のさまざまなコンテンツが収められています。... 続きを読む
ディテールの作り込みやカラースキームが素晴らしいUIエレメントが揃ったPSD素材のまとめ | コリス
次のプロジェクトで使いたくなるようなワクワクするUIエレメントが揃ったPSD素材を紹介します。 全てPSDファイルがダウンロードでき、UIエレメントだけでなく、PSDファイル自体もしっかりと作り込まれているものばかりです。 GerduKreatip - Agency Portfolio Theme 目に優しいグリーンをアクセントカラーにしたフラットなスタイルで、サークル状のエレメントや半透明、アイ... 続きを読む
さまざまなUIエレメントがiOS 7の透明とソリッドなラインの2パターンで作られたPSD素材 -iOS 7 Style UI Kit | コリス
Photoshopで開いたキャプチャ 各エレメントはベクターなのでカラー変更なども簡単にできます。 アイテムは2種類。 Transparent Style 要素は透明で作成されており、洗練されたモダンなデザイン。背景のカラーを変えたり、写真画像を配置しても面白いと思います。 iOS 7 Line Style iOS 7ライクのソリッドなラインで構成されたデザイン。 続きを読む
キュートな配色がかわいい!センスが光るUIエレメントが揃ったPSD素材 | コリス
ピンクのカラーとマカロンが大好きな仏のデザイナー:Marie Dehayesが作成した、キュートなカラースキームでかわいくデザインされたUIエレメントが揃っているPSD素材を紹介します。 Freebie - Flat Design User Interface Elements ダウンロードできる素材のフォーマットはプレビュー用の.pngとレイヤーが保持された.psdで、.psdでは各エレメントが... 続きを読む
ヴィンテージなデザインが素敵なUIエレメントのPSD素材 -Vintage Pixels UI Kit | コリス
1950年代のヴィンテージなテイストを与えた、ちょっと珍しい素敵なUIエレメントのPSD素材を紹介します。 Vintage Pixels — User Interface Kit ダウンロードできる素材のフォーマットは.psdとプレビュー用の.pngで、PSDファイルでは各エレメントがベクターで作成されているので変更も簡単にできます。 Photoshopで開いたキャプチャ 素材の利用にあたっては個... 続きを読む
ウェブデザイン用の各エレメントをフラット・ソリッドなど複数のスタイルに展開させたPSD素材 -3in1 UI Elements | コリス
ナビゲーション、パンくず、ドロップダウン、ボタンなど、UIエレメントのデザインをそれぞれフラットとソリッドと立体感のあるバルキーの3パターンに展開させたPSD素材を紹介します。 フラットが好き、ソリッドが好きでそのまま使うもよし、比較して勉強するのにもよし、のちょっといつもとは趣向の違った素材となっています。 3 in 1 User Interface Elements Kit Part 1 (F... 続きを読む
フラットで超カッコいいUIライブラリ「Semantic UI」:phpspot開発日誌
フラットで超カッコいいUIライブラリ「Semantic UI」 2013年09月25日- Getting Started | Semantic UI フラットで超カッコいいUIライブラリ「Semantic UI」 ボタン、ヘッダー、アイコン、パンくずリスト、フォーム、グリッド、メニュー等実に豊富で、クールななUIエレメントがセットになっています。 ざっと見たところ、Bootstrapにも対抗できそ... 続きを読む
ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit | コリス
簡単に利用でき、カスタマイズも容易で、ウェブ制作者のためにメンテナンスと拡張に重点をおいたHTML, CSS, JavaScriptで作成されたフロントエンド用の軽量フレームワークを紹介します。 UIkit UIkit -GitHub UIkitは現在多くの制作者が利用しているjQuery, normalize.cssをベースに、ウェブページで利用するさまざまなUIエレメントが簡単に実装できます。... 続きを読む
フラットなスタイルのUIエレメントがずらっと揃ったフレームワーク -Furatto | コリス
BootstrapやFoundationのように、フロントエンドのさまざまなUIエレメントが揃ったフレームワークを紹介します。 一番の大きな違いは、名の通りフラットを前提に作成されている、ということでしょうか。 Furatto Furatto -GitHub Furattoは、かっこいいフラットなスタイルのUIエレメントを使ったウェブページが簡単に実装できるようになっています。 デモページから、そ... 続きを読む
ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ | コリス
ユーザーが目的を達成するために手助けをする、機能的で、直感的で、美しいインターフェイスを備えることは非常に重要です。最近のウェブサイトやスマフォアプリなどでは、アニメーションを伴ったインターフェイスも増えてきました。 アニメーションを伴った楽しいUI、ディテールにこだわったUIなどをコレクションしているサイトを紹介します。 SIX UX アニメーションを伴ったUIを6秒ほどの動画にしてコレクション... 続きを読む
シンプルでミニマルなデザインのUIエレメント素材 -Minimal UI Kit | コリス
Google+にインスパイアされたシンプルでミニマルなデザインのUIエレメントをコレクションした素材を紹介します。 Minimal UI Kit Minimal UI kitにはさまざまなUIエレメントが揃っています。 まずは、カラースキーム ナビゲーション、メニュー ボタン、ソーシャルサービス フォーム、検索 セレクトメニュー、チェックボックス、ラジオボタン ミュージックプレイヤー、スライダー ... 続きを読む
Eコマース用のさまざまなUIエレメントが揃ったフラットなデザインのPSD素材 | コリス
商用でも無料で利用できるロイヤリティフリーのEコマース用のフラットなデザインのUIキットを紹介します。 Ecommerce Flat UI Kit Vol.1 (PSD) PSDにはプロダクト用のウィジェットをはじめ、カテゴリ用のウィジェット、買い物カート、アカウントのログイン、ドロップダウンメニュー、ソーシャルコンテンツ用のボタンなど、さまざまなエレメントが揃っています。 素材のキャプチャ ダウ... 続きを読む
[CSS]アイデアが面白い!チェックボックスで作るStar Warsのライトセーバー | コリス
CSSでチェックボックスを使ったテクニックはいろいろ紹介してきましたが、いつもとはちょっと違ったUIエレメントを紹介します。 「Star Wars」のタイトルからして、もうワクワクしますねw Pure CSS3 Star Wars Lightsaber Checkboxes Pure CSS3 Lightsaber Checkboxes -GitHub チェックボックスで作ったライトセーバーは、こ... 続きを読む