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

Browse By

Tag Archives: WebApplication

[Generator] Vector Magic – ビットマップ画像をベクター画像に変換してくれるサイト

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

ビットマップ画像をベクター画像に変換してくれるサイト。「Upload Image To Trace」ボタンから画像をアップロードすると、ちょっと待たされた後でベクター形式に変換してくれます。対応する画像フォーマットはJPG, GIF, PNG。変換後のフォーマットはEPS, SVG, PDFに対応しているようです。試しにいくつか放り込んでみましたが、コントラストのハッキリした画像なら結構綺麗に変換してくれます。Illustratorのライブトレースよりもこっちの方が使えるんじゃないかなという印象。Webフォーマットのデザイン素材を印刷に流用する時なんかに使えそうです。

[Generator] Coolors – ランダム生成してくれるカラーパレット

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

ランダムにカラーパレットを生成してくれるジェネレーター。使い方は簡単で、スペースキーを押すだけで5色のカラーをランダムに変更してくれます。またこの際、キープしたい色をクリックするとロックでき、ロックされてない色のみを変更する事もできます。それだけの機能のシンプルなジェネレーター。またURLをコピーするだけでこのような形でパレットを他人と共有する事もできます。例えばキーカラー1色のみ決まってて他の色どうしようか迷ってる時なんかに便利そうですね。

[Music] The Artist Hunt – アーティスト名を軸に、関連アーティストをサクサク聞けるサイト

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

アーティスト名を入力する事で、関連するアーティストの音源を聴く事のできるWebサービス。これ系のサイトって他にもあるけど、独特の操作法により快適に音源発掘ができます。トップページに書いてある通り、基本的にはキーボードの十字キーを使って操作します。左右でミュージシャン選択、上で選択したミュージシャンの画面に、下で選択したミュージシャンの次の音源を聴く事ができます。また曲を再生中にSpaceキーを押す事で、今流れている曲をSpotifyのライブラリに追加する事ができます。日本でもぼちぼちサービスが始まるらしいので、この機能はとってもナイス。このSpotifyとの相性もあって、洋楽リスナーにとってもオススメ。仕事中のBGM用途としてもイイですね。

[CSS] CSS Shorthand Generator – CSS記述をショートハンドにしてくれるジェネレーター

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

CSS記述をショートハンドフォーマットに変換してくれるオンラインツール。サイトを開くと「例えばこんなCSSならこうしちゃうYO!」という例が表示されてます。fontやbackground、margin、padding、borderあたりに効きそうですね。ただショートハンド記述ってどちらかというと、書く人がラクに書けるように用意されたものであって誰かに変換してもらうようなものでもないという気もします。ショートハンド記述が苦手な人がお手本にするのが正しい使い方なのかも。この記述法だと結果的にデータ量も減ってCSSも圧縮できますしね。

[Tool] 16:9 Aspect Ratio Calculator for content area width – HD動画ファイルのサイズ変更に便利な計算機

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

HD動画ファイルのサイズを変更する際に便利な計算機。16:9のアスペクト比を維持したまま、横幅を変更した際に縦幅はいくつになるのかを算出してくれます。単純な比率計算なので手元でもできますが、Youtubeの動画をembedで貼る時に便利だなーと思ったので紹介。ちなみに従来型のアスペクト比4:3の計算機もあるようです。比率が固定されているので低機能ではあるけど、シンプルで使いやすいですな。

[Gif Gif Gif] GIF YouTube – Youtubeに上がってる動画をGifアニメ化してくれるサイト

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

Youtubeに上がっている動画をアニメーションGifにしてくれるサイト。いやこれ便利ですよ。アニメGifにしたい!って思った時にいちいちPhotoshop立ちあげなくて済みます。作り方は簡単なんだけど、ちょっとコツがいります。まずはGifにしたい動画をYoutubeで普通に表示させて、ブラウザのアドレス欄のドメイン部分「youtube.com」を「gifyoutube.com」にします。つまり「gif」の3文字を追記するだけ。それでエンターを押すと、gifyoutube内で該当の動画を開く事ができます。あとはGifにした時に再生を開始したい場所までスライダーを動かしてCreate Gifボタンを押すだけ。Gifファイルの長さについてもいくつかの選択肢から選ぶ事ができますが、まぁ短い方が軽いファイルになるのであまり長くしない方がイイですね。左のサムネールはこのサイトを使って作ったアニメGif。こういうのもサクっと作れます。ネタ動画作る時にとっても便利です。ドーン!

[Music] Post-rock Tuesday – ポストロック専門のオンラインジュークボックス

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

ポストロック専門のオンラインジュークボックス。全国のポストロック大好き野郎に超オススメですこれ。ポストロックという音楽の性格上、職場での流しっぱにも良さそうです。Tuesdayという事は、毎週火曜日に更新されてるような気がしますが、実際にはよく分かりません。画面左下の時計のアイコンをクリックすると、今までのセットリストが表示されます。このバンドのチョイスが超マニアックというか、そこそこポストロック聴く俺でも知らないバンドのオンパレードでした。またサイトの見せ方もオシャレで、デザイン的にも音楽的にもなかなかの手練れだなという印象であります。素晴らしいサイト。
ところでポストロック聴く女の子とか2秒で求婚したくなりますよね。なりませんかそうですか。

[Web Application] What’s my Viewport Size? – ブラウザウィンドウのサイズを教えてくれるサイト

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

使っているブラウザウィンドウのサイズを教えてくれるサイト。開くだけで、縦×横のピクセル数を表示してくれます。ついでに使っているOSのバージョン、ブラウザの種類、ブラウザエンジンの種類とバージョンも教えてくれます。
Web制作してるとたまにお客さんに「崩れるYO!」とか指摘受ける事ありますが、その際に必ず聞くのが「ブラウザの種類とバージョン教えてください」という質問。けどお客さんによっては「なにそれおいしいの?」というレベルの人もいるので、そういう時にここ開いてもらうというのもイイなと思いました。