Latest thinking
すぐに使えるノウハウではなく、「なぜそうなっているのか」を考える記事を書いています。デザインの仕事で感じるモヤモヤに、構造から向き合いたい人のための場所です。
オトナがwebを殺さないために
「分からない」が将来を潰す 「インターネットってどうせ流行りでしょ？」 「FAXのほうが良いじゃないですか」 「今までのやり方で上手くいっているから必要ない」 小さな頃から web を当たり前のように使っていた人には信じられないですが、昔はそんなことを言っていた人がいました。企画提案をするにしても、過ぎ去っていく流行ではないことを説得するところからスタートすることもありました。 若い頃は昔の価値観にしがみついている人たちにどう伝えれば良いか分からなくて苦労しましたし、自分が『オジサン世代』になったら絶対こうなりたくないと思っていました。自分には分からないから、周りにはさせないみたいな態度が成長を遅れせてしまうのではないでしょうか。 『オジサン世代』になってしまった今でもそう考えながら仕事していますが、周りが次第に閉鎖的になっているのを見ると「ヤバいな」と感じることがあります。 「TikTok を使っている人がまったく理解できない」 「昔のほうがいろいろ面白かった」 「今まで通りホームページありきで考えるべきだ」 私と同じように、web の可能性から説得しなければならなかっ
Q&A デザインツールの見方・選び方
> 似たようなツールが多くて一長一短で、「〇〇(What)をするならコレを使う」というよりも、「状況 (Where, Who, How) によって今はコレを使う」といった目線で見ています。 ただ、どんどん新しい (けれども似たような) ツールが出てきている中、それぞれのツールの特徴を見出して、差別化するまでにモヤモヤしています。 ヤスヒサさんは新しいツールや類似のツールを触る時、どういった目線で見ていますか？ 匿名 注目は実装目線のデザインツール デザインツールの評価は非常に難しいトピックです。 Sketch [https://www.sketchapp.com/]、Adobe XD [https://www.adobe.com/jp/products/xd.html]、Figma [https://www.figma.com/]、 InVision Studio [https://www.invisionapp.com/studio] などツールが出揃った感がありますが、
作りたいものを作るのがデザイナーの仕事ではない
ユーザー視点が抜け落ちているだけでなく、自分たちが作り出す『凄いモノ』によって人の生活や考え方がどう変わるのかという想像力が欠落しています。
デザイン指標から価値を伝えてみよう
デザイン指標のようなユーザーへ価値提供できたかを測る目印を設定することで、デザインを課題解決のための施策と受け入れてもらえるのではないかと考えています。
バランスなんて他人が決めつけるものではない
バランスとは均等のことではない 昔は「バランスが大事」という言葉を使っていました。 また、アドバイスをいただくときも「バランス」という言葉を耳にしたことがあります。ワークライフバランスもそうですし、何か新しい施策やアイデアを提案するときも「バランスですね」と、対になる考えを一緒に話す人もいます。 最近どうもこの「バランス」という言葉の使い所に困っています。全体を見失っていない感を装う都合の良い言葉に聞こえることがありますし、明確な方向性を打ち出していないと感じることがあります。仕事文脈でバランスについて話すと響きは良いですが、言い方を変えると無難なわけです。そして、私の経験では無難なことやっていると何も変化に繋がらないと考えています。それもあって最近は質疑応答でアドバイスするときに避けている言葉のひとつです。 どちらもバランスがとれています バランスを「釣り合いがとれている」ではなく、「均等」と捉えている方は少なくありません。つまり「50/50」な関係です。ライフワークバランスとは可能な限り 50/50 に近づけることと思っている方がいるのではないでしょうか。バランスという
ラベルデザインから読み解くコンテンツ設計の課題
色やタイポグラフィだけでなく、言葉でプロダクトの雰囲気が決まることがあります。早期からダミー文字を避けて [https://yasuhisa.com/could/article/lorenipsum-isnot-good/] コンテンツをデザインするべきですが、簡単に作れるものではありません。 良い事例を探そうとすると必ず辿り着くのが Mailchimp の Voice and Tone [https://styleguide.mailchimp.com/voice-and-tone/] 。「Mailchimp らしさ」が明文化されているだけでなく、ライティングの基礎も書かれている優良コンテンツです。しかし、英語の壁がありますし、文化の違いもあるのでそのまま真似するのは困難です。 そこで今回はラベルのライティングというミクロの視点と、出来上がるまでのプロセスを把握するマクロの視点からコンテンツの課題と対策を紹介します。 ラベルデザインにある3つの特徴 UI のラベルをどのようにデザインすれば良いのかを考える上で、 Airbnb [https://www.airbnb.jp/]
職種を超えたコミュニケーションデザインを考える
デザインの解説を書き残すことは非常に手間がかかりますが、デザインの意図が説明しやしくなるだけでなく、途中で人が入ってきたとしても文脈が伝わりやすくなります。
UIの意味付けに情報アーキテクチャは強い味方
Atomic Designは数ある分類方法のひとつ Atomic Design [http://atomicdesign.bradfrost.com] のように UI の『粒度』で分類することがあります。ボタンやフォーム要素のような小さな『分子』。大小様々な要素で構成された『ページ』と呼ばれる大きな集合体。UI を積み木構造のように考えやすくなりますが、Atomic Design 特有の思想であって、特定のアプリケーションの UI に適した分類ではない場合があります。 汎用性をもたせるために、Atoms、Molecules、Organisms、Templates、Pages の 5 段階が作られていますが、web サイトやアプリケーションによっては段階が多すぎます。無理に当てはめようとするあまり、Molecules かOrganisms かを議論するということにもなりかねません。 よくある話でボタンの分類があります。ボタンは Atom と呼べますが、アイコン付きボタンはどうでしょう。 2 つの Atom によって構成されているので
要素名クイズから始めるUIの呼び名合わせ
あなただったら画面にある大きなテキストを何と呼びますか？ 強調されたテキストが 2 つあるとしたら、それぞれどう名付けますか？ 「見出し」「タイトル」「ヘッダー」など様々な呼び名が考えられます。HTMLの知識があると、「H1, H2」と呼ぶかもしれません。これらは情報の意味を表す言葉ですが、「テキスト（大）」のように見た目で呼ぶこともできます。見た目を呼び名にするのは良くないという意見もあると思いますが、汎用性のある実装にするのに適している場合があります。 よく目にする要素でも言葉が合っていないことがよくあります。役職・背景が異なれば呼び名が違うだけでなく、そもそも何と呼べば良いか分からない要素も少なくありません。 2年前から実施している「パターンラボ」というワークショップ [https://yasuhisa.com/could/article/ui-pattern-workshop/] では、一貫性のない UI を視覚化するだけでなく、言葉も一致していないことを体験してもらっています。ワークショップでは、デザイナー、フロントエンドエンジニア、ディレクターといった違う役