Tagged

デザインシステム

A collection of 29 posts

デザインシステム

要素名クイズから始めるUIの呼び名合わせ

あなただったら画面にある大きなテキストを何と呼びますか? 強調されたテキストが 2 つあるとしたら、それぞれどう名付けますか? 「見出し」「タイトル」「ヘッダー」など様々な呼び名が考えられます。HTMLの知識があると、「H1, H2」と呼ぶかもしれません。これらは情報の意味を表す言葉ですが、「テキスト(大)」のように見た目で呼ぶこともできます。見た目を呼び名にするのは良くないという意見もあると思いますが、汎用性のある実装にするのに適している場合があります。 よく目にする要素でも言葉が合っていないことがよくあります。役職・背景が異なれば呼び名が違うだけでなく、そもそも何と呼べば良いか分からない要素も少なくありません。 2年前から実施している「パターンラボ」というワークショップ [https://yasuhisa.com/could/article/ui-pattern-workshop/] では、一貫性のない UI を視覚化するだけでなく、言葉も一致していないことを体験してもらっています。ワークショップでは、デザイナー、フロントエンドエンジニア、ディレクターといった違う役

デザインシステム

良いデザインの原則と『立ち止まる』こと

「ブラウンとアップル [http://www.yasuhisa.com/could/article/braun-apple/]」という記事で、デザイナー Dieter Rams(ディーター・ラムス)が提案した良いデザインの10の原則 [https://www.vitsoe.com/us/about/good-design] を紹介しました。1970年代に提案されたものですが、現在にも通じる普遍性のあるメッセージです。これのアップデート版のようなものを、Co.DesignのSuzanne LaBarre さんが提案しています [https://www.fastcodesign.com/90154519/10-new-principles-of-good-design]。特にアプリや web サイトをはじめとしたデジタルプロダクトを意識した内容になっています。 1. 良いデザインは様々な影響を考慮している 2. 良いデザインは『スロー』である 3. 良いデザインは正直である 4. 良いデザインは政治的である 5.

UI

デザインの運用って何ですか?

公開しても終わらない コンテンツマーケティングの文脈でコンテンツの運用という言葉を耳にすると思います。いつ、誰に、何を、どのように配信するかを決めて、複数人で実践していくには運用が欠かせません。新しいコンテンツを作り続けなければいけませんし、現存コンテンツの維持・管理も必要になります。 コンテンツの運用で「公開したらあとは待つのみ」「納品したら終わり」という考えはありません。放置するとたちまち埋もれてしまい、存在していないのと同じになります。また、利用者の趣向・動向に合わせてチューニングをしていかなければ、ますます遠い存在になります。 公開したらデザインの仕事が終わるわけではないという意味でコンテンツの運用と似ていますが、デザインの運用は以下の点を解決することを目的とします。 * コンテンツの量に依存した『固い』デザインにしない * 基本的なことであれば短時間で実装ができる * 誰が触っても最低限の品質が担保できる * 一貫性のあるデザインが実装しやすくなる * ひとりのスターデザイナーに頼り切らない * 必要に応じて変更・改善し続けることができる CMS を導

UI

デザインシステムにおける色の命名ルール

崩れない色名にする 前回「デザインシステムに採用する色を決める5つのルール [http://www.yasuhisa.com/could/article/design-system-colors/] 」を通して、色の名前の付け方や整理の仕方を紹介しました。これを受けてウェブデザイナーの深沢幸治郎さん(@witch_doktor [https://twitter.com/witch_doktor])が「ウェブサイトに使われる色に固有の名前をつけてみる [http://suikoudesign.com/suikolog/design/2270] 」という記事を書いてくれました。色の命名にまつわる苦労や工夫について読むことができるので、ぜひ参考にしてください。 前回の補足として、デザインシステムにおける色名の付け方の工夫を 3 つ紹介。色の整理をするときの参考にしてください。 色名=変数 色の名前を付けるのに困っている方は、Kromatic [http://kromatic.thoughtbot.com/] がオススメ。カラーパネルのスライダーを動かすか HEX 値を入力するだけで