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

Browse By

Category Archives: WebApp

[Color Palette] Colorpeek – カラーパレットを作ってサクっと共有できるサイト

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

任意のカラーを入力し、できたカラーを他人とサクっと共有できるサイト。カラーはHEX指定(16進法)でもRGBA指定でも可。RGBAの場合はアルファ値についてもちゃんと反映してくれます。カラーは何個でも作る事ができ、他者と共有する際はページのURLを送るだけでOK。TwitterやFacebookなどへの投稿もできます。サイトやロゴデザインの際、色の組み合わせなどを相談する際に便利かも。ちなみにトップページ内でロゴをクリックすると、様々なWebサービスのカラーパレット例を見る事ができます。

[Web App] Golden Section Calculator – 黄金比計算機

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

黄金比の計算機。ひとつの値を元に、黄金比にすると他方の値はいくつになるのかをサクっと算出できます。黄金比ってだいたい1:1.6くらいだから計算しようと思えばできるんだけど、こういう計算機があると色々捗りますな。長辺であるa、短辺であるb、そしてその和であるa+bのどの数値からでも算出できる点がナイスです。どれか1つ入れるだけで他全ての値を出してくれます。2カラムあるサイトの左右配分とか決める時に便利です。

[Photoshop] PSD Validator – PSDのバリデーター

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

PSDファイルのバリデートをしてくれるオンラインツール。サイト内にPSDファイルを放り込むだけでチェックしてくれます。「PSDでバリデーションってなんじゃい?」と思ったんですが、まぁようするにレイヤー名とかレイヤーグループに名前付いてるかとか、グリッド引いてあるかとか、非表示になってるレイヤーに無駄にデカい画像が入ったままになってるか、ソレ系のツッコみをしてくれるツールです。1人でデザイン物作ってるならそのへん特に気にする必要もないかもしれないけど、チームで仕事してる場合にはそのへん丁寧に仕事した方が結局は効率イイですからね。便利なんだけどある程度大きいファイルサイズだとバリデートしてくれないようです。そこだけちょっと残念。

[Web App] FotoForensics – 画像の分析ツール

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

画像のURLを指定、もしくはアップロードする事で、対象の画像の様々な情報を教えてくれるオンラインツール。ためしにURL突っ込んでみました。出てくる情報は、JPGイメージであるなら何%の品質で保存されたか(圧縮率ではなく品質なので、数字が大きい方が綺麗)、サイズ、カラーモード、オリジナル画像の表示など。もし画像に残っていれば、詳細なEXIF情報も得られます(撮影したカメラの機種やセッティングなど)。だいたいがPhotoshopで得られる情報ではあるんだけど、手元にソレ系のツールがない場合などに使えそうです。

[Generator] PlaceIt – 任意の画像をモバイルデバイスのディスプレイにハメ込んでくれるサイト

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

任意の画像をドラッグ&ドロップするだけで、用意されているモバイルデバイスのディスプレイにハメコミ合成してくれるサイト。実はこれ以前にも紹介してるんですが、対応デバイスが増えたのとドメインが変わってたので改めて紹介。以前はiOSデバイスがメインだったけど、Androidデバイスが一気に増えてました。とは言ってもこのサイトで生成できる画像は主にイメージ画像的なアレなので、Apple製に比べてデザインに劣るAndroidデバイスを使った画像にどれだけの価値があるのかは微妙かもしれません。あと少ないですがラップトップの素材も用意されています。画像ならスクリーンショット以外でも対応しているので、好きな画像を放り込んで合成できます。ちょっとした素材作りに便利ですね。

[CSS] Tridiv – ブラウザ上で動作する3D CSSエディター

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

ブラウザ上で動作する3D CSSエディター。3D CGのモデリングツールではあるんだけど、以前紹介したTinkercadとは違い出力先がCSSという点が個性的なエディター。動作するのはSafariとChromeだけなので、Webkit系のブラウザを対象としたツールという位置づけ。この2つカバーできるならほとんどのスマホに対応できますね。サイト内にはサンプルが用意されているので、まずはそれらを開くのがオススメ。出力先がCSSであるため、簡単な面と線で構成されたシンプルな3D CGモデルです。もちろんいちから作る事もでき、作ったものはHTML + CSSのソースコード一式としてリアルタイムに出力されます。またiframeを使ったembedもできるみたい。特別なプラグイン類が必要ない点もナイスです。その筋の人から見ればツールとしては低機能すぎるのかもしれませんが、ブラウザ内でこんな事までできるんだなーとしみじみと感心しました。

[Generator] MockUPhone – 画像をドラッグ&ドロップするだけでモバイルデバイスの画面に表示した画像を生成してくれるサイト

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

ズラっと並んでるスマートフォンやタブレットの中からどれかひとつを選んで、そのディスプレイ部分に任意の画像を表示させたモックアップ画像を作る事のできるサイト。各デバイスは当然ディスプレイ解像度が異なるので、あらかじめそれぞれに合ったサイズで画面用の画像を作っておく必要があります。ちなみにiPhone 5は640px * 1136px、iPhone 4 and 4Sは 640px * 960pxです。Androidは色々あり過ぎて分かりません。デバイスを選ぶとディスプレイ解像度が表示されるので、あとは「Drop files here」の部分に画面用の画像を放り込むだけでOK。生成した画像はPNGで保存する事ができ、またこんな感じで固有リンクを使った共有もできます。UIデザインする際に他のメンバーや顧客とデザイン共有する際に便利そうです。

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

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

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