商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめWebデザインの最近のトレンド、縦長ページ、スクロールエフェクト、CSS3アニメーション、フラットスタイルなどを取り入れたBootstrapのテンプレートを紹介します。 Bootstrapは先週3.3.0がリリースされ、Bootstrap4の開発も進んでるそうです。4ではIE8はサポート外になる予定。
トータル56,000円以上の有料フォントやグラフィック素材が無料でダウンロードできます！
先日、Twitter（@colisscom）でお知らせしたプレゼント！ InkyDealsさんとコリスの初コラボ、日本では初かな、という訳で、コリスのビジター全員にトータル56,000円以上（$558分）の有料フォントやグラフィック素材が無料でダウンロードできます！ ※$558はこれを書いている現在、日本円で56,643円です。 ダウンロードできる素材には、計471のリソースが入っています！ ↑のキャプチャにあるように、フォント、テクスチャ、インフォグラフィック、アイコン、バッジ、WordPressのテーマ、モックアップ、Photoshopのアクションなど、さまざまなものが揃っています。 ライセンスは基本的には全て、個人でも商用でも無料で利用でき、販売や再配布は禁止です。ご利用時には個々のライセンスをご確認ください。 素材の詳しい紹介は後にして、まずはダウンロード方法から紹介します。 下記
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月
紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
商用利用も無料！紙や布地・デニム地などの癒し系のパターン素材
以下、ダウンロードできる素材はPhotoshop用のパターン（PAT）で、CS3にも対応しています。 ※CS6でももちろん使えます。 素材は全て個人でも商用でも無料で利用できます。 詳しくはダウンロードファイルの「license.txt」をご覧ください。
[JS]jQueryのプラグイン33+1選 -2012年8・9月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 BigVideo.js MP4などの動画をウェブページの背景いっぱいに配置します。 Video Background サイズ変更可能
商用利用も無料、各種ソーシャルサービス・ブラウザ・支払いサービスのアイコン素材 -PlugoLabs
Social & Services Icon Set [ad#ad-2] アイコンのデザインは全86種で、ソーシャルサービス、ブラウザ、支払いサービスなどウェブサイトやブログでよく利用するものが数多く揃っています。 ダウンロードできる素材のフォーマットはPNGで、サイズは32x32, 48x48, 64x64の3種類です。
最近リリースされた高品質なフリーのデザインフォント -2011年10月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
ミニマリズムにした映画ポスターのまとめ
その映画の特徴をうまくミニマリズムにしたポスターを紹介します。 バットマン source 不思議の国のアリス source インディ・ジョーンズ 最後の聖戦 source [ad#ad-2] ダイ・ハ
ウェブサイトのユーザビリティ、とっても大切な20のポイント
ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。 ウェブサイトのユーザビリティを向上する20のポイントを紹介します。 The Ultimate 20 Usability Tips for Your Website [ad#ad-2] 下記は各ポイントを意訳したものです。 最新の情報を中心にウェブサイトのデザインを組み立てる もし新しいコンテンツをあまりリリースしないのであれば、スタティックなコンテンツに重点をおいたデザインにします。更新頻度が高いようであれば、ブログ風に新着が目立つデザインにします。 ロゴは左上、メニューは右か下 ロゴは左上に配置し、メニューは右か下に配置します。ロゴはクリックして、サイトのトップページにリンクするようにします。このことはたいていの
Twitter用の背景画像を作成できる・配付しているサイトのまとめ
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
マンネリ化から抜け出し、新鮮なウェブデザインを生みだす10のアイデア
いつもの同じようなデザインから離れて、新鮮でユニークなウェブデザインを生みだすために役立つ10のアイデアを紹介します。 10 Ideas for Creating Innovative and Unique Web Designs [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 カンバスはブランクから始める Photoshopで作業をはじめる時は、白ではなくブランクから始めるようにします。 白は白がある状態なので、何も無い真っさらな状態にします。 用意されたレイアウトに頼らない 960 Grid Systemなどのフレームワークを利用するのは確かに簡単で素晴らしいですが、そういった用意されたレイアウトには頼らずに自身で考えて作りだし、それを機能させる方法を見つけだしてください。 CMSは使わない 今日、WordPressを始めとする素晴らしいCMSが数多くリリース
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
わずかな時間でユーザーの注意を惹きつけるウェブデザインの7つのポイント
ユーザーがウェブサイトを訪れる時間はわずかなものです。その短時間の間に、ユーザーの注意を惹きつけ、印象に残るようにするための7つの方法を紹介します。 Billboard Web Design: How to Win Your Audience's Attention [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事では他の事例やビルボードの素材も紹介しています。 はじめに 1. クリエイティブとユニーク 2. 説得力のある見出し 3. 巧妙さと辛辣さ 4. ブランディングを印象づける 5. 注意を惹きつけるアイキャッチ 6. ポイントはクリーンでシンプルでストレートに 7. 明快さとコントラスト はじめに 人の目を惹くビルボードスタイル（立て看板）の広告は目にした瞬間、簡単に人々の記憶に残り、楽しいものです。イメージのカラーやフォントも重要ですが、アイデアにもユニークがあり
Photoshopのビギナーでもできるディテールにこだわったボタンを作成するチュートリアル
Photoshopの標準機能だけで、グラデーションやレイヤースタイルをつかった美しいボタンを作成するチュートリアルを紹介します。 Photoshop For Beginners: Creating buttons for web part 1 Photoshop For Beginners: Creating buttons for web part 2 [ad#ad-2] 上記、四つのボタンのチュートリアルはPart 1, 2に分かれており、それぞれ二つずつのチュートリアルが掲載されています。 各チュートリアルはPhotoshopのキャプチャ付きなので、英語が苦手な方でもどのようなフローですすめるか理解できると思います。 ボタンはグラデーションやレイヤースタイルといった王道のテクニックだけでなく、ノイズをのせたりライトをくわえたりと細部までしっかり手がはいった作りになっています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タイポグラフィの素晴らしい世界をまずは無料のものから学んでみるebookのまとめ
2010年総まとめ：商用利用も無料、日本語・英語の高品質なフリーフォント集
商用利用無料！ 毛筆・筆文字、ペン字、マジック、手書きの日本語フリーフォント 総まとめ
最近リリースされた高品質なフリーのデザインフォント -2010年9月