前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで

まず、iPhone Xに対応していないWebサイトはSafariブラウザではどのように表示されるのでしょうか？ ポートレートモードでは一見正しく表示されます。 下向きにスクロールするとステータスバーが表示されなくなり、画面下部のラウンドした領域にもコンテンツが表示されます。 早い話が、追尾型広告のようなページ下部に表示されるコンテンツに重要なコンテンツやナビゲーションを配置すると、クリックされない可能性が高くなります。 また、ランドスケープモードでははっきりと違いがわかります。 ツールバーやステータスバーは全画面で表示されます。 中央左右に安全領域がありますが、それ以外の部分もbody要素のbackground-colorで描画されます。 なお、背景画像を指定していても無視されるということを覚えておきましょう。 そのほかにも、セーフエリアの存在でデザイナーが意図した描画がされない状態になり

iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと

iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ

アイコン変更の3つのやり方と概要 Androidスマホでアイコンを変更する方法はAndroidのバージョンアップによって使えなくなるものも出てきました。アプリがPlayストアから削除されてしまったものもあります。2020年12月現在、Android 10で使える方法は主に3つです。簡単な特徴は以下の通り。 アイコン変更系アプリを使う ホームアプリを変更しなくても使えます。ただし1個1個変更していかなければならないのが面倒なのと、やり方によっては小さなアイコンが付いてしまう、英語のアプリが多い、自分で画像を用意しなくてはならないという欠点もあります。 アイコンパックを使う ホーム画面のアイコンも、アプリドロワーのアイコンもまとめて変更できます。ただし、対応するホームアプリが必要なのと、アイコンパックに収録されてないアプリはそのままなので統一感が微妙になることがある、という欠点があります。 ホ

このブログは現在WordPressというCMS（コンテンツマネージメントシステム）を使って運営しています。 このブログは長い間、主に自宅のパソコンからブラウザを使って更新してきました。ブログを開設してから長い間ほぼ無職であったため、これまではそれで十分でした。 ところが、最近になって私が働き始めた影響で、自宅のパソコンに触れる時間が減っています。そして、自分のブログに触れる時間も同様に減っています。あまりこのブログを管理できなくなってきました。 今までと同じやり方では、ブログ記事を修正する必要に気づいても、家に帰るまでは記事を修正する事ができません。家に帰った時にブログの修正をしなければならないことを覚えているかどうか分かりませんし、これでは不便です。 自宅のパソコン以外からも、いつでもどこでもブログを管理したい！ 私の中で、WordPressで運営しているこのブログを、勤務先の休憩時間中

京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。 リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。 しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。 長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。 例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。 自動リンクを無効にする このような問題を回避するために、自動リンクを無効にする方法があります。 電話番

オフラインWebアプリの再到来で今、再び注目されるAPIの本命　ーJavaScript SQL-like databaseyoshikawa_t

デジタル機器の利用動向で知られるコムスコアの調査によると、2011年12月時点の日本における携帯電話に占めるスマートフォンの割合は16.6%でしたが、2012年6月には23.5%になり、半年で約7ポイントも増加しました。「まだ4人に1人の割合じゃないか」と思う方もおられるでしょう。 しかし、有名な「キャズム理論」によれば、普及率がイノベーターとアーリーアダプターを合わせて16%を超えると、一般大衆が技術を受け入れます。2012年12月時点の普及率はまだわかりませんが、すでに半分を超えていてもおかしくありません。スマートフォン未対応の企業サイトは、「時代遅れ」といっても過言ではないのです。 日本のスマートフォンサイトの問題点 すでにスマートフォン対応を済ませた日本の企業サイトは「マーケットに素早く対応して流石だ！是非、お手本として見習おう」といえるでしょうか？　先行してスマートフォンに対応し

先月までスマートフォンサイトを制作してまして、そこではまったのがXperiaのChromeです。 Androidの実装が不十分だったのかわかりませんが、スマートフォンサイトには欠かせないmetaのviewport指定が無視される仕様？になっていました。 metaタグのviewport指定というのは何か？といいますと、スマートフォンで画面表示時の横幅のサイズが指定するためのものです。 サンプル：<meta name="viewport" content="width=480,user-scalable=yes" /> widthは幅指定 user-scalableはユーザー側での拡大縮小可否。スマートフォンは解像度が様々なので（IS01は横幅960px）、viewport指定がないとこちらが意図した表示がされません。 Xperiaはデフォルトの表示設定が中になっているのですが、その設定だと横

[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-

あの1.5倍ズーム挙動がなくなってる？ 今のところiOS Simlulatorによる確認ですが、iOS対応で珍しく開発者・制作者の頭を痛めつけてくれていたinitial-scale=1のときの「回転時にズーム1.5倍問題」がiOS6で改善されていました。 よくある下記のような、Viewport指定したときのアレですね。 一応、上記の例ではwidth=device-widthつけてありますが、国内でAndroidとiOS対応だけを標榜するなら、initial-scale=1だけで構わないでしょう。たぶん。 そもそもですが、iOS5以前で以下の現象を回避するなら、landscape時のwidth=480pxを犠牲に、width="device-width"だけでもいいですし。iOSのdevice-widthは向きを問わずに320CSSピクセルを指してます。 まずは縦から まずは普通に縦持ちで表

死者25名（現時点）と残虐な京アニ（京都アニメーション）の放火事件に対し、フランス大使館、中国大使館、エストニア共和国外務省からそれぞれお悔やみのメッセージが公開されています。 駐日フランス大使 【大使の言葉✒】京都アニメーション火災 pic.twitter.com/8gSXg83bfb — フランス大使館 (@ambafrancejp_jp) July 18, 2019 多くの犠牲者と重傷者を出した京都のアニメーション制作会社の火災を知り、恐怖を覚えました。犠牲になられた方々と御遺族の方々、また京都アニメーションの職員の皆様にお悔やみとお見舞いを申し上げるとともに、フランスの全面的な連携の意を表します。 ローラン・ピック 駐日フランス大使 駐日フランス大使館 中華人民共和国日本国大使館 京都で発生した悲惨な事件で、お亡くなりになられた方のご冥福をお祈りし、負傷された皆様にお見舞いを申し上

8/18におこなわれたCSS Nite in OSAKA, Vol.32での発表用スライドです。4/27のCSS Nite in OSAKA, Vol.29で使用したスライドをベースに、若干の追記・修正をした内容となっています。Read less

CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。Read less