[Bootstrap] TWBSColor – Bootstrapのnavbarをカスタムできるジェネレーター
Bootstrapのnabber専用のカスタマイザー。背景色や文字色などを個別にカラーピッカーを使って色指定する事ができます。指定した内容はSCSS, SASS, LESS, CSSの形式でリアルタイムに生成されるので、あとはその中から好きなものをコピペして使うだけ。また指定した内容はパーマリンクが常に生成されるので、後になって再修正したい時なんかに便利です。
Tag Archives: Generator
[CSS] CSS triangle generator – CSSだけで描画する三角形のジェネレーター
CSSだけで描画できる三角形のジェネレーター。方向とタイプ（Equilateralは縦横比固定、Isoscelesは高さと幅を個々に指定、Scaleneは3点を個々に指定）、サイズ、色を入力する事でリアルタイムに三角形の形が変わります。その下にCSSが生成されるので、あとはコピペするだけ。サイト内でコード生成されるのはCSSだけなので、あとはこれを適当なボックス要素にClass指定すれば完了です。CSSで描いちゃえば画像使わなくて済むので便利です。
[Color Palette] ColorFavs – 画像からカラーパレットを生成してくれるサイト
写真などの画像ファイルからカラーパレットを生成してくれるサイト。使い方は簡単で、サイト内の点線エリア内に画像ファイルを放り込むだけ。少しだけ待たされた後、パレットを生成してくれます。パレットの色数なんかは全部自動のようです。Webサイトのスクリーンショット放り込んでパレット抽出したりするのにイイですねこれ。
[Web Design] Responsinator – レスポンシブレイアウトの結果をまとめて確認できるサイト
レスポンシブレイアウトしたサイトの挙動を、様々な端末でまとめて確認できる便利なサイト。画面最上部にある「Enter your site」に確認したいサイトURLを入力すれば、iPhoneやAndroid、iPadなどのタブレット端末の解像度で一気にレンダーしてくれます。縦持ち時だけでなく横持ちの際にどう表示されるかも確認できるのが便利。このサイト使って一気に確認すれば、物理的に端末持ち替えて確認するよりかなり手間が省けそうです。
[UI Design] Simple Nine-patch Generator – 9パッチ（9スライス）のジェネレーター
Nine-Patch、もしくはNine-Sliceと呼ばれる、主にAndroid Appなどの開発現場などで使われるボタン画像フォーマットのジェネレーター。主に上下左右に大きさが可変する角丸ボタンに使われるアレを、簡単にWebから生成できるというものです。Nine-Patchがどういうものであるかはこのあたりを参照してください。画像の作り方は簡単で、まずは「Select Image」ボタンからNine-Patch化したいPNG画像を選択。ロードされると右側に表示されるので、あとは拡大に応じて伸長するエリアとコンテンツパディングを指定するだけ。またこの際「Trim」のプルダウンメニューから「Stretch Region」を選ぶ事で、必要な画像部位だけにトリミングしてくれます。なのでPhotoshopを使ってUIデザインをしている場合、いつも通りに画像をアセット保存して出力されたフルサイズのボタンPNGを放り込むだけでオッケー。画像を最小サイズにするのはジェネーレーター側に任せる事ができます。いちいち制作サイドで最小サイズにトリミングする手間が省けます。
またこのジェネレーターでさらに便利なのが、画面中央にある「Interactive Preview」という機能。これをクリックすると、現在のNine-Patch指定で画像がどのように伸縮するのかを、実際にドラッグして挙動を確認する事ができます。これがもう死ぬほど便利で、指定ミスによる想定外の挙動を防ぐ事ができます。あとプログラマーに渡す直前に「この動きでオッケーだよね？」的な確認をするのにも便利です。Nine-Patch画像はPhotoshopだけでも作れるといえば作れるんだけど、こういう便利なツールはどんどん使っていきたいですな。
[Generator] Blend – 任意の2色からCSSのグラデーションコードを生成するツール
左右にあるパレットから任意の2色を選んで、CSSのグラデーションコードを生成するツール。色を選んだ後で矢印のボタンを押すだけでオッケー。カレーパレットは一般的なFlat UIとMaterial Designの他に、青や黄色など固有のパレットもいくつか用意されています。Material Designなどの固定されたカラー規格におけるグラデーション生成などに使えそうです。パレットもうちょい増えてくれるとイイんだけどなぁ。
[CSS] Flexy Boxes – Flexboxのコードジェネレーター
Flexbox使ってますか？ 俺はほとんど使った事がありません！ けどこのジェネレーター触ってみて使ってみようって気になりました。Flexbox便利なんですが、今までのfloat使ったレイアウトと全然違うのでとっかかりが難しい部分があると思うのです。あと対応ブラウザも選びますし。このジェネレーター使うと対応ブラウザはどうしようもないにしても、コード記述の敷居はグっと下がる気がします。ボックスの数、順番、並べ方等を数値入力したりプルダウンから選ぶだけで、リアルタイムにCSSコードを生成してくれます。いやこれ便利ですね。レスポンシブレイアウトのサイトコーディングする時なんかに使えそうです。
[Generator] Pixel Map Generator – 世界地図のジェネレーター
世界地図をカスタマイズして画像を生成することのできるジェネレーター。いやこれスゴい便利っす。できる事は色々あるんだけど、まずは国ごとの色分け。各国の境界線が設定済みなので、バケツツールを使って簡単に国単位で色を塗る事ができます。次にマップ画像のカスタム。丸ドットや四角ドットなど、いくつかの描画オプションが用意されています（適用にはちょっと待たされますが）。陸地と海のデフォルトカラーも変更できます。また作った地図はSVGやHTMLでも書き出す事ができるので、最後の仕上げにIllustratorを使う事もできます。ちょうど3日くらい前に世界地図の着色作業をしたばかりで「これ知ってりゃこれ使ったのにー！」状態でした。Webの仕事してるとたまーにこういう絵描く機会ありますからね。