スマホに特化したウェブサイト・モバイルファーストな「スマポンシブ」（PCはサブ的な扱い）｜Re:design News
（記事・写真）株式会社アールイーデザイン 辻 元気 スマホに特化したウェブサイトが近年、to Cに関して特に増えてきている。 そんなスマホに特化したウェブサイトをまとめてみた。 @2Gweb / @2Gcam 最終更新：2022/11/21 このカテゴリは何ていうデザインなんでしょうか？ モバイルファーストなデザインではあると思うんですよね。 PCで見ると、レスポンシブではあるんですが、スプリットデザイン的でSPのコンテンツ＋αな感じなんですよね。 一般向け（to C）のコンテンツならもうこのスタイルでありなんじゃとすら思っています。 この謎のデザインの肝は、PCの時の余白の使い方にあると思います。 SP的な要素はAndroidに合わせてなんでしょうけど、540px以下で展開しているものが多いような気がします。 なんて名前で呼べばいいかはわからないですが、その筋の間では昔の任天堂から発売さ
画面をデザインするということ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 改定情報 2025年8月に改めて再整理、追記をして以下に書き直しています。 ↓からは元記事のまま未編集です この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業
iOSのDynamic Typeについて - Qiita
Dynamic Type (ダイナミックタイプ) Dynamic TypeはiOS上でデフォルトの文字の大きさを変更する機能です。対応しているアプリの文字サイズを一度に全部変えられます。 大きさだけでなくフォントの種類やスタイルも決められているので、Apple推奨の見た目を簡単に得られるというメリットがあります。その一方で、考慮しなければならない条件がひどく増えてしまう、厄介な機能でもあります。テストの手間を増やすだけでなく、画面設計にも大きく影響を及ぼします。 本文章は、Dynamic Typeに対する備忘録です。 対象OS：iOS9/iOS10/iOS11 対象Xcode：9.4 Dynamic Typeを使うためのユーザー操作 設定アプリに２通り用意されています。 その１：(iOS9 - iOS13) [設定] -> [画面表示と明るさ] -> [文字サイズを変更] その２：(iOS
三井住友銀行アプリについてお話します。｜SMBC DESIGN
こんにちは！三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 本題に入る前に…、お伝えしたいことがあります。 三井住友銀行初！2019年度グッドデザイン賞を取りました！！（ぱちぱちぱち） デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは本当にうれしかったです。 それでは本題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ
Androidには呪いがかけられている
Androidには呪いがかけられている2019.01.08 18:0043,431 Alex Cranz - Gizmodo US ［原文］ （ そうこ ） これだから、Android端末はイライラする！ Android大好き！ だーいすき！ でも、いまだに｢コレだけはなぁ｣ とイライラが止まらないことがあります。大好きなのに、この1点のせいで｢お前、ぶっつぶしてやろうか？｣って言いたくなるぐらい腹がたつこと。それは、Google（グーグル）がOSアップーデートだしてから、 他社（Samsung（サムスン）、OnePlus（ワンプラス）、Huawei（ファーウェイ）など）製造のAndroid端末がアップデート対応するまでにハチャメチャ時間がかかるということ。 昨年（地域にはよるものの）Samsung S9/ OnePlus 5ユーザーがAndroid 9 Pie機能を楽しめるようになる横で
Action Sheets - Views - iOS - Human Interface Guidelines - Apple Developer
An action sheet is a modal view that presents choices related to an action people initiate.
Googleの新スマートフォンPixel 3の「夜景モード」が問いかけるもの（あるいはAIとはなんなのかという実感について）｜Takahiro Bessho｜note
Googleの新スマートフォンPixel 3の「夜景モード」が問いかけるもの（あるいはAIとはなんなのかという実感について） たまにはカメラのレビューなんていう、フォトグラファーっぽいこともしてみますね。といっても、普段はカメラの記事を書くときって、大体カメラ会社が作ったボディやレンズに関する記事を書くことが多いのですが、今回は話題のスマホPixel 3のカメラ、しかも鳴り物入りで搭載された「夜景モード」だけに限定した超ニッチな記事です。でも、このニッチに思える画像技術は、これから先の写真の方向性をもしかしたらすごく変えちゃうかもしれない。そう思うほどに、今回のPixelが搭載した「夜景モード」は、衝撃的な機能でした。まず、その違いを是非画像でご確認ください。Twitterにもアップしましたが、iPhone Xとまったく同じ時間、同じ場所で撮影した写真を並べたものです。 撮影場所は比叡山の
アニメーションを使った効果的なモバイルなトランジション例 - ポップインサイト
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザ
オブジェクトベースなUIデザインに取り組むための心構え｜usagimaru ⌘ Satori Maru｜note
オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す
オブジェクトベースなUIデザイン｜Yoko Nishida｜note
WEB+DB PRESS Vol.107掲載のオブジェクトベース設計によるUIデザイン改善を読んだ。デジタルなサービスのUIを設計していく上で、とても参考になる知見なのでまとめてみる。 オブジェクトベースUI設計とはユーザーがやること（タスク）の手順をそのまま画面に反映させるのではなく、ユーザーの関心対象（オブジェクト）を画面とデータに対応させながら考えていく手法。 オブジェクトベースUI設計の良いところこのオブジェクトベースUI設計は、特に複雑なタスク＆要求が混在する業務利用アプリケーション（SaaS / B向けサービス）のUIデザイン改善、運用で活かしやすいという印象を受けた。 大規模なシステム、膨大なデータと連携しながら、多様なユーザーニーズに応えやすいUIを実現するにはどうすれば良いか。 要件に散在する情報をオブジェクトとして捉えることで、その場しのぎではないUIデザインが作りやす
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿で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まで
コンピュータを理解するにはExcelが最適だった 83歳の現役プログラマーが語る、アプリ開発秘話 - ログミー
米国アップル社、マイクロソフト社、そして国連本部も認めた83歳のアプリ開発者 若宮正子氏登壇！｢MY SMART WORK LIFE｣セミナー②。世界を魅了する理由に迫る!! 2018.09.06 - 2018.09.06 米国アップル社、マイクロソフト社、そして国連本部も認めた83歳のアプリ開発者 若宮正子氏登壇！｢MY SMART WORK LIFE｣セミナー②。世界を魅了する理由に迫る!!（全2記事） 突然世界中で有名人になってしまった、若宮正子氏の講演若宮正子氏：みなさん、こんばんは。若宮正子です。どうぞよろしくお願いいたします。だいたいの人はみんな「マーちゃん」って言っているみたいなんですけども、戸籍上の名前は若宮正子です。 今日お話しすることは、まず自己紹介。それから、今日のテーマであります「私は創造的でありたい」というお話。それから最後に、最近の活動から得られたものです。とい
Framer Xはプロトタイピングツールを超えていく – なかじー – Medium
プロトタイピングツールとして知られてきたFramerが、8/1より、全く新しいタイプの後継プロダクトをβリリース中です。 その名もFramer X。 つい数時間前にBeta2バージョンがリリースされ、その全貌が明らかになりつつあります。 手元にβ版が手に入ったので、使い心地をレポートしていきます。 ざっくり旧版と新版の違いを要約すると、下の３点になります。 Framer（旧版）
iPhone, iPad, Apple Watch ディスプレイサイズ一覧｜Seiji Miyazawa｜note
iPhone や iPad、Apple Watch といった、Apple のモバイルデバイスのディスプレイサイズがひとまとめで比較できる一覧 PNG を作成しました。 以下の項目がブチ込んであります。 ・名称、米国での発売年、物理的なドット数、物理的な解像度、 論理なドット数、論理的な解像度、Retina画像、倍率。 ・対角インチ数、ドットピッチ、横縦アスペクト比、 ノッチや角丸を考慮した表示領域の面積。 ・対応OS。Apple が正式に発表していないものに関しては、私が計算した数値になりますので「だいたいこんなもんか」程度でお願いします。間違ってるところや変なところがありましたら、@onthehead まで、優しくご指摘ください。 Apple mobile device display size PNG 画像iPhone、iPad、Apple Watch をひとまとめにした一覧です。ぱっ
iPhoneのWi-Fi が完全オフにならない？ショートカットで一発オフ・自動化する方法
ブログメディア「携帯総合研究所」を運営しています。学生時代に開設して今年が16年目。スマートフォンの気になる最新情報をいち早くお届けします。各キャリア・各メーカーの発表会に参加し、取材も行います。SEの経験を活かして料金シミュレーターも開発しています。 iOS 11以降のiPhoneとiPadでは、コントロールセンターからWi-Fiをオフにしても完全オフにはならず“未接続”の状態になります。 Wi-Fiの未接続はWi-Fi接続をいったん解除するもので、未接続にした場所から移動したり、時間が経過するとWi-Fiが再度オンになることから多くのユーザーから不満の声があがりました。5Gではデータ使い放題の無制限プランが導入されたこともあって、これからWi-Fiの利用が減っていくことも相まって不満の多い仕様です。 Wi-Fiを完全オフにするには設定画面を起動して、いくつか手順を踏む必要がありますが、
iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス #iOSDC 2018 - laiso
iOSDC Japan 2018 に採択されたトーク「iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス」のブログ版記事です。 CfP提出後に内容は二転三転しまして、当初は最新Web開発事情について技術的に突っ込んだ内容にしようと目論んでいたのですが、「iOSエンジニア」へ「伝えたいこと」という軸で作っているうちにこの内容に落ち着きました。 当日聞きに来てくださった方、声をかけていただいた方。このような場を下さったiOSDCスタッフの方々にはたいへん感謝しています。 Introduction📛 昨年末 SafariにService Workersが実装され「iOSがPWAをサポートした」というニュースが業界内で話題になりました。 (※Progressive Web Apps 以降 PWA という略称で話します) この時話題になっていたSafariのPWAサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apple Payが日本にやってくるまでの話【鈴木淳也のPay Attention】
consim. β
gadgetino.net
デザインの参考になる！最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
