calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

使いやすくなった!UI素材とテクニック集/CSS jQuery版

User_Interface_Patterns

アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

メニュー

ウィンドウ

ボタン

補助

メニュー

1.円形

circular_ui

マウスホバーで色が変わったり、「+」の部分を押すとメニューが出てくる円型メニューのサンプル。CodePenはフラットデザインです。

2.タブ

tab_ui

定番ですけど一応。タブを切り替えるとてもシンプルな方法。もう一つは切り替え時にフェードインやスクロール等のアニメーションを設定できます。CSSのみとjQueryのサンプルまとめ。

navigation_ui

画像を一切使わないCSS3で表現した横メニュー。ステップで書いてあるので分かりやすいです。

4.アコーディオン

accordion_ui

比較的シンプルなスマホでも使えるアコーディオンメニュー。

ウィンドウ

modal_ui

モーダルウィンドウとは、表示中に他のウィンドウの操作を受け付けないウィンドウのことです。CSS3のみやプラグイン無しのjqueryで表示する方法。

6.フローティングウィンドウ

floating_ui

フローティングウィンドウとは、ドラッグ&ドロップ操作で移動できる子ウィンドウのことです。元のページレイアウトを崩さずに追加情報を表示できます。もう一つは追尾型メニューの実装方法。

7.Dialog(ダイアログ)

dialog_ui

ダイアログはユーザーがアクションをおこした瞬間、メッセージを表示したり、入力を促します。こちらはシンプルでスタイリッシュなダイアログまとめです。

8.フォーム+バリデーション

form_ui

フォームに入力された内容にミスがないか調べるバリデーション。手を抜きがちだけど、問い合わせフォームに実装すると格段に使いやすくなります。

ボタン

9.Toggle (トグルボタン)

toggle_ui

Toggle ボタンとは、機能を押して「オン」、再度押すと「オフ」というように切り替えることができるボタンのことです。以下、表示非表示の切り替え、アニメーションなど。

10.Switch (スイッチボタン)

switch_ui

オン/オフを切り替えるボタン。toggle ボタンと違うのは、スライドして切り替えることができるところです。こちらはオン・オフの実装方法と、PSD素材です。

11.Scrubber(スライドバー)

scrubber_ui

音量調整などのUIに使うスライドバー。以下はjQuery UI の Sliderのまとめ。

12.Progress(ブログレスバー)

progress_ui

残り時間など作業の進捗状況を横棒の色によって表示するバーです。以下、サンプルまとめと検証結果。

13.Spinner(処理中)

spinner_ui

ローディングアニメーション。Laddaのサンプルでは実際ボタンをクリックすると、処理中のアニメーションを見ることができます。もう一つはページ全体が読み込まれるまで、ローディング画面を表示させる方法。

14.ラジオボタン/チェックボックス

radio_ui

PCと同じようなラジオボタンではスマートフォンではタップしにくくなります。こちらはスマートフォンでもタップしやすいように作成する方法。

補助

15.郵便番号>住所を自動補完

郵便番号を入力すると住所を自動的に補完してくれる便利な jQueryプラグイン。通常版、スペース・改行圧縮版のminifyがあります。

16.チャート

chart_ui

Highchart、ccchartのサンプル。円グラフや棒グラフを組み合わせたものなど。もう一つは折れ線、円グラフ、棒グラフなど4種類のグラフが用意されているjQuery Visualizeの使い方。

17.ストライプテーブル

stripe_ui

疑似クラス「nth-child()」を使う方法など。一行ごとに背景色を設定する表の作り方。料金表や価格など見やすくなるので使いましょう。

18.テキストエフェクト

texteffects_ui

jQueryやCSS3で表現できるテキストエフェクトまとめ。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする