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

Browse By

Category Archives: WebApp

[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を使っていちいちこういうの作るのが面倒な方に是非これひとつ。テンプレートとなる写真もわりとセンスの良い構図が多い点もナイス。

[Icon] Testico – 画像ファイルを放り込むだけでiOS Appのアイコンみたく加工してくれるサイト

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

画像ファイルをサイト内にドラッグ&ドロップするだけで、iOS Appの角丸アイコンに加工してくれるジェネレーター。グロス(テカリ)のアリorナシの2バージョンを生成してくれます。App Icon作る際にはよくPSDテンプレートとか使いますが、デザイナーでない人がアイコン作った時にどうなるかを試してみたい場合などに使えそうです。サクっと印象を確認したい時なんかにイイですね。

[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制作のベースとして使いやすい印象です。

[Generator] Form Builder – クールなフォームを作れるオンラインツール

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

たまにオンラインジェネレーターを発表するUi Paradeが、クールな入力フォームを作れるオンラインジェネレーターを出してました。設定項目はかなり細かく指定する事ができ、色やボタンのシェイプだけでなくフォームのかなり細かい部分まで作り込む事が可能。グラデーションについても全てCSSで描画されており、コードのコピペだけで自前のサイト内に反映する事ができます。いやこれイイですね。ちなみにこうしたツール群はLive Toolsという専用ページでまとめて紹介されてます。

[Web App] Sun — simple weather app – シンプルな表示のiOS向け天気予報Web App

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

iOS向けのシンプルなウェザーアプリ。ただしローカルAppではなくWeb Appという点が興味深い。Macなどからリンク先のサイトに行くと、Appの説明と「iOS端末からここに来てネ」というメッセージがあるだけ。iOS端末から行くと「ホーム画面にブックマークしてネ」という表示に変わり、言われた通りにホーム画面に保存すると、アプリ風のアイコンとしてブックマークが保存されます。このAppのスゴいのはここからで、立ち上げるとSafari内でAppが表示されるんだけど、Safariのインターフェースは完全排除、まるで固有のアプリのように振る舞います。さらに通常通りSafariを開いてもSunの画面は出ません。これどうやってんだろなー。表示はSafariに依存してるんだろうけど画面はSarariの1タブを占有するわけでもなく、ユーザーの目には固有のアプリのように映ります。この手法ってAppleの審査を通す必要がなく、もしかしたら今後主流とは言わないまでもApp配信の1手段として広がるんじゃないかとも思えます。ただ課金モデルは組みづらいだろうけど。Appの出来そのものよりも、その仕組みがとても興味深い。