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

Browse By

Tag Archives: WebApplication

[Prototyping] Wireframe.cc – ちょっと変わった手順でワイヤーフレームを描けるWebサイト

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

ちょっと変わった手順でWebのワイヤーフレーミングができるWebサイト。どう変わっているのかというと、通常この手のドローツールではまずツールを選んでから描画する場合が多いのに対して、このサイトではエリアを選択後、そこが何のエリアなのかを選択する仕組みになってます。なので画面上にツールバーの類は出ていません。最初は変な感じするけど、よく考えたらこの描画プロセスの方が効率イイよな、とか思いました。現状TwitterかFacebookを使ったシェア方法しかサポートされてませんが、今後固有URLを使ったシェア方法などがサポートされるようになれば便利だなーと思いました。

[Generator] PlaceIt by Breezi – MacやiOSデバイスのディスプレイに、任意の画像をはめ込んでくれるオンラインツール

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

MacやiPhone、iPadのディスプレイに、任意のスクリーンショット(まぁ画像ファイルなら何でもいいです)をはめ込んでくれるオンラインツール。テンプレートのお尻の方に少しだけWindows PhoneやAndroid端末もありますが、オマケ程度です。元となるデバイスのディスプレイサイズによって推奨されるスクリーンショットのサイズは異なりますが、まぁアップしさえすれば何でもイケます。アップロード方法で最も簡単なのはブラウザウィンドウ内に画像を放り込む手法。後はサイト側で勝手に処理してくれます。他にもすでにオンラインにある画像であれば、URLを指定する事もできます。Photoshopを使っていちいちこういうの作るのが面倒な方に是非これひとつ。テンプレートとなる写真もわりとセンスの良い構図が多い点もナイス。

[Web Service] Throwww – タイトルと本文だけの簡単なテキストを保存し、共有できるツール

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

タイトルと本文だけの簡単なテキストをサイト上に保存し、固有のURLによってそれらを共有できるオンラインツール。サイト内に直接インラインで入力して「Post Anonymously」ボタンを押すだけで保存され、保存した記事の固有URLが生成されます。あとはそのURLを人に教えるだけ。構造上匿名性が高そうな感じなので、不特定多数の相手にシェアしたいテキストの保存場所としてナイスな感じ。ちょうど「www」って感じで草も生えてますしねw

[Generator] Duri.me – 画像をコード化してくれるジェネレーター

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

画像ファイルを放り込むだけで、それをBase-64コードに変換してくれるというWebアプリケーション。いやこれ素晴らしいですね。使い方は簡単。画像をサイト内に放り込んで「Generate Base-64 Code」ボタンを押すだけ。するとBase-64コードに変換したイメージを3つの手段でクリップボードにコピーしてくれます。ひとつはimageタグとして。もう1つはCSSコードとして。最後にBase-64でのコード素体として。この中から好きな物を選んでクリックすれば、コード内容をクリップボードにコピーしてくれます。この際「コピーしといたYO!」というダイアログが出ますが、元の画像サイズ次第じゃ全部表示されません。けどコードのコピーは全部できてるのでご安心を。後はそのコードをWebサイトやブログなどに貼り付けるだけ。イメージを別にアップロードする事なく、HTMLコード内に直接画像を格納できるのがナイスです。

[Framework] Ratchet – WebベースのiOS向けアプリを作る際に便利なフレームワーク

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

iOSデバイス向けにWebAppを作る際に便利なフレームワーク。ダウンロードすると簡単なテンプレートファイル(けど内容はほとんどないので、基本はWebサイトをリファレンス代わりにするのがイイかも)とCSS、JSが同梱されています。フレームワーク内においてはタイトルバーや各種ボタン、リスト、登録フォーム、スライダーなどがあらかじめ用意されていて、簡単な指定でそれらを使う事ができます。iPhoneでテストするにはホームボタンにブックマークするだけ。それほど機能が多くなくシンプルかつ純正に近いデザインなので、WebApp制作のベースとして使いやすい印象です。

[UI Design] 60 User Interface Design Tools A Web Designer Must Have – UIデザインに役立つツール

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

UIデザインに役立つツール類のまとめ記事。60のオンラインツールや素材が紹介されてます。UIパーツやプロトタイピングに役立つ素材、オンラインでワイヤーフレームの描けるツール、PSD、GUIのセット、コードスニペットまとめ、JSフレームワークなどがその内容。デザイナーだけでなくディレクター向けの内容も多い印象です。

[Wallpaper] Wallpaperus – 様々な解像度を用意する壁紙配布サイト

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

様々な解像度の画像を用意する壁紙配布サイト。壁紙配布サイトって山ほどあるけど、このサイトのナイスな所は、PC用の各種縦横比画像だけでなく、デュアルモニター用の壁紙やiPhone、Android用のものまで様々なサイズが揃っているという点。Facebookのカバー写真にちょうどいいサイズなんてのもあります。種類も豊富で壁紙発掘にイイんじゃないかと。なぜか綾瀬はるか率が高いのはたまたまそうなってただけですw

[Web Application] TinyPNG – PNGファイルを圧縮してくれるオンラインツール

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

PNGファイルを圧縮してサイズを減らしてくれるオンラインツール。画像ファイルの内容次第だとは思うけど、だいたい半分くらいのサイズにはなるようです。試しにアップしてみたら46%にまで小さくしてくれました。使い方は簡単で、サイト上部にある「Drop you .png files here!」の部分にファイルをドラッグするだけ。圧縮後ダウンロードリンクが生成されます。PNGファイルって最近使う機会増えたけど、Photoshopで書き出しただけだとファイルサイズが大きいのが難点だったので、このサービスはなかなかナイスです。