作成:2013/12/9更新:2014/11/01無料素材アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。(スイッチボタン)11.Scrubber(スライドバー)12.Progress(ブログレスバー)13.Spinner(処理中)14.ラジオボタン/チェックボックス補助15.郵便番号>住所を自動補完16.チャート17.ストライプテーブル18.テキストエフェクトメニュー1.円形マウスホバーで色が変わったり、「+」の部分を押すとメニューが出てくる円型メニューのサンプル。CodePenはフラットデザインです。Codrops2.タブ定番ですけど一応。タブを切り替えるとてもシンプルな方法。一つは切り替え時にフェードインやスクロール等のアニメーションを設定できます。CSSのみとjQueryのサンプルまとめ。Illusions3.ナビゲーション画像を一切使わないCSS3で表現した横メニュー。ステップで書いてあるので分かりやすいです。Webクリエイターボックス4.アコーディオン比較的シンプルなスマホでも使えるアコーディオンメニュー。入門ウィンドウ5.モーダルウィンドウモーダルウィンドウとは、表示中に他のウィンドウの操作を受け付けないウィンドウのことです。CSS3のみやプラグイン無しのjqueryで表示する方法。Stronghold6.フローティングウィンドウフローティングウィンドウとは、ドラッグ&ドロップ操作で移動できる子ウィンドウのことです。元のページレイアウトを崩さずに追加情報を表示できます。一つは追尾型メニューの実装方法。memocarilog7.Dialog(ダイアログ)ダイアログはユーザーがアクションをおこした瞬間、メッセージを表示したり、入力を促します。こちらはシンプルでスタイリッシュなダイアログまとめです。UIのDialogでメッセージやフォームをダイアログ表示8.フォーム+バリデーションフォームに入力された内容にミスがないか調べるバリデーション。手を抜きがちだけど、問い合わせフォームに実装すると格段に使いやすくなります。切り替え、アニメーションなど。(スイッチボタン)オン/オフを切り替えるボタン。ボタンと違うのは、スライドして切り替えることができるところです。こちらはオン・オフの実装方法と、PSD素材です。DesignDevelop11.Scrubber(スライドバー)音量調整などのUIに使うスライドバー。Sliderのまとめ。日本語リファレンスjQueryでクールなボリュームコントロール作成:phpspot開発日誌12.Progress(ブログレスバー)残り時間など作業の進捗状況を横棒の色によって表示するバーです。以下、サンプルまとめと検証結果。GIGAZINE13.Spinner(処理中)ローディングアニメーション。Laddaのサンプルでは実際ボタンをクリックすると、処理中のアニメーションを見ることができます。一つはページ全体が読み込まれるまで、ローディング画面を表示させる方法。code1414.ラジオボタン/チェックボックスPCと同じようなラジオボタンではスマートフォンではタップしにくくなります。こちらはスマートフォンでもタップしやすいように作成する方法。jQueryプラグイン。通常版、スペース・改行圧縮版のminifyがあります。けんごのお屋敷16.チャートHighchart、ccchartのサンプル。円グラフや棒グラフを組み合わせたものなど。Visualizeの使い方。blog17.ストライプテーブル疑似クラス「nth-child()」を使う方法など。一行ごとに背景色を設定する表の作り方。料金表や価格など見やすくなるので使いましょう。(1/3)jQueryでいろいろな要素をストライプ(縞模様)にする。webOpixel18.テキストエフェクトjQueryやCSS3で表現できるテキストエフェクトまとめ。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2013/12/2作業効率あがった!Photoshopの使い方と小技まとめ画像補正するときに、どうすれば良かったのか思い出せない。あの方法を探し出さないといけない。そんなこんなで、Photoshopの便利な小技や、写真に関する知識をまとめました。2013/07/16写真は怖くない!すごい「Photoshop」マジック小技集23写真うつりが悪い、気になるところをサクッと修正したい。今回は、顔や体型を簡単に修正する方法やアクションをまとめました。共通する部分が多いですが、顔以外にも使える色々な方法が2014/03/24ロゴ作成に役立つ制作フローや素材・知識まとめロゴの作成依頼があって作ってみたものの、しっくりこない。ありきたりなアイデアしか浮かばない。いった手順をふんで、どういったことに気をつければ、よいロゴができるのだろうか。今2013/10/21効率あがった!フリー素材と「すごい」Illustratorテクニック総まとめフリー素材は沢山あるけれど、どこに何があるか分かりにくい。ロゴやイラストを作るのにまたあのサイトを探さないといけない。いったことで1回まとめました。コメントデータの処理方法の詳細はこちらをご覧ください。