コントラスト比が低いUIは20人に1人以上に影響! 対策をまとめてみた | DevelopersIO
はじめに スマホアプリやWebアプリで、ボタンなどのUIを作る場合を考えます。例えばボタンの色と、その上の"OK"などのテキストの色を決める際に注意すべき点を紹介します。UIだけでなく、ドキュメントの図やプレゼン資料など、色を使う全ての場面に使えます。 例えば、スマホアプリに次のようなボタンがあるとします。 こういう配色のボタン、よく見ますよね。ところが、このボタンは背景の黄緑色と「今すぐ購入」のフォントの白の「コントラスト比」が低い、つまり「色の明るさの差」が少ないので、「文字が薄くて読めない」と感じるユーザーが存在します。 人間の色の感じ方はみな同じではなく、遺伝子の状況や疾患などによって異なります。例えば、正常とされる人とは異なった色に見えたり感じたりする「先天性色覚異常」は、日本人男性の20人に１人(5%)、日本人女性の500人に1人(0.2%)といわれており、男性ではAB型の血液
管理職のためのエンジニア組織構築マニュアル | DevelopersIO
はじめに クラスメソッド株式会社 AWS事業部長の佐々木です。 私は前職で創業メンバーの1人としてビジネスを立ち上げた後、エンジニアとして実業務に携わりながら、統括マネージャーとして50人規模のエンジニア組織を構築しました。 また2014年にAWSエンジニアとしてクラスメソッドに入社し、2015年7月よりAWS事業部の部長に就任。事業は順調に拡大しており、2015年と比較して組織も2倍以上に大きくなりました。これは優秀な仲間に恵まれたのはもちろんのこと、組織設計と構築プランが功を奏したことも一因だと感じています。 そこで、私がこれまでに培ってきた経験から得たエンジニア組織の構築の仕方をお伝えしたいと思います。 エンジニア組織構築マニュアル 骨子を定義する これはエンジニア組織に限りませんが、組織には3つの骨子が必要です。 ポリシー ビジョン ターゲット ポリシーは、その組織が最もこだわる一
[iBeacon] 外にある色々なものに埋めるとBeaconの電波がどうなるのか試してみた | DevelopersIO
こんにちは！おおはしりきたけです。前回は、色々なカバーをつけた場合のBeaconの電波強度について調べてみました。Beaconを外でも活用したいという方も居ると思います。実際土に埋めたらどうなるのか？など私も気になっていたので、外にある色々なものに埋めてBeaconの電波がどうなるのか色々と試してみました。 iBeaconとは？ 前回に引き続き、一応今回もこちらの資料を見ていただければと思います。 検証端末について 今回も検証で利用したのは、Aplix社さんのBM1というBeaconになります。防水防塵のためジップロックに包んでかつケースに入れて試してみました。 BM1について 検証したBM1は、以下の写真のものになります。Measured Powerは-59です。Measured PowerとはBeaconモジュールと、受信機の間が1mの場合の受信信号強度（RSSI：Received S
![[iBeacon] 外にある色々なものに埋めるとBeaconの電波がどうなるのか試してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/835777b679022ca829aed2d76b02f4a7367b23bb/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F12%2Fbeacon_eyecatch.png){kind=tracking}
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
スマートフォンサイトのパフォーマンスチューニング | DevelopersIO
スマートフォンサイトのパフォーマンス測定とチューニングに関して調べたことをまとめます。 パフォーマンス測定のツールはKeynote社のMITEを使用します。MITEのバージョンは2.3で試しています。 MITEは性能テストの他に自動テストなどを行えるテストツールです。 MITEのインストール まずはMITEのインストールからです。 MITEは以下のサイトからインストーラーをダウンロードできます。 http://mite.keynote.com/ 無料でダウンロードできますがアカウントを作成する必要があります。インストール後、起動すると以下のようなダイアログが表示されます。 ここには作成したアカウントのユーザー名とパスワードを入力します。 起動した後ですがスマートフォンの端末情報(Profile)を最新に更新するかどうかを聞かれると思います。 最新に更新する場合は"はい"をクリックします。更
Android案件の見積り | DevelopersIO
Android案件を何件か担当して見積り前に確認しておいた方がいいと思うことや決めておくこと、 事前に説明しておくべきことがいくつかあったのでまとめます。 ①ハードウェアの選定 ・どの端末をサポートしますか？ 動作確認を行う端末を決めてもらいます。 複数の端末をサポートする場合、テストも複数の端末で行うため工数もそれに応じて増やす必要があります。 ・サポートするAndroidのバージョンは？ 端末を決めた時点でほぼ決まってしまいますが"Android 2.2以上"のようにサポートする最小のバージョンを決めます。 特にお客様にご要望がない場合はアプリのリリース時期と端末、OSのシェアなどを考慮して提案しています。 ・タブレットでの使用は想定していますか？ これはスマートフォン用に開発している案件で後からタブレットでも使用したい、 というご要望を受けることがあるためです。 ・マルチデバイス対応
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 × CSS3 × jQueryを真面目に勉強してみる の記事一覧 | DevelopersIO