Monthly Bookmarks #2

  • Posted on
  • Category : Bookmarks
Monthly Bookmarks #2

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

Monthly Bookmarks #2 目次

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

Development

CSS A/Z

EならEspresso、MならMetronomeという感じで、アルファベットの頭文字をテーマにしたアニメーション付きイラストをCSSのみで作成・公開していくプロジェクト。
動きを見て楽しむだけでなくコードも公開されているので、どのように描かれ、どのようにアニメーションを付加しているかなども見ることができます。

WordPressで記事やページなどに個別のHTML, CSS, JS, PHPを追加・管理できるプラグイン -CSS & JavaScript Toolbox | コリス

WordPressでfunctions.phpを使用して個別にCSSやJSを指定できるカスタマイズがありますが、これは更に高機能なことを実装できるプラグインで、HTMLやPHPも使用することができるだけでなく更にそれらを一元管理することもできます。

Fullscreen Overlay Effects | Codrops

フルスクリーンオーバーレイスタイルを実装するチュートリアル。
よく見かけるようなものだけでなく、右上のコーナーから降りてくるものや小さいボックスが並べられるようなエフェクトもあります。

WOW.js

要素を様々なアニメーションを付けて表示させることができるプラグイン。
スライドさせて表示させたり、各要素を順番に表示させたりすることができます。

CSS Checkbox

CSSで装飾するチェックボックスのジェネレータ。

Grid

レスポンシブ対応のシンプルなグリッドフレームワーク。

Sticker.js

hover時にシールがめくれるような効果を実装できるプラグイン。

Fluidbox, a jQuery plugin for beautiful lightboxes

Lightbox系のjQueryプラグインですが、よくある動きとは違う感じで表示させることができます。

Placeholdem

フォーカス時にアニメーション付きでplaceholder属性を表示・非表示にするスクリプト。

JQuery Tip Cards

Google Tipsのような動きを実装できるスクリプト。

目次へ

Design

After iOS 7 icons

iOS6向けからiOS7向けへとリデザインされたアイコンを比較しながら閲覧できます。

新しさ満載!GIFアニメーションを効果的に使ったwebサイト6選 | 株式会社LIG

GIFアニメーションを効果的に使用したサイトのショーケース。
GIFアニメーションは昔からある手法ですが、最近でも使用しているサイトはよく見かけますし、上手く使うことでより魅力的で印象に残るサイトにすることができます。

How to use large images like a pro | Webdesigner Depot

大きいイメージをプロっぽく使用するためのヒントや実際にしようされているサイトのショーケースのまとめ。

35+ fresh inline typefaces | Webdesigner Depot

インラインタイプのフォントをまとめたエントリー。

40 Free Mockup Templates to Present Your UI Designs | Line25

フリーのモックアップテンプレートのまとめエントリー。
MacBook・iPhone・iPadなどデバイスの種類も様々あり、テイストもリアルなものからフラットなものまであります。

Social media cheat sheet – super speedy, all you needy

各ソーシャルメディアの画像やレイアウトサイズのチートシートで、TwitterやFacebookなど全9種類あります。

Designing a responsive form, 20 inspirational solutions | Webdesigner Depot

レスポンシブ対応されているフォームのショーケース。

デザインのガイドラインや指示書の作成が驚くほど捗るPhotoshopの機能拡張 -Ink | コリス

レイヤーに配置した要素のサイズ・エフェクト・フォント情報などを1クリックでドキュメント化してくれるPhotoshopプラグイン。
非常に便利で手軽な機能なのですが、無料で利用することができます。

Windows Azure Symbol/Icon Set

Windows Azureのオフィシャルアイコンセットで、システム構成図を描く際に便利なものが揃っています。

Stackicons – Icon Fonts for Web Designers

ソーシャルメディア・サービスのWebフォントアイコンセットで、TwitterやFacebookといったお馴染みのもの以外にも、GitHub・CodePen・SlideShareなども用意されています。

目次へ

Inspiration

BrightMedia

※注意:音が出ます

Home – Carl-Philippe Brenner

Jean-Christophe Suzanne

Olympic Story

※注意:音が出ます

100 Years of Design | AIGA

Apple Store

soppo – interactive production studio, Gdynia, Poland

LiveAreaLabs

11 Clean & Minimalist Websites for your Inspiration

Color Of The Year 2014 – Radiant Orchid – Websites For Inspiration

Fresh Collection Of Super Minimal Websites For Inspiration

15 Aesthetically Pleasing Creative Single Page Web Designs

Showcasing The Design Of Startup Websites

25 Beautiful & Clean Web Designs

目次へ

Material / Freebies

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

LEGOlize yourself Free PSD

One Page Website Wireframes

5 Hexagon Backgrounds Vol. I

5 Hexagon Backgrounds Vol. II

20 Free Mosaic Backgrounds

iPad Air Template (PSD)

Samsung Galaxy S5 PSD Freebie

40 Flat & Solid User Interface Icons

One day of the office monkey life. Icons set

目次へ

Service / Resource

Squarespace Logo

Web上で簡単にロゴを作成できるサービス。
クライアント案件とかでそのままこのロゴを使うなんてことはないと思いますが、ちょっとしたカンプ作るときやダミーでロゴを用意したい際などは手軽にできて良いですね。

webdesignrepo

ニュースサイト・デザインブログ・インスピレーションがもらえるギャラリーなど、Webデザインに関する様々なリソースが集められているリンク集です。
沢山ありますがカテゴリー分けが細かくされているので、自分が探している情報も見つけやすいと思います。

DEWEY

Chromeのブックマークをスクリーンショット付きに表示させることができるエクステンションで、検索やソートといったこともできます。
エクステンションはあまり入れ過ぎないように本当にして便利と思ったものだけを使うようにしてますが、久しぶりに即ダウンロードしました。

Free Online Guitar Tuner

マイクを使用して、ブラウザでギターのチューニングができます。

LINE Creators Market

電話やメールについても話題になりましたが、個人的にTwitterなどで特に話題になっていると感じたのがスタンプ販売についてで、誰でも簡単に参加できるだけでなく、売上の50%がクリエイターに配分されるよう … LINEすごいですね。

目次へ

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のアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。