最近よく見かけるレスポンシブ対応のUIコンポーネントやレイアウトがよく分かるHTML, PSD, Sketchの素材 -Now UI Kit | コリス

2017/06/13 66 users Bootstrap コリス psd Sketch レイアウト

最近のWebサイトやスマホアプリでよく見かける、Bootstrap 4をベースにした180種類以上のUIエレメントやコンポーネント、50種類以上のレイアウト、それらがPSDとSketchファイル、そしてHTMLも揃った無 ...記事の続きを読む 続きを読む

最近のデザインで使われている、ロゴ・ブランディング・Webサイトのガイドラインのまとめ | コリス

2017/04/25 107 users ブランディング バリエーション コリス 定義 ロゴ

Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたい ...記事の続きを読む 続きを読む

[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt | コリス

2017/01/30 52 users jQuery GitHub tilt シャドウ グラデーション

カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落... 続きを読む

Webデザインの勉強にいい！レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめ | コリス

2016/01/06 198 users アニメーション バリエーション コリス 定義 展開例

レイアウトの基本構成・展開例、UIエレメントのバリエーション、カラーの使い方など、Webページのデザインの定義がまとめられたスタイルガイドを紹介します。 各リンク先では、スタイルガイドの大きいものやアニメーションなどを見 ...記事の続きを読む 続きを読む

[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll | コリス

2015/03/26 48 users コリス jQuery ＥＣ カルーセル フリック

コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。 スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。 eco Scroll eco Scroll -GitHub eco Scrollのデモ eco Scrollの使い方 ec... 続きを読む

商用利用無料！ミニマルにデザインされたUIエレメントやコンポーネントが揃ってるCSSのライブラリ -Papier | コリス

2015/01/09 63 users タイポグラフィ コリス グリッド ミニマル コンポーネント

セマンティックな実装で、レスポンシブ対応のミニマルにデザインされたかわいいUIエレメントやコンポーネント、グリッドが利用できる超軽量（2.5KB）のCSSライブラリを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Papier Papier -GitHub グリッドやタイポグラフィをはじめ、ボタン、パネル、タブ、テーブル、フォームなどがカラフルなデザインで揃っていま... 続きを読む

デザインの参考になるUIエレメントが揃ってる！次のプロジェクトに役立つユーザインターフェイス用の無料素材 -Elixir | コリス

2014/12/22 92 users Elixir コリス エレメント Photoshop デモ版

さまざまなバリエーションが揃っており、デザインのクオリティも素晴らしく、商用サイトにもそのまますぐに利用できるUIエレメントが揃ったPhotoshopのPSD素材を紹介します。 単に使用するだけでなく、レイアウトのバリエーション、エレメントの展開など、デザインの勉強にも役立ちます。 Elixir -PSD UI Kit デモ版と有料版があり、デモ版でもその充実度はかなりのものです。 ダウンロードで... 続きを読む

Apple、WatchKitを公開。デベロッパーはウェアラブル向け開発が可能に - TechCrunch

2014/11/19 19 users iPhone TechCrunch WatchKit 出力

Appleは、来年発売予定のスマートウォッチ用プラットフォーム、WatchKitを公開した。Apple Watchでは、時計と接続したiPhone内にWatchKitエクステンションを持ち、Watch自身にはUIエレメントを保存しているアプリが、発売時点でサポートされる。主要な作業はiPhoneが行い、出力（通知等）やユーザーからの入力（タップその他のアクション）はApple Watchが受け持つ... 続きを読む

これ便利でいいね！WebページのUIエレメントのサイズやマージンが簡単に計れるChromeの機能拡張 -Dimensions | コリス

2014/09/16 74 users WIn Mac対応 コリス マージン 画像

Win/Mac対応、Chromeで表示したWebページのUIエレメントのサイズやマージンが簡単に計れてしまう無料の機能拡張を紹介します。 Webページだけでなく、画像をChromeで表示すれば画像も計ることができます。 ...記事の続きを読む 続きを読む

すぐに使える！アニメーションを使ったUIエレメントのスニペットのまとめ -Kickdrop | コリス

2014/06/30 71 users コリス Dribbble プログラマー スニペット デザイナー

そのまますぐに使えて、デザインも素敵！　アニメーションを使ったさまざまなUIエレメントのスニペットを配布しているKickdropを紹介します。 Kickdrop Kickdropは、3人のフロントエンドのデザイナーとプログラマーがそれぞれGitHubやDribbbleなどでリリースしたものをまとめたもので、下の一覧をぱっと見ただけでも面白そうなUIエレメントが揃ってますよね。 all drops ... 続きを読む

Appleの新しいデザインをいち早くチェック！「Mac OS X Yosemite」のUIエレメントが揃ったPSD素材 | コリス

2014/06/06 53 users コリス PSD素材 プレゼン 一昨日 Apple

先日発表があったこの秋リリース予定のMac OS X YosemiteのUIエレメントを揃えたPSD素材を紹介します。 プレゼンを元に作成したものだと思いますが、非常によく出来ています。 一昨日、紹介した「OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート」も仕事早かったですが、こちらも早いですね。 Free Mac OS X Yosemite UI Templat... 続きを読む

これは快適！iOS 7のUIエレメントを1クリックでさくさく作成できるPhotoshopの無料アクション | コリス

2014/03/23 79 users モックアップ ワイヤーフレーム コリス Photoshop

iOS 7用のワイヤーフレームやモックアップを作成するのに便利なさまざまなUIエレメントやアイコン用のテンプレートを備えたPhotoshopのアクションを紹介します。 iOS 7のUIキットは他にも数多くリリースされていますが、これは自分好みにカスタマイズもできる一味違った素材です。 iOS 7 UI Kit Photoshop Action Set 利用するのは簡単で、ダウンロードしたアクション... 続きを読む

商用利用無料、今時のスマフォアプリ用のワイヤーフレーム素材 -App Wireframes Kit | コリス

2014/03/18 259 users コリス ベクターベース ワイヤーフレーム素材 フォーマット

スマフォアプリ用のさまざまなUIエレメントが用意されたベクターベースのワイヤーフレーム素材を紹介します。 App Wireframes Kit ダウンロードできる素材のフォーマットは、2種類。 .psd .ai どちらもベクターベースで作られているので、サイズ変更やカラー変更なども簡単にできます。 App Wireframes Kitには、スマフォアプリ用のさまざまなコンテンツが収められています。... 続きを読む

ディテールの作り込みやカラースキームが素晴らしいUIエレメントが揃ったPSD素材のまとめ | コリス

2014/01/07 91 users コリス エレメント 半透明 PSD素材 カラースキーム

次のプロジェクトで使いたくなるようなワクワクするUIエレメントが揃ったPSD素材を紹介します。 全てPSDファイルがダウンロードでき、UIエレメントだけでなく、PSDファイル自体もしっかりと作り込まれているものばかりです。 GerduKreatip - Agency Portfolio Theme 目に優しいグリーンをアクセントカラーにしたフラットなスタイルで、サークル状のエレメントや半透明、アイ... 続きを読む

さまざまなUIエレメントがiOS 7の透明とソリッドなラインの2パターンで作られたPSD素材 -iOS 7 Style UI Kit | コリス

2013/11/26 38 users Photoshop キャプチャ 各エレメント コリス 背景

Photoshopで開いたキャプチャ 各エレメントはベクターなのでカラー変更なども簡単にできます。 アイテムは2種類。 Transparent Style 要素は透明で作成されており、洗練されたモダンなデザイン。背景のカラーを変えたり、写真画像を配置しても面白いと思います。 iOS 7 Line Style iOS 7ライクのソリッドなラインで構成されたデザイン。 続きを読む

キュートな配色がかわいい！センスが光るUIエレメントが揃ったPSD素材 | コリス

2013/10/22 123 users コリス psd 配色 PSD素材 PNG

ピンクのカラーとマカロンが大好きな仏のデザイナー：Marie Dehayesが作成した、キュートなカラースキームでかわいくデザインされたUIエレメントが揃っているPSD素材を紹介します。 Freebie - Flat Design User Interface Elements ダウンロードできる素材のフォーマットはプレビュー用の.pngとレイヤーが保持された.psdで、.psdでは各エレメントが... 続きを読む

ヴィンテージなデザインが素敵なUIエレメントのPSD素材 -Vintage Pixels UI Kit | コリス

2013/10/14 61 users コリス psd PSD素材 ヴィンテージ ベクター

1950年代のヴィンテージなテイストを与えた、ちょっと珍しい素敵なUIエレメントのPSD素材を紹介します。 Vintage Pixels — User Interface Kit ダウンロードできる素材のフォーマットは.psdとプレビュー用の.pngで、PSDファイルでは各エレメントがベクターで作成されているので変更も簡単にできます。 Photoshopで開いたキャプチャ 素材の利用にあたっては個... 続きを読む

ウェブデザイン用の各エレメントをフラット・ソリッドなど複数のスタイルに展開させたPSD素材 -3in1 UI Elements | コリス

2013/10/10 67 users コリス elements ソリッド PSD素材 趣向

ナビゲーション、パンくず、ドロップダウン、ボタンなど、UIエレメントのデザインをそれぞれフラットとソリッドと立体感のあるバルキーの3パターンに展開させたPSD素材を紹介します。 フラットが好き、ソリッドが好きでそのまま使うもよし、比較して勉強するのにもよし、のちょっといつもとは趣向の違った素材となっています。 3 in 1 User Interface Elements Kit Part 1 (F... 続きを読む

フラットで超カッコいいUIライブラリ「Semantic UI」:phpspot開発日誌

2013/09/25 31 users Semantic UI phpspot開発日誌 きそ 対抗

フラットで超カッコいいUIライブラリ「Semantic UI」 2013年09月25日- Getting Started | Semantic UI フラットで超カッコいいUIライブラリ「Semantic UI」 ボタン、ヘッダー、アイコン、パンくずリスト、フォーム、グリッド、メニュー等実に豊富で、クールななUIエレメントがセットになっています。 ざっと見たところ、Bootstrapにも対抗できそ... 続きを読む

ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit | コリス

2013/07/29 258 users jQuery UIKit コリス ウェブページ CSS

簡単に利用でき、カスタマイズも容易で、ウェブ制作者のためにメンテナンスと拡張に重点をおいたHTML, CSS, JavaScriptで作成されたフロントエンド用の軽量フレームワークを紹介します。 UIkit UIkit -GitHub UIkitは現在多くの制作者が利用しているjQuery, normalize.cssをベースに、ウェブページで利用するさまざまなUIエレメントが簡単に実装できます。... 続きを読む

フラットなスタイルのUIエレメントがずらっと揃ったフレームワーク -Furatto | コリス

2013/07/16 55 users Bootstrap Foundation コリス 前提

BootstrapやFoundationのように、フロントエンドのさまざまなUIエレメントが揃ったフレームワークを紹介します。 一番の大きな違いは、名の通りフラットを前提に作成されている、ということでしょうか。 Furatto Furatto -GitHub Furattoは、かっこいいフラットなスタイルのUIエレメントを使ったウェブページが簡単に実装できるようになっています。 デモページから、そ... 続きを読む

ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ | コリス

2013/07/04 158 users インターフェイス ディテール 手助け コリス アニメーション

ユーザーが目的を達成するために手助けをする、機能的で、直感的で、美しいインターフェイスを備えることは非常に重要です。最近のウェブサイトやスマフォアプリなどでは、アニメーションを伴ったインターフェイスも増えてきました。 アニメーションを伴った楽しいUI、ディテールにこだわったUIなどをコレクションしているサイトを紹介します。 SIX UX アニメーションを伴ったUIを6秒ほどの動画にしてコレクション... 続きを読む

シンプルでミニマルなデザインのUIエレメント素材 -Minimal UI Kit | コリス

2013/07/01 71 users コリス セレクトメニュー Kit ソーシャルサービス デザイン

Google+にインスパイアされたシンプルでミニマルなデザインのUIエレメントをコレクションした素材を紹介します。 Minimal UI Kit Minimal UI kitにはさまざまなUIエレメントが揃っています。 まずは、カラースキーム ナビゲーション、メニュー ボタン、ソーシャルサービス フォーム、検索 セレクトメニュー、チェックボックス、ラジオボタン ミュージックプレイヤー、スライダー ... 続きを読む

Eコマース用のさまざまなUIエレメントが揃ったフラットなデザインのPSD素材 | コリス

2013/05/30 51 users コリス ロイヤリティフリー psd PSD素材 エレメント

商用でも無料で利用できるロイヤリティフリーのEコマース用のフラットなデザインのUIキットを紹介します。 Ecommerce Flat UI Kit Vol.1 (PSD) PSDにはプロダクト用のウィジェットをはじめ、カテゴリ用のウィジェット、買い物カート、アカウントのログイン、ドロップダウンメニュー、ソーシャルコンテンツ用のボタンなど、さまざまなエレメントが揃っています。 素材のキャプチャ ダウ... 続きを読む

[CSS]アイデアが面白い！チェックボックスで作るStar Warsのライトセーバー | コリス

2013/05/28 18 users ライトセーバー コリス GitHub CSS アイデア

CSSでチェックボックスを使ったテクニックはいろいろ紹介してきましたが、いつもとはちょっと違ったUIエレメントを紹介します。 「Star Wars」のタイトルからして、もうワクワクしますねｗ Pure CSS3 Star Wars Lightsaber Checkboxes Pure CSS3 Lightsaber Checkboxes -GitHub チェックボックスで作ったライトセーバーは、こ... 続きを読む