Lily UI Designer ・Webデザイン ・フロントコーディング ・動画制作 ...etc renachi UI Designer ・グラフィックデザイン ・SP/Web Appデザイン ...etc

１ 講義 　 ・デザインガイドラインとは？ 　 ・スタイルガイドラインとは？ 　 ・スタイルガイドラインの項目と事例 ２ ハンズオンで実際にスタイルガイドラインを作る 内容 目的 Figmaを使用し、デザインガイドラインの作り方について実践的に学ぶ

個々人によってデザインがぶれないように ルールを定義したドキュメント デザインガイドラインとは？ =

= 色・フォント・アイコンサイズなどのデザイン要素について、 ルールを定義したドキュメント スタイルガイドラインとは？ スタイルのルールを作り、デザインに統一性を持たせる チームで作業するときに差異が生まれないようにする

・フォント ・フォントサイズ ・フォントカラー ・メインカラー ・サブカラー ・アクセントカラー ・背景色 ・ボタンサイズ ・ボタンカラー ・ボタン内のマージン ・マージン ・アイコンサイズ ・ロゴサイズ ・マージンの取り方 スタイルガイドラインの項目

スタイルガイドラインの事例 Uber

フォント カラー

FINDGUIDLIN.ES TwitterやGoogle、Airbnbなどの 企業のデザインスタイルガイドが まとめられたサイト

チームで開発・デザインを作る際に 個人的な趣向に基づいてスタイルを変更しないようにすること なぜスタイルガイドラインを作るのか？ 統一化したルール（ガイドライン）がないと チームでデザインが決まらない

ハンズオンの目的 ← いざ仕事でスタイルガイドラインを作るとなった場合... ・どんな内容を書けば良いのか？ ・なにを決めれば良いのか？ まずはサンプルを逆分解して、 スタイルガイドラインにはどんな要素を書くのかを覚えよう！

Figmaの左画面で各ページに移動 各ページに4名集まり、 デザイン案を元にスタイルガイドラインを作成 15:45になったら実際のスタイルガイドラインを表示 作ったものはハッシュタグをつけて Twitterで発信しよう！ #TokyoUppersBoost ？

PMに興味がある、 または経験がある方を4名募集中！ 採用情報についてはこちら https://recruit2020-5th4q.mht-code.com/ Tokyo Uppers Boostに関する動画を投稿中！ YouTubeチャンネルはこちら https://www.youtube.com/channel/UCoZ9RyQScnS-APRUl_kDSqA Tokyo Uppers Boostの 公式ツイッターアカウントはこちら https://twitter.com/tub_mhtcode アンケートのご協力をお願いいたします。 アンケートフォームはこちら https://forms.gle/8UdhrbK8G1dU6sFw7

・クリックするとメニューが表示・スライドする ・ポップアップにレイヤーを重ねる ・ページ遷移のアニメーション こんな想定のデザインをガイドラインなしでデザイナーに渡すと ↓ 昨今のWebサイトはとにかく複雑

・このデザイン良くないから変えよう。 ・もう少しアニメーション入れたい 準拠するデザインがないので 認識が違いと手戻りが発生する 個人的な趣向に基づいてデザインされてしまう

フローで見るとここまで手戻りがある ・デザインが統一されてない ・デバイスで動作しない ・開発のコストが高い 手戻り

クライアントもどんなものができるか想像できない どんなルールの元で デザインができるかわからない クライアントFB来ても ルールがないので修正に時間がかかる 確認のコストがかかる

余計なコストや手戻りを防ぐために スタイルガイドラインを作れるようになろう！