Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[Misc] DEEPDREAM GENERATOR – Googleの深層学習アルゴリズム「Deep Dream」を使う事のできるジェネレーター

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

「気味が悪い」とか「絵的に基地外」とか色々言われてるGoogleのDeep Dream。あの人工知能に絵を見せて、人工知能が解釈した結果を得る事ができるというジェネレーター。なかなか興味深いですねこれ。早速画像投稿してみましたが、なかなかに人気のようで「残り時間あと7時間」と言われました。oh… まぁ投稿したのはいつものように江頭の画像なんですけどね。間違っても自分や知り合いの写真とか投稿しないようにしたいと思います。夢に見そう。

[Freebie] iPhone 6 and Apple Watch Resources – Appleデバイス向け制作に使えるリソースまとめ

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

iPhoneやApple WatchなどのApple系デバイス向けコンテンツを制作する際に便利な、様々なリソースをまとめた記事。これなかなか素晴らしいです。まずは解像度やデバイスごとの親指守備範囲、GUIテンプレートが紹介されています。GUIテンプレートはVectorやSketchフォーマットなどがあります。次に各デバイスの外観モックアップがPSDやSketchなどのフォーマットで紹介されています。アプリを紹介するWebデザインをする際の素材としてはだいたいこの記事だけで揃う気がします。UIデザイン用の素材というよりは、紹介用のWebページ制作に使いやすい素材、という印象です。

[Freebie] 50 Free Resources for Web Designers from June 2015 – Webデザイナーのためのフリーのリソース

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

Webデザイナーのためのフリーのリソースをまとめた記事。大きくカテゴリ分けされて紹介されています。UIキットやワイヤーフレームのテンプレート、Webテンプレート、アイコン、フォント、印刷物のモックアップなどがその内容。WebデザイナーだけでなくUIデザイナーや印刷やってる人にもナイスなまとめ記事。

[Freebie] These 39 Sites Have Amazing Stock Photos You Can Use For Free – フリーの写真素材配布サイトまとめ

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

フリーのストックフォトサイトをまとめた記事。39のサイトが紹介されていて、それぞれのリンクには配布先の簡単な説明も併記されています。紹介されているサイトの内のいくつかは完全にフリー(パブリックドメイン)なので、使い勝手の良いサイトも見つかりそうです。どうしても日本人の写真素材が必要な時以外には、この手の海外ストックフォトサイトも結構使えますね。

[Bookmarklet] simple-debug.css – レイアウトのデバッグに使えるCSSやブックマークレット

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

Webサイトのレイアウトをする際に使えるブックマークレット。お気に入りバーなどに登録しておけば、対象のサイトを表示中にクリックするだけでアウトラインを表示してくれます。borderではなくoutlineという点がナイスです。試しにこのブログ表示中に使ってみましたが、ブロック要素の輪郭がハッキリと表示されました。レイアウト崩れとか起こしてる時のデバッグに使えそうです。汎用性の高いのはブックマークレットだけど、Chrome Extension形式でも配布されています。

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

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

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

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

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

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

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

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

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