{サービス名} - デザインガイドライン

shinyasato
341
0
0

{サービス名} - デザインガイドライン

Published at July 30, 2020 1:36 a.m.
Edited at October 19, 2020 4:29 p.m.

概要

{サービス名}のデザインガイドラインを定義する。

関連ファイル

上記3つは頻繁に出てくる為、アイコンで区別する。

原則

一貫性

画面毎にデザインが異なることがないよう、一貫性が保たれるガイドラインを担保する😀

柔軟性

⚙️デザインシステムは現時点(2020/7末)のものであり、今後更新される可能性は大いにある。
また、Webのプロダクトの特性上、パソコンとスマホで画面が流動的に変わる。
そのため、

  • パソコンとスマホで、使いまわせる部品は使い回し、
  • 使いまわせないものは、パソコンとスマホで別部品を作り、
  • 今後デザインが更新された場合、該当の部品のデザインを変更するだけで作業が完了する

上記のような、柔軟性の高い使い方ができるガイドラインを担保する😀

俯瞰性

新しいデザイナーが入社したり、外部のベンダーと協力する事もありえる。

その為、全くプロダクトを触ったことがないデザイナーでも、
ひと目でデザインの全体感や、運用ルールがわかるように、

  • デザインの一覧性と網羅性の担保
  • 部品の命名規則
  • 更新作業の言語化

を徹底して行う😀

{サービス名}の主要画面

主に下記の3つ。

  • Front:求職者側が見る画面
  • Enterprise:事業者側が見る画面
  • Admin:{サービス名}の担当者が見る画面

スプレッドシートやFigmaに上記の名前が出てきたら、
該当画面のデザインをまとめたものになります😀

一覧性と網羅性の担保

一覧性:📜スプレッドシート
網羅性:🌟デザインマスター

上記のルールで担保する。
具体的には、以下のルールで運用する。

  1. 新規で画面を作ったら、まず📜スプレッドシートに記載
  2. 新規で部品を作ったり、部品の変更があった場合、⚙️デザインシステムを更新する
  3. 次に、🌟デザインマスターを更新する
  4. 最後にスプレッドシートに、更新したデザインマスターのFrameのURLを貼る

FrameのURL選択方法

  1. まずFrameを選択
  2. 右上の「Share」をクリックする
  3. 「Link to selected frame」 にチェックが入っていることを確認
  4. 「Copy link」をクリックする

Figmaについて

下記の機能は非常に重要なので、必ず学習してください。

この他にも覚えないといけない機能はたくさんありますが、ひとまず上記さえ覚えておけば大丈夫だと思います😊


⚙️デザインシステム - ガイドライン

デザインシステムの有効化方法

  1. Figmaの「Assets」をクリックする
  2. 本のアイコンをクリックする
  3. 「{サービス名} - Design System」を有効にする

🎨 Color

プロダクトカラー

命名規則

以下の命名規則で運用する。

  • 頭文字は大文字
  • キャメルケースで運用する
  • 連結方法は用途 / 色

例えば、

  • Front, Enterprise, Admin共通で使われている色
  • 色の名が twitterBlue

上記なら、Common / twitterBlueとなる。
こうすることで、色の管理と選択が行いやすくなる。

用途

  • Common:Front, Enterprise, Admin共通で使われている色
  • Admin:主にAdminで使われている色

Guideline

  • 色を追加する前に、デザインシステムを見て該当の色がないか確認する
  • 開発環境でも、該当の色がないか確認する
    • Adminには大量の色が使われているので、ガイドラインに使われていない色がある場合がある
    • 網羅的に整理されるのを確認するまで、ガイドラインと開発環境の両方で、色の確認を行う
  • デザインシステムにない色を発見したら、デザインシステムにも追加する

🖌 Typography

Fonts

  • Hiragino Kaku Gothic Pro W3/W6を使用

Size

  • デフォルト:16px = 1rem
  • 補足・キャプション:13px
  • 最小:10px
    • 文字が潰れるので、なるべく使わない

Color

  • デフォルト:darker = #141f33
  • リンク:darker = #141f33を使い、強調したい場合underlineを使う

命名規則

以下の命名規則で運用する。

  • 頭文字はサイズ数字
  • 連結方法はサイズの数字 / B(Bold)orN(Normal) - U(Underlineあり)

例えば、

  • サイズが14
  • 太さは Bold
  • Underline付き

上記なら、14 / B-Uとなる。
こうすることで、フォント管理と選択が行いやすくなる。

🅱️ Buttons

ボタン一覧

命名規則

以下の命名規則で運用する。

  • 頭文字は大文字
  • キャメルケースで運用する
  • 連結方法は用途 / 画面サイズ / 部品名

例えば、

  • デフォルトで使われるボタン
  • パソコン、スマホ両方で利用する
  • 部品名が whiteBorderDarker

上記なら、Default / common / whiteBorderDarkerとなる。

用途

  • Default:デフォルトのボタン
  • Arrow:主に次のページへ遷移してほしい際に使用
  • Enquete:主にアンケートなどで使用
  • Recruitment:主に募集詳細や募集一覧で使用
  • Admin:主にAdminで使用

画面サイズ

  • common:パソコン、スマホ両方で使用できる
  • PC:パソコンで使用する
  • SP:スマホで使用する

命名規則を統一することで、FigmaのAssetで部品の管理がしやすくなる。

🏞 Static

一度作ったら、変更される可能性が低いものを入れる。
具体的に定義すると、下記のようなもの。

  • ロゴ
  • アイコン
  • ラベル
  • フォームの部品

命名規則

以下の命名規則で運用する。

  • 頭文字は大文字
  • キャメルケースで運用する
  • 連結方法は用途 / 部品名

例えば、

  • アイコンに使う
  • 部品名が faceEnquete

上記なら、Icon / faceEnqueteとなる。

📱 Common / Front / Enterprise / Admin

以下は、

  • Common:Front, Enterprise, Admin共通で使われているパーツ
  • Front:求職者側が見る画面
  • Enterprise:事業者側が見る画面
  • Admin:{サービス名}の担当者が見る画面

共通のルール。

Common

Front

Enterprise

命名規則

以下の命名規則で運用する。

  • 頭文字は大文字
  • キャメルケースで運用する
  • 連結方法は用途 / 画面サイズ / 部品名

例えば、

  • 一覧表示のリストに使う
  • パソコン、スマホ両方で利用する
  • 部品名が featureRecruitment

上記なら、List / common / featureRecruitmentとなる。

用途

  • Header:ヘッダーに使う
  • Footer:フッターに使う
  • List:主に検索結果や応募一覧などの、一覧で表示されるものに使う
  • Component:テキストボックスやセレクトボックスなど、要素を構成する部品に使う

画面サイズ

  • common:パソコン、スマホ両方で使用できる
  • PC:パソコンで使用する
  • SP:スマホで使用する

🟢 LINE Flexメッセージ

{サービス名}は、「求職者にマッチした求人紹介 + LINEによるご紹介」 というサービスの特性上、LINEでどのようなデザインができるのかを、事前に把握する必要がある。
以下に、主なLINEでのデザインルールと、ガイドラインを記載する。

なお、システム上できない事はない。
LINEのデザインルールさえ守っていれば、実現可能性がないデザインが出来上がる事は、基本的にない。

Flexメッセージのデザインは、

  • レイアウト
  • リッチメニュー
  • メッセージタイプ
  • アクション

の4つの組み合わせでできている。

Flexメッセージのデザインをする前に

下記のデザインルールを学習しておく

Flex Messageの要素

Flex Messageのレイアウト

リッチメニュー

  • 画像フォーマット:JPG、JPEG、PNG
  • 画像の幅サイズ(ピクセル):800以上、2500以下
  • 画像の高さサイズ(ピクセル):250以上
  • 画像のアスペクト比(幅/高さ):1.45以上
  • 最大ファイルサイズ:1MB

メッセージタイプ

テキストメッセージ スタンプメッセージ 画像メッセージ 動画メッセージ 音声メッセージ 位置情報メッセージ
イメージマップメッセージ ボタンテンプレート 確認テンプレート カルーセルテンプレート 画像カルーセルテンプレート クイックリプライ

アクション

ポストバックアクション メッセージアクション URIアクション
アクションが関連づけられたボタンがタップされると、ポストバックアクションを返します。
ざっくり説明すると、
→ あるボタンを押したら、画像やボタンを自動的に返す
というような動作を返す事ができます。
アクションが関連づけられたボタンがタップされると、メッセージアクションを返します。
ざっくり説明すると、
→ あるボタンを押したら、決められたテキストを自動的に返す
というような動作を返す事ができます。
アクションが関連づけられたボタンがタップされると、指定したURLを開かせる事ができます。
ざっくり説明すると、
→ あるボタンを押したら、指定したURLのページを開く
というような動作を返す事ができます。
日付選択アクション カメラアクション カメラロールアクション 位置情報アクション
特定のアクションに対して、時刻、日時、日付を選択させる事ができます。 クイックリプライのみに設定できます。
アクションが関連づけられたボタンがタップされると、LINE内のカメラが起動します。
クイックリプライのみに設定できます。
アクションが関連づけられたボタンがタップされると、LINE内のカメラロールが起動します。
クイックリプライのみに設定できます。
アクションが関連づけられたボタンがタップされると、LINEの位置情報画面が開きます。

※アクションは今はボタンのみに設定されていますが、全てのアクションはテキストに対して設定することもできます。

※現時点(2020/7末)はメッセージによって文字の大きさにバラつきがある為、隙間時間で整えていく。

デザインルールを学び終えたら

シミュレーターでデザインを作ってみる

シミュレーター

基本のデザイン

上記3つの雛形さえ覚えていただければ、Componentを入れ替えるだけでデザインが完成する。

サンプルコード

Component

baseColor

📨 メール

基本は以下の構成で、文章とボタンを組み合わせていけば出来上がる。

※現時点(2020/7末)はメッセージによって文字の大きさにバラつきがある為、隙間時間でガイドラインに沿って整えていく。

Design Spec Kit

デザインを変更したり、Sysに指示を出す場合は、「Design Spec Kit」を使う。

用途

  • Frame:部分的に指示を出したい場合に、部品を囲む
  • Comment:Sysへの指示やコメントを書く
  • Arrow:変更点などをコメントと一緒に指し示す
  • Spacing:スペースの指示を出したい際に使う

Figmaの運用ルール

Project構造

Projectとは、簡単に言ってしまうと「Figmaのディレクトリ」のようなもの。

【Help】
Projects in Figma

Projectをサイドバーに追加する方法

星マークから、サイドバーにProjectを追加することができます。
追加後、Figmaのファイルをドラッグ&ドロップすれば、移動させることができます😀

作業手順

以下のようなフローで作業をしてください。

  1. まず 01 作業用 Projectに、Figmaのファイルを作る
    • 命名規則は、WOR-◯◯◯ {JIRAのタイトル}
      • レビュー中は 【レビュー中】WOR-◯◯◯ {JIRAのタイトル}
      • 実装中は 【実装中】WOR-◯◯◯ {JIRAのタイトル}
  2. 作業が完了したら、 02 管理用⚙️デザインシステム🌟デザインマスターを更新する
  3. リリースされたら、 03 リリース済み に作業したファイルを移動させる
    • 【レビュー中】【実装中】は外す

Page 名対応表

パソコンとスマホでPreviewを使い分けるために、Pageを分ける。

【Help】
Preview designs and prototypes
Pages

Page名 概要
WOR-○○○ - PC パソコン版のデザイン
WOR-○○○ - SP スマホ版のデザイン

Frame命名規則

ブラウザで検索して、該当画面がすぐ発見できるように、Frameにも命名規則を設けます😀

【Help】
Frame

大項目 - 中項目 - 状態
中項目 状態は、ないなら入れなくてもいい

例文:サイトトップ - ログイン後
例文:ブランド管理 - 企業プロフィール - 記入前

履歴の保存

⚙️デザインシステム🌟デザインマスターを変更したら、Historyを使って履歴を残す。

【Help】
Version History

Historyの保存方法

  1. ファイル名右側のアイコンをクリックして、 「Show Version History」 をクリックする

  1. ホバーしたアイコンをクリックして 「Name This Version」 をクリックするか、ダブルクリックして、名前をつける

Historyの命名規則

  • WOR-◯◯◯ {変更箇所}

プラグイン

Figmaにはプラグインを追加することができる。
生産性向上のために、以下のプラグインを積極的に使っていきたい。

【Help】
Plugins

導入推奨プラグイン

  • Stark
    • 色を選択したら、アクセシビリティを計測することが出来る
  • Iconify
    • 「Font Awesome」や「Material Design Icon」など、様々なアイコンをその場で追加できる
  • Map Maker
    • 住所を入力すれば、その場でGoogle Mapの画像を作ってくれる

プラグインの追加方法

  1. 左側のメニューから、「Plugins」をクリックする
  2. 「Browse all plugins」をクリックする
  3. 検索する
  4. 「↓ Install」をクリックする

※後々管理が大変になるので、むやみやたらにプラグインを追加しすぎないようにお願いします😅

プラグインの使い方

  1. Figmaファイルで右クリックする
  2. 「Plugins」にマウスカーソルを合わせる
  3. 使いたいプラグインをクリックする


マークアップのルール

不具合防止と、Sysへの処理の指示を明確にする為、マークアップ時にルールを設ける。

コメントを残す

Sysへの処理を、HTMLにコメントとして残す。

コメントの書き方

{{!-- 
  TODO xxxxを動的処理に変更
--}}

HTMLのコメント(例:<!-- hogehoge -->)は、
クライアント側に表示されてしまうので、フレームワークの書き方でコメントを残す。