1. まとめトップ
  2. IT・ガジェット

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

ボタンやメニュー、テキストなどをCSS3やJavascript(jQuery)を使って簡単に構築&装飾できる、サービス・ツールをまとめました。HTMLやCSSは分かるけどデザインはちょっと微妙…という人にオススメです。

更新日: 2014年03月04日

T.Ohkiさん

  • このまとめをはてなブックマークに追加
47 お気に入り 4653 view
お気に入り追加

■見出しを装飾

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

■テキストを装飾

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

■ボタンを装飾

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

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

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

■アイコンを作る

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

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

■メニューやパンくずリストを装飾

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

■通知メッセージを装飾

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

■フォームを装飾

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

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

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

1 2





ウェブ・デザイン・企画・演出・ビジネス・お金などの情報をキュレートしてます。