iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
「Android 12」は「Material You」で大幅なデザイン変更
米Googleは5月18日（現地時間）、オンラインで開催の「Google I/O 2021」で、次期モバイルOS「Android 12」などで採用する新たなデザイン思想の設計言語「Material You」を発表した。Androidだけでなく、スマートデバイスやAndroid Autoなど、デバイス横断でユーザーの好みに合わせたデザイン統一が可能になる。まずはAndroid 12搭載のPixelシリーズで採用される。 Material Youという名称は、2014年発表の「Material Design」の流れを汲むことを示す。Material Designのビジョンは、「テクノロジーを人々にとってシンプルで美しく、かつ合理的なものにする」というものだった。生活のより多くの領域にGoogleのサービスが表示されるようになり、また、ユーザーは自分の個人用端末にもっと感情を呼び起こす体験を求め
そのユーザーファースト、本当にユーザーファーストですか？｜宇野雄 / note inc. CDO
こんにちは。クックパッド デザイン戦略本部長の宇野です。 いきなりですが「ユーザーファースト」って良い言葉ですよね。サービスのあり方の基本であり、モノづくりをしていてそれを無視したいという人はいないはず。 しかし僕はこのユーザーファーストという言葉をあまり使わず、使う際は慎重に取り扱うようにしています。この言葉の概念はとても難しいと考えているからです。 「ユーザー」って誰のこと？目の前にいるユーザーの話をそのまま取り入れれば必ず良いものが作れるの？ 答えは明確にNoです。 当然ですが無視するべきという話ではありません。ただ、向き合ってるユーザーがどんな人なのか、その人が本当に欲しているものは何なのかを徹底的に考え抜く必要があります。 お問い合わせをしてきている人はだれ？ ユーザーからのご意見やお問い合わせ、アプリストアのレビューはとてもありがたいですよね。そこから新たな改善案をもらったり、
WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。 Spectrum for Adobe XD: Adobe’s design language in its experience design tool by Jacob Frank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Spectrumの機能と開発した経緯 Spectrumを使用した結果 Spectrumのインストール方法 Spectrumの今後の機能 ご意見をお聞かせください はじめに アドビのデザインシステムであるSpectrumは、5年前
検索 UI まとめてみた。｜あき
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
UIデザイン力を鍛えるリデザインの勧めとコツ｜坪田 朋
Twitterでクラシルのリデザインの題材として使って良いとつぶやいたら数名からリデザイン案をもらえました。ありがとうございます！ リデザインは、デザインの基礎スキルを身につけられると思うので、どんどんやったら良い派ですが、リデザインする際は何かにフォーカスすると振り返りしやすく技術を積み上げやすいです。 今回は、僕もクラシルのリデザイン案を作りつつそのコツを書いてみたので参考になればと思います。 デザイン力を鍛えるリデザインのコツ インターン採用でリデザイン課題を出すとだいたいの場合、グラフィック、UI設計、カラー変更など全部盛りの案を持ってきてくれる事が多いのですが、変更箇所が多すぎると狙いが分散した結果、フィードバックしにくい事がよくあります。 ポイントを絞り、リデザインの意図を伝えて、その案を叩きに対話できるとディスカッションのスキルもアップする上に『おおちゃんと深く考えてるじゃん
Figmaがこれからの人にも、すでに使用中の人にもいい！公式より快適に動作するmacOS用アプリ -Figmac
Figmaがこれからの人にも、すでに使用中の人にもお勧めです。macOS対応の公式より快適に動作するFigmaアプリを紹介します。 .figファイルはもちろん、.sketchファイルを編集したり、.pdfに書き出したり、共同作業やバージョン管理なども簡単にできます。 Figmaは無料で利用でき、Figmacも無料で利用できます。 Figmac Sketchファイルを開きたいけど、Sketchがない人にも便利です。 Windowsの場合は、下記をご覧ください。 SketchファイルをWindowsで開いて、編集・保存できる無料アプリが登場 -Lunacy Figmacの特徴 Figmacのダウンロード Figmaとは Figmacの使い方 Figmacの特徴 Figmacは、BlocsやSolisなどのmacOS用のUIデザインツールを開発したNorm氏の新しいアプリで、Figmaの公式アプ
iOS、AndroidのUIコンポーネントまとめ - インターネット業界で働くディレクターの雑記
スマートフォンのWebサイトやアプリの開発に関わっていると、日常的な会話の中でよく出てくるUIコンポーネント（構成要素、パーツ）の名前。 ディレクターであれ、デザイナーであれ、エンジニアであれWeb・アプリ開発に関わる人であれば、スムーズにコミュニケーションをとるために最低限押さえておきたいところでなのですが、Web、アプリ、iOS、Androidで呼び名や役割が異なるため、ごちゃごちゃになってしまうことも多いと思います。 photo credit: iPhone 6 vs iPhone 5S via photopin (license) そこでiOS、Androidともにリファレンス用にまとめました。それぞれの役割と合わせて名前を覚えるきっかけになればと思います。 iOSのUIコンポーネント まずは基本コンポーネントから。 ①Status bar（ステータスバー） ステータスバーは、時間
ビジュアルデザインとアクセシビリティ - Qiita
この記事はWWDC19のVisual Design and Accessibilityのセッション動画をまとめたものです。 ※ここに貼っている画像は、上記動画をスクショしたものです。 概要 アクセシビリティを視覚的に向上させる3つの方法について Dynamic Type Dynamic Type はユーザがフォントサイズをカスタマイズできる機能。Dynamic Type を実装するときは、次の4点に気をつける必要がある。 拡張性を持たせ、テキストはできるだけ動的に 画面の幅を最大限に利用する テキストを切り捨てず、デフォルトと同じだけの量を表示する テキストだけでなくグリフのサイズも調整して、UI のバランスを取る iOS では11種類のテキストスタイルで Dynamic Type を使うことができる。Dynamic Type を使う場合は次のように書く。 label.font = UIF
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか
先日の記事「Chrome 67でアップデートされたデベロッパーツールの新機能」で、「ケバブって言うんだ」という声が聞こえたので、メニューでよく使用されるアイコンの名称を紹介します。 横3本線のアイコンはほとんどの人が「ハンバーガー」で通じるでしょう。横3つのドット、縦3つのドットは、何て呼んでますか？ 特に名前は使わない、別の呼び方をしているなどありましたら、教えてください。 CSS Menu Icon Animation ちょうど、スマホアプリのメニューで使用されるアイコンのデモにもそれらの名称が使用されていました。これらはクリエイターの遊び心で名付けられたもので、公式な名称ではありません。 私は最初、この呼び方を下記のツイートで見た記憶があります。 Don't ever say you don't have choices on mobile. pic.twitter.com/Atu3
「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita
はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ
サクサク感をデザインする
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多
Android開発者からデザイナーの皆様へ - Qiita
Nuco Advent Calendar 7日目の記事です。 Design | Android Developers Human Interface Guidelines ちなみに上記の両記事を既にお読みの方は本記事を読む必要はありません。 ブラウザの戻るボタンをクリックしてください。 スマホアプリのデザイン 恐らくほとんどの人はAndroid、iOSのどちらか一方しか所持していないですよね？ お近くに自分と異なるOSを使っている人がいたら、是非アプリのUIを見比べてみましょう。 思っていたより違うんじゃないでしょうか？ 特に有名なアプリはほぼデザインが異なるはずです。 メニューバーはiOSは画面下部、Androidは画面上部にあるのではないでしょうか？ (もちろんそうでないアプリもあると思いますが。) あるある話なのかはわかりませんが、スマホアプリの開発を行うときにデザインが一種類しかな
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ
デザイナーが3ヶ月間毎日続けている勉強法と感じている変化
みんなのウェディングのデザイナーが3ヶ月間毎日続けている勉強法の紹介です。
Androidアプリで複数のテーマを実装する方法 - Qiita
最近はナイトテーマという形で背景が黒系のテーマに切り替えられるアプリを見かけますが、３つ以上のテーマを切り替えるアプリの場合には使えないので、それを実装する方法です。 手順 使用する独自属性（アトリビュート）を定義する 独自テーマを定義 テーマごとに、属性に対応する値を定義する レイアウトで使用する色、背景、画像定義を、独自属性に置き換える テーマの切り替え処理を実装する 独自属性（アトリビュート）を定義する 例えば文字色について考えてみましょう。文字色は白色であれば@color/whiteで定義しているでしょうが、このままではテーマに応じた色変更に対応できません。 対応するには独自属性を作りレイアウトではこれを参照させる必要があります。属性はリソースフォルダに以下のように定義します。 <?xml version="1.0" encoding="utf-8"?> <resources> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - はてな
