--- title: サイボウズのプロダクトデザイン2026 tags: #開運研修 author: [サイボウズ開発本部](https://www.docswell.com/user/cybozu-tech) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/LE3WL63PE5.jpg?width=480 description: 2026年エンジニア新人研修の資料です。 published: August 13, 26 canonical: https://www.docswell.com/s/cybozu-tech/KDM69V-Product_Design_for_Cybozu_Products_2026 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/LE3WL63PE5.jpg) サイボウズの プロダクトデザイン 2026.04.30 1 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/8EDKNV437G.jpg) サイボウズのプロダクトデザイン プロダクトデザインとは？ • デジタルプロダクト（SaaSやソフトウェアなど サイボウズでは、いわゆるサイボウズ製品（kintone, Office, Garoon, Mailwiseなど）のデザインのこと • 「プロダクトのデザイン」に関わる要素は様々 • UI, UX, Accessibility（A11y） 、ビジュアルデザイン、ライティング、etc… • プロダクトデザイナーはそうしたさまざまな要素を横断的に扱いながら、プロダクトのデザインを専門的 に考える人のこと。 • UIだけ、UXだけ、というわけではないので、「プロダクトデザイン」と呼称しています。 • 一般的にはプロダクトデザイナーという呼称は工業製品などを含めたデザイナーの呼称として使われます。 サイボウズのプロダクトデザイン 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/V7PK5VMPJ8.jpg) 良いデザイン / 悪いデザイン ©️ Cybozu, Inc. # Page. 4 ![Page Image](https://bcdn.docswell.com/page/2JVVPZ9VJQ.jpg) 良いデザイン / 悪いデザイン 何故えんぴつは六角形？ サイボウズのプロダクトデザイン # Page. 5 ![Page Image](https://bcdn.docswell.com/page/5EGLP4Z1JL.jpg) 良いデザイン / 悪いデザイン エンピツは、手で持って使うだけでなく、机の上やノートの上に置くこともあります。 たとえば、エンピツを置いたところが斜めだったりすると、丸いエンピツでは転がってしまい ますが、六角形であれば転がりにくくなります。 丸いと転がる 六角形は転がりにくい サイボウズのプロダクトデザイン # Page. 6 ![Page Image](https://bcdn.docswell.com/page/4JQY2GLN7P.jpg) 良いデザイン / 悪いデザイン また、六角形という形は転がりにくいだけでなく、製造の側面でも効率がよいです。 エンピツを製造するとき、芯を並べて、それを板で挟みます（図１）。 六角形に削るには、三角を削り取ることで作ることができます（図２）。 これが他の形では、複雑になってしまい製造にコストがかかってしまいます。 図１ 図２ 参考： https://cocreco.kodansha.co.jp/move/news/katachi/syeYc サイボウズのプロダクトデザイン # Page. 7 ![Page Image](https://bcdn.docswell.com/page/K74WL5D3E1.jpg) 良いデザイン / 悪いデザイン 良いデザインとは、利用者が、どのような状況・環境で利用するか考慮されたデザインになっ ていることです。 逆説的に良くないデザインとは、利用者がどのように利用しているか考慮されておらず、不便 な状態になっていることです。 また、良いデザインは、製造コストを下げるなど、利用する側面だけでなく、製造する側面で も効果を発揮します。 サイボウズのプロダクトデザイン # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LJ1YLWZZEG.jpg) 良いデザイン / 悪いデザイン デザインの語源 • デザインの語源はデッサン(dessin)と同じく、“計画を記号に表す”という意味のラテン語designareであ る。 • デザイン自体はものすごく意味の広い用語 • 見た目のことだけではなく、計画、設計することも含め幅広く使われる • エンジニアの領域でも設計という意味でデザインという言葉よく出てくる サイボウズのプロダクトデザイン # Page. 9 ![Page Image](https://bcdn.docswell.com/page/GJWGV69672.jpg) 良いデザイン / 悪いデザイン まとめ • どんなデザインにも意図がある。 • その意図がちゃんと機能するかどうか、がデザインの良し悪しを決める • デジタルプロダクトのデザインにおいては特に、利用者（ユーザー）がどんな環境で利用するか考慮され ていることが重要 • デザインは利用者側の側面だけでなく、作る側の側面においても効果があるなど、多面的な効果がある サイボウズのプロダクトデザイン # Page. 10 ![Page Image](https://bcdn.docswell.com/page/4EZL4Y9R73.jpg) UXとUI # Page. 11 ![Page Image](https://bcdn.docswell.com/page/Y76W3DK17V.jpg) UXとUI UX = User Experience UI = User Interface サイボウズのプロダクトデザイン # Page. 12 ![Page Image](https://bcdn.docswell.com/page/G75ML3PL74.jpg) UXとUI UI (User Interface) コンピュータとその機械の利用者 の間での情報をやりとりするため のインタフェース サイボウズのプロダクトデザイン # Page. 13 ![Page Image](https://bcdn.docswell.com/page/9J29LZ63ER.jpg) UXとUI UXとは？ システム，製品，又はサービスの利用前，利用中，及び利用後に 生じるユーザの知覚及び反応。 （ JIS Z 8521:2020 ） • • • • • • 美しい 楽しい 使いやすい 分かりやすい 役に立つ 価値がある などなど UXとは、UIを通じて得られた知覚や反応（美しい、楽しい、使いやすい、分かりやすい、など）のこ とを指します。UXとUIは混同されることが多いですが、UXはUIを通じて得られた便益とも言えます。 なお、UXは知覚や反応といった幅広い対象を指す言葉になります。コミュニケーション時には、どの知 覚や反応のことなのか対象を明確にしてコミュニケーションをとる必要があります。 サイボウズのプロダクトデザイン # Page. 14 ![Page Image](https://bcdn.docswell.com/page/DEY4QR98JM.jpg) UXとUI kintoneのユーザー体験って？ サイボウズのプロダクトデザイン # Page. 15 ![Page Image](https://bcdn.docswell.com/page/VJNYKDL978.jpg) UXとUI こんなこともUXの一部 • 障害が起きることなくサイボウズ製品を毎日安心して使える • サポートの人の対応が素晴らしかった • ヘルプを読んで、疑問が解消された etc… サイボウズのプロダクトデザイン # Page. 16 ![Page Image](https://bcdn.docswell.com/page/YE9PVG43J3.jpg) UXとUI UXは顧客のサービスの体験すべて × UXはUXデザイナーがつくるもの ○ UXはプロダクトに関わるすべての人がつくるもの サイボウズのプロダクトデザイン # Page. 17 ![Page Image](https://bcdn.docswell.com/page/GE8DPVQLED.jpg) サイボウズのプロダクトにおけるデザイン ©️ Cybozu, Inc. # Page. 18 ![Page Image](https://bcdn.docswell.com/page/LELM15XQ7R.jpg) 例えばkintoneの場合 リファインメント サイボウズのプロダクトデザイン # Page. 19 ![Page Image](https://bcdn.docswell.com/page/4JMYW33KJW.jpg) サイボウズのプロダクトにおけるデザイン 例えばkintoneのステークホルダー • エンドユーザー • アプリ管理者 • システム管理者 • 決裁者 • 開発パートナー • 販売パートナー etc…. サイボウズのプロダクトデザイン # Page. 20 ![Page Image](https://bcdn.docswell.com/page/PJR9YQQ679.jpg) サイボウズのプロダクトにおけるデザイン 様々な要望 標準でもっと機能が欲しい！ カスタマイズの余地を残して もっとUIが大きい方が見やすい 競合に勝てる見栄えを もっとUIが小さい方がたくさん の情報を一覧できる 今のままで良い、変えないで サイボウズのプロダクトデザイン # Page. 21 ![Page Image](https://bcdn.docswell.com/page/PEXQG55DJX.jpg) サイボウズのプロダクトにおけるデザイン 様々な観点から検討する 本当の課題は何か？ 検討・実装コストはどうか？ ユーザーの価値は何か？ リリース時の見え方はどうか どんなトレードオフがあるか どんなリスクがあるか サイボウズのプロダクトデザイン # Page. 22 ![Page Image](https://bcdn.docswell.com/page/3EK9466DED.jpg) サイボウズのプロダクトにおけるデザイン プロトタイピング 抽象と具体を行ったり来たり サイボウズのプロダクトデザイン # Page. 23 ![Page Image](https://bcdn.docswell.com/page/L73WL66P75.jpg) サイボウズのプロダクトにおけるデザイン ユーザビリティテスト/リサーチ サイボウズのプロダクトデザイン # Page. 24 ![Page Image](https://bcdn.docswell.com/page/87DKNVV3JG.jpg) サイボウズのプロダクトにおけるデザイン デザインに関わる職能 プロダクトデザイナー 情報設計 / UIデザイン テクニカルライター UI上の文言 / ヘルプの作成 ローカライズ 他言語版での表現 / ヘルプの作成 デザインテクノロジスト デザインシステムの構築 / 実装との橋渡し UXリサーチャー 検討時やリリース後のリサーチ サイボウズのプロダクトデザイン # Page. 25 ![Page Image](https://bcdn.docswell.com/page/VJPK5VVPE8.jpg) デザインシステムについて デザインシステムとは製品やサービスの開発に おいてデザインの一貫性、効率性、およびス ケーラビリティを高めるために作られたツール やガイドラインのセットのこと # Page. 26 ![Page Image](https://bcdn.docswell.com/page/2EVVPZZVEQ.jpg) サイボウズのプロダクトデザイン # Page. 27 ![Page Image](https://bcdn.docswell.com/page/57GLP441EL.jpg) デザインとの関わり方 ©️ Cybozu, Inc. # Page. 28 ![Page Image](https://bcdn.docswell.com/page/4EQY2GGNJP.jpg) デザインとの関わり方 フロントエンドの領域では • 情報構造のマークアップ • スタイルシートによるスタイリング • インタラクションの実装 • などなど サイボウズのプロダクトデザイン # Page. 29 ![Page Image](https://bcdn.docswell.com/page/KJ4WL55371.jpg) デザインとの関わり方 バックエンドの領域でも • 性能に対して適切なデザイン • データ構造が反映されたUI設計 • パフォーマンスを考慮したUI • などなど サイボウズのプロダクトデザイン # Page. 30 ![Page Image](https://bcdn.docswell.com/page/LE1YLWWZ7G.jpg) エンジニアと PM・デザイナーの認識が 違っていた例 サイボウズのプロダクトデザイン # Page. 31 ![Page Image](https://bcdn.docswell.com/page/GEWGV666J2.jpg) デザインとの関わり方 フィードバックを送る 普段製品を使っていて、何か気づいたことがあればぜひフィードバックを送って ください。 cybozu.com評価箱 https://bozuman.cybozu.com/k/1595/ サイボウズのプロダクトデザイン # Page. 32 ![Page Image](https://bcdn.docswell.com/page/47ZL4YYRJ3.jpg) デザインとの関わり方 NG例 保存ボタンの色が見づらいので変えて欲しいです。 緑とかにすると良いと思います。 サイボウズのプロダクトデザイン # Page. 33 ![Page Image](https://bcdn.docswell.com/page/YJ6W3DD1JV.jpg) デザインとの関わり方 背景を併せて教えて欲しい • 例えば「見づらい」にも… • 他のボタンと混同してしまって見辛かったです • 目に入りづらい位置にあるので見つかりませんでした • コントラストが薄く目に入りませんでした サイボウズのプロダクトデザイン # Page. 34 ![Page Image](https://bcdn.docswell.com/page/GJ5ML33LJ4.jpg) 状況を書いてみてください “レコードを書き終わってから保存しようとした時”に ボタンがすぐに見つからず困ってしまいました。 “しばらく画面下を探した後”、上にボタンがあることに気づきましたが、もう少し見つけやすくして欲しい です。 サイボウズのプロダクトデザイン # Page. 35 ![Page Image](https://bcdn.docswell.com/page/LE3WL66DE5.jpg) デザインとの関わり方 ユーザービリティテスト/リサーチに協力する • 被験者として協力をお願いするかもしれません サイボウズのプロダクトデザイン # Page. 36 ![Page Image](https://bcdn.docswell.com/page/8EDKNVV27G.jpg) デザインとの関わり方 まとめ • デザインの良し悪しは、見た目のことだけでなく、 意図が機能するかどうかです。 • UXはデザイナーだけでなく全ての人に関わることです。 あなたもサイボウズの製品のUXを形作る一人です。 • 日々の仕事でぜひデザインに関わる職能の人たちと関わってください。また、デザインの力を活用してく ださい。 サイボウズのプロダクトデザイン # Page. 37 ![Page Image](https://bcdn.docswell.com/page/V7PK5VVLJ8.jpg) ©️ Cybozu, Inc. 37