Monthly Bookmarks #3

  • Posted on
  • Category : Bookmarks
Monthly Bookmarks #3

今月(2014年3月)個人的に覚えておきたいと思ったものやTwitterを通してシェアしたエントリーやサービスなどのまとめです。

Monthly Bookmarks #3 目次

  1. Development
  2. Design
  3. Inspiration
  4. Material / Freebies
  5. Service / Resource
  6. Other

Development

CSS Shake

jQueryプラグインで同じような動きを実装できるものがありますが、こちらはCSSのみで要素を震わせる方法です。

(cs)spinner

Pure CSSでつくられたローディングアニメーション。

ScrollMagic

スクロールに合わせて様々なアニメーションやエフェクトを実装することができるjQueryプラグイン。

Tilted Content Slideshow | Codrops

FWAに実装されているようなコンテンツが傾いたスライドショーを実装するチュートリアル。

gifplayer

通常アニメーションGIFはすぐにアニメーションがスタートしてしまいますが、このプラグインを使うことでアニメーションGIFにスタート・ストップ機能をつけることができます。

MixItUp

美しいアニメーションでコンテンツの並び替え(フィルタリング&ソート)を実装できるjQueryプラグイン。
まだ実験的な部分もあるようですが、バージョン2になりいろいろ変更された点があるようです。

Bootflat

フラットデザインのBootstrapテーマ。

Glyphter

手軽にそれぞれのアルファベットに任意でアイコンフォントを設定でき、予め用意されているものを選択するのはもちろん、自身で作成したSVGをアップロードするのも可能。

Blueprint: Google Grid Gallery | Codrops

Chromebookのガイドページのような動きをつくるチュートリアル。

3D Grid Effect | Codrops

要素をクリックすると3Dエフェクトでフルスクリーン表示になり、回転方法は垂直と水平の2種類があります。

Slide And Push Menus With CSS3 Transitions – Call Me Nick

よく見るボタンクリックでメニューがスライドしてくるのを実装するチュートリアル、上下左右それぞれ2種類用意されていて全8種類の表示方法があります。

CurvedText

テキストをサークル状やライン状に配置できるjQueryプラグインで、軽く試しただけですが日本語も使える感じです。
個人的に見たことある同じようなプラグインよりもいろいろな形状が指定できる印象ですが、IE9+っぽいのでブラウザによっては使用できません。

目次へ

Design

Transparent Textures

Transparent(透明・透過)タイプのテクスチャが集められているサイト。
背景のカラー変更やテクスチャを選択すればそれが反映されたりなど、実際に使用した時のイメージもつきやすいです。

BrandColors

有名企業やサイトのブランドカラー一覧で、カラーコードもコピーできます。

フリーフォント ロゴたいぷゴシックのダウンロード

無料でダウンロードでき商用・非商用問わず使用可能で、ロゴや見出し向けの感じも含まれている日本語フォント。

30 Free Vintage Logo Templates | Web Design Ledger

フリーで使用できる高品質なヴィンテージタイプのロゴ素材のまとめで全30種類あります。

新人くん、これわかる!?書体の要素が手っ取り早くわかる例え画像 | Design | WebNAUT

フォントファミリーの特徴を可愛いイラストを用いて非常にわかりやすく解説しているエントリー。

Iconion : Free Icon Maker

様々なアイコンやデザインパターンを組み合わせて、手軽に自分好みのアイコンを作ることができます。

Flat Preloaders

フラットデザインのプリローダーセットで、全10種類でそれぞれ128×128、64×64、32×32の3サイズが用意されています。

目次へ

Inspiration

Fjord Trends – 2014

PageLanes

Hermès employeur

ANYI LU

Complete Baltics

Grain & Mortar

Exploring Moon Bears

※注意:音が出ます

Visage

33 Inspiring Websites With Beautiful Flat Style Illustrations

25 Beautiful Examples of Modern Minimal Web Design

25 Fun Web Designs Featuring Creative Illustrations

Showcase of Beautifully Bright & Colorful Web Designs

13 Super Inspiring About Pages

目次へ

Material / Freebies

※以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。

iPhone and Android PSD (FREE)

150 outlined icons – PSD AI SVG Webfont

Pack de rubans vectoriels à télécharger gratuitement

Vintage Logo Elements for Access All Areas Members

※Members

35 Colorful Icons for Free

Free Floral Elements Mega Pack

20 High Resolution Textures

Juicicons

Diamond Renders Pack

50 Free Tessellated Designs

目次へ

Service / Resource

yourbrowser.is

サイトアクセス時に使用しているブラウザ情報を表示してくれるサービスで、ブラウザ・OS・スクリーンサイズ・JSやCookieが有効化どうか・各SNSにログインしているかなどの14項目の情報を表示してくれます。
また、表示されている内容をメール送信することも可能。

Presso

はてなからリリースされたニュースアプリ。
一応試しに使ってはみましたが、Gunosyと同様で自分はすぐ使わなくなりそう…。

Microsoft OneNote

もともとは有料でしたが無料で使用できるようになりました。
自分はEvernoteに慣れちゃってるのもあって、今のところ使う予定はありませんが…。

Clef

ログイン時のユーザー名とパスワード入力をなくして、アプリを使用してログイン認証させるというもの。
どんな感じで使用するかは「WordPress › Clef « WordPress Plugins」に紹介ムービーがあるので、そちらを見ればわかりやすいです。

目次へ

Other

Web at 25: Celebrating the 25th Anniversary of the Invention of the Web

WWW(World Wide Web)が誕生から25周年を迎え、それを記念して公開された特設サイト。

Dedesign the Web – Wireframe & Website Design Trivia Game

ワイヤーフレームだけを見てサイト名を当てるゲームで、最初は簡単ですが段々マニアックなサイトになっていきます。

カラーミーショップ大賞 2014 – 6万店舗の中から優秀なショップを発表!

カラーミーショップを利用している6万店舗の中から、ショップに対する熱い思い・売上金額・デザイン・システム・PR・顧客からの支持など、様々な角度から審査を行って優秀なショップを決めるというもの。
サイトでは優秀な48ショップが紹介されており、デザインや導線などの面でいろいろ参考にできます。

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。