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

Browse By

Category Archives: WebApp

[Generator] Favicon Maker – シンプルなファビコンメーカー

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

シンプルなFaviconジェネレーター。画像ファイルをサイト内にドラッグ&ドロップするだけでFavicon用ファイル一式を生成してくれます。試しにやってみたところ、ICOファイルに加えて16×16〜256×256サイズのPNGも出力してくれました(iPhoneでホーム画面に追加した時用のものかな)。あと記述用のサンプルHTMLも同時に吐き出されます。Favicconって.icoファイルだから、Macで作るのめんどくさいんですよね。サクっと作りたい時にナイスです。

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

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

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

[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ワードとか出ちゃうような気もしますが。

[Color Palette] Color Calculator – 色相環を使ったカラージェネレーター

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

色相環を使ったカラージェネレーター。これすっごい便利です。Step1で任意の色をまずは選んで、Step2で配色形式を選ぶ事で簡単にカラーハーモニー(配色)を抽出する事ができるというもの。配色形式はボタンで表されているので分かりやすいです。左から補色色相、彩度違い(これなんて言うのか分かんない)、隣接色相、対照色相、中差色相、テトラード(4色配色)となっており、最初に選んだ1色をキーカラーに、それぞれ対応する色を吐き出してくれます。色はHEX指定で生成されますが、クリックするとCMYKとRGBでの指定値も見ることができます。配色に困った時にとってもナイスです。けどまぁあまりこうしたセオリーに頼りすぎるのも良くないとは思うんですけどね。

[Color] HSL COLOR PICKER – HSL色空間によるカラー作成ツール

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

HSL色空間によるカラー作成ツール。HSL色空間についてはこちらを参照。まぁアレですね、Photoshopで言う「色相・彩度」ツールで出てくるアレです。色相・彩度・輝度の3つのスライダーを使って色を作るやつです。1番目は色の種類、2番目は色の強さ、3番目は色の明るさを指定できます。加えて4番目はアルファ値(透明度)が指定できるので、半透明な色も作成可能。作った色は画面左にあるカラーパレットに反映され、作ったカラーを人に伝えたい場合はURLを教えるだけでOK。またページ下部には、作成した色のHEX指定、RGBA指定、HSLA指定の3種類の数値がリアルタイムに反映されます。サクっと色作って共有できる点がナイスです。