タグ

関連タグで絞り込む (4)

タグの絞り込みを解除

UIに関するnunulkのブックマーク (10)

  • UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog

    はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデザインにステートマシンを導入するメリット 振る舞いに集中できる チームの共通認識として使える 変更に強い おわりに 関連ドキュメント ALPS-ASD UIは2つの要素からなっている Android

    UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog

  • なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita


    なぜエンジニアが作る画面はダサいのか…?﹁理由﹂と﹁対策﹂を徹底解説︻エンジニア向け画面デザイン講座︼UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は﹁それ﹂をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
    なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
    nunulk
    nunulk 2021/12/11
    「どう使うかを妄想」でまずは躓くので想像力を磨くところからだな…
    リンク

  • Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ


    こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、﹁なぜAtomic Designをやめたのか﹂という理由と、﹁どのようなディレクトリ構造にしたのか﹂を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. ﹁ドメインが入るか／入らないか﹂。﹁抽象的か／そうでな
    Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ
    nunulk
    nunulk 2021/05/21
    "したがって、エンジニアやデザイナー間でコンポーネントの責任範囲を決める際は、Atomic Designという言葉を使わなくても、（略）という先程の観点のみ気にしておけば問題ないのではと考えました。"
    リンク

  • UIコンポーネント以外から始めるデザインシステム


    UIコンポーネントは表層的な解決手段 以前﹁デザインシステムを作る前にデザインのシステムを理解しよう﹂という記事で、組織がもつデザインのシステム︵仕組み︶の理解を深めることが重要であると書きました。 ﹁えいや！﹂で UIコンポーネントが揃ったライブラリを作ることは難しくありません。しかし、組織にとって意味のある UIコンポーネントになっているかは別問題です。 たとえコードの書き出しまで出来るデザインシステムを作ったとしても、ある一部の人たちが楽になるだけの最適化に止まる場合があります。作り手視点のメリットだけでなく、組織への貢献という広い視野が抜けていると﹁作ってみたけど浸透しなかった﹂ということになります。 UIコンポーネントを作るだけでも様々な要素の積み上げで成り立っています。簡略化された図ですが、UI コンポーネントを作る前に様々な課題を解決しなければいけません。 事業目標 今
    UIコンポーネント以外から始めるデザインシステム
    nunulk
    nunulk 2020/12/07
    "一貫性のある UI ライブラリーより、メンバーの「良いプロダクト」への視点に一貫性があったほうが大きな力になります。"
    リンク

  • Atomic Designの考え方と利点・欠点 – wkr.


    Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV︵アベマTV︶で使われています。 ︵Atomic Design を実案件に導入 - UIコンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより︶ Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を5つに分けています。 その5つの単位は Atoms︵原子︶・Molecules︵分子︶・Organisms︵有機体︶・Templates︵テンプレート︶・Pages︵ページ︶です。 各コンポーネントの詳細は次のとおりです。
    Atomic Designの考え方と利点・欠点 – wkr.

  • UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design


    UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば﹁UIデザイン﹂のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI︵ユーザー・インタフェース︶が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい︵と言ってもiPhone発表から10年以上経ちますが︶﹁スマートフォン・アプリのUIデザイン﹂を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ︵情報設計やウェブ・ユーザビリティーを含む︶のインタフェース・デザインについては、すでに世の中に知見や
    UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design

  • CTO顧問ブームに物申す！ – 小俣泰明(タイメイ)ブログ@アルサーガパートナーズ


    CTO顧問ブーム。 これって僕も少し責任感じるんですが・・・ 最近、どっかの会社のCTOになった経験を駆使して顧問やってる人が多くなった。 週1回の定例ミーティングで月30-50万円もらえてしまうような状態。3社くらい契約して月150万円ほど稼ぐような人もザラにいる。 顧問を仕事として営んでる者は以下のような行動心理に至ってしまう。 顧問の継続期間を伸ばすための策に出る 難しいこと難しく語りなんとなくすげぇ感を出す 本質じゃないことになってる。 メインの仕事にしている以上、その心理状況はある程度仕方ないのかもしれない。そもそも顧問を主軸の生活費のためにやること自体ナンセンスなことなのかもしれない。 そもそもCTOが顧問で価値を出すやり方を理解してない。 で。うまくいかないと必ずいうのが﹁自分は技術領域が担当なので﹂とか﹁UI、UXはデザイナーの仕事だから﹂と言い出す。 シリコンバレーじゃ
    CTO顧問ブームに物申す！ – 小俣泰明(タイメイ)ブログ@アルサーガパートナーズ
    nunulk
    nunulk 2019/07/14
    UIデザイナー「を」かな？ "シリコンバレーじゃUIデザイナーが一番能力高いエンジニアがやるのに"
    リンク

  • ソリッドとアウトライン、どちらのアイコンが認識しやすいか

    アイコンのスタイルをソリッドとアウトライン、どちらを使用するか決めなければならない場合がありませんか？ 好みで決めるという人もいるかもしれませんが、それぞれ分かりやすい場合と分かりにくい場合があります。 どのような場合にソリッドを使い、アウトラインを使うとよいのかを紹介します。 ちなみに下記は、左が過去のデザイン手法、右が現在のデザイン手法です。 Solid Vs. Outline Icons: Which Are Faster to Recognize? by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アイコンのスタイルがユーザビリティに与える影響 アイコンにおける特徴的な手がかり アウトラインアイコンが速い場合 ソリッドアイコンが速い場合 スタイルに違いがない場合 ボタンとしてのアイコンを使用す

    ソリッドとアウトライン、どちらのアイコンが認識しやすいか

  • フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note

    フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる

    フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note

  • むずかしすぎる！五輪大会ボランティア応募フォーム(神田敏晶) - 個人 - Yahoo!ニュース


    KNNポール神田です。 いよいよ、東京五輪の大会ボランティア募集が開始となった。 ﹃ブラックボランティア﹄などとネットでいくら言われようとも、ボランティアする側が納得していれば、それはブラックなボランティアではないと思う。母国の五輪のボランティアで得られる経験は、人生のうち、何度もあるものではないからだ。 ボクが1963年の東京五輪の聖火リレーを見たのは神戸市の兵庫区だった。たった2歳であったが、あの雨の日の聖火リレーは、しっかりと脳裏に焼き付いている。だからこそ、ボランティアでも五輪に参加したいと考えている。 1963年10月神戸市兵庫区上沢通3丁目　出典:神田友治撮影11万人のボランティアが必要とされている大会ボランティアが8万人︵組織委員会︶、そして、都市ボランティアが3万人︵東京都︶の募集が昨日︵2018/09/26︶より開始となった。それぞれの申し込みページが公開された。 大会ボ
    むずかしすぎる！五輪大会ボランティア応募フォーム(神田敏晶) - 個人 - Yahoo!ニュース
    nunulk
    nunulk 2018/09/27
    すごいUIみたいなのでぜひとも体験したい
    リンク
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.