タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
情報設計とは、端的に言うと「情報に関する混乱を整えて、理解しやすい形にする行い」です。情報設計というとなんとなくWebデザインやUIデザインに関する専門的な分野として認識されることが多いかもしれませんが、“情報” に関することなので、情報があるところには基本的にどこにでも通用します。 情報設計の専門書を漁ってみると、“ふわっとした” 話か、Webサイト設計の話に終始するものが多いのですが、本来はWebサイト設計以外の分野にも通用する考え方です。今回はiOSなどのアプリケーションデザインに焦点を当てて、UIの情報設計というものを考えてみたいと思います。 この資料では、「情報設計としてのUIの組み立て方と考え方」をテーマとし、すでにあるようなUIの実例を用いて情報設計視点でのUIデザインの解説を試みます。UIの具体イメージと結果から設計の意図というものをクイズ形式で考えられる内容となっています
3日間で7000回RTされた「ラグビー図解」を作るときに考えた「初心者向けルール説明」の情報設計｜drivesketch
「せっかく日本でラグビーワールドカップが開催されるのに、いま世の中にあるラグビーのルール説明がどれも分かりにくい」と常々思っていたので、自分で作りました。 昨年の11月に一度公開した後、今年のワールドカップの日本代表の試合の日に再度Twitterに投稿したところ、3日間で7000人近くの方にリツイートしていただけました。「これが一番分かりやすい」「こういうのが欲しかった」「もっと早く見たかった」といったコメントも多数いただけて非常に光栄です。 この図解を作っている過程で、スポーツのルールを初めての人に説明する際に「何を・どういう順序で・どんな言葉で話すと分かりやすいのか」の典型的なフォーマットが見えてきたので、そのフォーマットを解説してみます。 私のラグビールール説明は絵をたくさん使っていますが、文章だけでの説明でも、使う言葉や話す順序を工夫することで、分かりやすさが大きく変わります。 ラ
情報設計をもっと身近に〜DCC勉強会を主催して得た学びとチームの変化〜 - 弁護士ドットコム株式会社 Creators’ blog
こんにちは。弁護士ドットコム本部デザイン部の細貝です。 少し前になりますが「DESIGNING CONNECTED CONTENT デジタルプロダクトの長期的な成長を支える構造化コンテンツ」の社内勉強会を有志で行いました。 とても良い本だったので、社内外への布教がてら勉強会の様子を紹介したいと思います。 勉強会のきっかけ 情報設計についてもっと知りたかった チームで実践する前提の内容なので、みんなで勉強するのに向いていそうだった やったこと 冒頭に要約パートを用意する 書籍内で紹介された手順をグループワークで試す 監訳者の石橋さんへの質問会と、関連するツールや情報の紹介 勉強会に参加したメンバーの反応 勉強会後の変化 カテゴリ設計の話をチームで話す機会ができた 施策の打ち合わせにモデル図が添付された資料が出てくるようになった 勉強会を振り返って 繰り返し読んだり周辺知識を学びたい もっと情
企業サイトを受注した際に欠かせないのが、会社情報・採用コンテンツ。私もたくさんの企業サイトのローンチ・リニューアルにコアメンバーとして参加しましたが、企業ごとに異なり、やりがいのある非常に面白いコンテンツです。 そういえば、一部上場の呼称が来年から「プライム市場」に変更されますね。 今回はちょっと珍しい、Webサイトの会社情報・採用コンテンツのデザイン、ブランディング、情報設計に特化されたデザイン書を紹介します。 会社情報・採用コンテンツを受注すると、自社はもちろん、競合他社のコンテンツを調査します。しかし、それ以上広げることはなかなか難しいものです。そんな時にぴったりなのが、本書です。さまざまなジャンルの採用コンテンツが掲載されており、デザイン、ブランディング、情報設計についてまとめられています。 会社情報から、プロダクトやオンラインショップ、さらには企業のブランディングにまで繋がる案件
年末調整の情報設計 – Dropbox Paper
freee株式会社の伊原と申します。主に人事労務freeeという、勤怠管理・人事情報管理・給与計算といったバックオフィスの仕事をクラウド化するサービスのUXデザイナー兼プロダクトマネジャーとしてやっていってます。あとアクセシビリティの本を3冊ほど出していて、あだ名は「アクセシビリティで一発当て太郎」です。休日はだいたい双子の娘と公園に行っています。
情報設計のためのヒント - Qiita
この記事は 弁護士ドットコム Advent Calendar 2019 の23日目の記事です。 昨日は @NaokiTsuchiya さんの ISO704 Terminology work — Principles and methodsとドメインモデルという記事で、めっちゃ勉強になりました。今日の記事もモデリングに近い話ですが、国際標準よりドメスティックな取り組みの話です。 はじめに サービスを作るとき、みなさんは何からはじめるでしょうか？ 言語の選定？フレームワークの選定？データベース設計？ 当然ですが、データベース設計は「なにを作るか？」がないと作れませんよね。 これらはシステムを作る際に重要なのですが、それよりも重要なのは「ユーザーは普段どういう情報処理をしているのか？」ということではないでしょうか。 MVCとはなにかという題で話した際、中華料理店での複写式伝票を使った情報処理のお
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 多くのユーザー体験の中心となる要素はコンテンツです。では、モバイルのユーザー体験を考えるときにはどのように変えればよいでしょうか。プラットフォーム毎にコンテンツをリライトしますか？ あるいは、どのようなプラットフォームにも通用するようなコンテンツをつくるためにまた別の戦略が必要なのでしょうか？ モバイル上でコンテンツを扱うことは面倒な作業ではありませんが、きちんと計画を立てなくてはいけません。 大まかに言えば、モバイル環境向けの情報設計の方法は、デスクトップ向けの情報設計とよく似ています。事実、使うアプローチはほとんど同じですが、実際に行うときにはいくつか念頭に置くべき重要なことがあります。 モバイルプラットフォームにとって重要なことを盛り込む - つまり、
情報設計に欠かせない。ユーザーのメンタルモデルを理解する、要素整理のフレームワーク｜Goodpatch Blog グッドパッチブログ
デザインにおいて情報設計はとても重要です。 なぜなら情報設計がなされないままUIデザインが行った場合、目的や画面のつながりが不明瞭になり、ユーザーに思いのまま使ってもらうことが難しくなってしまう可能性があるからです。 ユーザーがアプリやサービスの本質的な価値をとらえ、迷うことなく操作できるよう導くために情報設計は必要不可欠な工程です。 では、情報設計のフェーズでデザイナーは具体的にどんなことをしているのでしょうか？ 情報設計の中でも“コンテンツの要素整理”段階を、よく使われるフレームワークと一緒に紹介していきます。 情報設計とは 情報設計はサービスやアプリの要件、つまりコンセプトや機能仕様、ユーザーの目的、目的達成までのシナリオや成功指標と、UIデザインをつなぐ役割を担っています。 また、情報設計はUXの5段階モデルでいう構造段階で主に行われる工程だと言えそうです。 構造段階ではユーザー体
企業が顧客よりも自社商品の理解度が高いのは当然です。そこで働く人たちは、毎週40時間以上も商品の詳細や問題対策に打ち込んでいるため、ほかの一般人よりも詳しくなるはずです。 これはとても素晴らしいことです。こうして彼らは専門家になります。 しかし、彼らは商品を製品化するときに「盲点」も生み出します。業界固有の知識は、会議や製造現場ではとても役に立ちますが、顧客には通用せず困惑させる結果を招いてしまうこともあります。 この状況をWebでよく見かけるでしょう。 たとえば、丈夫な防水加工の時計を購入したいとします。目をつけているブランドのサイトへ行くと、何のことだかわからないモデルナンバーがプルダウンリストに羅列されています。ユーザーにとって、モデルナンバーが何の役に立つのでしょうか。 Webサイトを社内ドキュメントのように構築してしまうと、顧客には理解できない（もしくはポイントがずれた）商品の分
こんにちはこんばんは、はじめましておひさしぶりです。吉竹です。 このたびdesigning編集長の小山さんから連載のお声がけを頂き筆を執ることになりました。……と言っても「誰やねんお前」となりそうなので、最初に少しだけ自己紹介をさせてください。 まず何をしている人かと言うと、主にデザインのお仕事をしています。専門領域はデジタルプロダクトのインターフェイスデザインで、たまにロゴデザインや写真撮影、執筆などもしています。実はここ（designing）のロゴもお手伝いさせて頂きました。 当初、小山さんからは「デザイナー向けにおすすめ本の書評を書いてもらえませんか」と相談を頂いたのですが、書評が書けるような深い知識や理解があるわけでもないので、自分らしい文脈で語れるコンセプトを考えたところ、タイトルにもなっている『読書補講』の切り口が浮かび上がりました。 きっかけは、自分が非常勤講師を勤めさせて頂
以前より、段飛ばしで高尚なプロセスをあれこれ学ぶよりも、ともかく基礎的なことを理解し、技能の地盤固めをすべきではないか、ということを言ってきた。 わたしの職責範囲はデザインながら、基盤はweb技術の上にあるため「ともかくHTMLの仕様を把握すべき」という理屈ではある。 ただし背景としては、HTMLはmarkup languageであり、文書設計の基礎構造が定義されているところにある。平坦な文字列に意味付け（マークアップ）できるのがHTMLであり、理解できるようになるとおのずと情報設計能力が上がっていくはずだ。 今回フォーカスしている「ドキュメント」は、最小サイズを選択できるため「基礎訓練」にちょうどいい。ドキュメントを他人が読みやすいように作るには、適切な設計がおこなわれている必要がある。 普段一番小規模で遭遇しやすいドキュメント制作においてドキュメンテーション能力を向上していけば、情報設
読書レビュー 「今日からはじめる情報設計」はデザイナー以外にもオススメの本だった｜SMARTCAMP DEXIGN｜note
スマートキャンプ デザインブログ、デザイナーの髙松（@dream_yt95）です。 今回はnoteのお題「#推薦図書 」に合わせて、先日読んだ本を紹介します。 紹介する本「今日からはじめる情報設計 - センスメイキングするための7ステップ」という本について書いていきます。 この本でなにがわかる？情報設計という言葉はUIデザインの文脈で使用されることが多いですが、情報を操って「見やすく」「捉えやすく」することはすべての人が行なっていることです。 デザイナーは「見やすく」「捉えやすく」することを業務として意識的に行います。無意識に行なっていたことを意識的に行おうとした途端に、再現できなくなってしまう経験は誰でもあるのではないでしょうか。 突然、自分の周りが混沌として見えてしまったとき、情報の整理をどこから始めていいのかわからないとき、混沌のきっかけを探したいとき、私はこの本をもう一度読み返すと
「CUE！キュー」ホーム画面がきちんと情報設計していると感じたので考えてみた。通知リストの使い方を再認識しました。 - ゲームアプリのUIデザイン
こんにちは、ちょこです。 今回は情報設計の話です。 「CUE」のUIは設計に関して実績のある方が担当したのかな、という気がしました。 根拠はなく勘ですが。 設計に注目した理由 なぜ設計に注目したのか、ホーム画面を例に説明します。 この画面をよく見ると、ソシャゲでよくある「お知らせ」や「ミッション」のボタンが無いことに気付くかと思います。 では、どこに導線があるか。 画面上部にあるベルのアイコンをタップすると、このように通知内容がリストで並びます。 ▲ずらっと並ぶ通知リスト 通知リストには以下の内容が含まれます。 1:未達成のデイリーミッションがある時 2:ミッション報酬が受け取れる時 3:オフィスでアイテムが受け取れる時 4:スカウトチケットがある時 5:未読のお知らせがある時 6:未読のストーリーがある時 最大限並べてこんな感じです。通常プレイしていれば、未読のストーリーの通知のみ、とい
本連載のテーマは、ビジネスシーンに大きなインパクトを与えているAIとデザイナーのコラボレーション。デザイナーとして活躍する小木曽槙一さんが、AIとデザインの可能性を探るべく、実務に活かすことができる技術やツールを選定し、それらを検証していきます。今回は「情報設計やUI設計におけるAI」について解説します。 こんにちは。猛暑が続いてエアコンの温度調整に完全に失敗している@kgsiですが、皆さまお元気ですか？ 早くも第3回めとなりましたが、今回はプロダクトデザインにおける「画面設計」「UI設計」フェーズにおけるAIとの協業の可能性を探っていきたいと思います。なお前提にはなりますが、「デザイン」だと範囲が広く定義が難しいため、「プロダクトのデザイン」「情報設計」や「UI」「画面設計」を対象としています。 現時点の所感 画面設計やUI設計において、AIをなぜ使いたいのかと聞かれれば、「業務を効率化
「情報設計」から「認知科学」まで。rootが選ぶ、UIデザイナーとしての視点を養うオススメ本 | root Inc.
今月のrootオススメ本紹介のテーマはUIです。 ユーザーフレンドリーなUIを作るためには、ユーザーが実際に目にするインタフェースのデザインはもちろん、情報を正しく、わかりやすく伝えるための情報設計やユーザーニーズまで、幅広く考える必要があります。 そこで、情報設計から認知科学まで、インターフェースと向き合う上で考えたい様々な知見を得られるオススメ本を、rootのデザイナーが紹介します。 前回のオススメ本の紹介はコチラ。 今日からはじめる情報設計 -センスメイキングするための7ステップ 今日からはじめる情報設計 -センスメイキングするための7ステップ 著者：アビー・コバート (著)、長谷川敦士 (監修) 情報設計の専門家アビー・コバート氏による情報の混乱を解きほぐして整理する方法についての本です。著者によると、人が混乱に直面するときの原因となるのは「情報過多」「情報不足」「不適切な情報の混
「アッシュアームズ-灰燼戦線-」背景の見せ方やUIアニメーションを使った情報設計 - ゲームアプリのUIデザイン
こんにちは、ちょこです！ 「アッシュアームズ-灰燼戦線-」のバトル中の情報整理について特徴的な場面を紹介します。 該当の画面はこちらです。 空と地面が一望できるデザイン 「アッシュアームズ-灰燼戦線-」の戦闘中の画面では地上で戦闘するキャラクターと、空中で戦闘するキャラクターがいます。 陸空の状況を把握しながら戦闘を進めます。 この時のカメラが特徴的で、空から地上を映しつつも、空の広さが感じられる絵づくりになっています。まるでラピュタの様な浮島の先端で戦闘を繰り広げているような絵です。 また、地上のマスと比較して、空の方が枠が少し大きくデザインされており、これが空間的な広がりを更に感じられるデザインに見えます。 このように「空と地上のユニットの両方を同時に見せたい」というオーダーがあった場合、UIデザイナーとしてはこういった絵づくりが提案できることも重要なスキルなのかな、と思います。 絵が
【勉強会】未来が視えてきた今、押さえておきたい"情報アーキテクチャ基礎②UI編” - 情報設計〜画面設計｜Fujiwara / mediba CXO
バーチャル六本木ではたらく、フジワラです。 先日、mediba社のバーチャル空間で開催した【勉強会】未来が視えてきた今、押さえておきたい"情報アーキテクチャ基礎②UI編"の裏側レポートです。 前回のUX編の続きとなります。 今なぜ、情報アーキテクチャなのか？そもそも情報アーキテクチャとは 「複雑な情報をわかりやすく伝える技術、思いやり。」 「ユーザーが情報にたどり着きやすくなるようにする技術。」リアルとデジタルの境界が融けはじめた今、なぜ情報アーキテクチャの学びほぐしが効果的なのか？ 詳しくは、前回の記事をご参考ください。 情報アーキテクチャのプロセスPhase 1. 調査・分析 Phase 2. UXコンセプト、方針 Phase 3. 情報設計 ★今回はこちらから Phase 4. 画面設計UX編とUI編に分け 今回は「UI編 情報設計〜画面設計」で実施したワークをご紹介します。 主に情
デザイナーの岸良平は、2019年にrootに入ると、それぞれのクライアントが持つ課題を解決しながら、その成長に貢献してきました。 これまでに手掛けたプロジェクトは、先行研究の検索サービス「Sophiscope」のプロダクト開発、物流アウトソーシングサービス「オープンロジ」やテレビ東京の「テレ東NEWS」のサイトリニューアルなど。 これまでの仕事を振り返った岸は、クライアントの成長のみならず自らの成長も実感しているといいます。いったい、何が岸を成長させたのでしょうか？ そんな問いを投げかけ、岸のrootでの経験を聞きました。 人間そのものを見るUXデザインの衝撃─ rootに入社する以前、岸さんは和歌山のデザイン会社に勤務されていたんですよね。 岸：和歌山のデザイン会社で、グラフィックやウェブデザインを手掛けていました。ブランド構築やコンセプトワークといった抽象的な業務に関わる機会もありまし
公開日 : 2020年10月31日 カテゴリー : アクセシビリティ / 情報設計 (IA) ユーザーはウェブサイトやアプリケーションの利用時、そこにある情報を通じて、自らの目的 (課題を解決したり、楽しんだり、など) を達成することができます。その意味で、情報を、見つけやすく、理解しやすくする設計技術である情報アーキテクチャ (Information Architecture : IA) はウェブデザインの要であると言えるでしょう。 ことウェブにおいては、同内容の情報であっても、ユーザーひとりひとりが抱える多様なコンテキスト (利用デバイス、シチュエーション、障害や加齢などに伴う身体特性、好ましい情報入出力のモダリティ、など) に応じてコミュニケートのしかたを柔軟に変えることが可能であり、こうしたウェブの特性を踏まえると、IA はアクセシビリティと密接に関係があると言えます。私自身、ウェ
アプリケーションやウェブサイト※1 において、UXやUIデザインが大事と感じられている方は多いかと思います。しかし「情報設計（情報アーキテクチャやIAともいわれる）」についてはどうでしょうか。名前は聞くけど、あまりよく分からないという方もいらっしゃると思います。 さらに、「アプリケーションの情報設計」と「ウェブサイトの情報設計」では何が同じで、何が違うのでしょうか。この記事ではこれらの点について要点を整理してみました。 ※1：この記事ではわかりやすく区別するために、アプリケーションとは「PCやスマホなどのアプリケーション・ソフトウェア」のこと。ウェブサイトとは「インターネット上にある企業・組織や個人などが情報発信などのためのウェブページ群」のことを指して説明しています。また、ECサイトやSNS、Webサービスなどはウェブ上のアプリケーションとしての性質もあり、実際にはどちらかに完全に区別し
情報設計で共通言語を作りデザインにも活かす。カラーミーショップデザイナーてっちゃんの紹介｜カラーミーショップ デザイン
こんにちは！GMOペパボ EC事業部 デザインチームでプロダクトデザイナーをしています、tecchanです。最近は長男の子育てに奮闘しつつ、第二子が生まれるので育休を取得予定です。 生まれてくる子供の名前の画数についてスプレッドシートで分析したりしています。 業務では主に、カラーミーショップの管理画面の情報設計とUIデザインを行っています。また、ショッピングカート周りの改善も行っています。 これらと並行して、デザインシステムの推進役と、カラーミーショップのドメインモデルの策定、という大きなミッションにも取り組んでいます。 カラーミーショップにおけるデザインシステムの推進GMOペパボでは現在、Inhouseというデザインシステムの開発を進めています。 Pepabo Design : Inhouseとは デザインシステムとは、ブランドがタッチポイントを活用した体験設計を効率的におこなうために、
こんにちは、UIデザイナーのマスダです。 この記事では、私のUIデザイン制作フローの紹介と、各段階での勉強に役立つ記事や本などを紹介しています。具体的なUIデザインの手法は紹介していません…！ わたしなりのUIデザインの制作フローを紹介することで、UIデザイナーの仕事が少しでもイメージしやすくなればいいなと思います。これからUIデザイナーを目指そうと思っている方、UIデザイナーになりたての方にとってお役に立てる記事であれば幸いです。 わたしのUIデザイン制作フローだいたいこんなフローでデザインしてる私の場合は要件定義のフェーズからUIデザイナーとして参加させてもらうことが多いです。要件定義から参加することで、プロジェクトのゴールや誰の何を解決するのかというのを深く理解することが可能です。 実際に手を動かすのは要件定義が終了してから。要件定義で決まった誰のどのような課題をどうやって解決するの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実例から考えるUIの情報設計｜usagimaru
Webサイトの会社情報・採用コンテンツのデザイン、ブランディング、情報設計に特化されたデザイン書
モバイルの情報設計で気にすべきこととは
ユーザーのメンタルモデルを理解して、情報設計の改善を図る
デザイン読書補講 1コマ目『UX・情報設計から学ぶ計画づくりの道しるべ』｜designing
「書く」ことで情報設計の筋トレを。 - note
情報設計・UI設計にAIデザインツールがどれだけ使えるか検証してみた
「情報設計」を突き詰め、人間そのものに向き合いたい 顧客に伴走する中で考えたデザインの本質 | root Inc.
ウェブの情報設計 (IA) とアクセシビリティ | Accessible & Usable
アプリケーションとウェブサイト、UIデザインにおける情報設計の違いとは？｜F Lab｜Fixel株式会社
わたしのUIデザイン制作フロー〜情報設計からビジュアルデザインまで〜｜a-masuda
www.happy-power-up.com
mimhytcdd.com
anond.hatelabo.jp
blog.suburin.jp
number.bunshun.jp
wpmake.jp