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

Browse By

Tag Archives: 素材

[Freebie] iOS 9.3 UI Kit Sketch Resource – iOS 9.3のSketch用UIキット

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

つい昨日公開になったばかりのiOS 9.3のUIキットがもう出てます。フォーマットはSketch。9.3では9.2に比べて細かいところがちょいちょい変わった程度ですが、まぁモックアップキットは最新のもの使った方がイイですしね。ちなみにNight Shiftモード使ってみましたが、アレ暖色に寄せ過ぎると視界の色が変になりますね。スライダー控えめにしといた方が良さそうです。

[Logo] Instant Logo Search – ロゴの検索&ダウンロードサイト

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

様々な企業、またはブランドのロゴを探すことのできるサイト。ロゴは全てSVGでダウンロードできる点がとってもナイスです。またロゴも1種類だけでなく、複数種用意されているのもいい感じです(例えばAppleなら、AppStoreやApple Payなどもあります)。大きい企業ガラみのサイト制作する時ってたまに、「もう着手したいんだけど素材がねぇ!」とかなるので、そんな時の探しものに使えそうです。

[Mockup] MocKit 2.0 – 画像やWebサイトをiPhoneのモックアップにハメ込み合成できるサイト

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

任意の画像やWebサイトを、iPhoneのディスプレイ部分に表示させることのできるサイト。UIデザイン作例の確認や、Webのスマホ版レイアウトの動作確認に使えそうです。iPhoneも4色ラインナップされており、またHTMLとCSSでデザインされているのでソースコード一式をダウンロードする事もできます。ちょっとした確認作業や顧客へのデザイン確認などに使えそうです。

[CSS] Tasty CSS-animated hamburgers – アニメーションするハンバーガーアイコン

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

マウスオーバーでアニメーションするハンバーガーアイコンの作例が多数紹介されています。それぞれアニメーションや、マウスオーバー後の形が異なるので、用途によって使い分ける事ができます。導入方法についても詳しく解説されており、class名を変更するだけでアニメーションを変更できるようです。スマホ版のナビゲーション作る時に使えそうです。

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

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

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

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

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

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

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

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

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

[Photo Stock] FindA.Photo – CC0のフォトストックサイト

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

CC0(著作権放棄、パブリックドメイン)の写真素材を集めたサイト。フォトストックサイトってたくさんあるけど、CC0に限定したもの最近ちょいちょい増えてきましたね。自由に使えてライセンスの表記も必要ないので、使い勝手が良いです。キーワード検索以外にも、タグクラウドや色指定で探す事もできます。