Monthly Bookmarks #1

  • Posted on
  • Category : Bookmarks
Monthly Bookmarks #1

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

Monthly Bookmarks #1 目次

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

Development

Colors

Webのカラー指定には「Basic 16 Colors」と呼ばれる基本となる16色がありますが、それらを今風にしたカラーパレット。
サイトで紹介されているカラーコードをそのまま紹介されているだけでなく、クラスを指定するだけで簡単にカラー設定できるCSSも配布されており、中にはlessやsassも同梱されているので環境に併せて使用したいファイルを選べます。

Hover.css

CSSのみで実装した様々ホバーエフェクトをクラスを加えるだけで実装できるもので、2D Transforms・ボーダー・シャドウとグロウを使ったエフェクトなど全43種類あります。

Shape Hover Effect with SVG | Codrops

SVGを使用したホバーエフェクトを実装するチュートリアル。

share-button

ボタンを押すとTwitter、Facebook、Google+の各シェアリンクがポップアップ表示されるjQueryプラグイン。
使い方だけでなく見た目もシンプルなので使いやすそうです。

CodePen – Top Pens of 2013

CSSやJSを使ったクリエイティブなサンプルが数多く公開されている「CodePen」で、2013年に公開された中から人気があるものをTOP100でランキング化したもの。

Google Publisher Plugin (beta)

Google公式のWordPressプラグインで、Adsense設定などが容易にできる。

64 jQuery CSS3 Menu Plugins and Tutorials | Designbeep

jQueryやCSS3を使って実装したメニューのまとめ。

Responsive Web Design Cheat Sheet

レスポンシブWebデザインのサイト制作時に便利な、モニターサイズのチートシート。

CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | CSS-Tricks

CSSアニメーションに使った様々なサンプル。

kalendar — the calendar plugin

イベントカレンダーを実装出来るjQueryプラグインで、Googleにカレンダー対応していて見た目もシンプルなので便利そうです。

Dot Navigation Styles | Codrops

スライダーのバレットなどでよく見かけるドットスタイルのナビゲーションを実装するチュートリアル。
どの動きも良い感じですが、個人的に「HOP」と「FLIP」が好みなのでどこかで使いたい。

scrollReveal.js

スクロールアニメーションを実装することができ、jQueryなどを使用せずCSSのTransitionsを使っています。

25 CSS3 Code Snippets for Making 3D Animated Effects | DesignWoop

CSS3で3Dアニメーション効果を実装する為のスニペットまとめ。

Scattered Polaroids Gallery | Codrops

沢山の写真を見せる時に便利そうなギャラリーを実装するチュートリアルで、初めはポラロイドがランダムで散らばっており、項目を選択するとそれらが左右に移動して中央にギャラリースライドが表示されます。
また、ナビゲーションをクリックするとポラロイドが反転されて裏面が表示されます。

Font Awesome Animation

Font Awesomeのアイコンフォントにアニメーションエフェクトを実装できるCSSで、特定のクラスを付加するだけで手軽に実装できます。

YOU MIGHT NOT NEED JQUERY

jQueryを使用しなくても実装できるというものをまとめたもの。
ブラウザが限られますがこれならjQuery本体を読む必要がないので、本当に簡易的なものだけならこういったものを使いたいですね。

目次へ

Design

2014年のWebデザインのトレンド予測

あくまで予測であり、国内ではどのようになっていくかはわかりませんが、以下はそれぞれ海外のデザインブログでまとめられている2014年のWebデザイントレンド予測です。
全体的にフラットデザインやパララックスなどといった今まででも見かけてたようなものが多くて目新しいものはない感じです。

Pantone Color of the Year 2014

毎年トレンドカラーを発表している「Pantone」から、今年のトレンドカラーとして選ばれたのが「Radiant Orchid」と呼ばれるこの淡くピンクがかったパープルカラーでした。
カラーガイドなどの詳細についてはColor Formula and Guidesで詳しく書かれており、HTML形式では#B163A3となります。

Spring 2014 Fashion Color Report

同じく「Pantone」からで、こちらはファッションでの春のトレンドカラーを発表しています。

あなたは見分けられる!?定番フォント代わりに使えるGoogle Fonts 27書体 | WebNAUT

よく使われる定番フォントとそれの代替として使用できるGoogle Fontsを一覧化したもの。
書体ごとに分けられていて見やすいです。

目次へ

Inspiration

ALEE FOROUGHI – SWAN DESIGN STUDIO CEO/DESIGNER

Parrot – Flower Power

Pons Creative Group | Agency Moxie, Studio Agility

Intacto 2013 FLAT DESIGN vs REALISM

※注意:音が出ます

Houses of Goa

LovelyHeroku

Emotions of Sound

※注意:音が出ます

Apple – Thirty Years of Mac

Rebecca Sehn

13 Inspiring Examples of Whitespace in Web Design

Examples of Web Designs Featuring Big Website Menus

50 Webpage Layouts for Showcasing Company Teams and Employees

25 Website Designs with Unusual Color Combinations

13 Examples of Illustrations and Hand Drawn Elements in Web Design

目次へ

Material / Freebies

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

Flat Apple Devices MockUp

Vector Set of Labels

100+ Best Free Badges Vector & PSD » CSS Author

150 Free And Vector Computer Icons (Exclusive)

Japanese Icon Set – 200 unique icons

Nasty Icons

The Pattern Library

Minimal Vector Ribbons (Ai, Eps)

120+ Free Home Vector Icons

Meroo Flat Icon Set

15 HD Free Blurred Backgrounds

Twitter GUI PSD (New home template)

20 Ultra Light And Elegant Fonts For Web Designers

Free download: Awesome low-poly PSD backgrounds

目次へ

Service / Resource

はじめよう.みんな

Googleが初の日本語一般トップレベルドメイン(gTLD)「.みんな」の提供を開始し、リンクはその際にオープンした特設サイト。
「こっち.みんな」や「どこいったの.みんな」などといったユニークなドメイン名を考える大喜利でも盛り上がっていました。

Google Map Builder

手軽にGoogle Maoをカスタマイズできるツール。
じっくり触ってないけど、ズーム値・コントロールの有無・マップタイプなどいろいろ簡単に指定できて便利そうです。

Twitter Card analytics

Twitterカードを通じたページ表示やクリック数、リツイート数、メンション回数など、自分のTwitterに関する様々なデータを確認できます。

StartupTraction [スタートアップトラクション]

成功したサービスやアプリのマーケティング事例から集客・PR方法を学べるサイトで、マーケティングの成功事例が多数掲載されています。
カテゴリー分けもされていますし、検索機能も用意されているので自分が気になるキーワードで探すこともできます。

Build with Chrome

GoogleとLEGOが提携してリリースしたアプリで、作った作品はGoolgle+を通じて公開したり、他のユーザーの作品を見たりすることもできます。
LEGO好きだからやり始めると時間を忘れてしまう…。

目次へ

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