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

Browse By

Monthly Archives: 1月 2016

[Freebie] Bjango App Icon Templates – 各種モバイルAppのアイコンテンプレート

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

モバイルAppとか作ってるBjangoが、各種モバイルデバイス向けAppアイコンのテンプレートファイルを配布しています。iPhoneやiPadなどのiOSに加え、AppleTVのtvOS、Apple WatchのwatchOS用テンプレートも入ってます。あとAndroid用のものも。ダウンロードするとフォルダごとに各種フォーマットが整理されており、PhotoshopやIllustrator以外にSketchやAffinity Designer用のものまで入ってます。最近じゃSketchやAffinityでデザインする人も多いですからね。対応デバイスの数やフォーマットの多さを考えると、コレ系のアプリアイコンテンプレートとしては最強なんじゃないでしょうか。ホーム画面に置いた時のシミュレートとかを考えるとPixelresortのテンプレートとかもイイんですけどね。

[Freebie] Coverr – サイトのトップ表示に使いやすい動画素材配布サイト

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

サイトのトップページに動画をボーンと置く手法、最近多いですよね。ソレ系の用途に使えそうな動画素材が配布されています。どんなサイトにも使えるよう、まぁ言ってみれば「当り障りのないイメージ画像」的な素材が多いです。「画像はイメージです(重複」というか「個人の感想です」というかそんな感じのやつ。食べ物系、乗り物系、テクノロジー系、ネイチャー系色々あるので、サクっと使える動画素材ないかなーって時に使えそうです。

[CSS] Hint.css – マウスオーバーで吹き出し状のヒントを表示してくれるCSS

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

ボタンの上にマウスオーバーした時に、吹き出し状にヒント表示をしてくれるCSSライブラリ。独立した1つのCSSファイルとしてGithubに上がっているので、導入するにはこれをダウンロードしてCSSを読み込むだけ。あとはspanタグか何かにclass指定してヒント内容を記入するだけ。手軽に導入もできそうです。吹き出しを出す方向も上下左右色々選べるので使いやすそうです。

[Color Palette] brand-colors – Webブランドカラーの一覧サイト

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

様々なWebブランドのキーカラーを一覧にしたサイト。任意のカラーにマウスオーバーするとサイトの背景色がその色になり、クリックするとカラーコードがクリップボードにコピーされます。またカラーパレットの左上には検索窓があり、ブランド名などで検索する事もできます。紹介されているWebブランドがかなり多いので資料的価値もありそう。ブランドカラーやコーポレートカラーを模索する時の参考になりそうです。

[CSS] Creative CSS link hover styles – クールなマウスホバーアクション

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

CSSだけでデザインされた、クールなマウスホバーアクション。複数のデザインのテキストボタンが紹介されていて、どれもマウスホバーでアニメーションします。このアニメーションがどれもかっこいい。CSSだけで導入できる点もナイスです。ちなみに元記事はこちら。こういうちょっと凝った演出があると、ページそのものが一気にモダンな印象になりますな。使い勝手良さそうです。

[UI Design] UI Garage – モバイルアプリやWebのUIデザインギャラリー

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

iOSやAndroidなどのモバイルアプリや、WebのUIデザインに関するギャラリーサイト。プラットフォームや画面の場面ごとにタグ付けされていて、参考にしたい画面を素早く抽出する事ができます。UIデザインする時のネタ帳に良さそうです。しかしこれ系のUIデザインサイトって増えたなぁ。いくつもあるからその内まとめ記事でも作ってみようかな。

[Javascript] Unslider, the simplest carousel slider for jQuery – シンプルなjQueryスライダー

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

シンプルな作りのjQueryスライダー。サイトを見ると導入はかなり簡単で、script行を挿入して、マークアップは1つのスライダー項目を1つのliで囲うというもののようです。この手のスライダーではごく一般的な手法ですね。Methods & Optionsの項目を見ると、シンプルなわりにオプションについては豊富に用意されているようで、カスタマイズもしやすそうな印象。スライダー用のjQueryプラグインって山ほどあるけど、選択肢のひとつとしてなかなか良さそうな感じ。

[Film] THE ART OF BLADE RUNNER : ORIGINAL MATTE PAINTINGS AND SKETCHES – ブレードランナー撮影当時のマットペイントやスケッチがとっても素敵

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

映画Blade Runner撮影当時の、コンセプトアートやマットペインティング、スケッチ類などをまとめた記事。シド・ミード本人のスケッチがどれだけあるのかは分かんないけど、ブレードランナー好きにはタマんない内容です。34年も前に、これだけのディストピアコンセプトを描けたってのはスゴいなぁとしみじみ感じます。ただ「強力わかもと」がコンセプトアートには出てきませんね。後付けなんでしょうか。いやぁしかし続編楽しみですな。