うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく！ VOTD.tv シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。
ウェブ制作者がチェックしておきたいアイデア満載のUIを備えたウェブデザインのまとめ -2014年上半期
うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく！ VOTD.tv シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。
デザインをクリエイティブに彩るフリーフォントまとめ「30 Awesome Capital Fonts Free to Download」
無料で利用できるフリーフォント。たくさん配布されており、クリエイティブなテイストのものも非常に豊富です。今回はそんなフリーフォントまとめ「30 Awesome Capital Fonts Free to Download」を紹介したいと思います。 Free Font Clutchee by Sinisa Komlenic | Font Squirrel デザインをクリエイティブに彩るフリーフォントがまとめられており、さまざまなデザインシーンで便利に利用することができそうです。 詳しくは以下 Free Font Ostrich Sans Inline by Tyler Finck | Font Squirrel フォントの中にラインが走っており、シンプルな中に個性を与えたいときなどに活躍してくれそうです。 Festa Major de Sant Boi 2014 on Behance グラン
フラットデザインのwebサイト制作に利用したい フリーPSDテンプレート集「35 Free and Flat PSD Web Templates」
主流のフラットデザイン。一からデザインをすると、手間も時間も多くかかってしまうもの。そんな時に利用したい、フリーPSDテンプレート集「35 Free and Flat PSD Web Templates」を今回は紹介したいと思います。 Mod Portfolio to Tell a Story of Your Art – MonsterPost さまざまなレイアウト、テイストのフラットデザインテンプレートがまとめられています。 詳しくは以下 Dribbble – Free Website Template by Jonas Duri 白と黒を基調としたシックな印象のテンプレート。ポートフォリオや、ギャラリーサイトなどにおすすめ。 Minima – Free HTML5 Minimalist Website 非常にシンプルで、定番として利用できそうですね。アイコンや写真を変えることで印象をガ
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
木のリアルな断面のテクスチャまとめ「20 Free And High Resolution Log Textures」
テクスチャの中で、比較的定番としてベーシックに利用されている木のテクスチャ。単体で使ったり、他の素材と組み合わせたりと、いろいろな使い方ができます。そんな中今回は木のテクスチャの中でも、リアルな断面をとらえた「20 Free And High Resolution Log Textures」を紹介したいと思います。 （Log texture by drumcrazy779 on deviantART） カットされた木の年輪などがならぶテクスチャ素材がまとめられています。 詳しくは以下 Wood Log Texture by Jay-B-Rich on deviantART 木の間から見える緑がポイントになっているテクスチャ。自然の風合いをより強く表現したい時に。 Log by TenBaseT on deviantART 三角形にカットされた木の断面が、総柄のような雰囲気を醸し出しています
さまざまなイラストやグラフィックのベクター素材を集めた「36 New Free Vector Graphics and Vector Images for Designers」
さまざまなイラストやグラフィックのベクター素材を集めた「36 New Free Vector Graphics and Vector Images for Designers」 グラフィックデザインからwebデザインまで、幅広いデザインシーンで活用できるベクター素材。イラストレーター等での編集が可能なため、利用範囲は多岐に渡ります。そんなベクター素材を集めた「36 New Free Vector Graphics and Vector Images for Designers」を今回は紹介したいと思います。 さまざまなイラストやグラフィックのものが揃っており、いろいろなシーンで活用することができそうです。 詳しくは以下 NEW YORK CITY VECTOR GRAPHICS – Download at Vectorportal 都市をラインで描き出したベクター素材。背景としてはもちろん
商用利用無料！アウトドアやキャンプの高品質なイラスト素材、コリス限定全員にプレゼント！
先週、Twitter(@colisscom)でお伝えした新たなコラボ、良質なベクター素材をコリス限定で全員にプレゼントします！ 第1弾は、アウトドア・キャンプをテーマにしたアイコンのベクター素材。 レトロなカラーがかわいく、各イラストは非常に丁寧にデザインされています。 Vecteezy! ビジネスからホビーまで、アイコンからイラストまで、多彩なベクター素材が揃っています。ベクター素材を探す用にブックマークしておくのがオススメ！ そんなVecteezy!と当ブログだけのオリジナルの素材を配布するコラボをすることになりました。日本ではコリスが初！ ダウンロードできる素材はベクターデータで、各種フォーマットが揃っています。 .ai .eps .psd .png (プレビュー用) 素材の利用にあたっては個人でも商用でも無料、ウェブや紙をはじめ、アプリや動画などのデジタルコンテンツでも利用でき、バ
この素材の質感スゴイ！実際にスキャンして作成された商用利用無料の紙・ペーパーのテクスチャ素材
本物の紙を実際にスキャンし、Photoshopでいい感じに補正した紙・ペーパーのテクスチャ素材を紹介します。 通常は有料の素材ですが、今週末まで無料でダウンロードして利用できます。
wordpressを取り入れたいwebサイト制作に活用できる「20 Free WordPress Themes」
TOP > WordPress > wordpressを取り入れたいwebサイト制作に活用できる「20 Free WordPress Themes」 wordpressには、フリーで利用できるテーマがインターネット上で多数配布されており、デザインやコンテンツ内容に応じて使用したことがある方も多いのではないでしょうか？そんなwordpressテーマを20種集めた「20 Free WordPress Themes」を今回は紹介したいと思います。 （Future – Free WordPress Theme | DesignOrbital） ベーシックなタイプから、ワイド感のあるタイプまで、さまざまなレイアウトのテーマがまとめられています。 詳しくは以下 MegaResponsive Lite – ThemeIsle サイドメニューが設置されたテーマ。更新記事が見やすいので、ニュース系の
[CSS]この発想はすごい！画像をモザイクからくっきり見せるスタイルシートのテクニック
一枚の画像を使って、モザイク状の画像をアニメーションで少しずつくっきりさせるスタイルシートのテクニックを紹介します。 もうほんと、ナイスアイデア！ コードを見る前に実装方法をちょっと考えてみてください。 ↓はブラウザでの表示をアニメーションgifにしたものです。 Gif Style CSS3 Animation アニメーションはロード時のみなので、繰り返し見たい時はリロードで。 実装はこんな感じです。 HTML HTMLは非常にシンプル！ 画像はdivの背景として表示します。 <body> <div class="image"></div> </body> CSS スタイルシートも非常にシンプル、一枚の画像にモザイクからくっきりまでの各コマを並べ、CSSスプライトで次々にアニメーションで表示しています。 コードを見るまで、どうやって実装してるのか全く分かりませんでした。 body { ba
シンプルテイストのデザインにぴったりなアウトラインアイコンセット「260+ Free Outline Icons For Designers」
TOP > Design > シンプルテイストのデザインにぴったりなアウトラインアイコンセット「260+ Free Outline Icons For Designers」 さまざまな種類がフリーでダウンロードできるようになっているアイコン。種類も豊富で、いろんなデザインに使用できるとあって、重宝する素材の一つではないでしょうか？そんな中今回紹介するのは、シンプルテイストのデザインにぴったりなアウトラインアイコンセット「260+ Free Outline Icons For Designers」です。 アウトラインタイプのアイコンが260種揃った、便利に利用できるアイコンセットとなっています。 詳しくは以下 比較的定番として利用できる種類がまとめられており、ちょっと凝ったライン使いが印象的なベーシックな黒枠タイプ、非常にシンプルにまとめられたブルー枠タイプ、そしてサークルの中にモチ
さまざまな動きのスクロールプラグインまとめ「12 Free Scrolling Plugins For Websites」
サイトに動きを付ける、コンテンツを限られた範囲内で最大限に見せるために利用されるスクロール。シンプルなものが取り入れられがちですが、今回紹介するのは、さまざまな動きのスクロールプラグインまとめ「12 Free Scrolling Plugins For Websites」です。 （Jquery fullContent.js） 動きに特徴のあるスクロールプラグインが12種紹介されています。 詳しくは以下 jQuery Scroll Path いろいろなタイプの動きをまとめたプラグイン。種類が豊富に揃っているので、お気入りを見つけて使用することができます。 Scrolly: a simple jQuery parallax plugin パララックスを取り入れたいスクロールwebサイトに。写真の動きなど、サイト全体に大胆さを与えてくれそうです。 jquery.arbitrary-anchor.
[JS]半透明やフラットのかっこいいパネルをさまざまなアニメーションで表示するスクリプト -Amaran JS
シンプルなテキストだけのものをはじめ、画像やアイコンを使った凝ったレイアウトの通知パネルをさまざまなアニメーションで表示できるjQueryのプラグインを紹介します。 表示位置やスライド・フェードなどのエフェクトも簡単に設定できる優れ物です。 Amaran JS Amaran JS -GitHub Amaran JSのデモ Amaran JSの使い方 Amaran JSのデモ デモではさまざまなデザインのパネルをさまざまなエフェクトで表示できます。 ↓は上：ユーザースタイル、下：半透明スタイル デモページ：オプション Amaran JSの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/jquery.amaran.min.css"> <
商用利用無料！ジオメトリックな背景用のベクター素材、コリス限定全員にプレゼント！
最近は当ブログ限定の配布も増え、提供元さまに感謝すると共に、ビジターの皆さまにも感謝です。 お馴染みの freepik.com 提供による背景素材をコリス限定で全員にプレゼント！ 今回は三角をベースにしたジオメトリックな背景素材、ベクターなのでカラーやサイズを自由に変更できます。もちろん個人でも商用でも無料で利用できます。 freepik.comはウェブやグラフィックデザイナーのためのベクターやイラストやPSD素材の検索エンジンで、日本語環境でももちろん利用できます。アイコンに特化したflaticon.comも運営しており、こちらには現在48,000個以上のアイコンが登録されています。 freepik.comでアイコンの検索する時は、下記のページからが便利です。 freepik.comでアイコンを探す freepik.comは、そのブログだけのオリジナルの素材を配布するコラボをしています。
デザインの幅が広がる！ダウンロードしておきたい今月の新作フリーフォントのまとめ -2014年6月
最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 使い勝手のよいセリフ系のフォントをはじめ、遊び心あふれるデザインフォントまで、今月も豊作です。まずは、ウェイトが豊富に揃っているサンセリフフォントから。 Fira 3.1 個人・商用利用無料。 19書体（＋イタリック）が揃ったOpenTypeフォント。よく使うLight, Book, Medium, Regularだけでなく、Extra bold, Heavy, Ultraなどの太字、Extra Light, Thinなどの細字、更に細いHair、そしてHairよりも更に細いウェイトも。 また、それぞれWebフォント用の.eot, .woff, .ttfもダウンロードできます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よりシンプルに手描き風にデザインされたBootstrapのワイヤーフレーム用のテーマファイル -Bootsketch
各ソーシャルサービスのシェアボタンをJavaScript無しのシンプルなコードで生成するジェネレーター