[Generator] Instant Sprite – CSS Sprite Generator – CSSスプライトコードと画像のジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.30, 2015, under Web Design

CSSスプライトのコードと画像のジェネレーター。複数の画像ファイルをサイト内に放り込むだけで、それらを1つの画像ファイルに結合して、かつCSSスプライトのいわゆる座標コードをまとめて吐き出してくれます。1つの画像ファイルをマッピングしてコード生成するジェネレーターはいくつかあるけど、複数の画像を結合するタイプのものは珍しい気がします。個別に画像が保存されたサイトにおいて、ロード時間のスピードアップなどを目的にCSSスプライト化する際などに便利そうです。

コメントを書く :, ,

[CSS] CSS conic-gradient() polyfill – CSSで描画する円錐グラデーション

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.30, 2015, under Web Design

CSSで円錐グラデを描画する方法についての解説。conic-gradientって聞いた事ないなーと思っていくつかのブラウザで確認してみたら、FirefoxとChromeはOK、Safariでは描画できませんでした。これ使えば例えばこんな描画なんかもCSSだけでできるようです。工夫次第では円グラフや放射線なんかも描けるみたい。

コメントを書く :, ,

[UI Design] Device Metrics – 各種モバイルデバイスのディスプレイ解像度一覧

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.29, 2015, under UI Design

各種モバイルデバイスのディスプレイ解像度一覧。Googleがオフィシャルで持っているコンテンツなんですが、なぜかiOS系デバイスも網羅されています。しかもApple Watchまで! いやこれ便利ですね。ディスプレイサイズだけでなく、プラットフォームや比率、dpとpxなども掲載されています。また各項目ヘッダーをクリックするとソートもできます。スマホアプリやWeb作る際に使えそうです。

コメントを書く :, , , ,

[Web Design] LAPA – Landing Pages Collection – ランディングページのデザインギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.29, 2015, under Web Design

ランディングページ(LP)のデザインギャラリー。世の中の様々なLPをTumblr使って紹介しています。わりとメジャーどこが多く、テクノロジー系のサイトがほとんどですね。デザインやアニメーション、スクロール芸などに凝ってるものが多いです。LPは人の印象に残ってなんぼなので、デザインする時の参考になりそうです。

コメントを書く :,

[Sketch] 10 Sketch Tricks for Designers – デザイナーのための10のSketchトリック

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.26, 2015, under Software

デザイナーのための10のSketchトリック。項目によっては動画を使って分かりやすく紹介されています。レイヤーをまたいでまとめてスタイルをコピーする方法、レイヤー移動のショートカット、カラーピッカー、角丸の個別指定、iOSデバイスを使ったライブプレビュー、フルスクリーンのプレゼンモード、Quicktimeを使ったiOSデバイスの画面撮影(これだけSketch固有の機能ではないけど便利だYO、という内容)などが紹介されています。この手の記事ってPhotoshopほどリソースがないので、Sketchユーザーにとっては助かりますな。

コメントを書く :, ,

[Logo Design] Brandseen – 有名ブランドロゴの色当てクイズ

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.25, 2015, under Typography

コカ・コーラやマクドなど、誰でも知っている有名ブランドのロゴの色を当てるクイズ。まぁコーラは簡単ですわ。けどYahooはYahoo Japanのイメージが強すぎて間違えちゃいました。日本のフランチャイズ版ではなく、本家の方のロゴを思い出しましょう(新ロゴだったら分かったのにな・・・)。あと大好きなAppleでなぜか間違えてしまいションボリ。トータル66%のスコアでした。結構低いな・・・。原色ハッキリのロゴは比較的当てやすいけど、中途半端な色を使ってるロゴの場合結構難しいです。人間の記憶なんて結構ボンヤリですからねぇ。

コメントを書く :,

[Freebie] 11 Awesome Resources for SVG Icons – SVGアイコン配布サイトまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.24, 2015, under Material

SVGアイコンの配布サイトをまとめた記事。11の素材サイトが紹介されています。フォーマットがベクターデータだと拡大もできるし、なにより加工がしやすいのが利点ですよね。アイコン素材探す際の起点として使えそうです。またCSSと組み合わせてアニメーションする素材などもあるようです。

コメントを書く :, , ,

[Freebie] FindA.Photo – フリーの写真素材検索サイト

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.23, 2015, under Material

著作権フリーの写真素材の配布サイト。「100% free stock images」を謳っているので、おそらく全てそうなんでしょう。実際いくつか詳細ページ見てみましたが、どれもパブリックドメインでした。著作権表示も必要ないライセンス形態ですね。写真は一覧で見る事も、ワード検索する事もでき、またタグクラウド抽出やカラーパレット抽出なども行えます。素材の扱いやすさだけでなく、検索性も高い点が使い勝手良さそうです。写真素材探す時に重宝しそう。

コメントを書く :,

[Freebie] Coverr – Webサイトのトップに使える動画素材配布サイト

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.22, 2015, under Material

最近、サイトトップにデカく動画流すスタイルたまに見ますよね。あんな感じに使える動画素材の配信サイト。ダウンロードするとmp4とwebm両方のフォーマットが入っており、またサイトに載せる際のソースコードもサイトに掲載されています。どんなサイトにも使えるよう、動画は当り障りのないテーマのものが多い感じです。またここの動画、パブリックドメイン扱いで著作権表示をしなくてもいいようです。数はそれほど多くないけども、動画素材探す時にいいですね。

コメントを書く :, ,

[Misc] Doors of London – ロンドンにあるドアのイラストギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Check

by on 6月.19, 2015, under Misc

ロンドンの街なかにあるあちこちのドアをイラストにしたギャラリーサイト。ただただドアのイラストがズラーっと並んでます。なんでこんなギャラリーを作ったのかというと、作者はどうやら小さい頃からこうした様々な形のドアに魅了されていたらしいです。けどなんか気持ちは分かります。自分の場合バスのタイヤのホイールの色と形になぜか夢中でした(特に好きだったのが名鉄バス)。大人になるとそういう趣味って通常薄れちゃ場合が多いけど、この人の場合は形にしてサイト作っちゃったという感じです。わたくし特別ドアマニアではないんですが結構楽しめました。日本のドアと違って美しいですな。

コメントを書く :,

Web Services

My Profile by iddy

Twitter Status