ホーム自己紹介ブログ
NO.237
DATE2026. 01. 24

ヒューマンインターフェース ガイドライン という言葉を知りました。

最近、ヒューマンインターフェース ガイドライン(HIG)という言葉を知りました。

「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれています。

ヒューマンインターフェイスガイドライン | Apple Developer Documentation
「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれています。
developer.apple.com

HIGというのは、かなり昔からあったようなのですね。

Appleのヒューマンインタフェース ガイドライン | gihyo.jp
AppleがWeb上で公開している「Apple Human Interface Guidelines」を翻訳したものです。日本語に翻訳された書籍が1989年に発刊され2004年に復刊していますが、内容がMac OS 9以前のものと古く、入手自体も困難な状況です。
gihyo.jp

"ヒューマンインターフェース ガイドライン" で検索すると、以下の記事が検索上位に表示されました。

https://www.sociomedia.co.jp/category/shig 内容については、これから拝見しようと思っています。
まだ読めていません。

HIG というのは、UX をよりよくするための UIデザインというのが、私のなんとなくの認識です。UIデザインとUXというのは、個人的にとても興味があります。
以下は、読んでいて学びがあった書籍です。

縁の下のUIデザイン | 技術評論社
UIデザインの中でも普段はあまり注目されることのない細かい部分にフォーカスした書籍です。デザイナーがどのような意図を持ってUIをデザインしているのかを解説します。身近なサービスを例として取り上げているので、実感を持って理解できます。筆者のデザイナーとしてのノウハウがふんだんに織り込まれているので、WebサービスのUIデザインをもっと良くするためのヒントになるはずです。
gihyo.jp
ザ・ダークパターン ユーザーの心や行動をあざむくデザイン | 翔泳社
そのデザイン、 顧客の信頼を失っていませんか? 欧米で規制強化が進む、 ディセプティブ・デザインの実態と脱却の道筋 「退会方法がわかりにくい」 「勝手にメルマガに登録されている」 「消費者を煽るカウントダウンタイマー」 「期限のない在庫一掃セール」…… こうしたユーザーを意図的にだますデザイン (=ダークパターン)の乱用が増えています。 本書は、ダークパターンとは何かから、 世界で進むダークパターンの規制強化の実状、 ダークパターンの代表的な15の具体例、 そして、企業やデザイナーがダークパターンに陥る背景と その防止策を1冊にまとめて解説します。 目次 Chapter1 ダークパターンとは何か 1.1 消費者を惑わせるWeb サイト設計 1.2 ダークパターンとは何か、その定義 1.3 ダークパターンの世界的調査 1.4 ダークパターンは人の選択をどれほど歪めるか 1.5 国内外で高まるダークパターンへの忌避感 1.6 企業がダークパターンを使うリスク Chapter2 意思決定の科学 2.1 その選択は、誰が決めているのか 2.2 意思決定に影響を与えるマイクロコピー 2.3 ユーザーが行動を起こす3条件 2.4 ファストアンドスロー 速い思考と遅い思考 2.5 説得 vs. 欺瞞、操作、強制 Chapter3 ダークパターンの種類 3.1 スニーキング(こっそり) 3.2 アージェンシー(緊急性) 3.3 ミスディレクション(誘導) 3.4 ソーシャルプルーフ(社会的証明) 3.5 スケアシティ(希少性) 3.6 オブストラクション(妨害) 3.7 フォースドアクション(強制) Chapter4 ダークパターンを防ぐために 4.1 組織をプレッシャーから解放する 4.2 ユーザーをリスクから解放する ※本電子書籍は同名出版物を底本として作成しました。記載内容は印刷出版当時のものです。 ※印刷出版再現のため電子書籍としては不要な情報を含んでいる場合があります。 ※印刷出版とは異なる表記・表現の場合があります。予めご了承ください。 ※プレビューにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください。 (翔泳社)
www.shoeisha.co.jp
マイクロインタラクション
UIのディテールをほんの少し工夫するだけでUXは劇的に改善します。本書では効果的なマイクロインタラクション――ひとつの作業だけをこなす最小単位のインタラクション――の意味、有効性、デザイン手法を学びます。マイクロインタラクションを「トリガー」「ルール」「フィードバック」「ループとモード」に分解して豊富な実例とともにていねいに解説し、さらにプロトタイプやドキュメント作成、テストといった実践的な手法も紹介します。マイクロインタラクションを活用すれば、ありふれた製品も顧客を引きつける魅力的な製品に生まれ変わらせることができます。ドナルド・ノーマン推薦書! 翻訳者によるサポートページ。
www.oreilly.co.jp
レタースペーシング タイポグラフィにおける文字間調整の考え方
letter-spacing.mimiguri.co.jp
サクッと学べるデザイン心理法則108 | 翔泳社
◆モノを売るために知っておきたい! デザイン心理法則◆ 私たちは毎日、インターネット・テレビ・街の中など多くの場所で心理効果を使ったデザインに触れ、無意識のうちに影響を受けています。 「ついつい買ってしまう商品」「満足感のあるサービス」「使い勝手の良いアプリケーション」など、意思決定を誘導するものから人のためになるものまであらゆるデザインに心理学が意図的に使われているのです。 これからのデザイナーやマーケターは、AI時代でも求められる人材になるために、心理法則を使った効果的かつ説得力のあるデザインを作っていく必要があります。 本書ではまず、よく見かけるタイプのWebサイトやポスター、バナーといったデザインには、どんな心理法則が隠れているのかという使用例を紹介し、その後、それぞれの心理効果や錯視効果、色彩効果、レイアウトの法則を1ページ単位で簡潔にまとめて紹介していきます。 本書で、ご自身のデザインやビジネスに取り入れられそうな心理法則がないか探してみてください。 【構成】 Chapter1 心理効果の使用例 Webサイト/ポスター/LP/バナー/サムネイル・アイキャッチ/名刺/ECサイト/UIデザイン Chapter2 デザインに使える心理効果 クレショフ効果/シャルパンティエ錯覚/ベビーフェイス効果/ヴェブレン効果/ハロー効果ほか Chapter3 錯視効果 ムンカー錯視/ホワイト錯視/色の恒常性/環境光の錯視/チェッカーシャドウ錯視ほか Chapter4 色彩効果 重い色と軽い色/色によってイメージする味覚/味覚イメージと色の違い/食品と補色の相性/音調による色感覚ほか Chapter5 レイアウトの法則 近接の法則/整列の法則/シグニファイア/ヤコブの法則/Zの法則/Fの法則ほか ◎著者プロフィール 321web(三井将之) PREATE株式会社 代表取締役社長 デザイン関係のブログ「321web」を運営。閲覧回数は年間約300万PV。ブログでは初心者にもわかりやすいようにデザインやAdobe ソフトの使い方を中心に情報を発信。
www.shoeisha.co.jp
はじめてのUXデザイン図鑑
「ユニクロ」「無印良品」を改革し、「成城石井」をV字回復させたカリスマ経営者、大久保恒夫氏、絶賛! 商品作りでも、販売現場でも、アプリやDXでも、あらゆる場面にUXデザインが欠かせない時代―本書はそんな時代の武器になる。 […]
bow.jp

HIG に関しては、 Apple というビッグカンパニーのUIデザインのガイドラインという めちゃくちゃ興味があります。
他にも、おすすめの情報ありましたら、教えてください!

フロントエンド

シェアする

フォローする

次のページ

たこ焼きの具

前のページ

大雪とワークマン

関連する記事

タグ「フロントエンド」の記事

AIの利用上限に達した時にすることを残しておく

主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル

2026-01-22

フロントエンド
CSSで頑張らなくても、SVGで楽にできるときもある

個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの

2026-01-20

フロントエンド
CSS Layout Testing というテスト手法の提案

Web のフロントエンド実装において、次のようなミスによってデザイン崩れを起こしてしまったことはありませんか。 flex-shrink の指定を忘れて、要素が押しつぶされてしまった z-index の指定を間違えて、要素が意図せず前面(また

2026-01-10

フロントエンド
テスト
← ブログ一覧へ