calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

User_Interface_Patterns

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

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

メニュー

ウィンドウ

ボタン

補助

メニュー

１．円形

circular_ui

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

２．タブ

tab_ui

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

navigation_ui

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

４．アコーディオン

accordion_ui

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

ウィンドウ

modal_ui

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

６．フローティングウィンドウ

floating_ui

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

７．Dialog(ダイアログ)

dialog_ui

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

８．フォーム＋バリデーション

form_ui

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

ボタン

９．Toggle (トグルボタン)

toggle_ui

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

１０．Switch (スイッチボタン)

switch_ui

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

１１．Scrubber(スライドバー)

scrubber_ui

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

１２．Progress(ブログレスバー)

progress_ui

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

１３．Spinner(処理中)

spinner_ui

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

１４．ラジオボタン／チェックボックス

radio_ui

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

補助

１５．郵便番号＞住所を自動補完

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

１６．チャート

chart_ui

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

１７．ストライプテーブル

stripe_ui

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

１８．テキストエフェクト

texteffects_ui

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

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。