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

Browse By

[Video] Pixels Videos – CC0の動画素材サイト

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

CC0のフォトストックサイトPixelsが動画素材も扱うようになったみたいです。動画もやっぱりCC0。個人的な用途だけでなく、商用目的にも使える点がとってもナイス。最近だとサイトトップのDiv背景に動画ドーンとかよくありますしね。印象的な動画素材探しに使えそうです。

[CSS] Grid Garden – CSS Grid Layoutの仕組みを学べるコンテンツ

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

CSSを使ってグリッドレイアウトを行うCSS Grid Layoutの仕組みを、基本から応用まで順を追って学ぶ事のできるコンテンツ。このCSS Grid Layoutは「display: grid;」を使って行う新しいレイアウト手法なんだけど、格子状に区切って長方形をそれぞれ長さを決めつつ並べていくというもので、懐かしのTableレイアウトにちょっと近い印象を受けました。しかしまぁアレですな、「やっとFlexboxレイアウトを覚えたところでまた次の手法かよふじこふじこ」的な感じはありますな。けど新らしいものは否応なしに覚えていかないといけない業界ですもんね仕方ないですよね。思い起こせばTable→Float→Flexboxとレイアウトに使うタグって色々ありましたよね・・・。
ちなみにSafariはこのdisplay: grid;をまだサポートしていないので、このコンテンツ自体表示できません。Chromeあたりでお試しください。

[Film] A Movie Poster A Day – 1日1枚、映画のポスターをリデザインした人の記録

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

1日に1枚、映画のポスターをリデザインしたデザイナーの人の記録。2016年に行った内容の記録、つまり366枚(うるう年だったからね)が掲載されています。元々の映画のポスターに比べるとシンプルで洗練された趣が強く、
あと本来のポスターと決定的に違うのは、前者が映画を観に来てもらうためのものに対して、こちらはどちらかというと映画を観た人向けの内容であるという点。Gattacaの螺旋階段や、SAWの糸鋸、The Truman Showの監視カメラ、SE7ENの段ボール、Moonのリフレクトエフェクトなどは、どれも映画を知ってればニヤっとできるものばかり。グラフィックデザインの作例として秀逸なだけでなく、映画好きの人にもオススメのデザインギャラリーです。初日にPulp Fictionをやっちゃうあたりも好き(ジュールスが横になってるのは、おそらくカウチに寝ていたチンピラからの目線)。

[Web Application] Sketch Web Viewer – Sketch 43ファイルのビューアー

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

Sketch 43ファイルのオンラインビューアー。Sketchの現行バージョンは42だけど、次の43からはファイルの構成が大きく変わるそうです(この記事で詳しく解説されてます)。で、そのSketch 43のファイルをオンラインで簡単に確認できるサイトがこれ。サイト内に放り込むだけで見るする事ができます。とは言っても今手元にSketch 43ファイルがある人はそうそういないと思うので、サイト内に用意されているDemo fileを使う事でどういうものか試してみる事ができます。まだSketch 43 Betaを使ってない人や、手元にSketchがない状態で内容を確認したい時なんかに使えそうです。

[UI Design] Android Nougat Free GUI – Android 7.0 ヌガーのUIテンプレート

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

Android 7.0 NougatのUIテンプレートが配布されています。フォーマットはPhotoshop、Sketchというおなじみのものに加え、Craftのライブラリーという形でも用意されています。Android AppのUI制作や、Material Designに準拠したWebサイト作る時なんかに使えそうです。

[CSS] Animista – アニメーションに関するCSSのジェネレーター

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

CSSアニメーションのジェネレーター。CSSでできる様々なアニメーションのサンプルが用意されていて、CSSコードをコピペして使う事ができます。アニメーションはカテゴリに分けて紹介されています。ベーシックなもの、アニメーションイン(導入)、アウト(はけ)、テキスト関連、注意を引く動き、背景画像に関するアニメーションの6つ。どの項目にもオプションが用意されていて、動きを細かく調整する事ができます。気に入ったものができたら右上にあるコード生成のボタンからCSSコードをコピーできます。オプションの内容も含めるとかなり多機能で、プレビューしながらコード生成できる使い勝手の良さもとってもナイスです。

[Sketch Plugin] Egmont plugin – SketchでiOS角丸を描けるようになるプラグイン

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

iOS 7から変わったアイコンの角丸のカーブを、Sketch内でも描画できるようになるプラグイン。サイト内では「Squircle shapes」と言われていますが、どうやらこれ「Square Circle」の事みたいです。ただ角がラウンドした四角形ではなく、カーブの始まりは緩やかで徐々にキツくなっていくという、独特のシェイプの事を指しているようです。実際このカーブって簡単に描けないので、数値指定するだけで描画できるようになるこのプラグインは、iOS AppのUI制作には便利に使えそうです。ちなみに通常の角丸とSquircle角丸の違いはこのGif見ると分かりやすいかも。

[Web Design] BigPicture – 軽快に動作するModal画像ビューアー

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

サクサク動くLightbox亜種。他のJSライブラリなどは必要とせず、これ単独で動くようです。クリック or タップで画像だけがフレームレスで開いて、再度クリックで収納。とってもシンプル。スマホページではわりと敬遠されるModal表示も、こういうシンプルなものなら使いやすそうです。ロードに時間かかる場合はローディングスピナーが出て、リンク切れしてる場合にはダイアログ出してくれるあたりが新設。また画像以外にビデオもイケます。構成がシンプルなだけに導入も簡単そうです。