デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
ChatGPTと作ったユーザーストーリーマッピングが結構使えるかも | DevelopersIO
ChatGPTを用い、過去のデータを参考にユーザーストーリーマッピングを作成、人間が作成したマップと比較しました。ただし、データの精度やユーザー視点の重要性に注意が必要です。 こんにちは。デザイナーのスギヤマです。CX事業本部に所属し、普段はモバイルアプリケーションやLINEアプリケーションの開発に従事しております。 今回はテストとして、ChatGPTを利用しユーザーストーリーマッピングを作成することを試みました。 通常、このようなユーザー体験に関する制作物はプロジェクトメンバー全員が顔を合わせて作業を行う必要があります。しかし、現実には製作時間が極端に限られていたり、メンバー全員が揃わない中で準備をする必要があるケースも存在し、様々な方法を模索することも重要だと考えました。 そこで、過去にデザイナーチームが行った勉強会のデータを活用し、ChatGPTを利用してテストをしてみることにしまし
[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス
既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。 デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。 ボタン、フォー
![[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d34cdd6f924a706cf29bd75ff95cedf76093a2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110601.png)
note・CXO深津貴之はなぜ華麗なキャリアチェンジを続けられるのか？ 技術トレンドと一緒に“廃れない”エンジニアの条件 - エンジニアtype | 転職＠type
転職・求人情報サイトのtype エンジニアtype 働き方 note・CXO深津貴之はなぜ華麗なキャリアチェンジを続けられるのか？ 技術トレンドと一緒に“廃れない”エンジニアの条件 2018.12.25 働き方 時代の変化の中、技術革新は続き、そのトレンドもどんどん変化している。2017年には「Flashが2020年で終了する」というニュースが流れ、各方面に大きな衝撃を与えたことは記憶に新しい。エンジニアのキャリアにおいて、「いかに世の流れを読み、移り変わる技術をモノにしていくか」は重要なポイントと言えるだろう。 そんな中、“華麗なキャリアチェンジ”をした良い例として、BASEのえふしんさんは『エンジニアtype』の取材で、株式会社THE GUILD代表であり、『note』などのサービスを運営する株式会社ピースオブケイクのCXOを務めている深津貴之さんの名前を挙げた。 ＞＞「マークアップエ
カルチャーの違いを考慮したデザインのポイント
様々なもののデジタル化が進む中で、デザイナーの役割も大きく変化し始めている。特にインターネットを介したサービスにおいては「design, Design, DESIGNの違いを知っていますか?」でも紹介されている通り、世界中の不特定多数のユーザーを念頭にデザインしなければならない時代になってきている。 それは同時に、受け取り側の趣味嗜好や価値観を十分理解した上で、プロダクトやメッセージングを考える必要があるということでもある。デザインコミュニケーションとして、単純に言葉を翻訳しただけでは不十分なのである。 目で表情を伝える日本人、口で表情を伝える欧米人日本と欧米では絵文字の表現方法が大きく異なる。特に日本では「目」を主な表現として利用しているのに対し、欧米では主に「口」の形の違いで感情を伝えている。 この違いの原因の一つが日常生活における人々の生活習慣の違いだろう。ご存知の通り、花粉症の時期
F8で発表されたプロトタイピングツール Origami Studioの気になる機能いくつか - よりぶろ
Facebookの開発者向けイベントF8でOrigami Studioが発表されましたので、ビデオの中から気になった機能をざっとまとめてみました。 Rapid Prototyping Made Easy with Origami Studio - Videos - 開発者向けFacebook ちなみに年内には無料でリリースされるようです。楽しみ〜！ ページのスクロール 複数のスクリーンを1つのフォルダにまとめて、それに対してScroll Xを適用。スクロールのタイプをPageにすることで、区切られたスクロールが可能。 Alert Viewがめっちゃ簡単に追加できる 中の文言も編集できます Screen Transition パッチ Origamiの鬼門だった画面遷移が作りやすくなってる。これは嬉しい。 Grid / Listのループ Adobe XDと似てますな という感じで、他にも紹介が
LINE botの非技術者向け作成手順マニュアル。（ブラウザだけで作ります）※旧バージョンなので今は役に立たない｜ふくゆき
LINE botの非技術者向け作成手順マニュアル。（ブラウザだけで作ります）※旧バージョンなので今は役に立たない 2016年は急速にbotの時代になる にわかにline botのおかげで盛り上がってきました。個人的にはものすごいことが起こると思っています。botがなんですごいのかわからない人がいます。ひとつの例を出します。 例えば三河屋botがあったとします。 午後の３時くらいに「ちわー、三河屋ですー。」とbotから挨拶されます。たまたま、ビールが切れていたのでチャットで注文します。 「アサヒのスーパードライ、ロング24缶、17時までにもってきて」 とレスをします。 すると、 「アサヒ スーパードライ 500ｍｌ缶×24本、2016年4月9日17時までにお持ちします。よろしければ、はいを返答してください。」 これで、「はい」と返答するだけで、購入できたりします。 今までのECサイトと違いb
UIコンポーネント集 Qiita:Coat - ✘╹◡╹✘
LTを聞いているという感覚でご覧ください。 Qiita:Coat Qiita用のUIコンポーネント集 GitHub用のUIコンポーネント集をForkしてつくりはじめた レポジトリ: https://github.com/increments/qiita-coat デモサイト: http://increments.github.io/qiita-coat/ 今週月曜からやってる これはcommit数 Qiita:Coatが必要に感じた背景 全ての開発者に共通する願い 高速に開発したい 秩序がほしい (a.k.a. 最低限度の品質の保証) 開発体制の情勢に起因する理由 開発人数が徐々に増えつつある 社員11人+アルバイト3人 四半期に1人ぐらい増えてる 50人が51人になるとかならともかく、5人が6人とかになると大きく変わる その他の理由 サポートサイトや採用サイトなどQiita風のデザインを
あなたと働くエンジニアの人生を最悪なものにしないために – デザイナーのための3つの提言 | POSTD
それとも、”私はデザイナーなので、そんなことを知る必要はありません”と言い張るのか 私の職業はデザイナーです。私はエンジニアが好きです。ちょっと度が過ぎるくらい好きかもしれません。以前、Facebookの グループ に参加した時、かなり前からチームのメンバであるiOSのエンジニアと初めて話して、口から泡を吹いたことを思い出します。私はその時、これまでに自分がObjective-Cでコーディングしたものについて、勢い込んで話し始めました。まるで、高校の新入生が、上流階級の生徒に対して、自分が付き合う価値のあるカッコいい人間だと証明しようとしているみたいだと感じました。 デザイナーの多くが、エンジニアとの話し合い方を実はよく分かっていないと思います。もちろん、デザイナーはエンジニアと話しますが、本当の意味で関わろうとしていません。この記事を書いた理由はそこにあります。ソフトウェアエンジニアの懸
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
使いやすく、フレッシュなUIエレメントを使用しているウェブサイト集
The Online Portfolio of Mark Hobbs 色使いとタイポグラフィが美しくクリーンなデザインのウェブサイト。ナビゲーションの各項目をクリックすると、目的地へスムースに移動します。
小粋空間: パンくずリスト
「パンくずリスト」とは、現在表示しているページ位置を、上位（通常トップページ）からの階層構造で表わすもので、童話「ヘンゼルとグレーテル」で、森の中で迷わないよう目印としてパンくずを落としながら歩いたということから命名されたようです。当サイトでもトップページを除いた全てのページの中央カラム上部に表示しています。 ということで、Movable Typeでのカスタマイズ方法をご紹介します。 １．仕様 ここで紹介するパンくずリストは下記の仕様となっています（大袈裟ですが）。 トップページをリンク表示します 現在のページタイトルをテキストで表示します 階層途中のカテゴリーにエントリーが存在する場合、該当のカテゴリーをリンク表示にします 階層途中のカテゴリーにエントリーが存在しない場合、該当のカテゴリーをテキスト表示にします また、個別エントリーアーカイブは必ずあるひとつのカテゴリーに属していることが
Yahoo！の流れるパネルをJSライブラリで再現 (1/5)
日本最大のポータルサイト「Yahoo！ JAPAN」のトップページがリニューアルしたのは、2008年1月のこと。従来の2カラムから3カラムのレイアウトに変わり、世界各国のYahoo！に合わせる形でデザインも一新されました。同時に行なわれたのが、ユーザーインターフェイス（UI）のリッチ化です。新しいYahoo！ JAPANのページには、タブ／アコーディオンパネル／フローティングウィンドウなど、ここ数年のトレンドであるAjaxを使ったUIが随所に盛り込まれています。 こうした流れは、トップページだけではありません。リニューアルと前後して、Yahoo！ JAPANではさまざまなサービスのUIの改善が実施されています。今回はその中のひとつ、「Yahoo!知恵袋」に注目してみましょう。今年2月にリニューアルされたばかりのこのQ＆Aサービスの新しいトップページが、今回のお手本です。 今回のお手本サイト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Patterns
USWDS: The United States Web Design System
マテリアルデザイン参考
ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ
iOS7でAppleが目指したのは「UIデザインの常識」の再発明である
