UX design week10 ‘Style Guide’.
10周目が終わりました。早いなあ。そういえば先月の目標はローカルの友達を作ることだったのですが、無事達成できました。
先月1人で行ったライブで同じく1人で来ていた地元の芸術専攻の大学生と仲良くなり、今週一緒にお洒落な地元のカフェに行ってきました。
先月1人で行ったカフェで同じく1人で来ていた地元の大学生と仲良くなり、今日はバンクーバーの観光地を案内してもらいました。
本当に優しい人達で良い出会いでした。2人ともまた今度遊びに行く予定です。声かけてよかった。小さい頃から自分から声をかけることが結構あるタイプで、自分なりのナンパテクニックを持ち合わせています。2人とも同性ですが、もし自分が男だったらナンパ師向いていた気がします。まあ特に留学期間は限られているので、自然な出会いを大事にオープンマインドで生きていきます。あとやはりネイティブの英語はまだまだ分からない時があるのでこういった機会で英語の練習もしないとなあと再確認しました。
では本題の今週の復習に入ります。今週はStyle Guideについて振り返ります。
Style Guide
まずStyle Guideとは
A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.
（自分訳 間違っていたらすみません）
スタイルガイドとは、あらかじめデザインされた要素やグラフィックス、デザイナーやデベロッパーが従うべきルールを集めたものであり、分割されたウェブサイトのピースが一貫性をもち、最後にまとまったエクスペリエンスを作ることを確約するためのものである。
複数人で開発を行う際に、個人の趣向に基づいてデザインが変更されないようにスタイルガイドを決めておく必要があるのですね。
詳しくは上記の記事に書いてありますが、
主に使用されるスタイルガイドの種類を振り返っておきます。
- カラーパレット
- プライマリーカラー：Webサイトで一番使うベースになる色
- プライマリーバリアント：補助的に使う色。メインカラーに近い色を選ぶ
- セカンダリーカラー：目立たせたい時に使う色。重要なボタンなどに使う。多用しすぎないように注意。
- タイポグラフィ
- 階層を設定して、タイポグラフィを定義する
- 口調
- アイコン
- アイコンを作るときは誤解を避けるように歴史や宗教のことも考慮する。
- 画像
- フォーム
- ボタン
- 余白
- するべきこととするべきでないこと
- ロゴの使用方法など、結構重要な項目
授業では実際にチームでデザインシステムを作りました。
まだまだ知識が浅いので、今後のプロジェクトを通してスタイルガイドのノウハウを学んで行きたいと思います。
来週はDesign Systemについて振り返ろうと思います。ではでは。
