Summary: The caret icon most clearly indicated to users that it would open an accordion in place, rather than linking directly to a new page. For good reasons, accordions are a popular UI element today: on mobile, they are an essential tool because they collapse content and make page length manageable, but even on desktop, they mitigate visual complexity and allow users to focus on the content mos

こんにちは。グラフィックデザイナーの安村シンです。 今回は番外編として、いま大人気のゲーム『あつまれ どうぶつの森』（nintendo swich）からデザインを学ぶ、というケーススタディの記事を書きました。 こちらのゲームはいま大人気で、子供はもちろん親世代の人たちも含めて多くのファンがいます。 この人気の影には、きっとデザインの力も働いているはず。 そんな思いから調べてみたら、デザインの秘密がたくさん見つかったので記事にまとめました。 さあ、森へ学びにいきましょう！ 1.読むストレスと、かわいさのバランス「あつまれ どうぶつの森」は、ゲームのなかで、同じ島にいる村人とお話をすることができます。 この時のUIというか、フォントの選び方が特徴的で驚きました。 普通なら書体はなるべく統一するのが原則ですが、どうぶつの森ではゴシック体と丸ゴシック体が共存しています。 「たぬきち」はこのキャラク

先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽、数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ

Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni

## webフォント/OpenTypeの仕様 - CSS Fonts Module Level 3 - https://www.w3.org/TR/css-fonts-3/ - OpenType Font Variations overview - Typography | Micro…

どうすればデザインが上達するのでしょうか。物事には基礎が存在し、まずはそれらを学び・守ることから上達の道のりが始まります。今回はオランダでビジュアルデザイナーとしてとして活動するJosé Torre 氏の記事 「ビジュアルデザインの10の基本原則」をご紹介します。とても完結かつ分かりやすく、デザインの原則が説明されていますので、是非一読されることをお勧めします。 原文 : “10 Basic Principles of Visual Design” 以下翻訳内容です。※翻訳・掲載は記事製作者の許諾を得ています。（Thank you, José Torre ! ） 先日私はポッドキャストを聞いていて、あるリスナーが質問した事がきっかけとなり今回のブログ記事について考えるようになりました。長い間コンテンツ作りにエネルギーを注いでいますが、未だに自分自身が納得する記事ができていません。今日はそれ

実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ

フェンリルのプランナーの柴田です。 デザイナーではない人にとって、デザインの良し悪しを判断するのは難しいものですよね。「なんとなく良い」「ピンとこない」まではわかるのですが、「なぜ良いのか」「なぜピンとこないのか」を言葉にするのは、それなりの経験と知識が必要となります。 しかし、そこをきちんと言葉にできないとデザイナーへのフィードバックは難しく、適当な指示で無駄な作業をお願いすることになります。何よりプランナーは自分でプレゼンすることが多く、デザインの魅力をクライアントに十全に伝えることができなくなります。この「デザインを言葉で説明するの難しい問題 」は、最もありふれていながら対処が難しい問題です。 今回はデザインの勉強もしていない僕が、どうにかデザイナーさんやクライアント様に対してデザインを言葉で議論する時の方法論を整理してみたいと思います。 デザイナーもデザインを説明するの難しい実はデ

タップル誕生のデザイナーをしているもぎです。 4月にリリースしたタップルの新機能「24時間以内にデートのお相手が見つかる」おでかけ機能のデザインを担当しました。 今回は新機能の開発をスムーズにするためにやって良かったことの１つ、「カスタマージャーニーマップ」について備忘録として、良かったポイントをメモしておきます。 ポイント0：相手から聞き出すのと自分で考えるの両方一緒にできて時短で頭の整理になる ポイント①：議論が迷走しても立ち戻る場所があるのでワイヤーからとにかくブレない ポイント②：資料の読み解きを効率化して制作する時間を確保できる ポイント③：仕様が固まってきたら更新しなくてもOKにして、肩の荷を降ろせる※チームメンバーで認識合わせや、足りないこと・懸念の洗い出しをする本来の目的ももちろんありましたが、今回はデザイナーとしてよかったことにフォーカスして記載 ※ライブ感のある自由な口

これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同

un-T factory! XA Advent Calendar 20日目担当、デザイングループの@kskgです。 僕は専業デザイナー8年目ですが、趣味でプログラミングをしていることもあり、 弊社エンジニアグループのQiita Organizationに参加させていただきました。 今回、アドベントカレンダーが開催されるとのことで、表題の件について書かせていただきました。 主にデザイナー向けの内容ではありますが、 エンジニアの方の目に留まり、社内のデザイナーへ共有していただければ幸いです😇 そして、少しでも多くのエンジニアがニッコリしてくれれば本望です😊 どう整理するか エンジニアの方々はチームで共通のルール（ガイドライン）を作って共有することで、 別の人が書いたコードでも読みやすく、メンテナンスも容易になるような工夫をしているかと思います。 それに習ってPSDの作り方にもある程度のルー

忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？ 私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました

いろんなメディアの記事に溢れかえってる今日このごろにおいて、 Webサイトにおいて段落の最初は字下げをするべきなのか はたまたしなくてもよいのか、 なんとなく、ふと気になったので調べてみることにしました。 小学生の時、段落の最初は１文字空ける、って習いました。 原稿用紙の時はともかく、自分のノートだし空けなくてもいいだろな、と思って油断していたら、ノート提出のときに 「段落の最初は１文字空けましょう」 って書かれてしまったのが印象深く残っています。 ということで、調べてみます。 文字がメインのサイトとして外せないのは新聞だ！ということで、 まずは各新聞のサイトをキャプチャして研究してみます。 ・読売新聞 1字下がってました。 余談ですが、広告がこの位置にあるのはあまり新聞のサイトとしてよろしくないのではないかなと思い、せめて、右にマージンをつけたらいいのでは…と思ってごにょごにょしながらス

Connehito inc. ママリのデザイナー きよえ氏です。サービスデザイン全般を担っています。 先日、ママリの登録導線をリニューアルしました。その振り返りをしている際におもしろい改善を見つけたので、noteにまとめてみようと思います。 入力フォームのUI改善以下はママリの初回登録時に通る「ニックネーム登録画面」です。左がこれまでのUI、右がこれからのUIです。 ボタンや文言など全面的に改善を行ったのですが、その中で特に工夫したのは「入力フォームの表現」です。 入力フォームの右側に"さん"を配置することで、ママさん同士でコミュニケーションしやすいユーザー名を登録してもらえるように体験設計をしました。 ママリはママさん同士が会話をしながら課題解決を行う場所なので、コミュニケーションのしやすさは非常に重要です。現状のママリは、匿名でありながら、その先にいるママを感じられる、いわば"2.5次

Transcript σβΠϯΛ ʮ఻͑Δʯ ͨΊʹ͢΂͖͜ͱ ຐ๏࢖͍ ݟश͍ ͸͡Ί·ͨ͠ ֯ాҁՂ � ͢Έͩ͋΍͔ 8FCσβΠφʔ �ΠϥετϨʔλʔ ����೥ɹϑϦʔϥϯε TQJDBHSBQI ����೥ɹגࣜձࣾΩςϨπϝϯόʔ ΋ ͘ ͡ ʮ఻͑ΔσβΠϯʯͷ ϫΠϠʔϑϨʔϜͱͷ෇͖͍͋ํ σβΠϯΛʮ఻͑Δʯ ʮ఻͑ΔσβΠϯʯͷϏδϡΞϧදݱ 01 02 03 ʮ఻͑ΔʯΛͭ͘Δ೔ৗͷΞ΢τϓο τ 04 ·ͱΊ 05 Θͨ͠ͷܦྺ 2002 2006 2012 2017 ೿ݣࣾһ΍ ࣾһͳͲ ϑϦʔϥϯε ϑϦʔϥϯε��೥ੜ ฼�೥ੜ ग़࢈ Θͨ͠ͷ࢓ࣄͷׂ߹ ੍࡞ձࣾ 9 1 ௚ ΫϥΠΞϯ τ ίʔσΟ ϯά 6 3 3.5 0.5 8FC σβΠ ϯ %51 σβΠ ϯ Π ϥε τ Θͨ͠͸σβΠφʔͰ͢ σβΠφʔ͸࣮͸ ʮઃܭ࢜ʯ ग़లɿ8JLJQ

cakesは2022年8月31日に終了いたしました。 10年間の長きにわたり、ご愛読ありがとうございました。 2022年9月1日

ここが決定的に違うんです。 微妙なサービスの多くは機能ドリブンのあやふやなゴールセッティングでデザインを始めてしまうため、要件がぶれてしまい「他行では○○だ」とか「マネジメントが××と言っている」という非論理的な要件をただ浴び続けるだけに陥りがちです。 どの高みを目指すかによってデザインの重要度は大きく変わります。 極論とりあえず1個の機能としてあればいいのなら、デザインなんかいらないわけです。存在することが付加価値なので。 凄さポイント：ゴールから逆算して論理的に要件が導き出されている 凄さ2：ありがちなデザインをなぞる ゴールが明確になり、要件が決まったとしても、その最適解を生み出すプロセスは違いを生む大きな要因になります。 特に金融系のようなどちらかというとオールドな業界の場合、新しいことやサービスをやろうとすると「新しいからOK！」的なデザインがまず出てくることが多いのですが、なぜ

海外で作られた日本人用のパンフレットなどをみると、「日本じゃそんな使い方しないよ〜」というものを、ときどき見かけます。 欧文フォントを使うときに、ひょっとしたら、それと同じような恥ずかしいことを、自分でもしているかもしれません。 そんなときに恥をかかないように、今回は、「欧文の基本ルールについて」です。 スクリプト体 スクリプト体を大文字だけで組むのはNGです。 お店のロゴなどで、「ブラックレター」で全部大文字になっているものもあるようですが、それも本当はNGのようです。 そもそも、大文字ばかりだと読みづらいという話… 小文字は大文字に比べて、アルファベットごとに上下に飛び出していたりしていますが、これがポイントとなって、読みやすくなっています。 日本語で文章を読むときも、漢字を一画ずつ目を追って読むというより、だいたいの輪郭(単語などひとかたまり)で読んでいるかと思います。 高さが全部揃