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

Browse By

Tag Archives: WebApplication

[Web Application] Tinkercad – ブラウザベースの3Dモデリングツール

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

これはスゴい。ブラウザベースの3Dモデリングツールで、WebGLベースで動作します。そのためSafariでは動作不可。FirefoxやChromeなどでお試しください。とりあえずサクっと始めるために「Start Editor」ボタンをクリックしましょう。するとプリセットされたオブジェクトがすでにある状態で編集可能な画面になります。オブジェクトをクリックするとハンドルが出るので、移動やシェイプの編集ができます。右クリックドラッグで視点の移動ができ、画面右側にあるパレット内のプリセットオブジェクトをステージにドラッグすれば、新規オブジェクトの追加ができます。楽しくてしばらく触ってましたが、ブラウザベースでこんな事できるようになったんですね。いやこれめっちゃ楽しい。作ったモデリングデータは3Dプリント用に書き出す事ができるそうです。最近3Dプリント代行してくれる業者も出てきてるので、こういう需要多そう。いやースゴいっすこれ。

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

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

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

[Web Design] Free Responsive Testing Tool – レスポンシブレイアウトの動作確認を行えるオンラインツール

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

レスポンシブレイアウトで制作したサイトの動作確認を行えるサイト。サイトトップでは使い方の紹介があるので、「Start Testing」をクリックする事で実行できます。テスト実行後、ページ左上にあるURL入力欄に対象サイトのURLを突っ込むと、画面下部に対象サイトがロードされます。画面上部にはスマートフォンやタブレット、デスクトップPCのおおよそのピクセル数が定規で表示されてるので、確認したいウィンドウ幅に取っ手を調整する事で簡単に確認ができます。「そんなの別にブラウザのウィンドウ幅変えればイイじゃん」と思うかもしんないけど、Macでフルスクリーン表示してる場合とか、あとウィンドウ幅あんまし変えたくない場合なんかに便利です。さらにページ右上にあるプレビューモードを使うと、iPhoneやiPadの画面に表示した際の簡易的なプレビューが行えます。レスポンシブサイトのプレビューツールとしてはなかなか高機能で優秀かと。ナイスです。

[Web Design] 33 Essential Web Design Tools You’re Probably Not Using – Webデザインに使えるオンラインツールまとめ

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

Webデザインで使えるオンラインツールがまとめられた記事。33のツールが紹介されてます。背景素材、テクスチャジェネレーター、カラーパレット、プレイスホルダー生成、Photoshopプラグイン、ワイヤーフレームなどの手書き用PDF、ローダーなどのアニメーション素材ジェネレーター、トリミングやリサイズツール、Jpeg圧縮、画像加工、アイコン素材などが主な内容。数が多いのでなかなか盛りだくさんです。これ系の記事はよく見るけど、初見のサイトもあったので紹介しときますね。

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

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

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

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

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

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

[Web Application] DPI love ♥ – ディスプレイレゾリューションからDPIを算出してくれるサイト

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

ディスプレイの縦横のピクセル数から、DPI(Dot per Inch)を算出してくれるというシンプルなWebサイト。ピクセル数とディスプレイのインチサイズを入力すると、何DPIなのかを出してくれます。機能としてはこれだけのシンプルなサイト。また一般的なApple製品のディスプレイサイズについてはページ下部に一覧になってます。これ見ると、iPhoneってドット詰まってんだなーとか思います。何の役に立つかはさておき興味深い。

[Color] Colourco.de – マウス操作で簡単にカラーパレットを作成できるサイト

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

マウス操作で簡単にカラーパレットを作成できるサイト。最初はブラウザウィンドウ内に1色表示されていて、マウスを上下に動かす事で彩度と明度が、左右に動かす事で色相が変わります。クリックするとその色がキープされて次の色作成に移ります。これを繰り返す事で何色でも追加できるようで、作成した色はそれぞれ#始まりの16進法、rgb、hsl、hcl、labで指定する際の値が表示されます。作った後で必要のない色はゴミ箱アイコンで捨てる事ができ、またパレットの入れ替えもできます。さらにサイト左上のボタンからは、PNGでのカラーパレット出力とCSSでのコード吐き出しまでできます。いやこれイイですね。サクっと配色したい時なんかに良さそうです。