kubell Webサイト デザインガイドライン

株式会社kubellがWebサイト制作において大切にしているデザイン・実装の指針をまとめたガイドラインです。
ミッション「働くをもっと楽しく、創造的に」に基づき、文字サイズ、余白、レスポンシブ対応など、Webサイトを制作・運用する際の品質基準とルールをとりまとめています。

Transcript

1. Webサイト デザインガイドライン あらゆる人が使いやすいWebデザイン
2. 基本思想 kubellでは、ミッションとビジョンにおいて「1人でも多く の人」「あらゆる人」に言及しています。 Webデザインにおいても同様に、多くの人・あらゆる人が 利用しやすいものを目指しています。 ミッション ビジョン 働くをもっと楽しく、創造的に 人生の大半を過ごすことになる「働く」という時間において、
 ただ生活の糧を得るためだけではなく、1人でも多くの人がより楽しく、
 自由な創造性を存分に発揮できる社会を実現する 一部の先進的な人だけではなく、世界中で働くあらゆる人が、 自分自身の働き方を常に「一歩先」へと進めていけるプラットフォームを提供する すべての人に、一歩先の働き方を
3. セマンティクス セマンティックな文書構造に相反しないデザイン設計にし てください。 見出し順序やセクション構造などがデザイン上も適正であ ることで、ユーザビリティ・マシンリーダビリティが高く なります。結果的にあらゆる人に届きやすく、利用しやす いWebサイトになります。 見た目の見出し順序が 揃っている 見た目の見出し順序が 揃っていない 見出し2 見出し3 見出し2 見出し4
4. レスポンシブデザイン あらゆるユーザーのデバイスに合わせて表示できるよう、 レスポンシブレイアウトを想定したデザインにしてくださ い。 マルチデバイスに対応したデザインにすることで、ユーザ ビリティが向上し、多くの人に届きやすいWebサイトにで きます。 kubellのサイトでは以下のサイズを想定していることが多 いです。参考にしてください。 デスクトップ: 1080px~ タブレット: 744px~1079px モバイル: ~743px 画面サイズに応じた レイアウトが想定されている 画面サイズの変化が 想定できていない 横スクロールが必要
5. フォントサイズ <p> タグのブラウザ標準である、16pxをベースにサイズを 検討してください。 ブラウザ標準で採用されているサイズで本文を組み、相対 的に見出しサイズ等を決めていくと、多くの人が読みやす い一般的なサイズ感になると考えています。 ※数値は参考値です 本文サイズが読みやすい サイズになっている 本文サイズが小さく 読みづらい font-size: 16px; font-size: 12px;
6. スペーシング 要素間の余白や文章の行間は、広めにして読みやすさを担 保してください。 kubellのサイトでは、本文の行間は2、横に並ぶ要素間は 40pxにしていることが多いです。参考にしてください。 line-height: 2; line-height: 1.5; gap: 40px; gap: 15px; 余白や行間が広めになっている 余白や行間が窮屈になっている ※数値は参考値です
7. ルールの再利用 ルールの再利用を意識し、予想のしやすいデザイン設計に してください。 コンポーネントや変数を使うことでルールを再利用でき、 統一感のあるデザインにできます。また予想がしやすいこ とで使う人の認知負荷も抑えられます。 border-radius: 6px; border-radius: ; border-radius: ; 8px 24px デザイン上のルールが 統一されている デザイン上のルールが 統一されていない ※数値は参考値です
8. 操作性 多くの人が操作しやすいよう、スムーズな操作性を担保し たデザイン設計にしてください。 「クリックしやすいサイズのボタン」「機能の予測がつき やすいアイコン」のように、使う人の操作性を尊重したデ ザインを目指します。 参考 https://developer.apple.com/jp/design/human- interface-guidelines/accessibility#Mobility https://support.google.com/accessibility/android/ answer/7101858?hl=ja 40px × 40px 24px × 24px 操作しやすいサイズで レイアウトされている サイズが小さく 操作しづらい ※数値は参考値です
9. 演出・アニメーション ユーザビリティと共存できる、適切な演出を目指します。 効果的にコンテンツを伝えるのに有効な場合は、演出を適 切に使用して印象付けます。 演出によってユーザビリティが低下することがないよう注 意してください。 表示アニメーション中でも スクロール操作ができる 表示アニメーション中に スクロール操作ができない
10. アクセシビリティ 1人でも多くの人が利用できるよう、WCAGの「A」を目指 したデザインにしてください。 設計・デザインの段階からアクセシビリティを念頭に置く ことで、魅力的なクリエイティブとアクセシビリティ・ ユーザビリティを両立させることができます。 なお「A」に準拠することが目的ではありません。必要な クリエイティブのために準拠しない要素を入れる場合も、 ミッション・ビジョンに寄与するのであれば許容できると 考えています。 参考 https://waic.jp/translations/WCAG22/ 自動スライドの再生停止ボタン: WCAG「2.2.2 一時停止、停止、非表示」に対応 リンクが色だけでなく下線でも表現されている: WCAG「1.4.1 色の使用」に対応
11. 参考 ブランドロゴ・カラーについては以下ページを確認してください。 これまでに作成したコーポレートサイト・採用サイトです。 設計やデザインの参考にしてください。 https://www.kubell.com/about/logo/ https://www.kubell.com/ https://www.kubell-partner.com/ https://career.kubell-partner.com/taxita/ https://career.kubell-partner.com/minagine/ https://www.kubell-storage.com/ ガイドラインや事例を参考にしてください。