jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法｜BLACKFLAG
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
Android SDK標準の何でもテストツールuiautomatorの基本的な使い方
uiautomatorは、Android SDKに標準で含まれているテスト自動化ツールです。Apache License, Version 2.0のライセンスで提供されています。 uiautomatorの主な特徴は以下の通りです。 Android 4.1以上で実行できる（端末の回転およびスクリーンショット撮影には、Android 4.2以上が必要） テストスクリプトはJava言語で記述 他者の署名した（Google Play Storeからダウンロードしたものも含む）アプリもテストできる すなわち、テスト対象の端末上にインストールされ、動作しているアプリであれば、何でもテストできる 特に、最後に挙げた特徴はuiautomator最大のセールスポイントといえます。一連のテストで、テスト対象アプリでないものを操作したいケース（例えば、設定アプリでBluetoothやWiFiをON／OFFするな
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
Android Onscreen Input Methods
ソフトウェアキーボードによって画面の領域がせまくなってしまうので、それに配慮した設計を行わないと、入力できなーい！なんてことになってしまいます。 そこで、画面上に出てくる入力メソッド（＝ほとんとソフトウェアキーボード）についてまとめたいと思います。 元ネタはこちら Onscreen Input Methods Android 1.5 から Android プラットフォーム で Input Method Framework (IMF) が提供されるようになりました。これによって、開発者は ソフトキーボードのような画面上からの入力方法を作成することができるようになりました。 ・ Android input method editors (IMEs) の概要 ・ IMF, IMEs と一緒に動くアプリケーションにはなにが必要か について簡単に説明してきます。 ■ What is an input
ゲーム系UIデザイナーの勉強を２年近くやって思った12のこと。 - meycoのUX&UIデザイン技術メモ
あけましておめでとうございます。 新年になり、すこしゆったりとした時間を過ごす事ができました。せっかくなので、去年からずっと思っていたUIデザイナーについて思った頭の中のことをまとめたいと思います。 WEBのUI設計よりも、明らかにゲームの方が難しい これは結構何度も言ってますが、ゲームの設計(ゲーミフィケーションのアプリ含む)の方が明らかに「やることが多い」です。 もっとプレイしてもらうには？ゲームが終わったときに、どのような設計になればもう一度やってくれる？ チュートリアルは必要？やりこみ要素はどうする？ソーシャルとどうやって連携する？ポイント加算の条件は？アクショナブルフィードバックは？日常で使ってくれるような設計には何が必要？盛り込みすぎではないか？ などなど、考えることが多いです。 このあたりは、ソーシャルゲームが本当に上手にできてるなーと思っているので、日々勉強しています。 ゲ
[Android Tips] Buttonにスキンを適用する | DevelopersIO
Androidではstyleプロパティを使うことで、見た目を様々なスキンに変更することができます。 今回はButtonコンポーネントをいくつかのコンポーネントスキンに変更してみたいと思います。 SDKのコンポーネントスキンの適用方法 コンポーネントへのスキンの適用はレイアウトXMLから行うのが一般的です。 スキンの適用にはstyleプロパティを使います。 Androidの標準コンポーネントスキンは"@android:style/"で参照できます。 "@android:style/"まで入力すると、コードヒントを表示することができます。 "Widget.Button.Small"などのようなコードヒントが出ますので、これで好きなスキンを当てることができます。 例えば、以下のように適用します。 適用例 <Button android:layout_width="fill_parent" and
Android4.0でFragmentを使ったスマートフォン/タブレット向けUI両対応を行う | TechBooster
Android 3.0以降でタブレット向けに追加されたFragmentが、Android 4.0でスマートフォンでも利用出来るように拡張されました。 今まではTabletの画面構成の一部をフラグメント化(断片化)し、再利用に利用することが多かったと思われますが、 スマートフォン/タブレット共通のプラットフォームとなったことでUIの両対応に利用できるようになりました。 本エントリでは、リスト表示するアプリを例にスマートフォン、タブレットのUI両対応を行います。 フラグメントをつかうことでスマホ/タブレットで共通パーツをつかって効率的な開発をすることができます。 ■図１：スマートフォンとタブレットのList表示と詳細表示 上記の図は、List(緑色パーツ)と詳細表示(オレンジパーツ)の2つのUI部品を用意し、 タブレットでは2カラムで同時に表示しています。 スマートフォンでは画面が狭いため、緑
UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 - Sadakoa.jp-Blog-
2013-11-07 UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 今回はUI/UXデザインについて触れてある記事やスライドで自分が実際に読んで参考になったと思ったものを備忘録としてまとめました。実際にUI/UXデザイナーの人や、僕と同じくUI/UXデザイナーを目指している人、また実際に興味がある人のお役に立てたら幸いです。 記事1 UI/UXの違いについて 5分でわかるUIとUXの違い : Excite Designer's Blog そもそもUIとUXは何が違うのかという事を知らない人もいると思います。 まずはUIとUXの違いについてはっきり知らなければなりません。 記事2 なぜUIとUXがよく混同されてしまうようになったのか UXとUIが混同されるワケ : could UIとUXが混同されてしまう理由について触れてある記事です。 僕も最初はUIとUXを混同
B2Cモバイル開発のいまとこれから #forcedotcomjp
Salesforce Developer Conference Tokyo 2013 での発表資料
入れるべき機能と排除すべき機能の分類メモ | fladdict
クライアントプレゼン用の覚え書き。 「機能」のほとんどは以下の5種類に分類できるので、搭載するまえにどのカテゴリに属するかよく考える。 1:必須機能 メーラーの送信、CC送信、カメラの撮影、オートフォーカスなど。 ついていて当たり前、つけなければユーザーの不満が増加する機能。 必須機能が実装されていない場合、基本的に勝負の土俵には立てない。 予算をかけすぎても、べつにユーザーへのアピールにはならない。 2:訴求機能 なくても不満ではないが、あればユーザーの満足を増加させる機能。 ユーザー自身も無自覚的で、初期段階では実物を見るまで需要の存在自体が見過ごされている。 女子向けのポップな一眼レフや、（1979年当時）歩きながら音楽が聞ける機械など。 メリットは高いがそもそも発見するのが大変だったりする。 差別化機能のうち需要の高いものは、業界内で徐々にパクられ必須機能にシフトしていく。 3:沼
box-shadowで表現する、「セミフラット」なズルいデザインテクニック
box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ） 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
Ti Flat UI Sample | UCHIDAK.NET
Titanium Flat UI サンプル Titaniumを使用したFlat UIのサンプルアプリケーションです。 2013/6/13のTitaniumもくもく会で作成しました。 ソースコードや素材の一式をgithubで公開しています。 githubのURLは以下です。 https://github.com/uchidak1124/TiFlatUISAMPLE SDKで提供されている機能のみ使用しています。 アプリケーション内で使用しているアイコン画像はFontAwesomeをベースにカスタマイズしたものとオリジナルを使っています。 フォントは丸ゴシックで細みのRounded M+ Lightを使用しています。 改変・再配布は自由です。画像素材も勝手にして頂いて構いません。 動作保証等はしておりませんのでご了承ください。 フォントのライセンスについてはこちらもご確認ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん） | BtoBサービスキューレーション Boxil（ボクシル）まとめ！
モバイルアプリのUIを処理系統でまとめた『UX Archive』 | 100SHIKI
uibox.in
Canvas Transition（改） - jsdo.it - Share JavaScript, HTML5 and CSS
Eコマース用のさまざまなUIエレメントが揃ったフラットなデザインのPSD素材
Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI
