学習記録

本

運営しているクリエイター: ocha

【BONO】【学習記録】UIビジュアルの学びまとめ

BONOというコミュニティでUIデザインについて勉強しています💡 今回は、BONOの各シリーズでインプットした細々とした内容や、自分で調べた内容、カイくんさんにフィードバック頂いた中のUIビジュアルに関する内容をまとめていきたいと思います。ボーダーボーダーの考え方前提として、UI画面は様々な情報を載せて形成されている。ボーダーもそういった情報の1つである。境界線としてボーダーを使用する目的は、他のコンテンツを引立てる、というもの。あくまで大事なのはメインのコンテン

【BONO】【学習記録】モーダルナビゲーションの基本

BONOというコミュニティでUIデザインについて勉強しています💡 今回は、グローバルナビゲーションに関するインプットからアウトプットまでのまとめ第三弾です！学習したコンテンツはこちら👇コンビニなどのスイーツを記録し、記録したものをメルマガとして作成・配信するという架空のアプリにおいて、グロナビを中心に画面のリデザインに取り組む内容になっています！！モーダルナビゲーションの基本1．”完結するアクション”に使用する複雑なアクションはモーダルを使用して、タスクを完了させ

【BONO】【学習記録】階層表現 - UIビジュアル基礎

直近、BONOというコミュニティでUIデザインを学んでいます🔥 その中でも、UIのビジュアル基礎シリーズというものの中で「UIには階層表現が存在する」ということを初めて知りました。もうちょっと詳しく知りたい！と思い、BONOの動画の内容や、マテリアルデザインのガイドラインをまとめてみました👇 参考にしたもの平面における階層構造階層とは？そもそもUIは、階層を持っている階層表現を用いることで得られるメリットは3つ。情報構造を分かりやすく伝えるボタンの押せ

【BONO】【学習記録】階層ナビゲーションの基本

BONOというコミュニティでUIデザインについて勉強しています💡 今回は、グローバルナビゲーションに関するインプットからアウトプットまでのまとめ第二弾です！学習したコンテンツはこちら👇コンビニなどのスイーツを記録し、記録したものをメルマガとして作成・配信するという架空のアプリにおいて、グロナビを中心に画面のリデザインに取り組む内容になっています！！階層ナビゲーションの基本1．選択肢を狭め、フォーカスする移動移動とは「集中」を示す。（タスクに集中するために、画面を移

【BONO】【学習記録】グローバルナビゲーションの基本

BONOというコミュニティでUIデザインについて勉強しています💡 今回は、グローバルナビゲーションに関するインプットからアウトプットまでまとめていきたいと思います。学習したコンテンツはこちら👇コンビニなどのスイーツを記録し、記録したものをメルマガとして作成・配信するという架空のアプリにおいて、グロナビを中心に画面のリデザインに取り組む内容になっています！！グローバルナビゲーションの基本1．最上位のゴールに対する役割を配分するアプリでやりたいことの一番トップがグロナ

wordrabbitさんのUXライティングガイドラインが初学者にも分かりやすくて良い！

つい先程、こんなつぶやきをしたばかりでした👇 先日も、「ボタンのラベルやダイアログの適切として分かりやすいものってナニ？？」ということが気になり調べたばかりでした👇 前の職場では、自社で開発した社内向けツールのアプデがあるたびに、社内向けのマニュアル作成をしていました。そのツールは複雑で、たくさんのタスクが処理出来る一方で、使い手にもある程度の前提知識などないと使いこなせないものでした。従って、正しさだけでなく、分かりやすいマニュアルを書かねばならぬ状況で、当時から「

UIのボタン、ダイアログにおける最適な表現を考えるために、ソシオメディアのガイドラインを参照してみる

ボタンのラベルやダイアログのテキストを決めるとき、「日本語としてどの表現が正しいのか？」「UIとしてはどの表現が分かりやすいのか？」 …等々が気になります。あとで読み返せるように、調べたものをピックアップしました👇 動詞を使うOK例：「消去」「保存」分かりにくいボタン例：「はい」「OK」考察：ダイアログ内のテキストをすっ飛ばしてしまうユーザーがいると仮定した時に、「消去」「保存」のような動詞がボタンのラベルになっていたほうが、ユーザー目線では素早くタスクを完了

【学習記録】オブジェクト指向UIデザイン：第3章実践プロセス2

前回のまとめ👇👇👇 前回の実践編の続きです。今回はビュー（画面）とナビゲーション（画面動詞の関係性）を作っていきます。実践プロセス2：ビューとナビゲーションの検討 0.言葉の定義ビュー：画面ナビゲーション：ビューとビューの呼び出し関係基本のビュー形式を検討するビューの種類は下記の2つ。コレクションシングル画面を考えるときは、各オブジェクトごとに「コレクション」と「シングル」のビューを与える。一般的な人の行動は、身の回りの眺める→近寄って詳

【学習記録】オブジェクト指向UIデザイン：第3章実践プロセス1

前回のまとめ👇👇👇 今回は実践編に移ります。実際にFigJamを使って作業もしてみたので、その時の疑問点などもまとめてみようと思います。第3章：オブジェクト指向UIの実践実践プロセス1：オブジェクトの抽出想定されるタスクを洗い出す洗い出したタスクの中から名詞を抜き出す。単に名詞を抜き出すのではなく、ユーザーの関心の対象になりうる概念を意識する。名詞にはモノ（食べ物、書物等）もあれば、コト（食事、読書）もある。名詞同士の関係を抽出する。タスクごとに名

【学習記録】オブジェクト指向UIデザイン：第1〜2章読書memo

読んだもの第1章：オブジェクト指向UIとはオブジェクト＝目当てユーザーが関心を寄せるものはなに？オブジェクト指向UIの原則オブジェクトを知覚でき、直接的に働きかけられるオブジェクトは自身の性質と状態を体現するファイル、フォルダ、メニュー、ボタンetc これらのオブジェクトは、自身が今どういう状態なのかを示す必要がある（選択中、ダウンロード中、ドラッグ中、etc）オブジェクト選択→アクション選択　の操作順序すなわち、名詞→動詞　の操作順序である

【学習記録】UIの3構造

記録のきっかけUIデザインを学んでいると、「情報設計」という単語をよく耳にします。この情報設計の良し悪しが、ユーザーの使いやすさに影響するんだろうな…ということは漠然と想像するも、詳細をきちんと理解は出来ていない状態です。そんな中、今日はオフの日にするつもりだったのですが、いつも勉強させてもらっているカイクンさんの動画で関連しそうなものがアップされていたので、メモをこちらに残そうと思います。学んだこと使いやすい、とはどこにいるのかが分かる何かが分かるアク

【学習記録】Figmaでひたすらアイコンを作り、コンポーネント化する

記録のきっかけDaily UI の4日目課題「計算機」に取り組んでいます。ボタンをひとつずつ作ると、それぞれ余白設定を変更したりが大変だろうな…と思ったので、下記の通り効率化を図りたいと思います。ボタンの内容（数字やアイコン）をすべてコンポーネント化オートレイアウトを使い、ボタンの内容を決まった位置に来るように設定 2を更にコンポーネント化し、大量作成することで後はポチポチボタンを作ればOKの状態にするやりたかったことボタンの中身に当たる数字やアイコンそれぞ

【学習記録】Figmaのオートレイアウトでヘッダー、フッターを作る

記録のきっかけFigmaで制作する際はマテリアルデザインKitを使用しているのですが、見てみると様々なパーツにオートレイアウトが設定されているのが気になったため、調べてみました。そうすると、下記のメリットがあることが分かりました。　コンテンツが増えたり減ったりした際の修正が容易になる（いちいち配置を組み直す手間が省ける） Figma上で正しい組み方が出来ていると、コーディングが容易になる（コード表示させた時にそれっぽいコードが吐き出される）完成したものポートフォ