バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
仮想DOMの内部の動き | POSTD
PreactでVDOMがどのように機能するかを示すフローチャート 仮想DOM（VDOMあるいはVNode）は魅力的です✨ しかし複雑で、理解が難しいものでもあります???? React や Preact 、その他同様のJSのライブラリでは、これをコアで使っています。残念ながら私は、これを詳細かつ分かりやすく説明している優れた記事や資料を見つけられませんでした。ですから、自分で書こうと思い立ったのです。 備考：これは非常に長い記事です。内容をシンプルに表すために画像を山ほど挿入しましたが、それゆえにさらに長い記事になってしまいました。 私は Preact のコードとVDOMを使いました。容量が小さくて済み、将来、簡単に見なおすことができるからです。しかし、概念のほとんどはReactにも共通していると思います。 皆さんがこれを読んだ後、仮想DOMをよく理解できるようになり、できればReactや
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
Q. （関数型）リアクティブプログラミングとは何ですか？ | POSTD
Wikipediaで リアクティブプログラミング (reactive programming)を調べてみました。また、 関数型リアクティブプログラミング (functional reactive programming, FRP)についても少し説明があったので確認してみましたが、どちらも説明が大雑把です。 実際のところ関数型リアクティブプログラミングとはどういう意味なのでしょうか？リアクティブプログラミングは（非リアクティブプログラミングと比べて）何で構成されているのですか？私は命令型のオブジェクト指向言語を使っているので、そのパラダイムに関連させて説明して頂けると大変有難いです。 asked by JtR Answer(s) FRPの感触をまず試してみたいのであれば、 1998年に発表された古典のFran tutorialに目を通してみると良いでしょう。 これは動画で説明されています。
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
横柄なパスワード – パスワード認証に関する改善策 | POSTD
パスワードにはうんざり。改善しましょう。 誰もが経験するあの瞬間。新しいサービスに登録し、パスワードを選んで入力する。でも、入れません。選んだパスワードは十分安全なはずなのに、使いたいサービスが独善的にそれを拒むのです。 記号、数字、大文字、小文字を少なくとも１つずつ使用しなければなりません。 小文字の長いパスワードの方がドルマークだらけの短いパスワードより安全だということを証明する、 XKCDの有名なコミック のことは忘れましょう。まず、あなたの主力パスワードが $$ICECREAM$$ だとします。アイスクリームは、恐ろしい人生の希望の灯火とも呼べるほどの大好物なので簡単に思い出せます。そして、このパスワードにはブートのための特殊文字が入っています。 残念なことに、 $$ICECREAM$$ には小文字と数字がないので、客観的に見れば安全ではありません。そこで、このサービスのためのパス
なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | POSTD
Webのタイポグラフィについて少しでも調べたことがあるなら、 Vertical Rhythm という言葉を耳にしたことがあるのではないでしょうか。タイポグラフィを用いて仕事をする場合、最も重要な手法の1つです。このことについて知って以来、私は自分のサイト全てにVertical Rhythmを使っています。 ある日、Vertical Rhythmの重要性について自分が全く理解していないことに突然気付き、愕然としました。そしてその後すぐに2つの疑問が湧き上がってきました。「なぜVertical Rhythmを使うとサイトのデザインが向上するのか？ 」「自分のデザインを良くするために、Vertical Rhythmから何を学べばいいのだろうか？ 」。 私はこの疑問を解明しようと決めました。その考察を綴ります。 記事の最初にあたって認識を共通にするため、まずはコンテキストについて説明します。 Ve
Gitコマンドラインショートカット | POSTD
私は多くの時間をターミナルの前で過ごしていて、そのほとんどをGitコマンドのタイピングに費やしています。ワークフローを高速化して、毎日何百というキーストロークを節約するために、Bashのエイリアスと関数を使って1組のコマンドラインショートカットを作りました。 Git Bashエイリアスと関数 Gitではエイリアスを設定できますが限定的であり、節約できるキーストロークは、ほんの数ストロークです（例えば、”git checkout”の代わりに”git co”とタイプすることはできますが、まだ”git”とタイプしなければなりません）。Bashはターミナルのデフォルトのコマンドラインインタープリタなので、Bashエイリアスを設定して、さらにキーストロークを減らすこともできます。 これが、私のGit Bashエイリアスと関数のリストです。ご自分のエイリアスや関数の保存先ファイル（例えば、~/.bas
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページネーションのベストプラクティス | POSTD