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

Browse By

Monthly Archives: 9月 2016

[Generator] cssFilters.co – CSSフィルターの効果をリアルタイムに確認できるサイト

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

CSSフィルターの効果を、リアルタイム確認しつつ調整できるサイト。まずは画面上部にあるフィルター一覧から求める効果に近いものを選び、次に右側にあるスライダーを使って微調整します。納得のいくフィルターができたら「CSS CODE」タブ内にCSSコードが生成されているので、あとはそれをコピペして使うだけです。もちろんプリセット画像だけでなく、任意の画像をアップロードして使う事もできます。CSS直書きするよりもPhotoshopのように直感的に操作できるのが利点です。

[UI Design] UI Movement – クールなUI作例を動画で紹介するデザインギャラリー

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

クールなUI作例を、動画を使って紹介するデザインギャラリー。各作例のサムネールに付いてるPlayボタンを押す事で動画が再生されます。アニメーションやトランジションもUIの大事な要素なので、ソレ系のネタ探しする時に使えそうです。また各作例はパーツごとにタグ付けされているので、探したいパーツを見つけるのもサクっとできます。コレ系のギャラリーに多い「場面」ごとではなく、「機能やユーザーによる行為」による分類という点が特徴的だなーと思いました。

[Web Design] Snazzy Maps – Google Mapsのデザインテーマ配布サイト

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

最近Google Mapsをサイトに埋め込んだ時に、「そういやマップのテーマ変える方法あったなー」と思って探してみたところ見つけたのがこのサイト。テーマがいくつか紹介され、また導入方法についても掲載されています。JSぶち込んでテーマ適用するんですねこれ。色指定の変更程度ならCSSイジくるだけなのでカスタマイズもできそうです。サイトのデザインにマップのデザインを合わせたい時なんかに使えそうです。

[CSS] Simple CSS Media Queries – デバイスごとのメディアクエリー生成サイト

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

デバイスごとにメディアクエリーを生成してくれる便利なサイト。例えばiPhone 6 Plusを選ぶと、max-width : 720px and max-height : 1280pxという形でCSSを出力してくれます。デバイスキメ打ちでメディアクエリー書きたい時に便利ですね。またサイト上部には一般的なスマホやタブレット向けのメディアクエリー生成ボタンも用意されており、またOSごとに抽出する事もできます。レスポンシブレイアウトでコーディングする時に役立ちそうです。

[CSS] 18 Simple Styles for Horizontal Rules (hr CSS Design) – 罫線デザインの作例

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

罫線のデザイン作例。hrタグに対してCSS適用するだけなので簡単に導入できます。自分の場合Webで罫線デザインするのって結構やりかた忘れるので(borderだっけheightだっけみたいな)、これ系のコードスニペット用意しておくとサクっと使えるのでわりと重宝してます。地味ですけどね。けど大事ですよねこういうネタ帳。

[Web App] Launchaco – 空きドメインや、SNSの空きアカウントを一括検索してくれるサイト

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

未登録の空きドメインや、SNSでの空きアカウントなどを一括で検索してくれる便利なサイト。新規サービスやWebサイト立ち上げる時にココで検索しておけば、後になって「サービス名のTwitterアカウント空いてなかったー!」的なギャース感を回避できそうです。ドメインについてはかなりマイナーなTLDまで確認してくれます(.ninjaなんてあるんだ・・・)。あとついでにロゴタイプもいくつか作ってくれます。こういうツールとってもナイスです。

[Mockup] iOS 10 GUI 2.0 – iOS 10のPSDとSketchテンプレート

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

iOS 10のGUIテンプレート。PSDとSketchのフォーマットで配布されています。昨日ちょうど正式版公開されましたしね。わたくし初期化厨でして、メジャーアップデートのタイミングで毎年iOSデバイスを初期化しております。昨日iPhone 6 Plusを初期化&iOSインストールしたんですが、これやると新品みたいにサクサクになるので超快適でございます。iPhone 7 Plus予約したけど、まだ6で戦えるんじゃないかって思うくらい。まぁ初期化した後のAppインストール大会とかスゲぇ面倒なんですけどね。

[Web Design] 75 of the Smartest Resources for Web Designers – Webデザイナーのためのリソースまとめ

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

Webデザイナーのためのリソースがカテゴリごとにまとめられた記事。イメージとビデオ(イメージビデオではない)、アイコン、フォント、カラー、ネタ帳、モックアップとプロトタイピング素材、Webサイトビルダー、コミュニケーションツール、ラーニングコンテンツなどの内容が紹介されています。こういう記事ってちょいちょいありますが、リソースって時期によってホットなものが移り変わるので、自分の情報リソースをアップデートしたい時なんかに便利ですね。