ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma | コリス

2016/02/05 444 users フレームワーク Flexboxベース CSS Bulma 全部

外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワークを紹介します。 一部だけ利用してもよし、もちろん全部を利用 ...記事の続きを読む 続きを読む

これは面白い！Photoshopで高性能なHTML/CSSエディタが使えるようになるプラグイン -HTML Block | コリス

2015/09/10 107 users Bootstrap コリス Photoshop CSS コード

PhotoshopのPSD上に、HTMLとCSSのコードでエレメントを作成できるPhotoshopのプラグインを紹介します。 外部スタイルシートにも対応した高性能で、Bootstrapのエレメントをといった使い方もできます。 HTML Block HTML Blockの特徴 HTML Blockのダウンロードとインストール HTML Blockの使い方 HTML Blockの特徴 HTML Blo... 続きを読む

Sketchを更に便利にパワーアップするプラグインのまとめ | コリス

2015/07/17 111 users Photoshop エフェクト コリス オブジェクト フォント

Sketch Toolbox (無料) Photoshopで言うところのExtension Managerで、Sketch用のプラグインマネージャーです。プラグインを探すのにもインストール・アンインストールするのにも非常に便利なアプリです。 Sketch Measure (無料) テキストやエレメントなど、さまざまなオブジェクトのサイズ、形、カラー、エフェクト、フォントの種類・サイズなどの情報を1... 続きを読む

Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize | コリス

2014/11/11 237 users ユーザエクスペリエンス Materialize コリス 商用

最近のWebページでよく使用されているさまざまなコンポーネントやエレメントがフラットにデザインされたCSSベースのフレームワークを紹介します。 オープンソースで、個人でも商用でも無料で利用できます。 Materialize Materialize -GitHub MaterializeはGoogleが提唱する「Material Design」をベースに、ユーザエクスペリエンスにフォーカスされたCS... 続きを読む

Bootstrap 3をベースにしたフラットなかわいいデザインのHTMLとPSDが揃ってる無料のUI素材 -Druken Parrot UI Kit | コリス

2014/10/27 365 users コリス psd GitH Bootstrap free

BootstrapのさまざまなエレメントがかわいくフラットにデザインされたUI素材を紹介します。 Drunken Parrot UI Kit Lite (free) Druken Parrot UI Kit -GitHu...記事の続きを読む 続きを読む

UIデザインの腕が上がるPhotoshopのチュートリアルのまとめ | コリス

2014/10/14 224 users ブラー 縦長 コリス ディテール Photoshop

UIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザイ...記事の続きを読む 続きを読む

Webページで使用されている63種類のUIデザインの特徴と実装の注意点がまとめられた無料のeBook -UXPin | コリス

2014/10/01 112 users UXPin コリス ebook ワイヤーフレーム 本書

Webページで実際に使用されている63種類のさまざまなUIデザインのパターン、エレメントの使い方、コンテンツの見せ方・そしてそれらの実装の際の注意点などを一冊のPDFにまとめた無料のeBookを紹介します。 Web UI Design Patterns 2014 本書は以前、紹介したUXPinのシリーズで、ウェブ制作の参考になるPDFが他にも無料でダウンロードできます。 ワイヤーフレームや最近のU... 続きを読む

配色のセンスも参考になる！今チェックしておきたい「ソリッド」を効果的に使ったUIキット・ページレイアウトのまとめ | コリス

2014/08/05 114 users コリス 矩形 ソリッド ダイアモンド PSDファイル

ソリッドなラインを使ったアイコン、テキストを矩形で囲ったゴーストボタン、ラインで描いた幾何学模様など、ソリッドを使ったUIキット、Webページやアプリのレイアウトやテンプレートを紹介します。 いくつかはPSDファイル（無料/有料）もダウンロードできます。 BrandaLoka 斜めのグリッドをはじめ、ダイアモンドやサークル状のエレメントなどにソリッドを取り入れたスタイリッシュな縦長1ページ用のテン... 続きを読む

これは貴重！商用利用無料のかっこいい動画素材がダウンロードできる -Mazwai | コリス

2014/07/31 274 users Mazwai コリス スクリプト 配慮 背景

背景いっぱいに動画を表示したページを作りたい！ でも動画をつくるのは大変、、、そんな時にはかっこいい動画素材が揃った「Mazwai」。 Mazwai Mazwaiの紹介の前に、、、動画をページに使いたい時は、先日紹介したスクリプトがスマホも配慮されており簡単です。 動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide MazwaiではまさにWebページで... 続きを読む

[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide | コリス

2014/07/25 171 users jQuery div WebM vide 代替

,mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 Vide Vide -GitHub Videのデモ Videの使い方 Videのデモ デモでは、動画がブラウザいっぱいの背景として表示されています。 モダンブラウザ、IEは9+で... 続きを読む

Web制作時に備えておくと便利なチートシートのまとめ（iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ） | コリス

2014/07/24 526 users GitHub Git iOS Emmet コリス

iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。 Web制作時によく使うサイズとかスニペットとかショートカットとか、チート... 続きを読む

SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ | コリス

2014/06/24 146 users コリス Codrops SVG ウェブページ チュートリアル

最近は海外だけでなく、日本でもSVGを使用しているサイトを見かけることが多くなってきました。SVGをアイコンやエレメントに使ったり、アニメーションと組み合わせた面白いエフェクトを取り入れたりなど、さまざまです。 いつかプロジェクトで使いたくなるようなSVGのチュートリアルをCodropsから紹介します。 Creating a Border Animation Effect with SVG and... 続きを読む

Web制作に必ず役立つIllustratorのチュートリアルやスライドのまとめ | コリス

2014/05/07 210 users コリス ベクターデータ Illustrator イラレ SVG

ひと昔前までは「IllustratorはDTP」といった感じでしたが、Illustratorのバージョンアップによる機能強化に伴い、徐々にイラレでWeb制作をおこなう人が増えてきました。 ベクターっぽいスタイルのフラット、ベクターデータのSVGなどの影響もあるかもしれません。 Illustratorを使って、Web制作をする時に役立つ環境などの設定方法や注意点をはじめ、レイアウトやエレメントの作り... 続きを読む

[CSS]次のプロジェクトで使える！スタイルシートの極上テクニックのまとめ | コリス

2014/04/25 540 users div コリス font-size指定 ボーダー CSS

CSSの進化が止まりません。 ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。 Zig Zag Border Created CSS 最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく... 続きを読む

最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ | コリス

2014/04/10 418 users コリス ウェブデザイン psd グリッド ウェブページ

ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます！ BrandaLoka - Creative Onepage PSD Template 斜めのグリッドを使い、ダイアモンド状のエレメントを使った美しいレイアウト。 Free P... 続きを読む

しっかり作り込まれたヴィンテージ デザインの素材、全部商用無料でダウンロードできます（コリス限定） -Blackboard | コリス

2014/04/02 160 users flaticon.com ベクター 黒板 コリス PSD素材

当ブログでもお馴染みの freepik.com 提供による、黒板をベースにヴィンテージのさまざまなエレメントを描いた素材がコリス限定でダウンロードできます！ freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でももちろん利用できます。アイコンに特化したflaticon.comも運営しており、こちらには現在42,000個以上のアイ... 続きを読む

もうフローラルな素材には困らない！背景やエレメントで使えるフローラルなベクター素材のメガパック | コリス

2014/03/18 281 users コリス zip フローラル 商用 ボリューム

個人でも商用でも無料で利用できる、高級感のあるしっかりとデザインされたフローラルなベクター素材を紹介します。 そうです、当ブログでもお馴染みのfreepik.comの新作です。 Floral Elements Mega Pack 素材のボリュームが半端ないです！ zipで200MB強、86種類のオリジナルデザインのフローラル素材が揃っています。 ダウンロードできるファイル群 素材の利用にあたっては... 続きを読む

商用利用無料、スマフォ向けユーザインターフェイスの引き出しを増やすPSD素材 -Flatastic Mobile UI Kit | コリス

2013/12/05 115 users コリス psd 区分け PSD素材 半透明

ソリッドなライン、半透明のパネル、サークル状のエレメント、囲み線を使わない情報の区分けなど、美しくデザインされたスマフォ用のUI要素が100以上揃っており、しかも使用しているフォントやアイコンもセットになっているPSD素材を紹介します。 Flatastic Mobile UI Kit ダウンロードできる素材のフォーマットはPSDが2種類。 .psd (Retina Display) .psd (S... 続きを読む

要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌

2013/11/08 163 users WallPaper projects 必携 背景 プラグイン

要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 2013年11月08日- Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラ... 続きを読む

box-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめ | コリス

2013/02/05 243 users コリス box-shadow Facebook CSS 実装

CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/... 続きを読む

ウェブデザインのセンスを磨く！ 2012年下半期洗練されたディテールのUIデザインのまとめ | コリス

2012/12/11 812 users コリス Dribbble psd ウェブデザイン Kit

2012年下半期、チェックしておきたいUIデザインをdribbbleから紹介します。 PSDやPNGファイルをダウンロードできるので、勉強にもなりますよ。 下の方は、さまざまなエレメントが揃ったUI Kitです。 Future Camera app UI 近い未来こんな素敵なUIがくるのでしょうか。 Slide from The Bricks presentation 各エレメントが立体的に浮かび... 続きを読む

美しいバランスの黄金比をウェブページのレイアウトに実用的に取り入れる -Golden Bootstrap | コリス

2012/10/30 172 users Bootstrap コリス グリッド ウェブページ レイアウト

黄金比を使ったグリッドを組み立てたり、エレメントに使ったりなど、美しいレイアウトを生み出すGolden Bootstrapを紹介します。 Golden Bootstrap Golden Bootstrap -GitHub Golden BootstrapはBootstrapのプラグインで、「bootstrap.less」にファイルをインクルードして利用します。 // Grid system and... 続きを読む

インターフェイスの作成に役立つ！ディテールへの愛を感じるUIデザイン用の無料のPSD素材のまとめ | コリス

2012/10/23 386 users インスピレーション コリス マンネリ テクスチャ素材 背景

ちょっとデザインの刺激が欲しい、最近デザインがマンネリで、、、といった時に他の人がつくったものを眺めることでインスピレーションがふつふつと沸いてきたりしませんか。 ディテールにこだわり、しっかり作りこまれたUI用の最近リリースされたPSD素材を紹介します。 眺めるだけでなく、使ってもよし、です。 まずはページやエレメントの背景に使うテクスチャ素材から。 続きを読む

[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js | コリス

2012/09/11 212 users コリス jQuery jquery.js height 実装

エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.go... 続きを読む

Fireworksでのウェブ制作の作業をかなり楽にする機能拡張のまとめ | コリス

2012/08/30 326 users コリス Fireworks グリッド ダミー画像 テーブル

グリッドやガイドのお助けツールから、グループ化したエレメントのサイズ調整、ダミー画像やテーブルの作成、ショートカットの強化など、そんな便利なFireworksの機能拡張を紹介します。 Optimizing The Design Workflow With Extensions 上記で紹介されている7つのツールを紹介します。 Grids Panel Guides Panel Smart Resize... 続きを読む