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

Browse By

Category Archives: WebApp

[Web Application] Red Pen – 画像に注釈を付ける事のできるオンラインツール

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

画像をアップロードして注釈を付ける事のできるオンラインツール。名前の通りの赤ペン修正サービスです。サイト内にはPNGをドラッグ&ドロップするアイコンが出てますが、JPGでも試してみましたが問題なかったです。画像ファイルを放り込むとアップロードが開始され、完了し次第赤ペンモードになります。注釈を入れたい場所をクリックするとコメント入力欄が現れ、コメントと、必要であるなら名前やメールアドレスを入力して完了。あとはそのページの固有URLを人に送れば情報をシェアできます。コメントに対してリプライする事もできます。試しにコメントを入力してみたのがこちら。あの男のプレッシャーです。あそうそう、HGメッサーラ買ったんですよ。もうなんつーかスゴいカワイい。ジュピトリス製のモビルスーツの禍々しさってタマりませんな。

[Web Application] Pixlr editor – なかなか高機能なオンライン画像エディタ

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

高機能なオンライン画像エディタ。メニューバーがあってその下にオプション項目があって、左側にはツールバー、右側には情報やレイヤーなどのパネル類が並ぶという、いかにもPhotoshopっぽい作りです。Photoshop使った事のある人ならすぐに使えそう。オンラインエディタらしく「URLから画像を開く」なんていうコマンドもあってなかなか便利です。Photoshop入ってないけど画像編集したい時なんかに便利かも。あとトップに戻るとMobile用の簡易編集Appなんかも用意されてます。簡易な編集作業であるならPhotoshop代替にも使えそうです。

[Web Application] Remove Image Backgrounds – 画像の背景をアルファ化してくれるサイト

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

画像をアップロードして消したい背景と残したいオブジェクトを簡単に選択するだけで、背景部分をアルファチャンネル化してくれるサイト。例を見るとすごい簡単な感じがしたので、試しに江頭先生の画像を使ってやってみました。左のサムネールがその様子。これスゴいっすわ。髪の毛のモヤっとした感じとか綺麗に切り取ってくれます。背景がゴチャっとしてる画像は苦手だろうけど、切り取り作業中に輪郭部分に黄色く太い線が出る様子とかスゴく分かりやすいです。Photoshopがない時の代替や、デザイナーでない人にオススメのツール。いやこれ良く出来てます。

[Generator] picresize – 画像の簡易編集ができるオンラインツール

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

画像の簡易的な編集ができるオンラインジェネレーター。やれる事は画像の切り抜き(トリミング)、回転、リサイズ、簡単なエフェクト。編集はサイト上で確認でき、JPG、PNG、GIF、BMPの各種フォーマットで保存できます。手元にPhotoshopがない時や、デザイナーではないけど画像の加工をしたい場合などに便利ですね。

[CSS3] Convert Photoshop Drop Shadows to CSS3 Box & Text Shadows – フォトショップのドロップシャドウ指定を入力すると、CSS3での指定に変換してくれるサイト

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

Photoshopのレイヤースタイル内で指定したドロップシャドウの値を入力すると、CSS3での指定に変換してくれるサイト。数値は手入力なので手間といえば手間ですが、PSDでデザインしたものと同じプロパティ指定に正確に変換してくれるのは便利です。全く同じ影を描画したいんダ!という神経質なデザイナー・コーダー向きかもしれません。自分はそのへんいいかげんな正確なのでだいたいオッケーならオールオッケーという感じで、いつものらりくらりとやっておりますが。

[Web Application] Photoshopped Image Killer – 画像がフォトショップされたかどうかを見極めてくれるオンラインツール

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

画像をアップロード、もしくはURLを入力する事で、その画像がフォトショップによって加工されているかどうかを判断してくれるオンラインツール。オモしろいのでURLをいくつか叩いてみました。するとフォトショップで加工されている場合は、どう加工されているのかを簡単に判断してくれました(シャープかかってるとか色補正かかってるとか)。またJPGへの書き出し工程を2回経ているなど、人の目ではほぼ判断がつかない点まで指摘してくれて、Photoshop使う仕事を10年以上やってるけど「へぇ〜」とか思いました。っていうか「Photoshopped」って言葉、「ググる」みたいに使われてるんスかね。お見合いサイトで女性を値踏みする際などに是非これひとつ。

[Web App] Forecast – クールな天気予報Webアプリ

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

その名の通り天気予報のWebサービス。PCから見るとただデザインがクールなだけの天気予報サイトなんですが、iPhoneからアクセスすると「ホーム画面に登録してネ!」と促され、言われるままに登録して立ち上げると、なんだか本気でかっこイイWebAppとして機能します。ここで登録するのは単純なブックマークなので、AppStoreからのインストールも必要なく、アプリっぽく振る舞うWebサイトとして使う事になります。アイコンのアニメーションしかりシンプルなUIデザインしかり、色々素晴らしいです。使い始めて最初は温度の表示が“華氏(℉)”になっているので、見慣れた“摂氏(℃)”表示にしておくとナイスです。

[Web Application] Is it WordPress? – 対象サイトがワードプレスで作られているかどうかをチェックするサイト

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

対象サイトがWordpressで作られているかどうかを判断してくれるサイト。ドメインを突っ込んでエンター押すだけで判断してくれます。サイトリニューアルの依頼が来た際に、対象サイトのバックグラウンドを調べる際に役立ちそうです。ただしドメイントップでないと判別できないらしく、このためサイトの一部だけがWordpressで管理されてるようなタイプのサイトには効かないみたい。ちなみにWordpressかどうかを判断する手段は他にもあって、例えばソースコード内に「wp」や「wordpress」といった文字列がないかどうかを検索する、ドメインの後ろに「/wp-admin」を付けてみるなどがあります。サクっと調べたい時にどうぞ。