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

Browse By

Tag Archives: WebApplication

[Web Application] Anonymizer – 画像の顔部分にモザイクをかけてくれるサイト

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

画像をアップロードする事で、顔部分にモザイクをかけて匿名化(anonymise)してくれるサイト。アップロードするだけで画像内の顔部分を認識し、ページ左側にあるスライダーを上下させる事でモザイクのかかり具合を調節できます。試しにいくつか画像をアップしてみたんですが、たまーに顔認識が抜けますね。それほど正確ではないようですが、手元にPhotoshopなどの画像編集ツールがない時にサクっとモザイク入れたい時に使えそうです。っていうか顔認識がWebでこんなに簡単に出来るってのが驚きです。

[Web Design] Lavish – 画像からカラーパレットを抽出し、さらにBootstrap用のカラースキームを出力してくれるサイト

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

オンライン上にある画像ファイルのURLを入力するだけで、画像内で使われている色をカラーパレット化し、さらにTwitter Bootstrap用のカラースキームにまで出力してくれるという便利なサイト。これ人から教えてもらって早速使ったんだけど、すんごい便利です。画像ファイルを指定するとCSSコードが出力されるんだけど、その時点ですでにこのサイトそのものにカラースキームが指定されてます。Step2では各色をどの部位に割り当てるかの微調整もでき、色味の調整をこのサイト内だけで行えるという点がとってもナイス。カラーパレットのサンプルも充実してます。ちなみに左のサムネールは、大好きなSoundgardenの“Superunknown”(最近リマスター版が出た)のジャケットをサンプルしてみたもの。キーとなるアートワークや画像がすでにあって、サイトの色合いをそれに合わせるという手法の際に便利そうです。

[Music] Jazz And Rain – 雨の音と一緒にジャズが聞けるオンラインミュージックプレイヤー

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

雨の音と一緒にジャズが聞ける、オンラインのミュージックプレイヤー。雨の音は常にしてるので、再生ボタンを押すだけでそれに加えてジャズが聞けます。音楽と雨音はそれぞれにボリュームスライダーが付いてるので、ちょうどいいくらいのバランスに調整ができます。雨音がずっとしてるってのがとってもナイス。落ち着きます。なんかちょっとオシャレな喫茶店ぽいです。職場とかでの流しっぱなし音楽にちょうどいい感じです。ちなみに自分はMusictonicとかよく使ってます。まぁ流す音楽はヘヴィロックとかメタルとかストーナーとかソレ系のアレばかりですけど。

[Web Application] Compressor.io – 画像ファイルを綺麗なまま圧縮してくれるサイト

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

画像ファイルを綺麗なまま、より圧縮してくれるサイト。対応しているフォーマットはJPG、PNG、GIF、SVGで、サイト上のサンプルでは700kbを250kbまで圧縮してます。見た目には圧縮による劣化はほとんど分かりません。いやこれ素晴らしいですね。俺普段これ系の圧縮作業する際はmini your photos使ってるんですが、これならアプリ立ち上げる必要もないし便利ですな。イメージを大きく印象的に使いたい時なんかに使えそうです。

[Shortcut] ShortcutMapper – メジャーなアプリケーションのショートカットを分かりやすく見ることのできるサイト

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

一般的によく使われているPC用アプリケーションのショートカットを、分かりやすく見ることのできるサイト。現在見ることのできるアプリケーションは、LightroomとPhotoshopとBlenderの3つですが、この作業は進行中のようで、今後も対応アプリは増えるみたいです。またGitHubを使って追加していくこともできるようです。リンク先はPhotoshopにしてありますが、画面左上のプルダウンメニューからアプリケーションや、そのバージョンなどを選ぶ事ができます。またMac, Win, Lynaxのプラットフォームや、キーボード配列(残念ながらJPキーボードはありません)なども選ぶ事ができます。各ショートカットは、基本通常時のものが表示されていますが、CmdやOption、Ctrlキーを押す事で、それぞれを押した時のものに変化します。ショートカットを覚えたい人や、覚えてたけど忘れちゃったショートカットを思い出す際に使えそうです。見やすさと汎用性において素晴らしいWebアプリ。

[Web Application] snapnote.io – 画像に注釈を入れて、それを共有できるオンラインツール

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

画像をアップロードして、それに対して四角や矢印を使って注釈を入れる事ができ、さらにそれを共有する事のできるオンラインツール。機能がごくシンプルなので、簡単に使う事ができます。まずはサイト内に注釈を入れたい画像を放り込みましょう。するとサイトにアップロードされてページ内に表示されます。これで準備はオッケー。あとはページ上部にある四角や矢印、テキスト入力のツールを使って注釈を入れます。一通り作業ができたら右上にあるクラウドアイコンをクリックすると、共有用の固有URLが吐出されるという仕組み。このURLを共有したい人に教えるだけで注釈付きの画像を見せる事ができます。コレ系の作業ってよくエクセルで指示が飛んできたりしますが、デザイナーの多くはMacユーザーで、エクセルを立ち上げる事を嫌います(MSの仕事が悪いからね・・・)。このツールだと指示を出す方も受ける方もサクっとできるので、生産性も高まりそうです。

[Web Application] WHAT’S MY BROWSER – ブラウズ環境を詳細に判別でき、かつそれを他人とシェアできるサイト

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

ブラウズ環境を詳細に判別してくれて、かつその内容を他人とシェアできるサイト。アクセスするだけでブラウザの種類とバージョン、OS、クッキーのOn/Off、Flashのバージョン、Javaのバージョン、ブラウザウィンドウとスクリーン全体のサイズ、カラー環境などを一覧で出力してくれます。そしてこのサイト便利なのは、アクセス後に吐出される固有のURLを他人に教えるだけで、これらの情報を他人と共有できる点。例えばWeb制作時に顧客の環境を知るためにこのサイトを見てもらう、という使い方とか便利だと思います。まぁそこで「IE6」とか言われるとFワードとか出ちゃうような気もしますが。

[Web Tool] PageSpeed Insights – ページのロードスピードを検証し、問題点も指摘してくれるオンラインツール

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

Webページのロードスピードを検証し、問題点(ロードの遅い部分)を指摘し、さらにその解決策まで提示してくれるオンラインツール。Google Developのツールなので知ってる人も多いかも。自分はこんなツールある事を今知りました。診断方法は簡単で、フォーム内にURLを入力して分析するだけ。診断のために少し待たされた後、ページ内のどこがボトルネックとなっているかを教えてくれます。モバイルでの表示とPCでの表示それぞれ個別に診てくれる点がナイスです。個々のユーザーのネット接続スピードは早くなったとはいえ、サイト内でJSとか使いまくってると、どこかにボトルネックできちゃったりしますしね。サイトの快適性を調査する際に便利なツールです。