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

Browse By

Monthly Archives: 2月 2016

[Freebie] Smartmockups – モバイルAppやPCのスクリーンショットを、各種デバイスのディスプレイに合成できるサイト

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

モバイルアプリやPCアプリのスクリーンショットを、各種デバイスのディスプレイ部分にハメ込み合成できるサイト。用意されているデバイスはiPhone、iPad、Mac、Apple Watch、Android端末など、多くの種類が用意されています。Apple Watchあるのがレアですね。モバイルApp制作してて、サイト内やチュートリアル画面で使い方を見せる場面の画像制作に使えそうです。サイト内でトリミングができる点もナイス。

[Web Design] Can I use… – Webの様々な技術を、各ブラウザがサポートしているかどうかをサクっと調べられるサイト

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

Webの様々な時術を、各ブラウザ(iOSやAndroid端末も含む)がどの程度サポートしているのかをサクっと調べる事のできるサイト。試しに「Flex」と入力すると、Flexboxのサポート状況が表示されました。背景が黒くなっているライン以降のバージョンでサポートされている、という見方です。また国の指定をしておけば、その国においてどの程度サポートブラウザが普及しているかも知ることが出来ます。ちなみにこのサイトで得られる内容は、The (Unofficial) CanIUse Embedを使う事でEmbed出力する事もできます。アンオフィシャルな方法らしいけど、サイト内で引用したい時に使えます。新しめのCSSプロパティを使おうかどうしようか判断する時に便利ですね。

[Sketch] Sketch App Rocks! – Sketchプラグインや各種リソースを紹介するサイト

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

Sketchのプラグインや知識、モックアップ類などの.sketchファイルなどの各種リソースを紹介するサイト。Sketchユーザーにオススメ。プラグイン、リソース、知識(チュートリアルとか)、イベント、その他とカテゴリー分けされて色々なものが紹介されています。右上の「+」マークから自分で投稿する事もできます。

[Misc] This Redditor Is Turning Random People’s Photos Into Movie Posters – どんな写真でも映画のポスターにしてしまう職人さん(技術の無駄遣い)

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

どんな写真でも映画のポスター風に加工してくれる人がRedditで話題になっています。「あーこの手の職人さんてどこの国にもいるんだなー」とか思って見てみたらビックリしました。クオリティがはんぱない。加工技術といい発想といい、プロの仕事ですねこれ。特にスゲぇなーって思うのが発想の柔軟さ。元がなんでもない写真なのに見事に「何か意味がありそうな」1枚に変化しています。素材のロテイトやトリミングによって意味を持たせるという手法が多い気がします。ネタとしてもスゴいんだけど、グラフィック・デザインのネタ帳にもなりそうです。リンク先は彼の投稿をまとめた記事だけど、Redditの方ではまだ続いているようで、新しい作例が随時追加されています。

[CSS] CSS triangle generator – CSSだけで描画する三角形のジェネレーター

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

CSSだけで描画できる三角形のジェネレーター。方向とタイプ(Equilateralは縦横比固定、Isoscelesは高さと幅を個々に指定、Scaleneは3点を個々に指定)、サイズ、色を入力する事でリアルタイムに三角形の形が変わります。その下にCSSが生成されるので、あとはコピペするだけ。サイト内でコード生成されるのはCSSだけなので、あとはこれを適当なボックス要素にClass指定すれば完了です。CSSで描いちゃえば画像使わなくて済むので便利です。

[CSS] color filter.css – CSSブレンドモードを使ったカラーフィルター

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

CSSブレンドモードを使ったカラーフィルターのプリセット。CSSブレンドモードって、Photoshopとかでやる「乗算」とか「スクリーン」といった描画モードの適用をCSSで行うものなんですが、画像・背景色(ベタ or グラデ)・モードの3つを指定して初めて適用されるものなんですよね。このcolorfilter.cssを読みこめば、すでにいくつかの色指定と描画モードがプリセットされているので、適用が楽になるYO!というもの。カラーフィルター機能だけに絞ったフレームワークとも言えます。Spotifyの「DuoTone」と呼ばれるデザイン手法にインスパイアされて作ったそうです(これかな?)。用意されたプリセット描画モード、どれも趣味がイイので使い勝手が良さそうです。この手の画像加工をCSS側で行えるようになると、より非破壊加工が進んで素材の汎用性が高まりますな。

[Misc] ippy – 顔文字のコピペサイト

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

顔文字のコピペサイト。顔文字は「新着」、「ポピュラー」、「ランダム」で並び替える事ができ、また自分で作ったものを投稿する事もできます。日本のサイトではないので様々な国の文字コードが混在しています。クリックすると「コピーできたよ!」って言われるんだけど、できてないんですよね・・・。Windowsならできるのかなこれ。まぁ普通にコピペする分には問題ありませんが。顔文字辞書替わりに使えそうです。

[UI Design] Collect UI – 毎日更新されるUIデザインギャラリー

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

モバイルAppやMac, PC用アプリのUIデザインギャラリー。毎日更新されているようで、結構な数が紹介されています。この手のギャラリーサイトお約束の、場面ごとにタグ付けされて管理されているので、お目当ての画面だけの抽出などは楽に行えます。クリックするとデザインとソースへのリンクが表示されるだけのシンプルな作り。UIデザインする時のネタ調として便利そうです。