平田 / U-NEXT

デザイナーの平田です。 個人ブログ( https://hirata.blog )とn…

平田 / U-NEXT

デザイナーの平田です。 個人ブログ( https://hirata.blog )とnoteの使い分けに困ってます

マガジン

  • いちばんくわしいUIツールの比較

    Sketch, Adobe XD, Figma, InVision Studio について徹底的に比較を行ったので、知見をまとめたいと思います。量がかなり多いです。

最近の記事

  • 固定された記事

UIデザイナーのデスク@U-NEXT

一部界隈では、机の上をすっきりさせることが流行っているようで、便乗してこだわりをガッと書きます。U-NEXTはデスクにこだわりがある人が多いらしく、デスク系noteを書くのは僕で5人目です。 ▶ ケーブル1本だけの生産性最高なデスク環境をDIYなしで作った話 - 2019版|柿元 崇利 / U-NEXT|note ▶ 書斎を明け渡すことになったのでクローゼットの中にオフィスを作った|Nobuki Inoue|note ▶ デスクをシンプルに|no-mark|note ▶

    • 買ってよかったもの2022。ガジェット・筋トレ系多め

      あけましておめでとうございます。今年も明けてから書いてます。去年はブログに書いた↓のですが、今年は写真撮る時間が無さそうなのでさくっとnoteにまとめます。 普段かばんの中に入れるもの系外で作業することが増えたので、リュックを小さくして入れてるものも軽く・高機能なものに厳選しました。リュックはikkaの小型デイパック(型番不明)を使ってます。 コンセント付きモバイルバッテリ★★★ 説明不要の定番のAnkerのモバイルバッテリーから、やっっっっっと新型が出ました。即買いま

      • UIデザイナーが理解すべきプラットフォーム原則とは

        本記事はUIデザイナーがプラットフォーム原則を理解し学習する必要性と意義についてまとめたものです。初学者には勉強の仕方・勉強する意義自体がわかりにくい領域だと思うので、その助けになれば幸いです。 プラットフォーム原則とはデジタルプロダクトの世界においては、OSなどのプラットフォームでベンダーが公式に推奨しているルールなどについて指すことが多いです。アプリケーショを作成する上でのUIコンポーネントや挙動、その他の標準仕様についてをまとめたものです。Appleが提供している H

        • CSSだけでWebページをダークモード対応。ついにChromeにも対応した prefers-color-scheme が超便利

          prefers-color-scheme という設定値を使うことで、Webページをかんたんにダークモード対応させることが可能です。Chromeでも本日公開された76から対応されたので、かんたんに紹介します。こちらもあわせてどうぞ↓。 prefers-color-scheme とは media queryの1種で、CSS上からユーザーがOSでダークモードをONにしているかどうかを判別できます。たとえば、普段は白い背景のWebページを、ダークモードをONにしているPCから見た場

        • 固定された記事

        UIデザイナーのデスク@U-NEXT

        マガジン

        マガジンをすべて見る すべて見る
        • いちばんくわしいUIツールの比較
          平田 / U-NEXT

        記事

        記事をすべて見る すべて見る

          CSS1行で美しい背景ぼかし・すりガラス表現!ついにChromeにも対応したbackdrop-filterが超便利

          これまでWebデザインにおいては実装が難しかった背景ぼかしの表現が、backdrop-filterというCSSで超かんたんに表現できるようになりました。 これまでこれまでCSSでは、「filter:blur();」プロパティを使用することで要素自体をぼかすことはできたのですが、iOSのように重なった背景をぼかすことはできませんでした。 そのため、背景ぼかしを表現するためには、背景要素を2重にして重なっている部分のみぼかす等の非常に面倒なハックが必要で、あまりWebにおいて

          CSS1行で美しい背景ぼかし・すりガラス表現!ついにChromeにも対応したbackdrop-filterが超便利

          iOS13のSF SymbolsをSketchやXDで使う

          SF Symbols をデザインファイル上で使うのに少しつまずいたので、使い方を共有しておきます。 SF Symbolsとは SF Symbols は先日のWWDC19の中で発表された、Apple公式のアイコンフォントです。用意された数多くのアイコンを、気軽にアプリの中で使用できます。アイコンのラインの太さを9段階から選べます。 SketchやIllustratorの中で使うには1.まず、こちらのサイトからSF Pro フォントをダウンロードし、インストールします。すで

          iOS13のSF SymbolsをSketchやXDで使う

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜6. まとめ

          Sketch, XD, Figma, Studio を比較する連載記事の6番目です。今回で終わりです。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ    ◀イマココ 今回はまとめです。各ツールの総括と、補足的な情報、ここまで比較しての結論などを書きます。 各ツールの総括各ツールについて、特徴などの総括です。詳細はいままでのnoteでぜひ。 Sketch: ★ 歴

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜6. まとめ

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜5. プロトタイピングとコラボレーション

          Sketch, XD, Figma, Studio を比較する連載記事の5番目です。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション    ◀イマココ 6. まとめ 今回はデザインに画面遷移やアニメーションをつける「プロトタイピング」機能と、複数人での作業や情報共有の機能についでです。 プロトタイピング機能とは画面遷移やアニメーション、インタラクションを作成する機能です。UIデザイ

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜5. プロトタイピングとコラボレーション

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜4. シンボルとスタイル

          Sketch, XD, Figma, Studio を比較する連載記事の4番目です。 ※ 2019年5月追記: XDのシンボルについての大幅なアップデートに対応して、内容をかなり修正しました。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル    ◀イマココ 5. プロトタイピングとコラボレーション 6. まとめ 今回はUIツールの肝とも言える、「シンボル」の機能や管理性能、「スタイル」の機能、デザインシステム・コン

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜4. シンボルとスタイル

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜3. デザイン機能比較

          Sketch, XD, Figma, Studio を比較する連載記事の3番目です。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較    ◀イマココ 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回は基本的なデザイン作成に関する機能についての比較です。 操作感・UI ツールの操作のしやすさ、UIについての評価です。まず、基本的な操作感・キーボードショートカット・UIの構成はどのツールもかなり似ています(XDは

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜3. デザイン機能比較

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜2. 基本項目の比較

          Sketch, XD, Figma, Studio を比較する連載記事の2番目です。 1. 導入と背景知識 2. 基本項目の比較    ◀イマココ 3. デザイン機能比較 4. シンボルとスタイル  5. プロトタイピングとコラボレーション 6. まとめ 今回は料金や利用環境など、各ツールの基本的な項目についての比較を紹介します。 対応デバイス環境 Figmaのみ、ブラウザ上で動くWebアプリケーションです。MacOS, Windows用のデスクトップアプリもあります

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜2. 基本項目の比較

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識

          平田です。普段は個人のブログに記事を書いているので、ちゃんとしたnoteを書くのはこれが初めてです。 Sketch, Adobe XD, Figma, InVision Studio について徹底的に比較を行ったので、知見をまとめたいと思います。量がかなり多いので、いくつかの記事に分けて紹介します。 1. 導入と背景知識    ◀イマココ 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回

          いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識

          5年間放置してた (ROM専だった) noteに記事を投稿してみることにした。いま書いてる。

          5年間放置してた (ROM専だった) noteに記事を投稿してみることにした。いま書いてる。

          noteはじめてみた まだよくわかってないけどすごくすてきなサイトデザイン

          noteはじめてみた まだよくわかってないけどすごくすてきなサイトデザイン