私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
こんにちは。クックパッド デザイン戦略本部長の宇野です。 いきなりですが「ユーザーファースト」って良い言葉ですよね。サービスのあり方の基本であり、モノづくりをしていてそれを無視したいという人はいないはず。 しかし僕はこのユーザーファーストという言葉をあまり使わず、使う際は慎重に取り扱うようにしています。この言葉の概念はとても難しいと考えているからです。 「ユーザー」って誰のこと？目の前にいるユーザーの話をそのまま取り入れれば必ず良いものが作れるの？ 答えは明確にNoです。 当然ですが無視するべきという話ではありません。ただ、向き合ってるユーザーがどんな人なのか、その人が本当に欲しているものは何なのかを徹底的に考え抜く必要があります。 お問い合わせをしてきている人はだれ？ ユーザーからのご意見やお問い合わせ、アプリストアのレビューはとてもありがたいですよね。そこから新たな改善案をもらったり、
アプリの画面をデザインする際、エンジニアさんに 「なにも登録データがない場合、どう表示しますか」「選択したときの状態ってどんなデザインですか」などと聞かれて 「ｳﾜｱ考えてなかったすみません、今作ります。。」 （なんて自分はポンコツなんだ、、ｳｳｳ） と、なりたくないですよね。 UI Stackは👆のような状況を回避するのに便利で大事な考え方だと思ったので、言葉の意味を知らない方はぜひ読んでってください！ UI Stack アメリカのプロダクトデザイナー Scott Hurff さんが世に出した 「UIの考慮すべき5つの状態」という考え方です 5つの状態 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error State（エラー状態） ・Ideal State（理想状態） 一つ一つ参考を交えな
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
Twitterでクラシルのリデザインの題材として使って良いとつぶやいたら数名からリデザイン案をもらえました。ありがとうございます！ リデザインは、デザインの基礎スキルを身につけられると思うので、どんどんやったら良い派ですが、リデザインする際は何かにフォーカスすると振り返りしやすく技術を積み上げやすいです。 今回は、僕もクラシルのリデザイン案を作りつつそのコツを書いてみたので参考になればと思います。 デザイン力を鍛えるリデザインのコツ インターン採用でリデザイン課題を出すとだいたいの場合、グラフィック、UI設計、カラー変更など全部盛りの案を持ってきてくれる事が多いのですが、変更箇所が多すぎると狙いが分散した結果、フィードバックしにくい事がよくあります。 ポイントを絞り、リデザインの意図を伝えて、その案を叩きに対話できるとディスカッションのスキルもアップする上に『おおちゃんと深く考えてるじゃん
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年前
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
米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のサービスが表示されるようになり、また、ユーザーは自分の個人用端末にもっと感情を呼び起こす体験を求め
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の公式アプ
デスク配線がスッキリ。Ankerの全部入り12 in 1モニタースタンドが突然8,250円OFFされてた #Amazonセール
今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 調査期間：2024/1/22 - 1/29 使用環境：iPhone 15、iOS17 1. アクションなしの没入体験TikTokで最も特徴的なのは動画フィードでのレコメンドの仕組みです。フルスクリーンで表示されるショート動画が上下のスワイプで切り替わり、視聴行動（視聴時間やスキップなど）に応じて次の動画がレコメンドされ続けます。そのため利用者はフォロー、いいね、コメントなどの主体的なアクションを一切しなくても、フィードをスクロールするだけで自分好みのコンテンツが表示され続けます。 動画フィードでは利用者の視聴行動に応じて動画が次々とおすすめされるTwitterやInsta
この記事はWWDC19のVisual Design and Accessibilityのセッション動画をまとめたものです。 ※ここに貼っている画像は、上記動画をスクショしたものです。 概要 アクセシビリティを視覚的に向上させる3つの方法について Dynamic Type Dynamic Type はユーザがフォントサイズをカスタマイズできる機能。Dynamic Type を実装するときは、次の4点に気をつける必要がある。 拡張性を持たせ、テキストはできるだけ動的に 画面の幅を最大限に利用する テキストを切り捨てず、デフォルトと同じだけの量を表示する テキストだけでなくグリフのサイズも調整して、UI のバランスを取る iOS では11種類のテキストスタイルで Dynamic Type を使うことができる。Dynamic Type を使う場合は次のように書く。 label.font = UIF
これを回避するために、iOSの実装側でHiragino Sansを使うという方法もありますが、その場合にも注意が必要です。Hiragino Sansを使った場合にAutoLayoutでのテキストオブジェクトの高さが、グリフを表示するための見た目の高さより小さく計算されてしまい、アルファベットのyやgなどの下に飛び出しているグリフが切れて表示されてしまうことがあります。 これはおそらくiOSに組み込まれているHiragino Sansのフォント側の問題だと思われますが、かなり前からこの問題は報告されており、修正されることはあまり期待できないでしょう。 日本語文字サイズ問題をFigma Pluginで対応する今回の問題はiOSのシステムフォントが日本語グリフの表示の場合に、特殊な文字調整を入れていることから発生しているというのが上の説明です。 つまりFigma上でシステムフォントと同じ状況が再
iOSのアクセシビリティではフォントサイズや画面の拡大などが可能です。 通常のアプリだと考慮しなくても大した問題にならないかもしれませんが、高齢者向けのサービスなどだと、利用ユーザーがフォントや画面の拡大率を設定している可能性があり、UIの崩れの原因となってしまいます。 逆に、フォントを大きくしたい大きく表示させたいユーザーに対して、その機能を制限してしまう場合もあります。 今回、この問題の仕様や対応策を考える機会があったので記事にまとめました。 フォントサイズの拡大とは？まずはフォントサイズの拡大機能についてです。 iOSの 設定 ＞ 画面表示と明るさ ＞ 文字サイズを変更 をタップすると出てくる端末のフォントサイズを全体的に拡縮できる機能のことです。 Apple公式のガイドさらに詳しく設定画面を見ていきましょう。 こちらはiOS15のアクセシビリティのフォント拡大メニューです。 7段階
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
そのユーザーファースト、本当にユーザーファーストですか？｜宇野雄 / note inc. CDO
その状態のデザイン考えてなかった！ UI Stackってナニ｜kana
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
UIデザイン力を鍛えるリデザインの勧めとコツ｜坪田 朋
WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
「Android 12」は「Material You」で大幅なデザイン変更
Figmaがこれからの人にも、すでに使用中の人にもいい！公式より快適に動作するmacOS用アプリ -Figmac
Apple創業期のデザイナーが語る「イノベーションのための5原則」 | ライフハッカー・ジャパン
TikTokのUIとインタラクションの観察｜鈴木慎吾 / TSUMIKI INC.
ビジュアルデザインとアクセシビリティ - Qiita
iOSアプリのシステムフォントにおける日本語のフォントサイズとのギャップを減らす工夫 | Spinners Inc.
iOS文字の拡大率(ダイナミックフォント)を考慮したUIデザイン｜Nviveto