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

Browse By

Tag Archives: WebApplication

[Generator] Dunnnk – ハメコミ画像のジェネレーター

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

MacやiPhone、iPadなどのデジタルデバイスの画面に、任意の画像をハメ込む事のできるジェネレーター。ハメ込みたいテンプレート画像をクリックすると、アップロードする画像を求められます。画像を選択するとデバイスのディスプレイ部分にその画像がハメ込まれるという仕組み。WebサイトやMobileAppを実際に使ってるように見せる事ができます。サクっと作れるのがナイスです。テンプレート画像はApple系デバイスのみのラインナップのようです。

[Web Design] OGP画像シミュレータ – og:imageで指定した画像の見え方をテストできるサイト

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

OGPでサイトのサムネール画像を指定した際に、実際にFacebook内で表示された時にどのように見えるのかをテストできるサイト。早い話がog:imageのシミュレーターです。og:imageで指定した画像がFacebook内で表示される時って、横長表示の時と正方形表示の時があるんですよね。なので1つの画像でどちらの比率でもそれなりにイイ感じに見えるよう作らなきゃいけない。このサイトに画像ファイルを放り込めば、OGP指定する前に見え方をテストする事ができます。ちなみにOGPの情報はFacebook内にキャッシュされるので、og:imageに限らず何か情報を更新した後はOpen Graph Object DebuggerにサイトURLを突っ込んで「Fetch new scrape information」すると、キャッシュが更新され幸せになれます。

[Generator] Free Icon Maker – Appアイコンをデザインできるオンラインツール

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

アイコンをデザインできるオンラインツール。iOSやAndroidのアプリ、またホーム画面に置いた際に表示されるFaviconなどに向いてます。ツールとしては結構多機能で、まずはモチーフとなるアイコンを選び、併せて枠を選びます。iOSで一般的な角丸正方形以外にも色々なシェイプがあります。そしてアイコンや枠の色やシャドウなどを調整し、気に入ったものができた時点でダウンロードできます。試しにダウンロードまでやってみましたが、128 ✕ 128の透過PNGフォーマットでした。アプリのアイコンとしてはちょっとサイズが足らないけど、Faviconとしては使えそうです。自分で作った画像のアップロード機能などはないので、自分でデザインできる系の人にはツールとして物足らないかもしれません。

[Typography] flipping typical – 任意のテキストで、ローカルにインストールされているフォント一覧を作ってくれるサイト

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

ローカルPCにインストールされているフォントの一覧を作ってくれるサイト。表示する文字列は任意にタイプできます。ロゴ作る時やタイポ組む時に、ベースとするフォントを選ぶ際にとっても役に立ちそう。この手のサイトは他にもあるんだけど、このサイトは日本語フォントもちゃんとロードされる点がナイス。インストールされているフォントが多い人の場合は1回で全てロードされないので、「あのフォント出てねぇじゃねーかYO!」という場合はページ最下部の「Load More」をクリックすると幸せになれます。いやーこれは便利。

[Web Application] Precursor – リアルタイムに他者と共有できるオンラインのキャンバス

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

リアルタイムに他者と共有ができる、オンラインのキャンバス。Precursorに行くとまずグリッドの付いたキャンバスが出ますが、この時点ですでに固有のキャンバスIDが割り振られ、誰かと共有できる状態になっています。共有するにはURLを送るだけでオッケー。同じページにランディングした人には同じキャンバスが見えてるという仕組み。試しにMac, iPhone間でやってみましたが、ちゃんとiOS相手でも共有できるようです。しかも描いた結果の反映が速い。ほとんどリアルタイムに描画内容が反映されます。なんかスゴいですこのスピード。他には右クリックでツールパレット、画面の左上のハンバーガーアイコンからは、共有している相手のリストやチャット画面などができます。テキストで話しながらやりとりできるので、オンラインでの打ち合わせなどに使えそうです。画像とか貼れるともっとイイなーと思いました。

[Generator] last.fm top albums generator – last.fmのプロフィール欄に、よく聴くアルバム一覧を追加できるジェネレーター

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

last.fmのプロフィール欄に、自分のよく聴くアルバムのジャケットを表示させるソースコードのジェネレーター。ユーザー名を入力して「Get the code!」ボタンをクリックするとソースコードが生成されます。あとはそれをlast.fmプロフィール欄の「自己紹介」にペーストするだけでオッケー。またどの時期によく聴いたアルバムにするか、カバーの有無や大きさ、表示するアルバムの数などのオプションを設定する事もできます。last.fm常用している音楽ヲタの人におすすめ。けど実際あんましいないだろうなぁ・・・。自分はここ数年、聴いた音楽の全てをScrobbleしてますが、過去に聴いた音楽を振り返る事はあっても他人のプロフィールとか見ないし。っていうかlast.fm、digg、delicious、FlickrといったWebサービス初期に盛り上がったサービスって、今どれも下火ですよね。なんだか寂しいなぁとちょっと思いました。

[Web Application] Polarr – 高機能なオンラインフォトエディタ

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

高機能なオンラインフォトエディター。ブラウザ内で動作する簡易的なグラフィックアプリです。できる事は露出や彩度、色補正などのよくあるフォトエディット機能。あとInstagramのようなフィルター機能もあります。作業をした画像ファイルはダウンロード以外にも、Facebookへの書き出しやクラウドドライブへの書き出しにも対応しています。複数の写真をサムネールで管理する機能もあるようです。Photoshopが手元になかったり、そもそも持っていないけど写真の補正くらいはしたい、という場合に便利そうですね。

[Generator] ImageGlitcher – 画像をグリッチノイズ加工してくれるジェネレーター

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

画像をグリッチノイズ加工してくれるサイト。グリッチノイズってあまり聞き慣れない単語だけど、よく映画やMVの演出で使われる、壊れかけのブラウン管TVで見るようなノイズの事です。使い方はサイト内の「Drop Image Here」に画像ファイルを放り込んで、「Glitch It!」ボタンを押すだけです。その際ノイズの深さとブライトネスを調整する事ができます。気に入った加工ができたら「Save Image」ボタンで画像単品で表示できます。試しに自分で撮ったガンプラの写真で試してみましたが、左のサムネのようになりました。デジタルノイズ加工したい時に使えそうです。