No.004 サイボウズ株式会社

サイボウズ株式会社の事業内容

  • グループウェア製品の開発・提供

    • Cybozu Office(中小企業向け)

    • Garoon(中堅〜大企業向け)

    • Mailwise(メール共有システム)

    • kintone(ローコード業務アプリ開発プラットフォーム)

  • クラウドサービスの展開
    2011年以降クラウド型提供に注力し、国内外でユーザーを拡大

  • チームワークや働き方改革支援
    独自文化や制度(ウルトラワークなど)を通じ、組織の効率と幸福の両立を追求

今回WEB100選に起用した理由

私情ではありますが、職業訓練学校のフェリカアカデミーで、現在CSSの勉強中でうまくflexbox(フレックスボックス)とgrid(グリッド)を使い分けて理解していないと感じたからである。
今回はチャットGBTにflexboxを活用した企業のWEBサイトを紹介してくれと頼んだところ、サイボウズ株式会社を提示して頂けたので、チャットGBTの評価をのせていきます。

CSSのflexboxとは

flexboxのbodyの形式

<div class="flex-container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
</div>

flexboxのCSSの形式

<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

.flex-container {
display: flex;
justify-content: center; /* 主軸(横)方向で中央揃え */
align-items: center; /* 交差軸(縦)方向で中央揃え */
height: 100vh;
background-color: #f0f0f0;
}

.item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
border-radius: 8px;
flex: 0 1 200px; /* shrink=0, grow=1, basis=200px */
text-align: center;
}
</style>

サイトの与える印象

  • デザインが整っており、優しい印象を与えるがそこにしっかり安心感を与えるUIとなっている。
  • どのデバイスから見ても安定した操作感がしっかりある。
  • スクロールしてもしっかり付いてくる固定ナビと、必要用途に分かれたグローバルメニューも魅力的である。
  • コンテンツにしっかり余白があるので窮屈間を感じない作りとなっている。
  • メインカラーは青となっておりそれは「信頼、誠実、安定」
サイボウズWEB100選
サイボウズWEB100選 flexboxの活用
  • グラデーションもお洒落でflexboxを有効活用したデザインとなっている。

チャットGBTによる総合評価

項目 評価
ビジュアルデザイン 賞歴あり、キャラクター・カラーなどで世界観が明確
UX/UI設計 日本発Webサービスとして洗練。操作性・わかりやすさに配慮
アクセシビリティ 標準以上に取り組み、改善プロセスが定着
開発プロセス コラボ&改善サイクルが実務レベルで形成

全体として、**“ユーザーに優しく、使いやすく、安心感あるWeb体験をビジュアル・実装・体制の全てで支えていると評価できます。
特に日本企業のB2B SaaSとして、信頼性・安心感・普遍性を意識した設計は非常に参考になる内容です。

以上になります。ありがとうございました(^^)/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です