デザインコンセプトを一から定義してみた

自分で構想しているサービスを使って、実際にデザインコンセプトを定義してみました

デザインコンセプトを定義するメリット

1. デザインに一貫性を持たせられる

2. チームメンバーが共通の認識を持てる

3. デザインの説得力が増す

4. デザインを検討する際の判断基準になる

5. ブランディングが向上する

これから実際に定義していきます

前提

サービス概要

ToB向けの動画教育システムのUIデザイン作成

サービスの目的

効率的な作業方法の伝達

動画を活用して、正しい作業方法をわかりやすく伝えることで、紙のマニュアルに依存しない教育を提供する

業務負担の軽減

ベテラン社員に業務が集中する状況を改善し、教育にかかる負担を軽減する

教育コストの削減

新人教育の人的コストを削減し、効率的なオンボーディングプロセスを実現する

新人の早期戦力化

新人が迅速に必要なスキルを習得し、早期に戦力化できるようにする

ペルソナ

年齢: 45歳
職業: 製造業の人事部マネージャー
業界: 製造業
勤務地: 東京都
使用デバイス: デスクトップPC、スマートフォン
職務内容:
新人や若手に向けた研修の企画・運営、現場作業員のスキルアップに関する企画・運営
課題に感じていること:
新人教育のにかかる人的コストを削減したい、若手のオンボーディングに用いられているベテラン社員の教育コストを削減したい、新人の早期戦力化を進めたい

デザイン方針

シンプルで直感的
ユーザーがシステムの操作方法をすぐに理解できるようになり、無駄な学習時間を削減し、教育の効率を高めることができる

効率性を重視
教育プロセス全体をスムーズにし、生産性を向上させつことで、教育にかかる時間とコストを削減し、企業全体の業務効率を向上させることができる

基本的な考え方

価値観
顧客の生産性向上と専門性の発展に貢献

理念
教育のデジタル化と革新
クライアントの持続可能なビジネス成長の支援

メッセージの設定
「動画で学ぶ、次世代の育成のかたち」

感情的な訴求
安心感、期待感、信頼感、先進性、使いやすさ、成長実感

カラーパレット

プライマリーカラー：ミディアムグレー (#6D6D6D)
専門性と落ち着きを表現

セカンダリーカラー：ダークブルー (#1E3A5F)
信頼感と安心感を与える、ミディアムグレーを補完できる色

アクセントカラー：スカイブルー (#87CEEB)
期待感と先進性を表現

背景色：ライトグレー (#F5F5F5)
清潔で使いやすい印象

テキスト色：ダークグレー (#333333)
高いコントラスト

タイポグラフィ

見出し用フォント：游ゴシック体 (Yu Gothic)

現代的でクリーンな印象を与え、専門性と先進性を表現
視認性が高い
シンプルで安定感があり、信頼感を与える

本文用フォント：ヒラギノ角ゴシック (Hiragino Kaku Gothic)

可読性が高く、長文の読み取りに適している
プロフェッショナルで信頼感のある印象を与える
クリーンで読みやすい

アイコンとイラストのスタイル

線の太さ：中程度の太さ

角の丸み：やや丸みを帯びた角

柔らかさと親しみやすさを表現
使いやすさと安心感を演出
完全な直角よりも目に優しく、長時間の使用でも疲れにくい

塗りつぶしか輪郭線か：塗りつぶしをメインとし、一部輪郭線

塗りつぶしは視認性が高く、PCでもスマートフォンでも見やすい
輪郭線を部分的に使用することで、専門性と細部へのこだわりを表現

ボタンとフォーム要素

ボタンの形状：やや角丸のボタン

柔らかさと親しみやすさを表現しつつ、専門性も感じさせる
ユーザーにとって見やすく、クリックしやすいデザイン

ホバー時の挙動：緩やかな色の変化と微小な拡大

安心感を与えつつ、インタラクティブ性を示す
色の変化で操作可能であることを明確に示し、使いやすさを向上
微小な拡大効果で、クリック可能な領域を視覚的に示す

入力フィールドのスタイル：シンプルな枠線、フォーカス時の強調表示

シンプルなデザインで使いやすさを重視。
フォーカス時の強調表示（例：枠線の色変更）で、現在の入力位置を明確に

チェックボックスやラジオボタン：やや大きめのサイズ

大きめのサイズで操作性を向上させ、PCとスマートフォンの両方で使いやすくする

余白とスペーシング

グリッドシステムの定義：
12列グリッドシステム
最大幅: 1200px（デスクトップPC向け）
カラム幅: 76px
ガター幅: 24px

12列システムは柔軟性が高く、様々なレイアウトに対応
1200pxの最大幅は、一般的なデスクトップ画面で快適に表示できる

要素間の余白の一貫性：
基本単位: 8px
余白の段階: 8px, 16px, 24px, 32px, 48px

8pxを基本単位とし、様々な画面サイズで整然としたレイアウトを維持
段階的な余白を設定することで、情報の階層性を視覚的に表現

パディングとマージンの基準値：
コンテナのパディング: 24px
セクション間のマージン: 48px
段落間のマージン: 16px
ボタンのパディング: 16px (上下), 24px (左右)
入力フィールドのパディング: 12px