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

Browse By

Tag Archives: Generator

[CSS3] CSS3 Button Generator – CSS3でボタンをデザインできるジェネレーター

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

CSS3でデザインされたボタンのジェネレーター。サイト内で各種数値を入力することで、リアルタイムにボタンデザインとCSSコードが反映されるという仕組み。指定できるのはバックグラウンドカラー(グラデーション)、角丸のボーダー指定、ボタンのドロップシャドウとインナーシャドウ、フォントカラーとテキストシャドウという内容。テキストシャドウは2つを重ねがけできます。ちなみに制作したボタンデザインはシェアする事もでき、他のユーザーの作ったデザインを閲覧する事もできます。CSS3ジェネレーターって色々あるけど、ボタン系のジェネレーターとしてはなかなか多機能で使い勝手もイイです。ちなみに俺の作ったボタンはこれ。こんな感じで決め撃ちで共有することもできます。

[iOS] AppMakr – iPhone向けのアプリを簡易生成できるオンラインサービス

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

iPhoneアプリをオンラインで作成できるウェブサービス。iPhoneアプリ開発に不可欠なObjective-Cでのコーディングなしに開発が行えるので、デザイナーや企画屋さんがこういうの始めようと思った時に使えそう。とはいっても本格的なiOS SDKを使った開発に比べれば、できることは限定的です。じゃ何ができるのかというと、ブラウザウィンドウ、ビデオ表示、RSS取得、イメージビューアー、Podcastといったところ。「機能的にはそれだけで事足りるYO!」的な内容ならいいのですが、まぁ実際作れるアプリは限られます。iOSアプリ開発の入り口的に考えるとイイかもしれません。無料で行えるサービスとしてはなかなかのもんです。作成したアプリをApp Storeで公開する際には当然Developer Accountが必要なので、そこから先はお金が必要です。

[HTML5] Ai to Canvas Plug-In – Illustratorで作ったAiファイルをCanvasのコードに変換できるプラグイン

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

これ素晴らしい。イラレで作ったAiファイルをHTML5のCanvasコードに変換してくれるプラグイン。イラレに対するプラグインファイルとなります。Canvasタグを使えばコード記述だけでブラウザ上にシェイプを描画できるけど、コード見た感じじゃ(実際に書いた事ないけど)結構メンドくさそう。イラレ使い慣れた人なら、サクっと書いてこのプラグイン使って変換するのがラクチンっぽいです。iOS向けのサイトなどでその内使う機会がありそう。ダウンロードしとこ。

[CSS3] 11 Best CSS3 Generators To Save Your Valuable Time – あなたの時間を節約できるCSS3ジェネレーター

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

CSS3のジェネレーターが各種紹介された記事。ボックス要素の装飾、グラデーション、テキスト装飾、メニューボタン生成、角丸指定、カラム生成など、様々なCSS指定に対応できます。紹介されている中にはCSS生成の総合ツールもあります。CSS3は表現の可能性という意味ではもちろん幅が広がるんだけど、より高いスキルや手間が求められる場合もあり、乱暴に言えば面倒な点もあります。そんな時この手のジェネレーターはなかなか頼りになります。

[CSS3] CSS3 Pie – CSS3の各種メンドくさい指定がサクっとできるジェネレーター

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

CSS3での各種機能追加は便利なんだけど、実際グラデーション指定のコード書きってメンドいよねそうだよね、という人にオススメ。サイト上でパラメータをいじくりながらCSSを出力できるウェブアプリ。グラデ以外にも角丸やドロップシャドウなども併せて指定できます。CSSのコードジェネレーターとしてなかなか優秀。

[CSS3] CSS3 Button Maker – CSS3で描画されたボタンのジェネレーター

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

CSS3のみで描画されたボタンのジェネレーター。画像はいっさい使わずに、グラデーションや角丸などを表現しているので、生成されたHTMLとCSSのコードを貼り付けるだけで実装できます。とは言ってもCSS3を解釈できるブラウザはシェアの面でIEがアレだしナニなので、モダンブラウザを対象としたサイトに限定はされます。そういう意味じゃモバイル環境ってPCよりもずっとモダンブラウザ率が高いんで、そっち向けとも言えるかも。デモサイトはこちらです。

[WEB SERVICE] 40 Powerful CSS Tools And Generators To Automate Your Workflow – オンラインCSSジェネレーターまとめ

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

CSSを生成できるオンラインツールのまとめ記事。どんなものがあるかというと、レイアウト、フォント関係、コード圧縮、バリデーション、ブラウザごとの確認、グリッドレイアウトのためのジェネレーター、メニュービルダー、フォーム装飾、丸角ジェネレーター、段組レイアウト、CSS Spriteコード生成、カラーパレット、EmやPxなどの単位変換などがその内容。面倒な部分はこうしたオンラインツールに頼るってのも、ひとつの手ですね。フォント関係とか結構重宝します。

[CSS] 11 Useful Online Tools for Better CSS Development – CSS生成のための便利なオンラインツール

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

CSSによるレイアウトやテキスト指定、CSSファイルの圧縮、W3Cによるバリデーションなどの、CSS関連の便利ツールがまとめられた記事。特にレイアウト関連のツールが多く紹介されてて、YUIやBluePrintなどの、グリッドレイアウトのためのCSSフレームワークベースのジェネレーターなども入ってます。CSS関連のジェネレーターとはいえ、初級者向きというよりは中級者以上推薦といった感じです。フォント指定の便利サイト、Typetesterは自分も好んでよく使っております。