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

Browse By

Monthly Archives: 4月 2016

[Photoshop] Fontea – Google Fontsをフォトショップで使えるプラグイン

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

Google FontsをPhotoshop内で使う事ができるようになるプラグイン。インストールする事でGoogle Fontのフォントラインナップの中から任意にチョイスして使う事ができます。現在700のフォントが用意されているそうなので、いやまぁこれなかなかスゴい数ですな。カテゴリーなどから抽出する事もできるようです。しかもこれ無料で使えるようです。フォント収集癖のあるタイポおじさんに超オススメ。俺も早速入れてみます。

[Javascript] Chart.js 2.0 – データから動的にグラフ生成を行うJS

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

用意したデータから、Web上に動的にグラフ生成を行うJavascript、Chatr.jsの2.0がリリースされていました。2.0になって複数グラフのミックスや、新しいタイプのグラフのサポート、グラフのアニメーションなどが機能追加されたようです。導入やカスタマイズについてはこちらのページから確認することができます。

[Misc] The Restart Page – 様々なOSのリスタートダイアログと、再起動時のアニメーションをまとめたサイト

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

様々なOSのリスタートダイアログと、その後の再起動の様子をアニメーションで紹介するサイト。よく出来てるなーと思ったのが、Windows系のダイアログの上にマウスポインタ持ってくると、ちゃんと白矢印になるんです。もちろんMac系なら黒矢印になります。各ダイアログはドラッグする事で移動する事もでき、「Restart」ボタンを押すとそれぞれのOSに応じた再起動プロセスがアニメーションで始まります。NextとかBeOSといった、変化球OSも用意されています。あとSystem 7系のリスタートダイアログも懐かしいですな。

[Design Gallery] iTunes Artworks – iTunes Storeに掲載されたバナーのギャラリー

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

iTunes Storeに掲載されたバナーのデザインギャラリー。MusicストアやMovieストア、Appストアを見るとiTunesのウィンドウ上部に出る横長のアレです。iPhone Appのバナーを以前作った事があるんですが、アレってAppleから「掲載するからバナー用画像このサイズで作って」って感じで依頼が来るんですよね。そうした依頼が来た際のネタ調として使えそうです。iTunes用のバナーって角が丸かったり独自のサイズだったりするので、これ専用に作る必要あるんですよね。ジェニファー・ローレンスたんかわいいよジェニファー・ローレンスたん。

[Bootstrap] Bootstrap 4 Cheat Sheet – Bootstrap 4のチートシート

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

先日アルファ版がリリースされたBootstrap4のチートシートが早速公開されてます。様々な機能がカテゴリーごとに分けて紹介されており、classをクリックすると用例のHTMLが表示されます。またHTML内で簡単な説明もされているので、どういう場合に使えば良いのかなんとなく分かります。用意されているclassの勉強する際に使えそうです。

[Misc] O RLY Cover Generator – オライリー本のカバージェネレーター

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

Web関係の仕事してる人なら誰でも知っている、オライリーメディアのアニマルシリーズ。通称オライリー本の表紙画像を作れるサイト。自分の好きなようにタイトルや著者名を入力でき、ソレっぽい表紙を作る事ができます。動物の絵は40種類、カラーパレットは16種類用意されていて、この中から好きなものをチョイス可能です。カラーパレットのチョイスが、いかにもオライリー本にありそうなちょっとくすんだ色ばかりで「あー分かってるなー」感があります。ひとつ残念なのは日本語が使えない事。ですので英語版のつもりで作りましょう。作った表紙は大きいサイズでダウンロードする事もできます。

[CSS] Flexbox Patterns – Flexboxを使ったレイアウト作例まとめ

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

Flexboxを使ったコードスニペットをまとめたサイト。ナビゲーションやタブメニューなどのよく使われるレイアウト作例が、Flexboxを使ってレイアウトされたコードと併せて紹介されています。数はそれほど多くないけど、どれもWebデザインでよく使われるレイアウトなので、コード書く時の素体として使ったりできそうです。Flexboxなら要素数の増減にも柔軟に対応できますしね。

[Art] Gearaward – コードで書かれたアートギャラリー

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

コードで書かれたアートギャラリー。ブラウザ内で動く、アーティスティックな作品を扱っています。サイトではCode-Driven Artと呼ばれているようで、クリックするとそれぞれのサイトに遷移します。見た感じSVGやWebGLなどを使った作品がほとんどで、ユーザーサイドで色々いじくれるものが多くあります。よく作るなぁ・・・という感じでコードに感動できる人に是非これひとつ。