ノンデザイナーでも簡単にサイトを飾れるサービスまとめ

リボンが簡単に作れるサービス。幅・大きさ・影・縫い目・色など細かな調整がスライダーを動かしながら確認できます。

シャドウやネオンや3Dなど、あらかじめ用意されたCSS3のスタイルをボタンで選択して確認→コード出力ができちゃいます。

用意されたCSSファイルを読み込ませ、ボタンにclassを付与するだけ。丸型・矩形・角丸などのカラフルなボタンが簡単に設置できちゃいます。

たくさんのボタンの中から好きなデザインを選択→表示されたCSSをコピペで使えます。色を変えたり、グラデーションの度合いを変えたりなどの調整も可能。

ボタンの色・形状・余白・線幅をスライダーで調整しながら作成できるサービス。完成したらHTML・CSSの生成ボタンを押します。

16ｘ16サイズのアイコンが簡単に作れます。左クリックで色塗り、右クリックで色消し。押しながらドラッグさせるとカーソルが移動した軌跡を塗ったり消したり出来て便利。もちろん、色は自由に選べます。

ソーシャルボタンをはじめその他よくウェブサイトで使われるアイコンフォントです。フォントファイルをダウンロードして専用のCSSをHTMLで読み込めば準備完了。あとは、表示させたい場所にclassを付与するだけです。

メニューやパンくずリストが簡単に作れるサービス。背景画像や色を選択→リンク先URLを記述。それだけで必要なCSS+HTML+画像が出力されるので、それをコピペすれば設置完了です。

CSSとJSファイルを読み込ませ、HTML側に簡単な記述を行うだけで、ウィンドウの上や横からヒョイッと出現するカラフルな通知メッセージをホームページに実装できます。

入力フォームが簡単にデザインできるサービス。フォームの色・枠線・フォーカス時の装飾・ボタンの形状・色など細かな調整がスライダーで行えます。デザインが決まったらCSSとHTMLの生成ボタンを押します。

チェックボックスをiOS7風に装飾できるライブラリです。CSSとjavascirptファイルを読み込ませ、チェックボックスにクラスを付与すればOK。ON/OFFのカラーや変更速度などの調整も可能。

チェックボックスやラジオボックスの入力をアニメーションで見せることができます。通常、フォームって無機質ですが、これを使うと”人”の入力感が出ます。

フォームのプレースホルダーをアニメーションで表示/非表示させるプラグイン。入力フォームをフォーカスすると、デフォルト表示されていたテキストが「Back Space」で削除されたようにアニメーションします。

Twitter社が開発＆公開している、HTML5+CSS3+jQueryを使ったウェブサイト構築用パッケージです。ブラウザごとの表示差異も最小限、デバイスごとのレイアウト最適化(IE8以上)、フォームや画像表示時の動きなど、色々な機能が詰まっています。必要に応じて機能を追加したりカスタマイズしたり、もできます。