タグ

ブックマーク / note.com/usagimaruma (4)

  • 「デザインシステム」がよくわからないので、理解の仕方を変えてみる|usagimaru

    ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、当に同じ概念を指しているのでしょうか? 定義にあたってみる「デザインシステム」「Design system」の言葉の定義を軽く調べてみました。 とりあえずWikipedia英語)にはこのように書かれています。 デザインシステムは、任意のアプリケーションを組み立てるのに用いる再利用可能なコンポーネントと標準規約の集まりです。デザインシステムは、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートします。パターン、コンポーネントライブラリ、デザイン言語、スタイルガイド、コード化さ

    「デザインシステム」がよくわからないので、理解の仕方を変えてみる|usagimaru
  • なめらかなユーザーインターフェイスの実現|usagimaru

    「なめらか」というと、表面に引っ掛かりがない様子や、大きな摩擦がはたらかずに物がよく滑る様子などを表します。UIにおいてはアニメーションの動きがなめらかだとか、コンテンツの読み込みが速いとか、絵が美しいとか、そういう直接的な印象に対してよく用いられる言葉ですが、私は「なめらかなUI」というものは、単にツルツルした表面の印象やアニメーションなどの振る舞いのみならず、それが人間(ユーザー)にとって扱いやすいと感じられる印象があり、実際に心地よく感じられ、滞りなく求めた以上の良き効果をもたらすインターフェイスの作りや、それによってもたらされるユーザー体験の印象、製品機能や業務の様子までも含む包括的な言葉としても解釈できると考えています。 「なめらか」の意味 ・滑りが良い/滑りやすい ・滞りがない ・引っ掛かりがない ・摩擦がはたらかない ・凹凸がない ・曲線的 ・平坦的 ・円滑 ・流暢 ・つるつ

    なめらかなユーザーインターフェイスの実現|usagimaru
  • Material Designの設計思想を探る|usagimaru

    この記事は、2018年5月25日に開催された Google I/O Extended 2018 Shibuya での講演内容を文章に起こしたものです。当時はGoogle I/O 2018の直後、Material Designガイドラインがいくらかアップデートされ、Material Themingや柔軟な基盤の構築といった新たな考え方が明示されたばかりでした。この講演は、アップデートされた内容の背景にある思想や意図を考察し、Material Designの動向を探ろうという趣旨になります。この記事では当時のスライドを交えながら内容の解説と考察を行います。 今回は、I/Oで明らかになったMaterial Designの新しい部分を中心に、iOSのデザインと比較しながらその設計の仕組みや思想を探っていきたいと思います。異なる観点から向き合うことで共通点と他との差異を見極めるという方法をとります。

    Material Designの設計思想を探る|usagimaru
  • iOSにおける半モーダルビューの解釈|usagimaru

    iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー(Semi-Modal View)」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG(すなわちiOS 13対応版)からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少

    iOSにおける半モーダルビューの解釈|usagimaru
  • 1