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

Browse By

[CSS] Top 50 CSS Libraries, Frameworks and Tools from 2016 – CSSライブラリで振り返る2016年

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

CSSライブラリやフレームワークが50個紹介されてます。そんなにあるの!?って思いましたが、わりと細かいネタCSSなんかもあって、ゆるーい感じで見れます。例えばStar Wars Intro.css、もうこれはアレです、スター・ウォーズのイントロを再現しただけのCSSです。他にはマイクラっぽい3Dオブジェクトを作るもの、CSSだけで作るローディングアニメーションなどもあります。Brand ColorsなんかはCSSライブラリというよりはカラーピッカーですね。結構量も多いので見応えあります。

[Software] Optimage – 画像の最適化を行ってファイルサイズを削減してくれるMac App

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

画像ファイルの最適化を行い、ファイルサイズを小さくしてくれるMac用アプリケーション。フリー版は1日あたり24枚まで画像圧縮を行う事ができ、9ドル払えば無制限になるようです。サイト内にいくつかサンプルがありますが、クリックする事でBeforeとAfterを見比べる事ができます。この手のアプリって他にもあるけど、自分の場合はTinyPNGというサイトを使ってます。Webで出来る事はWebでやっちゃえばイイかー、という感じで。けどローカルアプリにはローカルアプリの良さがあると思うので、このへんは好みの問題ですかね。

[Software] Keynote Extractor – KeynoteのNote(カンペ)を含んだHTML書き出しのできるアプリケーション

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

KeynoteのNote部分、プレゼンで使ういわゆるカンペ部分を含めた形でのHTML書き出しのできるMac用アプリ。「Keynoteデフォルトの書き出し使えねぇから作ったゼ!」という流れで作られたようです。確かにNote部分はHTML書き出しされないですもんねアレ。これ使うとスライド内に置いた写真やグラフなどのキャプションとしてNote部分を使えます。とってもニッチだけど欲しい人にとっては超ありがたい機能な気がします。サイト内にはこれで生成されたHTMLのデモもあります。

[Web Design] httpster – クールなWebサイトのデザインギャラリー

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

クールサイトを紹介するデザインギャラリー。ファッションやアートなどの、意識高い系サイトが多く紹介されてます。サイト名のhttpsterが一見hipsterに見えるのも、多分狙ってるのでしょう。ソレ系の人が好きそうな作例が多いです。そういや数年前の事だけど、一時期山ほどあった「CSSなんちゃら」系のデザインギャラリーサイトってどこ行ったんでしょうね。

[CSS] cssreference.io – CSSプロパティ名から効果を学べるリファレンスサイト

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

CSSプロパティ名ごとに、分かりやすく画像で説明がされたリファレンスサイト。ページ左に並んでるプロパティ名をクリックすると、どのように使うのか、また指定するとどういう結果になるかを説明してくれます。いわゆる正引きのリファレンスサイトなんですが、アニメーション関連のものは実際にサイト内で再生できたりして、とても丁寧な印象です。あとFlexboxやAnimations、Box model、Typographyなどは固有のページにまとめられている点も分かりやすい。CSSの基礎をこれから学ぼうという人にちょうど良さそうな感じのコンテンツです。

[Photo Stock] AllTheFreeStock – CC0の写真素材サイトを横断検索できるサイト

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

いやこれ久しぶりにグっときました。CC0(パブリックドメイン)の写真素材サイトを横断検索できるサイト。CC0というだけでナイスなのに、それらのサイトがリスト化されていて、その上横断検索までできちゃう。なんともまぁデザイナーにとって素晴らしいサイトでございます。画面左側にある「Free Stock Search」→「Mutisite Search」と進む事で横断検索ができます。ちなみにこのサイト、写真素材だけでなくモックアップやビデオ、フォント、Webテンプレートなども探す事ができます。便利過ぎて鼻血出そうです。エクセレーント!

[Photoshop Plugin] Copio – レイヤー単位でコピー&ペーストができるようになるプラグイン

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

Photoshopで、レイヤー単位でコピペが使えるようになるプラグイン。書類をまたいでコピペできるようになります。そういやそういう事できないですよね。Illlustratorの方が得意、という人は地味にこの機能ありがたいんじゃないでしょうか。ちなみに自分はタブ間をドラッグ&ドロップ派です。

[Music] Generate your own Metallica logo – メタリカロゴジェネレーター

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

先週末に発売されたMetallicaのHardwired…To Self-Destruct、えーわたくしメタル野郎なのにまだ聴いておりません。もうちょいしたら聴くと思います。んでまぁこれにあやかって、Metallicaのロゴジェネレーターが出ています。文字列入れてEnter押せば、先頭と末尾が尖ったMetallicaっぽいロゴ画像が生成されます。個人的にはMaster of the Puppetsあたりのロゴが好きなんですけど、これだとテンプレート作るの大変ですよねそうですよね。