Monthly Bookmarks #1

Monthly Bookmarks #1

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

Monthly Bookmarks #1 目次

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

Development

  • ColorsWebのカラー指定には「Basic 16 Colors」と呼ばれる基本となる16色がありますが、それらを今風にしたカラーパレット。
    サイトで紹介されているカラーコードをそのまま紹介されているだけでなく、クラスを指定するだけで簡単にカラー設定できるCSSも配布されており、中にはLessやSassも同梱されているので環境に併せて使用したいファイルを選べます。
  • Hover.cssCSSのみで実装した様々ホバーエフェクトをクラスを加えるだけで実装できるもので、2D Transforms・ボーダー・シャドウとグロウを使ったエフェクトなど全43種類あります。
  • Shape Hover Effect with SVG | CodropsSVGを使用したホバーエフェクトを実装するチュートリアル。
  • share-button">share-buttonボタンを押すとTwitter、Facebook、Google+の各シェアリンクがポップアップ表示されるjQueryプラグイン。
    使い方だけでなく見た目もシンプルなので使いやすそうです。
  • CodePen - Top Pens of 2013CSSやJSを使ったクリエイティブなサンプルが数多く公開されている「CodePen」で、2013年に公開された中から人気があるものをTOP100でランキング化したもの。
  • Google Publisher Plugin (beta)Google公式のWordPressプラグインで、Adsense設定などが容易にできる。
  • 64 jQuery CSS3 Menu Plugins and Tutorials | DesignbeepjQueryやCSS3を使って実装したメニューのまとめ。
  • Responsive Web Design Cheat SheetレスポンシブWebデザインのサイト制作時に便利な、モニターサイズのチートシート。
  • CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | CSS-TricksCSSアニメーションに使った様々なサンプル。
  • 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 | DesignWoopCSS3で3Dアニメーション効果を実装する為のスニペットまとめ。
  • Scattered Polaroids Gallery | Codrops沢山の写真を見せる時に便利そうなギャラリーを実装するチュートリアルで、初めはポラロイドがランダムで散らばっており、項目を選択するとそれらが左右に移動して中央にギャラリースライドが表示されます。
    また、ナビゲーションをクリックするとポラロイドが反転されて裏面が表示されます。
  • Font Awesome AnimationFont Awesomeのアイコンフォントにアニメーションエフェクトを実装できるCSSで、特定のクラスを付加するだけで手軽に実装できます。
  • YOU MIGHT NOT NEED JQUERYjQueryを使用しなくても実装できるというものをまとめたもの。
    ブラウザが限られますがこれならjQuery本体を読む必要がないので、本当に簡易的なものだけならこういったものを使いたいですね。

目次へ

Design / Inspiration

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

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

目次へ

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 analyticsTwitterカードを通じたページ表示やクリック数、リツイート数、メンション回数など、自分のTwitterに関する様々なデータを確認できます。
  • StartupTraction [スタートアップトラクション]成功したサービスやアプリのマーケティング事例から集客・PR方法を学べるサイトで、マーケティングの成功事例が多数掲載されています。
    カテゴリー分けもされていますし、検索機能も用意されているので自分が気になるキーワードで探すこともできます。
  • Build with ChromeGoogleとLEGOが提携してリリースしたアプリで、作った作品はGoolgle+を通じて公開したり、他のユーザーの作品を見たりすることもできます。
    LEGO好きだからやり始めると時間を忘れてしまう...。

目次へ

Close the search window,
please press close button or esc key.