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

Browse By

Category Archives: WebApp

[Web Application] Precursor – リアルタイムに他者と共有できるオンラインのキャンバス

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

リアルタイムに他者と共有ができる、オンラインのキャンバス。Precursorに行くとまずグリッドの付いたキャンバスが出ますが、この時点ですでに固有のキャンバスIDが割り振られ、誰かと共有できる状態になっています。共有するにはURLを送るだけでオッケー。同じページにランディングした人には同じキャンバスが見えてるという仕組み。試しにMac, iPhone間でやってみましたが、ちゃんとiOS相手でも共有できるようです。しかも描いた結果の反映が速い。ほとんどリアルタイムに描画内容が反映されます。なんかスゴいですこのスピード。他には右クリックでツールパレット、画面の左上のハンバーガーアイコンからは、共有している相手のリストやチャット画面などができます。テキストで話しながらやりとりできるので、オンラインでの打ち合わせなどに使えそうです。画像とか貼れるともっとイイなーと思いました。

[Web Application] Polarr – 高機能なオンラインフォトエディタ

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

高機能なオンラインフォトエディター。ブラウザ内で動作する簡易的なグラフィックアプリです。できる事は露出や彩度、色補正などのよくあるフォトエディット機能。あとInstagramのようなフィルター機能もあります。作業をした画像ファイルはダウンロード以外にも、Facebookへの書き出しやクラウドドライブへの書き出しにも対応しています。複数の写真をサムネールで管理する機能もあるようです。Photoshopが手元になかったり、そもそも持っていないけど写真の補正くらいはしたい、という場合に便利そうですね。

[Generator] ImageGlitcher – 画像をグリッチノイズ加工してくれるジェネレーター

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

画像をグリッチノイズ加工してくれるサイト。グリッチノイズってあまり聞き慣れない単語だけど、よく映画やMVの演出で使われる、壊れかけのブラウン管TVで見るようなノイズの事です。使い方はサイト内の「Drop Image Here」に画像ファイルを放り込んで、「Glitch It!」ボタンを押すだけです。その際ノイズの深さとブライトネスを調整する事ができます。気に入った加工ができたら「Save Image」ボタンで画像単品で表示できます。試しに自分で撮ったガンプラの写真で試してみましたが、左のサムネのようになりました。デジタルノイズ加工したい時に使えそうです。

[Generator] Vector Magic – ビットマップ画像をベクター画像に変換してくれるサイト

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

ビットマップ画像をベクター画像に変換してくれるサイト。「Upload Image To Trace」ボタンから画像をアップロードすると、ちょっと待たされた後でベクター形式に変換してくれます。対応する画像フォーマットはJPG, GIF, PNG。変換後のフォーマットはEPS, SVG, PDFに対応しているようです。試しにいくつか放り込んでみましたが、コントラストのハッキリした画像なら結構綺麗に変換してくれます。Illustratorのライブトレースよりもこっちの方が使えるんじゃないかなという印象。Webフォーマットのデザイン素材を印刷に流用する時なんかに使えそうです。

[Generator] Coolors – ランダム生成してくれるカラーパレット

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

ランダムにカラーパレットを生成してくれるジェネレーター。使い方は簡単で、スペースキーを押すだけで5色のカラーをランダムに変更してくれます。またこの際、キープしたい色をクリックするとロックでき、ロックされてない色のみを変更する事もできます。それだけの機能のシンプルなジェネレーター。またURLをコピーするだけでこのような形でパレットを他人と共有する事もできます。例えばキーカラー1色のみ決まってて他の色どうしようか迷ってる時なんかに便利そうですね。

[Tool] 16:9 Aspect Ratio Calculator for content area width – HD動画ファイルのサイズ変更に便利な計算機

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

HD動画ファイルのサイズを変更する際に便利な計算機。16:9のアスペクト比を維持したまま、横幅を変更した際に縦幅はいくつになるのかを算出してくれます。単純な比率計算なので手元でもできますが、Youtubeの動画をembedで貼る時に便利だなーと思ったので紹介。ちなみに従来型のアスペクト比4:3の計算機もあるようです。比率が固定されているので低機能ではあるけど、シンプルで使いやすいですな。

[Gif Gif Gif] GIF YouTube – Youtubeに上がってる動画をGifアニメ化してくれるサイト

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

Youtubeに上がっている動画をアニメーションGifにしてくれるサイト。いやこれ便利ですよ。アニメGifにしたい!って思った時にいちいちPhotoshop立ちあげなくて済みます。作り方は簡単なんだけど、ちょっとコツがいります。まずはGifにしたい動画をYoutubeで普通に表示させて、ブラウザのアドレス欄のドメイン部分「youtube.com」を「gifyoutube.com」にします。つまり「gif」の3文字を追記するだけ。それでエンターを押すと、gifyoutube内で該当の動画を開く事ができます。あとはGifにした時に再生を開始したい場所までスライダーを動かしてCreate Gifボタンを押すだけ。Gifファイルの長さについてもいくつかの選択肢から選ぶ事ができますが、まぁ短い方が軽いファイルになるのであまり長くしない方がイイですね。左のサムネールはこのサイトを使って作ったアニメGif。こういうのもサクっと作れます。ネタ動画作る時にとっても便利です。ドーン!

[Web Application] What’s my Viewport Size? – ブラウザウィンドウのサイズを教えてくれるサイト

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

使っているブラウザウィンドウのサイズを教えてくれるサイト。開くだけで、縦×横のピクセル数を表示してくれます。ついでに使っているOSのバージョン、ブラウザの種類、ブラウザエンジンの種類とバージョンも教えてくれます。
Web制作してるとたまにお客さんに「崩れるYO!」とか指摘受ける事ありますが、その際に必ず聞くのが「ブラウザの種類とバージョン教えてください」という質問。けどお客さんによっては「なにそれおいしいの?」というレベルの人もいるので、そういう時にここ開いてもらうというのもイイなと思いました。