Tokyo Uppers Boost 200613

TokyoUppersBoostは、株式会社マンハッタンコードが毎週土曜日に開催しているコミュニティです。

イベント情報：https://mht-code.connpass.com/event/177211/
Twitter　　 ：https://twitter.com/tub_mhtcode
YouTube　　 ：https://www.youtube.com/channel/UCoZ9RyQScnS-APRUl_kDSqA

Transcript

1. Lily UI/UX Designer ・Webデザイン ・フロントコーディング ・動画制作 ...etc michiko Director ・バナー制作 ・動画制作 ・Webデザイン ...etc 6.13(sat) 15:00 START
2. １ 講義 　 ・デザインガイドラインとは？ 　 ・スタイルガイドラインとは？ 　 ・スタイルガイドラインの項目と事例 ２ ハンズオンで実際にスタイルガイドラインを作る 内容 目的 Figmaを使用し、デザインガイドラインの作り方について実践的に学ぶ
3. = 個々人によってデザインがぶれないようにルールを定義したドキュメント デザインガイドラインとは？
4. = 色・フォント・アイコンサイズなどのデザイン要素について、 ルールを定義したドキュメント スタイルガイドラインとは？ スタイルのルールを作り、デザインに統一性を持たせる チームで作業するときに差異が生まれないようにする
5. チームで開発・デザインを作る際に 個人的な趣向に基づいてスタイルを変更しないようにすること なぜスタイルガイドラインを作るのか？ 統一化したルール（ガイドライン）がないと チームでデザインが決まらない
6. ・クリックするとメニューが表示・スライドする ・ポップアップにレイヤーを重ねる ・ページ遷移のアニメーション こんな想定のデザインをガイドラインなしでデザイナーに渡すと ↓ 昨今のWebサイトはとにかく複雑
7. ・このデザイン良くないから変えよう。 ・もう少しアニメーション入れたい 準拠するデザインがないので 認識が違いと手戻りが発生する 個人的な趣向に基づいてデザインされてしまう
8. フローで見るとここまで手戻りがある ・デザインが統一されてない ・デバイスで動作しない ・開発のコストが高い 手戻り
9. クライアントもどんなものができるか想像できない どんなルールの元で デザインができるかわからない クライアントFB来ても ルールがないので修正に時間がかかる 確認のコストがかかる
10. 余計なコストや手戻りを防ぐために スタイルガイドラインを作れるようになろう！
11. ハンズオンの目的 ← いざ仕事でスタイルガイドラインを作るとなった場合... ・どんな内容を書けば良いのか？ ・なにを決めれば良いのか？ まずはサンプルを逆分解して、 スタイルガイドラインにはどんな要素を書くのかを覚えよう！
12. ・フォント ・フォントサイズ ・フォントカラー ・メインカラー ・サブカラー ・アクセントカラー ・背景色 ・ボタンサイズ ・ボタンカラー ・ボタン内のマージン ・マージン ・アイコンサイズ ・ロゴサイズ ・マージンの取り方 スタイルガイドラインの項目
13. スタイルガイドラインの事例 Uber
14. フォント カラー
15. FINDGUIDLIN.ES TwitterやGoogle、Airbnbなどの 企業のデザインスタイルガイドが まとめられたサイト
16. Figmaの左画面で各ページに移動 各ページに4名集まり、 デザイン案を元にスタイルガイドラインを作成 15:45になったら実際のスタイルガイドラインを表示 作ったものはハッシュタグをつけて Twitterで発信しよう！ #TokyoUppersBoost ？
17. エンジニアを4名募集中！ 採用情報についてはこちら https://2020q3-recruit.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/o53AufqA5xonNhfg8