Monthly Bookmarks #9

  • Posted on
  • Category : Bookmarks
Monthly Bookmarks #9

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

Monthly Bookmarks #9 目次

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

Development

jQuery FocusPoint

画像の見せたい箇所を中心にクロップして表示させるプラグインで、中心となる座標を指定して使用します。

Tab Styles Inspiration | Codrops

タブのデザインやUIが全15種類紹介されているチュートリアル。

コーディングガイド by @mdo

Code Guide by @mdo」を訳したもので、HTMLやCSSのコーディングガイドをまとめたもの。
かなり参考になりました。

Colorful CSS Gradient Background Generator

複数のカラーを使用したグラデーションを簡単に作成することができるジェネレータ。
色相・彩度・明度をスライダーで調整し、CSSをコピーして簡単に使用することもできます。

uiGradients – Beautiful coloured gradients

グラデーションをまとめているサイトで、見て楽しむだけでなくこちらもCSSをコピーして簡単に使用することもできます。

Glitch Effect on Text / Images / SVG | CSS-Tricks

グリッチエフェクトを実装するチュートリアル。

Design Patterns on CodePen

CodePenに投稿されている様々なUIを集めたギャラリーで、グラフ・タブ・ボタンなど全12カテゴリー用意されています。
CodePenなので、気になるUIがあればソースを見ることもできます。

Ideal Image Slider

Vanilla JSを使用して実装するスライダー。

SVG Icons – Ready to use SVG Icons for the web.

シンプルなSVGアイコンがまとめられたもので、アイコンをクリックするとコードが表示されます。

Map Glyphs | The Ultimate CSS Map Font

地図をWebフォント化したもの。
全301種類用意されており、map-jpで日本、map-auでオーストラリアという感じで表示させることができます。

目次へ

Design

大きな背景画像を使った魅力的なWebサイトを作ろう | Webクリエイターボックス

大きい背景画像を用いるWebデザイン制作時に参考になるエントリーで、メリット・デメリットやデザインのポイントが実際のデザイン例を使いつつわかりやすくまとめられています。
またデザイン部分だけでなく、コーディングに関する部分にも触れられています。

Grids | ひと目でデザインルールが分かる、Webサイト・ポータルサイト

ただキャプチャを並べるのではなく、ガイドを引いたりすることでデザイン・ルールがひと目で分かるようにしたものを掲載しているギャラリーサイト。
まだ開設したばかりのようなのでそんなに数はありませんが、他にはないタイプのギャラリーなので今後が楽しみです :)

23 Interesting Twitter Redesign Concepts | Vandelay Design

様々なデザイナーが作成したTwitterのリデザインまとめ。
現在の公式をシンプルにしたようなものからガラッと変えてるものまで様々で、本当にこんな感じになったら格好良いなと思うのも幾つかありました。

コンテンツから先に考えなければデザインすらできない理由 : could

「これわかるなー」と凄く共感したエントリー。

目次へ

Inspiration

A Spacecraft for All

Econocom

Experience the Withings Pulse O₂

※注意:音が出ます

Anaïs Zamboni

PRESENT

immersive garden

31Three

Creative Website Design Ideas

SVGや動画、CSSアニメーションを使った面白いアイデア満載!じっくりチェックしておきたい最近のWebサイトのまとめ

30 Web Designs with Bright Flat Color Backgrounds

20 Modern Retro Style Website Designs

目次へ

Material / Freebies

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

Lumina – Hexagon Icons Set

10 Free Polygon Backgrounds

Nautical Vector Pack Free

100 FREE IOS 8 ICONS

Free PSD Mockups

iPhone 6 PSD Mockup – Freebie

Free .PSD – 4x WATCH Mockups

Apple Watch GUI PSD

iOS 8 Illustrator Vector UI Kit Update

Freebie: Jellycons iOS 8 App Icon Set

30 + Web And Mobile Browser Mockup Designs PSD

目次へ

Service / Resource

Plain Pattern

SVGをアップロードするとシームレスなパターンを作成してくれるジェネレータ。

SVG animation tool | SVG Circus

SVGを使用したアニメーションが簡単に作成できるジェネレータ。

Dimensions Browser Extension

要素間の幅や距離などをホバーで測ることができるChromeエクステンション。

The Bézier Game

ゲーム感覚でベジェ曲線の練習をすることができるサイト。

2 Apple Product Images – App Store Marketing Guidelines – Apple Developer

Appleが公式で配布しているプロダクトイメージ。
iPhone 6・iPhone 6 Plus・iPhone 5s・iPhone 5c・iPod touch・iPad Air・iPad miniが用意されており、形式はPSDとなっています。

The Ultimate Guide To iPhone Resolutions | PaintCode

iPhoneの解像度を一覧化したチートシート。

目次へ

Other

WordPress › WordPress 4.0 “Benny”

WordPress 4.0がリリースされ、わかりやすい部分だと言語切り替えが可能になったり、メディアやプラグイン検索画面の見た目が変わりました。
機能拡張やバグ修正のリリース詳細は以下で確認できます。

Apple

iPhone 6とApple Watchの発表もかなり話題になりましたが、個人的にはサイトリニューアルとスマートフォン向けサイトを用意されたことのほうが驚きました。
今まで画像で表現していた文字を基本的にデバイスに変更して、更に1文字1文字にletter-spacingかけて調整していたり、画像で表示していると思ったらvideoが使用されている部分もあります。

目次へ

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