関連ページ

デザイン規定

remについて

• GROWIでは1rem=14pxを採用している
  • 一般的には1rem=16pxなので、文字サイズの指定など注意
  • bootstrapのマージンなどもrem指定なのでこちらも注意

グレー系カラー　

• 専用の変数を使用
  • $gray-50,$gray-100,$gray-200・・・$gray-900
  • 数字が大きいほど黒に近い

マージン、パディング

• 3.5px (0.25rem = mx-1)
• 7px(0.5rem = mx-2)
• 14px(1rem = mx-3)
• 21px(1.5rem = mx-4)
• 30px(オリジナル mx-4とmx-5の間がないので用意したやつ)
• 42px(3rem = mx-5)

角の丸み　

• Border-radius：2px

デザイン要素は5px規格で作成

• 文字に関しては位置のみ5pxグリッド合わせ

アクション誘導の文言(ボタンとか)

• アクションは疑問形じゃない動詞につける
  ex)このページは存在しません。新たに作成する必要があります。
  　　　　　　　ページを作成するなど。

アイコンフォント

• メイン：Simple line icons external_link
• サブ：Themify icons external_link
• その他必要に応じて：Font Awesome external_link

パディング

• 基本的には
  • 左右：20px
  • 上下：10px
• その他フレキシブルに対応（5px単位推奨）

XD作業メモ

• bs4のデフォルトのボタンなど、便利なコンポーネントをたくさん作ったので、利用してください
• 色変数もカラーアセット化されているので利用して
  • 作業ファイルを別で作成する場合、カラーアセットウィンドウ上部の+ボタンから同期できる

デザインを作るときは、アートボードの横幅を揃える

• PCのデザインは横幅 1440px
• タブレットのデザインは横幅768px
• スマホのデザインは横幅375px

追記：bs4 のbreakpoint

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,//つかってない
  xl: 1200px,//つかってない

写真素材の書き出し

• JPG,圧縮率60%で書き出す。
• 「どの範囲で書き出したら実装しやすいかな」って考えてあげると喜ばれ率上がる
  • 例：background-imageに使う画像の場合はフルサイズで渡す

デザインスペックの発行

• 以下の方法を推奨

1. ファイル左上にマザーシップアートボードを作成、ホームに設定。
2. 共有したいアートボードへ正しくリンクされているか確認。
3. 表示設定は「開発」を選択。
4. リンク発行。
5. 発行したリンクはSlackだけじゃなくタスクとかにも貼っとく（忘れちゃうから） 。

• 必要に応じて「書き出し対象」オブジェクトを設定
  • デザインスペックからDLできるなど、便利。

コンポーネントでボタン作るときは要注意！！！！！

• ホバー時のカラーとかデザスペで表示されないことがある。