Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
『スマホデザインにおける、忘れがちな5つのルール』
皆様、こんにちは。 Ameba コミュニティ部門 チーフクリエイティブディレクターのサトウ（@sugaar）です。 今回は、弊社コミュニティ部門における、サービスクオリティの向上とデザイナーのスキルアップを目的として開催している、「デザイナーロワイヤル」についてご紹介すると共に、普段忘れがちなスマホデザインの5つのルールをまとめさせて頂きます。 デザイナーロワイヤルとはデザイナーロワイヤルとは、8～10名のデザイナーが、お題となったAmebaサービスを使い込み、自分なりのブラッシュアップ案を持ち寄って点数を競う、バトル形式の会議です。 発表者以外にも、誰でも傍聴参加が出来るこの会議。 他のデザイナーの提案を間近で聞けるという事で、 回を追う毎に傍聴人が増え、会議終盤では熱気に包まれるほどの人気会議となりました。 そんなデザイナーロワイヤルの詳しい内容については、弊社「広報ブログ」で取材頂い
8割以上の人、スマートフォン専用サイトの必要性を感じていないことが判明
有限会社いろはの代表取締役兼経営コンサルタント・竹内謙礼が、「ネットで売れるもの売れないもの 増補改訂版」（日本経済新聞出版社）を8月2日に発売するにあたり、楽天リサーチを活用して、スマートフォンユーザー100名に対して、アンケート調査を行った。 同調査では、スマートフォンで一般的に表示される「PCサイト」と、スマートフォンの画面の大きさに合わせて表示される「スマートフォン専用サイト」と、どちらが活用されているのかを中心に尋ねた。 まず、「スマートフォン専用サイト」と「PCサイト」、どちらが使いやすいか質問したところ、「スマートフォン専用サイト」と回答した人が39％だったのに対して、「PCサイト」と回答した人が45％と、6ポイント上回る結果となった。「特に意識はしていない」と回答した“どっちでもいい派”の人が16％いることから、6割以上の人がスマートフォン専用サイトに対して利便性を感じてい
スマホ向けサイトのユーザビリティとランキングを低下させる12個のマイナス要因
[対象: 中〜上級] さまざまなモバイル向けサイトの研究中に出くわした、ユーザビリティを大きく損ねる12個の要素をE-consultancyがブログで解説しました。 ユーザビリティの悪化だけではなく、なかにはGoogleのランキングを下げる原因にも繋がるスマートフォンサイトの構成ミスも含まれています。 モバイル対応が必須になっている現在のサイト運営において、とても参考になる記事なので紹介します。 なお直訳ではなく、僕なりの言葉で要点を説明します。 英語がわかる方は原文も読んでください。 モバイルサイトのユーザビリティを損ねる12個の欠陥 1. 突然デスクトップ向けサイトに切り替わる モバイル向けのページを閲覧していたのに、デスクトップ向けページに突然移動させられてしまうサイトは確かにありますね。 モバイル向けのデザインだったのに、ページを移動したら何の前触れもなくPC向けのデザインに切り替
レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px～リキッドデザインにすることが多い
フラットデザインを巧みに利用している10のアプリ | ブログヘラルド
アップルは数日以内にiOS 7の発表を行うと見られている。そんな中、ここ最近、「フラットデザイン」と言う用語が飛び交っている。フラットデザインがどんなデザインなのか気になる人のために、今回はアップストアで提供されている10点の美しいフラットデザインを採用したアプリを紹介していく。 そもそも「フラットデザイン」とは何だろうか？Abduzeedoは「シンプル、フラット、そして、タイポグラフィー」を活用したデザインだと定義している。要するに、現実の世界の物体とは一線を画し、大幅に縮小を行った、「うるさくない」デザインであり、スタイリッシュなタイポグラフィーに重点を置いている。アップルのデザインにおいて大きな権限を持つジョニー・アイヴ氏は、ミニマリズムを崇拝していることで有名であり、アイヴ氏によってデザインされたハードウェアは、美しさ、そして、ミニマムのシンプルさを強調している。そのため、ソフトウ
離婚回避マニュアルを購入したいと思っているなら・・・ ｜ 口コミ・レビュー投稿 E-BOOKデータベース
離婚回避マニュアルを購入しようとしているなら、こちらのリンクをよく確認したほうがいいです。 このWEBサイトで、女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～の購入によって一体何ができるのかを、よく理解してから購入されることをおすすめします。 また、レビューや口コミが掲載されていれば、それもよく確認しましょう。 次の女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～に関した情報も購入の参考になるかもしれません。 販売商品名称：女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～ 教材説明：画期的な究極の離婚回避マニュアルをご紹介します。絶対に離婚したくない夫に徹底的な女性目線でお伝えする、離婚回避バイブルです。市販のマニュアルの多くは、男性が男性目線で書いたものであり、「妻の感情」をまったく無視しています
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
コレを抑えておけばOK！スマホサイト制作に役立つ記事・サイトまとめ！ | PLUS
一般企業サイトでもスマートフォンに対応するサイトが増えてきました。ちょっと前までは提案しても、もうちょっと先でいいよという話に落ち着いていたんですが、ようやく身近なクライアントも導入をはじめています。そこで今回は実際にスマホサイトを作る立場から、役に立ちそうな記事やサイトをまとめてみました。 スマホサイトのギャラリー 絶対見ておきたい有名企業のスマホサイトまとめ 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス スマートフォンサイト デザイン集 AGT thinkthing スマホ制作に役立つ情報 【スマートフォンサイト制作の総まとめ 第1弾】スマホサイトデザインの基礎知識 少しのコードで実装可能な15のスマートフォンサイト用小技集 200サイトのiPhoneデザインを見て感じたスマートフォンの最適化 Webサイトのスマートフォン対応 7つの基本ルール スマー
はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
UIが美しすぎる15の次世代モバイルアプリデザイン ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
世界的なスマホの急速な普及とそれに伴う様々なアプリの登場と共に、モバイルデバイス向けのUIデザインも様々な試行錯誤と進化を続けているようです。今回は、デザインにはこだわりのある人気ITメディアThe Next Webのスタッフが選んだ次世代のモバイルアプリを担う15のUIデザインを紹介します。 — SEO Japan コードを学ぶのと同じように、デザイナーとして上達する一番の方法は、習うより慣れることだ。それでもやはり、優れた作品を称賛して模倣すること（という名の練習）が驚くべき効果を発揮しないというわけではない。何よりも、他のデザイナーが過去にしたことを見ることは、相当な時間の節約になる。なぜならデザインには歴史があり、誰もが有効なものと有効でないものから学ぶべきだからだ。 今回の記事では、あなたのデザインのインスピレーションのなるような、15の見事なユーザーインターフェース（UI）のリ
[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 5 Useful CSS Tricks for Responsive Design [ad#ad-2] 下記は各ポイントを意訳したものです。 動画コンテンツの配置 max-width, min-widthの小技 値を相対値に overflow: hiddenを使ったテクニック 長いテキストは折り返す 動画コンテンツの配置 Responsiveデザインに対応した動画コンテンツの配置方法です。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe,
様々なモバイルユーザーインターフェイスが確認出来る「MobileTuxedo」が熱い
発見して記事書き始めて、もしや他でも紹介されているのかと思ったらコリスさんとかでも紹介されてた。なので書くの一度やめてたのですが、やっぱりこのサイトは、もっと広く知られるべきかと思ってご紹介。 なんというか、きっちり絞ってまとめるっていうのはそれだけで価値があるんだなと感じさせられるWebサイトでもありますよね。 素材、デザインなんでもあり 特に注力したいのがインターフェイスデザインの豊富さ。 UI Patterns | Mobile Tuxedo とにかく豊富なリソース。 モバイルインターフェイスの中でもカテゴリがたくさんあります。 ナビゲーション コメントインターフェイス ログインインターフェイス 写真ギャラリーインターフェイス この他、マップやサインアップインターフェイス、設定画面、電卓など色々ありますので、モバイル開発者なら一度は目を通しておくといいかもしれませんね。 またインター
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ
User Avatar
心地よさを目指した布やゴムのようなツクロアのドロワーUI | 株式会社ツクロア
html5-memo.com
