Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

コンテンツを全体的に修正 #231

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions src/pages/words/braille-keyboard.md

This file was deleted.

34 changes: 17 additions & 17 deletions src/pages/words/collection-and-single.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
---
layout: ../../layouts/ArticleLayout.astro
title: コレクションとシングル
description: コレクションは、ひとつのビューの中に同種のオブジェクトを複数並べて表示する。シングルは、ひとつのビューでオブジェクトひとつ分を表示する
description: コレクションは、ひとつのビューの中に同種のオブジェクトを複数並べて表示するものである。一方、シングルは、ひとつのビューでオブジェクトひとつ分を表示するものである
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「〜する」はですます調でもないので、治す必要なさそう。「〜するものである」という日本語が気になってしまう。

tag: word
---

シングルとコレクションは、アプリケーションにおける「ビュー」のパターンです
OOUIデザインの文脈で使われています
シングルとコレクションは、アプリケーションにおける「ビュー」のパターンを指す
これらはOOUIデザインの文脈で使われる

「ビュー」とは、ユーザーが実際に画面上で目にするひとまとまりの情報表示領域のことです
:[オブジェクト]:はビューを通して画面上に表現され、ユーザーに知覚されます
「ビュー」は、ユーザーが実際に画面上で目にするひとまとまりの情報表示領域のことである
オブジェクトはビューを通して画面上に表現され、ユーザーに知覚される

そして、ビューは大きく「コレクション」と「シングル」に分類することができます
そして、ビューは大きく「コレクション」と「シングル」に分類できる

## コレクション
コレクションとは、ひとつのビューの中に同種のオブジェクトを複数並べて表示するものです
代表的な:[UI]:としては、リストやカードを用いたグリッドレイアウトなどが挙げられます
コレクションは、ひとつのビューの中に同種のオブジェクトを複数並べて表示するもの
代表的なUIとしては、リストやカードを用いたグリッドレイアウトなどが挙げられる
Comment on lines +17 to +18
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
コレクションは、ひとつのビューの中に同種のオブジェクトを複数並べて表示するもの
代表的なUIとしては、リストやカードを用いたグリッドレイアウトなどが挙げられる。
ひとつのビューの中に同種のオブジェクトを複数並べて表示するものを、コレクションと呼ぶ
代表的なUIとしては、リストやカードを用いたグリッドレイアウトなどが挙げられる。


例:メールアプリにおける「受信ボックス」。ビューの中に、複数の「メール」オブジェクトが並んでいます
例えば、メールアプリにおける「受信ボックス」はビューの中に、複数の「メール」オブジェクトが並んでいる

## シングル
シングルは、ひとつのビューでオブジェクトひとつ分を表示するものです
通常はコレクションよりも多くの属性を表示します
シングルは、ひとつのビューでオブジェクトひとつ分を表示するもの
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
シングルは、ひとつのビューでオブジェクトひとつ分を表示するもの。
ひとつのビューでオブジェクトひとつ分を表示するものを、シングルと呼ぶ。

通常はコレクションよりも多くの属性を表示する

例:メールアプリにおける「メール詳細」本文や宛先などが、受信ボックスよりも詳細に表示されます
例えば、メールアプリにおける「メール詳細」では、本文や宛先などが、受信ボックスよりも詳細に表示される

## ビューとレイアウトの設計
ビューの設計時には、オブジェクトに対してコレクションとシングルのふたつのビューを設けることが一般的です
多くのアプリケーションでは、各オブジェクトの一覧画面がコレクション、詳細画面がシングルにあたります
ビューの設計時には、オブジェクトに対してコレクションとシングルのふたつのビューを設けることが一般的である
多くのアプリケーションでは、各オブジェクトの一覧画面がコレクション、詳細画面がシングルにあたる

コレクションとシングルをレイアウトする際、それぞれを別の画面に分割する方法もありますが、デスクトップアプリケーションなど広い面積が使用できる場合、領域を分割して1つの画面内に配置することも可能です
コレクションとシングルをレイアウトする際には、それぞれを別の画面に分割する方法もあり、また、デスクトップアプリケーションなど広い面積が使用できる場合には、領域を分割して1つの画面内に配置することも可能である
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
コレクションとシングルをレイアウトする際には、それぞれを別の画面に分割する方法もあり、また、デスクトップアプリケーションなど広い面積が使用できる場合には、領域を分割して1つの画面内に配置することも可能である
コレクションとシングルをレイアウトする際、それぞれを別の画面に分割する方法もあるが、デスクトップアプリケーションなど広い面積が使用できる場合、領域を分割して1つの画面内に配置することもある


### メールアプリの例
コレクションとシングルを別の画面に分割する場合
<img src="https://github.com/kufu/product-design/assets/99632029/be9cf480-b4df-4c7d-9207-9f3e7e5cae2b" width="500" alt="メールの一覧と詳細をそれぞれ別の画面に配置する。">
![メールの一覧と詳細をそれぞれ別の画面に配置する。](https://github.com/kufu/product-design/assets/99632029/be9cf480-b4df-4c7d-9207-9f3e7e5cae2b)

コレクションとシングルを1つの画面内に配置する場合
<img src="https://github.com/kufu/product-design/assets/99632029/1676d87c-4738-42e2-b866-bc0081a228c7" width="500" alt="横長の画面を左右に分割している。左側にメールの一覧、右側に本文などの詳細が配置されている。">
![横長の画面を左右に分割している。左側にメールの一覧、右側に本文などの詳細が配置されている。](https://github.com/kufu/product-design/assets/99632029/1676d87c-4738-42e2-b866-bc0081a228c7)

## 参考
- [OOUI – オブジェクトベースのUIモデリング | ソシオメディア](https://www.sociomedia.co.jp/7279)
2 changes: 1 addition & 1 deletion src/pages/words/fireworks.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ tag: word,デザインツール

Fireworksとは、ウェブサイトやモバイルアプリケーションなどのデジタルプロダクトの画面設計やプロトタイピングを行なうためのビットマップとベクターのハイブリッド型グラフィックスエディタである。正式名称はAdobe Fireworksで、Adobeが買収する前はMacromedia Fireworksという名称だった。

Fireworksの最たる特徴として、ラスター形式のデータとベクター形式の画像を同時に扱うことができる点が上げられる。従来のデザインツールではラスター形式のデータ編集はPhotoShop、ベクター形式のデータ編集はIllustrator..など別々にツールを使い、組み合わせる必要があったが、Fireworksではその両方のデータを直接扱えることが革新的だった。
Fireworksの最たる特徴として、ラスター形式のデータとベクター形式の画像を同時に扱うことができる点が上げられる。従来のデザインツールではラスター形式のデータ編集はPhotoshop、ベクター形式のデータ編集はIllustrator..など別々にツールを使い、組み合わせる必要があったが、Fireworksではその両方のデータを直接扱えることが革新的だった。

## 代表的な機能

Expand Down
4 changes: 2 additions & 2 deletions src/pages/words/scrum.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ description: アジャイル開発の一種で、チームが迅速かつ柔軟
tag: word,開発手法
---

スクラムは、:[アジャイル]:開発の一種で、チームが迅速かつ柔軟に開発を進めるためのフレームワークです
詳細な考え方や具体的な手法については、最新のスクラムガイドを参考にしてください
スクラムは、:[アジャイル]:開発の一種で、チームが迅速かつ柔軟に開発を進めるためのフレームワークを指す
詳細な考え方や具体的な手法については、最新のスクラムガイドを参考とすること
kgsi marked this conversation as resolved.
Show resolved Hide resolved

- スクラムガイド https://scrumguides.org
- スクラムガイド 2020(日本語版) https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf
23 changes: 12 additions & 11 deletions src/pages/words/smarthr-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,39 @@ description:
tag: word,サービス
---

[SmartHR UI](https://github.com/kufu/smarthr-ui) は、[SmartHR](https://smarthr.co.jp/) が [SmartHR](https://smarthr.jp/) を作るために開発した React ベースの UI コンポーネントライブラリです。このライブラリには、一般的な UI 要素だけでなく、業務アプリケーションに特化したコンポーネントも含まれています。開発者はこれらのコンポーネントを組み合わせることで、短期間で複雑な業務アプリケーションを構築できます
[SmartHR UI](https://github.com/kufu/smarthr-ui) は、[SmartHR](https://smarthr.co.jp/) が [SmartHR](https://smarthr.jp/) を構築するために開発した React ベースの UI コンポーネントライブラリである。このライブラリは、一般的な UI 要素だけでなく、業務アプリケーションに特化したコンポーネントも含まれている。開発者はこれらのコンポーネントを組み合わせることで、短期間で複雑な業務アプリケーションを構築することができる
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
[SmartHR UI](https://github.com/kufu/smarthr-ui) は、[SmartHR](https://smarthr.co.jp/)[SmartHR](https://smarthr.jp/) を構築するために開発した React ベースの UI コンポーネントライブラリである。このライブラリは、一般的な UI 要素だけでなく、業務アプリケーションに特化したコンポーネントも含まれている。開発者はこれらのコンポーネントを組み合わせることで、短期間で複雑な業務アプリケーションを構築することができる
[SmartHR UI](https://github.com/kufu/smarthr-ui) は、[SmartHR](https://smarthr.co.jp/)[SmartHR](https://smarthr.jp/) を構築するために開発した React ベースの UI コンポーネントライブラリである。このライブラリには、一般的な UI 要素だけでなく、業務アプリケーションに特化したコンポーネントも含まれる。開発者はこれらのコンポーネントを組み合わせることで、短期間で複雑な業務アプリケーションを構築できる


## SmartHR UI が大切にしていること

SmartHR UIの開発における価値観や行動指針を以下のように定めています。これらはただ大切にしているだけでなく、開発コミュニケーションやタスクの優先順位づけなどにおける判断基準としても使っています
SmartHR UIの開発における価値観や行動指針は以下のように定められている。これらはただ大切にするだけでなく、開発コミュニケーションやタスクの優先順位づけなどの判断基準としても用いられている

### 使い勝手を損なわないこと

UIコンポーネントの使い勝手は、プロダクトの使い勝手に直結するため非常に重要です
UIコンポーネントの使い勝手は、プロダクトの使い勝手に直結するため非常に重要である

ユーザーエージェントの振る舞いからかけ離れないようにすることやアクセシビリティに取り組むことも使い勝手に関わります。もちろんプログレッシブエンハンスメントな考え方も大切にしています
ユーザーエージェントの振る舞いから離れないようにし、アクセシビリティに取り組むことも使い勝手に関わる。もちろんプログレッシブエンハンスメントな考え方も大切にしている
kgsi marked this conversation as resolved.
Show resolved Hide resolved

またコンポーネント単体の振る舞いだけでなく、プロダクトで一貫したUIになっているかどうかも忘れてはいけません
コンポーネント単体の振る舞いだけでなく、プロダクトで一貫したUIになっているかどうかも忘れてはならない

### 開発者の生産性を損なわないこと

私たちは、サービスを通じてプロダクトの利用者や社会に価値を届けることを目的にしています。その状態に早く到達するためにも、質の良いプロダクトを早く開発し早くリリースする必要があります
私たちは、サービスを通じてプロダクトの利用者や社会に価値を届けることを目的にしている。その状態に早く到達するためにも、質の良いプロダクトを早く開発し早くリリースする必要がある

SmartHR UIはそんな開発を支えるためのプロダクトとして、質が高く、使いやすいコンポーネントを、早く、提供し続けます。コンポーネントの先にあるプロダクトの開発サイクルを妨げないためにSmartHR UI自体の開発サイクルも素早く行なっていきます
SmartHR UIはそのような開発を支えるためのプロダクトとして、質が高く、使いやすいコンポーネントを、早く、提供し続ける。コンポーネントの先にあるプロダクトの開発サイクルを妨げないためにSmartHR UI自体の開発サイクルも迅速に行われる

複数プロダクトに組み込まれて使われる“プロダクト”だから、良くも悪くもその影響は大きく、単一のプロダクトだけでなく幅広い視野で捉えることも必要です。各プロダクトの意見をまとめてコンポーネントとして展開することで、SmartHR製品全体の質を高める触媒として機能します
複数プロダクトに組み込まれて使われる“プロダクト”であるからこそ、その影響は大きい。単一のプロダクトだけでなく幅広い視野で捉えることも必要である。各プロダクトの意見をまとめてコンポーネントとして展開することで、SmartHR製品全体の質を高める触媒として機能する

### オープンソースであること

SmartHRのプラットフォーム化構想に向けて、サードパーティの開発者がSmartHR APIとSmartHR UIを利用して開発できる状態を目指してオープンソースしています
SmartHRのプラットフォーム化構想に向けて、サードパーティの開発者がSmartHR APIとSmartHR UIを利用して開発できる状態を目指してオープンソース化している

また私たちはウェブが開かれていたから今の自分たちがあると考えているため、日々の仕事で得た知見を積極的に公開していきます
また私たちはウェブが開かれていたからこそ今の自分たちがあると考えているため、日々の仕事で得た知見を積極的に公開していく

SmartHRのために作られたコンポーネントではあるものの、社会の価値に繋がるのであれば競合を含めた他社のtoB SaaSプロダクトで使われることも望んでいます
SmartHRのために作られたコンポーネントではあるものの、社会の価値に繋がるのであれば競合を含めた他社のtoB SaaSプロダクトで使われることも望んでいる

## 参考

- [コンポーネント | プロダクト | SmartHR Design System](https://smarthr.design/products/components/)
- [kufu/smarthr-ui | GitHub](https://github.com/kufu/smarthr-ui)
- [SmartHR UI | Storybook](https://story.smarthr-ui.dev/?path=/docs/buttons%EF%BC%88%E3%83%9C%E3%82%BF%E3%83%B3%EF%BC%89-button--docs)

Loading