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

Browse By

Tag Archives: Generator

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

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

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

[Web Application] Contrast Ratio – 背景と文字のコントラストを確認できるオンラインツール

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

背景色(左側)と文字色(右側)を指定する事で、背景の上に文字が乗った時のコントラストを確認できるオンラインツール。まぁ簡単な仕組みなんだけど、16進法でもRGBAでもHSLAでも指定でき、かつ作った色の組み合わせがWCAG 2.0的にいいのか悪いのかまで判断してくれます。作ったカラーパレットはURLに反映されるので、人に伝えるのも楽です。ちなみにこのWCAGというの、ウェブコンテンツ・アクセシビリティ・ガイドラインと言うらしいんですが、正直こういうのを気にしすぎるのもなんだかなーと思います。いやまぁ大事なんだろうけど、行政系とかこういうの好きそうだなー・・・とか思ったり。

[CSS] SpritePad – 複数の画像からCSSスプライトを出力するジェネレーター

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

CSSスプライトのジェネレーター。最初は複数の画像が1枚に入ったものから、座標を指定してCSSを出力してくれんのかなと思ったんですが、その逆でした。複数の画像ファイルをサイト上のキャンバスに放り込むと、それらを1枚の画像にしてくれ、その上各画像の座標情報をCSSに書き込んで出力してくれるというもの。CSSスプライトのジェネレーターっていくつかあるけど、この手法は初めて見ました。元々複数の画像に分かれているものを1つにまとめる時などに使えそうです。まとめた画像ファイルはサイト上部の「Download」ボタンから落とす事ができ、またキャンバスのサイズは右下にあるアイコンをドラッグするとできます。

[CSS3] border-corner-shape – 角丸ボーダーのジェネレーター

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

CSS3の角丸ボーダーのジェネレーター。まぁ角丸の指定なんて基本的にborder-radiusの数値入れてやるだけなので、別にジェネレーターなんてなくてもできるんですが、ここでは指定した数値がすぐにプレビュー欄に反映されるので「もうちょっとだけ丸く」みたいな微調整がやりやすいです。また角丸の種類やheight, widthも個別に指定できるので、ここでちょうどいいシェイプの角丸ボックスを作ってからCSSファイルに貼り付けるという使い方が便利そうです。あと各数値にフォーカスした状態で十字キーの上下で数値をイジくれます。Shiftを組み合わせると大きく数値を変化できるようになってます。

[Logo Design] Cool Text – 様々なテキストエフェクトをリアルタイムで生成してくれるジェネレーター

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

様々なテキストエフェクトのかかったロゴ用画像ファイルを、文字タイプするだけで生成してくれるジェネレーター。サムネール画像がズラっと並んでるので、好きなエフェクトを選んだらあとはロゴにしたい文字列をタイプするだけです。日本語には対応していません。これね、なんつーかね、いわゆる「Webサイト」ではなく「ホームページ」とか「ホムペ」と呼ばれていた頃のような懐かしさを感じますね。そういう意味ではいわゆるプロの制作現場向けのものでは決してございません(っていうか自分で作れるしね)。しかしながらこのようなダサいサイトをニヤニヤして作るという文化もあるわけでして、そういう趣にはナイスかもしれません。なぜか炎で燃え上がるテキストとか懐かしいですよね。はーダッサい90年代趣味のサイト作りたいなー。

[CSS] Sprite Cow – CSSスプライトのコードジェネレーター

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

CSSスプライトのコードを生成してくれるサイト。「Show Example」を押すとサンプルイメージを使ったチュートリアルが表示されます。CSSスプライトって最近じゃ一般的な手法ではあるけど、座標取得してそこから部位ごとに足し算して・・・って結構面倒っすよね。Sprite Cowを使えば取得したい座標部分を選択するだけでCSSコードを出力してくれます。便利なのが透過PNGの場合、オブジェクトが存在する位置を自動で検出してくれる点。ドラッグして選択する事で隣接するオブジェクトを選択してくれます(このへんの動きはイラレの選択ツールっぽい)。いやこれ素晴らしいですね。とってもナイスですね。仕事でガンガン使えそうです。

[Funny] Logo Designer – Yahoo!の新ロゴっぽいものをサクっと作れるジェネレーター

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

米Yahoo!がロゴを新しくましたが、デザイン系のブログとか見てると「フォントそのまんまじゃねーか」的な意見をよく目にします。というわけでサクっとソレっぽいロゴを作れちゃうジェネレーターが出てきました。好きな文字を入力するとY!の新ロゴっぽいものを生成してくれます。ちゃんと頭とお尻の文字は大きくなります。このロゴに似つかわしくない文字列って何だろうと考えた結果、CARCASSと打ってみました。Loud Parkにも来ますしね。はいもちろん行きますよ。もう今から楽しみで楽しみで。

[CSS3] Create CSS3 – 多機能なCSS3ジェネレーター

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

CSS3のジェネレーター。コレ系のものって結構ありますが、その中でも結構イイ感じです。指定できるのはGradient, Box Shadow, Perspective, Text Shadow, Transoform, Opacity, ColumnsなどのCSS3で新たに追加されたプロパティ類。CSS2以前の基礎的なものは入ってませんが、CSS3のクソ細かいプロパティ指定などを分かりやすく指定できるのはナイスですね。指定した内容は右下で常にプレビューでき、ソースコードもリアルタイムに吐き出されます。コーディングの補助ツールとしてイイ感じ。