iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
【翻訳してみた】Google Design - モーションデザインは難しくない｜Iori Iwaki｜Motion designer
前置き 去年の暮れ頃、最初に翻訳をしようと思ったキッカケがこの記事でした。海外ではモーションデザインに関する記事がMediumに存在し、日本語記事が存在しないことにストレスを感じていました。著者のJonasさんに連絡を取り、翻訳の許可をいただいたことからこのnoteの翻訳を始めました。 引用元 : Medium - Google Design - Motion Design Doesn't Have to be Hard 著者 : Jonas Naimark Googleのマテリアルデザインチームで働くモーションデザイナー。 彼のTwitter,Dribbleアカウントはこちら。 https://twitter.com/jonasnaimark https://dribbble.com/jonasnaimark モーションデザインはUIの表現力を向上させ、使いやすくする手立てになります。そ
Material Theme Editorを使ってみた｜Yuya Furusato｜note
今回のGoogle I/O 2018では、Material Designの大幅なアップデートが紹介されていました。 Material Designのメリットは、レスポンシブを考慮したレイアウトやコンポーネントを設計しているので、様々なデバイスで使用しても破錠しない点です。 一方デメリットとしては、完全にガイドラインに合わせてデザインすると、代わり映えのないビジュアルになってしまい、差別化が難しい点がありました。 そのような課題に対して「Material Theming」というコンセプトを掲げ、Material Designのコンポーネントを自由に編集できる「Material Theme Editor」というプラグインをリリースしています。 今回はMaterial Theme Editorをざっくり使ってみた感想をまとめています。 まずは、Material Theme Editorの使い方マ
新しくなったMaterial Designのココに注目！最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる
先日開催されたGoogle I/O 2018で、Material Designは大きくアップデートされました。 ロードマップによると、今回のアップデートを皮切りに、これからも毎月リリースされ、Material Designはその表現力を高める機能を充実していくとのことです。 Material Design Material DesignはGoogleが提供するオープンソースのデザインシステムで、Webサイトやスマホアプリのデザインから実装まで幅広く利用できます。 Google I/O 2018でアナウンスされた大きなポイントは、3点。 Material Themingはテーマを使用して、開発者がプロダクト全体でユニークなスタイルを一貫して体系的に表現できるようになりました。 ワークフローを効率化する3つのツールがリリースされました。 Material Theme Editor, Mater
モバイルナビゲーションを考察する – ハンバーガーメニューに代わるもの | POSTD
「Webサイトやアプリのナビゲーションに ハンバーガーメニュー を使うべきかどうか」というテーマに関して、UI/UXデザイナーの間で交わされる、すばらしい議論や記事を目にする機会があります。 もし、ハンバーガーメニューの始まりや歴史が気になる場合は こちらの記事 をご覧いただくといいでしょう。 しかし、今回はハンバーガーメニューについて語る気はありません。この記事ではハンバーガーメニューの代わりとなり得る他のナビゲーションを模索し、その説明をしたいと考えています。 なぜこの記事でハンバーガーメニューを扱わないのでしょうか？ それは、ハンバーガーメニューは簡単で便利なソリューションであると同時に、以下に列記するような数多くの欠点を併せ持っていると、私が個人的に確信しているからです。 * 効率性の低下（インタラクションが遅くなる） * 視認性の低下（メニューが隠れる） * 不要アイテムの増加
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
Appleはすべてのアプリに「iPhone Xディスプレイのサポート」を義務づける
Appleはアプリ開発者に向けて、2018年4月以降にApp Storeでの配信に向けて審査に提出される新しいアプリに関しては、すべてがiPhone Xの5.8インチSuper Retinaディスプレイをサポートしなければいけないと明示しました。つまり、2018年4月以降にApp Storeでアプリを配信するには、iPhone Xの画面上部にある出っ張り部分(ディスプレイの切り欠き)や、縦横比約19.5：9という縦長のディスプレイをサポートしなければいけません。 Apple will require all new apps to natively support iPhone X display from April | 9to5Mac https://9to5mac.com/2018/02/15/apple-require-new-apps-support-iphone-x/ Appl
Design Support Library v22.2.0について Part 3 - EDIT MODE
Part 1ではTextInputLayoutとFloatingActionButtonについて、Part 2ではSnackbarとCoordinatorLayoutについて調べたことを、それぞれ書きました。 今回は、TabLayoutについて書いていきます。 TabLayoutの概要 リファレンスを確認すると、TabLayoutクラスはHorizontalScrollViewクラスを継承していました。 API Level 20まで使われていたActionBar.Tabなどとは、関連がないようです。 Tabの生成にはTabLayout.TabクラスのnewTab()メソッドを使います。 MaterialDesignにおけるTabの使い方は、デザインガイドラインで細かく指定されています。 このクラスの見た目や振る舞いは、ガイドラインに沿った形で実装されているようです。 基本的な使い方 とりあ
Microsoft R Server now available for Academics and Students via DreamSpark - big data statistics, predictive modeling and machine learning capabilities - Microsoft UK Faculty Connection - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
写真が語るUXとUIの違い - Nothing ventured, nothing gained.
Windows XPのXPがeXPerienceだったことを覚えている人がどのくらいいるかわからないが、正直、最初にユーザーエクスペリエンスと聞いたときに、どのように日本に定着させようかと悩んだ。略語を開くことなどあまり無いので、製品名などは大して心配はしなかったのだが、確か何かの設定画面かにも、Experienceというタブ名か何かがあり、どのように訳すか頭を痛めたように記憶する。 それから数年、すっかりUX、すなわちユーザーエクスペリエンスという言葉が定着したように思う。それでも、今でもUXとUIを混同する場面に出くわすことがある。 すでに様々なところで説明はされているが、敢えて、ここでもUXとUIの違いを説明しよう。 UX（ユーザーエクスペリエンス）は、製品やサービスに対して、ユーザーがどのように感じ、そして反応するかのことである。実は、UXは2010年にISO 9241-210とい
［1］皆に愛されるアプリを作るために
アプリのデザインは単に見栄えがいいだけでなく、初めてのユーザーでも分かりやすい必要があります。Androidでは複数のアプリが協調して動作することがあるため、プラットフォームの慣習に従い一貫性のあるユーザーインタフェースを持つことも大切です。 Googleは2012年1月、使いやすく一貫したデザインを持つAndroidアプリの開発を支援するサイト「Android Design」（写真）を公開しました。Android Designでは、快適で効率よく使いやすく、あらゆる環境で美しいデザインを持ったアプリを作るための一般論からAndroid特有の注意点まで概要が解説されています。また、Android 4.0でのデザインの大きな変更についても紹介しています。 この連載では、Android Designの全体像と、重要なポイントを解説していきます。Android Designの全文についてはオリジ
手描きのスケッチでデザインのススメ | 使える「デザインセミナー」
こちらのスケッチはかなりお上手です。こういう、うまいスケッチを見ると俄然やる気がわいて来ますね。 sketch: video browse page featured videos ideas ↑こちらのサイトからお借りして来ました。 あまり、手描きのウェブのスケッチを見た事がないという方も多いかもしれません。私達の事務所では、よく見かける光景です。アートデイレクターからデザイナーに、とか、まあ、言葉で説明するよりも絵にしてしまった方が早い！からかもしれませんが・・・・ ということで、今日は手描きのスケッチについて。 まずは、描くもの用意 今日は、どこにでも売っていそうな画材でということでダイエー碑文谷店 でスケッチブックと鉛筆を買って来ました。 方眼ノートのメモもサイズが小さいと２００円以下。スケッチブックも１６０円くらいで買えるのかな。お薦めはスーパーで買うなら三菱のuni鉛筆のHBが
Modern Syntax
さて、モダシンラジオのデータをホスティングしてもらっているSpotify for Podcasters(旧Anchor）の私のページはこちらです。 https://anchor.fm/kazuyoshi-nagasawa このSpotify for PodcastersページのRSSは以下になります。こちらのRSSではenclosureタグなどでlength値などがしっかり入っているのでこれを購読しておくとよいかと思います。 https://anchor.fm/s/66ff2830/podcast/rss ここで聴く！という人は以下のプレイヤーからどうぞ。 音声データはGoogle Driveにもアップロードしていますので、こちらをaudioタグを使って聴けるようにもしました。 で、Spotify for Podcastersにデータをアップロードすると以下のPodcastサービスにも自動
AndroidのLayoutについて | TechBooster
Androidアプリケーションを始めて作成するときに、一番つまづきがちになるLayoutの構成の仕方。 本エントリでは、下記要素についての紹介を踏まえて、思い通りの位置にViewを構成する方法を紹介します。 今回紹介する要素 android:layout_weight android:gravity android:layout_gravity android:layout_margin android:padding 今回のサンプルではこれらの要素を使用して、以下画面を作成します。 また、今回の記事の作成にあたり、以下サイトを参考にさせていただきました。 ありがとうございました。 zaki日記 様 http://zaki.tdiary.net/20110702.html#p01 プログラミング雑記 様 http://d.hatena.ne.jp/Korsakov/20100826/128
Android Interaction Design Patterns |
Add a pattern! Missing a pattern? We invite you to add your patterns. Read more This is androidpatterns.com, a set of interaction patterns that can help you design Android apps. An interaction pattern is a short hand summary of a design solution that has proven to work more than once. Please be inspired: use them as a guide, not as a law.
第1回 デザイナーがこだわりたいAndroidアプリのデザインとは？
現在Androidマーケットにあるアプリで「このデザインなら使いたい！」と思えるようなものは、残念ながら多くありません。デザイナーがそもそもプロジェクトにかかわっていないと思われるものもあれば、デザイナーはいるけれども全体として統率がとれていないものも多くあります。 すぐれた機能のアプリであっても、ユーザーの満足度はデザインのクオリティによってかなり左右されてしまいます。この連載では、Androidアプリデザインのクオリティ向上を願い、実装のノウハウとともにデザイナーのこだわりと気持ちをお伝えしていきたいと思います。 アプリの実際のXMLコーディングを通し、デザイナーがこだわるAndroidアプリのデザインを、いかにXMLで表現するかを突き詰めて考え、実装していきます。
Circle Menu
A customizable jQuery plugin that emulates the menu in the Path application. Includes a selection animation and various animation options for opening and closing the menu. See it in action. Author Jason Hutchinson (zikes@zikes.me) How to Use Download and include the JS file in your page. Create a list, with the first list item representing the icon at the center of the menu. <ul> <li><a href="#">+
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーインターフェイスのデザインのヒント - Apple Developer
デザイン | Android Developers
