先日Cybozu Frontend Monthly #1 にてb4h0_c4tさんの「HTMHell special: close buttons」のお話を聴いていた中で、一つ引っかかるものがあった。 「そもそも✗(バツ)は閉じるって意味じゃないから！」 確かに。 現代、様々なUIを触ってきた中でなぜ ✕ を閉じるものと捉えているのだろうと不思議に思った。 ✕ではなくx(エックス)で表現されることも多々あるようで、こんな名言もある。 ✕とはなんなんだろう ではなぜこのクロスの記号(✕)が閉じるの意味を持ってしまったのか考えてみる。 一旦✕を見て思い出すものを上げてみようと思う。 ・◯と✕(日本の正誤表記) ・✓と✕(海外...主に欧米の正誤表記) ・プレステのコントローラー ・海外ゲームだと決定が✕、キャンセルが◯ ・宝の地図なんかで在り処を記す ・上記のツイートのようにx(エックス)とし
Tea doll. Fairbanks, Alaska,USA 2009 _______ これは2010年の夏、私がアラスカのフェアバンクスに一ヶ月ほど研究で滞在した時、現地の人形コレクターの女性の家で見せてもらった人形です。一見して年季が入った手作りのもので、21世紀の今の私たちの目から見ると、お世辞にもかわいいものとは言えません。しかし説明を聞いてみると、この古ぼけた人形が一変して見えてくるのです。 まず彼女に、「持ってごらん」と言われ、私は両手で人形を受け取りました。ずっしりと重みが伝わってきます。どうやら通常の人形のように中に綿が詰まっているわけでは無さそうです。うろたえていると、「嗅いでごらん」と言われ、私は鼻を近づけてみました。なんだか葉っぱのような、爽やかな匂いがします。この人形の中には綿ではなく、なんと〈お茶の葉〉が詰まっているのでした。 それはなぜでしょうか？彼女の説明
Reading back this post from December 2018, it seems that not much has changed, and many of the trends are still happening: chromeless designs, gestures, gradients, deep flat, big bold fonts, and more, they are still here and will remain dominant during 2020. Here’s a closer look at some new mobile trends that will continue to grow in 2020: 1. Dark modeYep, I know that’s old news already, but you k
Hello there!It’s been a while since I shared Getting the right colors in your iOS app, a blogpost I wrote for helping iOS devs prevent the color nightmare that happens every now and then. That blogpost was cool and got more visits than I expected, but, the information I exposed at that moment was neither complete nor certainly accurate, and it got outdated very quickly too. My appologies for takin
This article is part of a series on our new Design Language System. Karri recently answered questions about this topic in a Designer News “Ask Me Anything” interview. Click here to read the transcript. Working in software development and design, we are often required to ship one-off solutions. Sometimes we’re working within time constraints and sometimes we just haven’t yet agreed upon a path forw
By Naema Baskanderi Last night my small team and I headed out to do a little networking and learn about Design Systems. Being that is was the buzzword of 2017, we were eager to learn how we could create our own. We had heard all the wonderful benefits of creating a design system: saving time, reducing debates, collaboration, adoption, and more. I was excited! All the talks spoke about how to creat
2019年2月7〜8日に開催されたDroidKaigi2019で、RoomClipは企業スポンサーとして参加しました。 （パーティでご好評いただいたケーキの会社です🧁✨） そこでデザインガイドラインを（抜粋ですが）公開したところ、私からしてみると意外にも好評だったようで、少しでもエンジニア・デザイナー間のやりとりが円滑になったらいいなぁを応援したくて、いただいた反応やらエピソードやら記事に書くことにした次第です。 前置き実は、アンドロイドチームから『DroidKaigi2019にデザインガイドラインを公開したい』という打診があった時は正直ぜんぜん気乗りせず。 というのも、デザインガイドラインなんて先人がいくらでも知見を発揮していますし、「今やみなさんどこでも作ってるでしょ」という思いから、採用ベースでもエンジニア目線でも特に目新しくもなく、大したフックにはならないんじゃないかと思ってたか
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
2015年に初版が発行された「UI GRAPHICS」は、当時の数多くのモバイルアプリの最先端のデザイン事例と共に、スマートフォン以降に生まれたUIのデザイン思想、インターフェース論について、UIの専門家達による様々な考察を掲載した、大変人気を博した書籍でした。 そして先日発売された「UI GRAPHICS」の続編「新版 UI GRAPHICS 成功事例と思想から学ぶ、これからのインターフェースデザインとUX」に大変光栄な事に、共著者の一人として参加させていただきました。 今回出版元のBNN新社様より、当方のパートをnoteに掲載する事をご許可いただいたので、前半部分に限り一部ご紹介したいと思います。 テーマはAppleの開発者向けカンファレンスWWDC 2018のセッション「Designing Fluid Interfaces」で紹介された、新たなUIデザイン思想についての考察です。
フェンリルのプランナーの柴田です。 日本には、常に変化と増殖を続ける自動生成ダンジョン渋谷駅や、ミノタウルスでも封印されてそうな巨大ラビリンス新宿駅など、数多くの迷宮駅があります。梅田駅（大阪駅）も迷宮ランキング上位駅の一つですが、梅田駅の迷いやすさは構造よりも案内標識のせいではないかというのが今回のお話です。 梅田エリアは複雑怪奇僕は５年ほど大阪に住んでいたことがありますが、住み始めた頃梅田エリアでよく迷子になりました。梅田エリアは７駅が接続されており、路線数も多いのにそれぞれ絶妙に離れている複雑な構造。それが地下や地上や空中で繋がったり分断されていたり、出口があったりなかったりするので慣れている人でも時々迷うレベルです。それに拍車をかけるのが名称問題で、大阪駅=梅田の知識すらなかった僕には最初チンプンカンプンでした。 ここに梅田地下街で接続されている駅を簡単に整理してみました。名称だけ
こんにちは。現在カクヨムのデザインを担当しておりますデザイナーの id:murata_s です。 先日、カクヨムでは縦組み機能をベータリリースしました。これは文字通りウェブブラウザ上で小説を縦組みで表示することができる機能です。リリース後書き手ユーザーの皆さまを中心に多くの反響がありました。 この機能開発では、基本的な組方向に関する変更に加え、画面のデザイン的にも新しい試みを行っています。そこで、今回はウェブにおける縦組みのデザイン事例としてこれを紹介します。 小説を縦組みで読みたい ウェブ小説を縦組みで読みたいという、シンプルなモチベーションで始まった縦組み機能の開発ですが、アイデア自体はサービスの立ち上げ当初からチーム内で挙がっていました。日本語で紡がれた物語を縦組みで読みたいという欲求は、小説文化に親しみのある者なら誰もが思うことだと思います。実際にご利用いただいているユーザーさんと
昨今ではデザイナーの間でも、アプリやサービスに使われる色やテキストなどをまとめた「スタイルガイド」や、デザインコンポーネントをまとめた「パターンライブラリ」、さらにそれらを全てまとめてドキュメント・原則・思想なども含めた「デザインシステム」などを作りながら効率よくより良い体験を提供できるように開発できるようにしようという取り組みがよく見られます。 DropboxやAirbnbなどをはじめとして積極的に自社サービスの「デザインシステム」を公開している企業も多く見られるようになってきました。 それにともなって、自分たちでも作ってみよう・開発現場に取り入れてみようと取り組み始めているという話もよく聞くようになってきましたが、どんな風にどんなところから手を付けて良いか？というのは良く聞く質問です。 「デザインシステム」を考えていくにあたって、設計の手法・考え方の一つにAtomic Designとい
2017年10月28日、福岡県の九州産業大学にて、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC＋KYUSHU 2017”が開催。本記事では、同カンファレンスにて行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ～ペルソナ5のUI事例～”のリポートをお届けする。 本セッションに登壇したのは、アトラスの和田和久氏と須藤正喜氏。和田氏はデザイナーとして入社後、さまざまな作品に携わり、現在は『ペルソナ』チームを統括しつつ、『ペルソナ3 ダンシング・ムーンナイト』、『ペルソナ5 ダンシング・スターナイト』のプロデューサーを担当している。須藤氏は、アトラス初のUI（ユーザーインターフェース）専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任。各種イベントのデザイン監修やプロモーション、ライツデザイン監修なども行っている
Desktop Kit is a GUI for building web and desktop applications. Whether you’re building a user flow through a web app or constructing a Mac interface, there are currently few comprehensive desktop GUIs available and we hope this collection of common UI elements speeds up your design and development process. It includes everything from cursors and dropdowns to chrome for Mac and popular browsers. D
こんにちは、投稿開発部の市川です(@masaichi) 主に、クックパッドiOSアプリの投稿周りの機能を担当しています。 はじめに みなさんはiOSアプリを開発する際に、どうやってレイアウトを調整していますか？ クックパッドでは大体の場合は、デザイナーにZeplinなどでレイアウトの指示書を貰いエンジニアが実装するという流れで組んでいます。 しかし、このやり方の場合、終盤の細かなデザインの調整の際に、修正と確認が細かく発生してしまい、デザイナーとエンジニアの時間を細切れに使ってしまう、という問題がありました。 今回、この解決の手段として、終盤のデザインの調整をデザイナーさん自身にInterface Builderで調整をしてもらうトライを行いました。 10月頃、iOSアプリに追加した「みんなの投稿」機能を題材に、この過程と効果を紹介します。 なぜInterface Builderを触っても
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
『本質的安全設計』という言葉を聞いたことがあるだろうか。世間ではよく安全とか安心とかいったことを話題にするが、安全の意味をつきつめて考えている人は、必ずしも多くない。本質的な安全設計とは、われわれがモノや仕組み（システム）を作る上で、欠くことのできない概念である。今日はこれについて少し述べてみたい。 機械の安全設計については、そのものずばり「機械類の安全性―基本概念，設計のための一般原則」という名前の国際規格 ISO12100 が存在する。このISO規格によれば、機械類の安全は、『設計者対応』と『操作者対応』に分けられる。つまり、作る側による配慮と、使う側（消費者・操作者）による注意の、両方がいるというわけだ。ここまではいいだろう。 では、肝心の作る側（設計者）の対応は、どのように行うべきか。ISO12100は、 （１）本質的安全設計によるリスクの低減 （２）安全防護によるリスクの低減 （
低下するライティングスキル 私たち日本人は、文脈や背景の定義を必要とせず「相手を察すること」で疎通を図る「ハイコンテキスト」なコミュニケーション文化だと言われています。LINE や SNS でも短いテキストで会話が成立することは日常です。手書きからメールへ、そのメールは今やチャットに代わり、テキストの発信はどんどん増えています。 一方で、語彙力やライティングスキルが低下していると感じることはないでしょうか。記事のコピーペースト氾濫、分かりにくい文章表現、何かを PR する長文が書けない──。こうした問題はデザインやエンジニアリングの職域に関係なく、成果の質を下げているかもしれません。 ライティングは UI であること Basecamp や Campfire を展開している 37signals による『Getting Real』の中では ”Copywriting is Interface D
まちを歩くと、なにかとめにつく「HG創英角ポップ体」。ポスターや看板などあらゆる場所でみかける。 たまに、シリアスな注意書きの看板に、にぎやかでたのしげな雰囲気のポップ体がつかわれたりして、おもしろ写真としてネットで話題になったりする。 そんな「HG創英角ポップ体」をつくったひとはどんなひとなんだろう？
はてなブログを使っているとき、記事を書き上げて最後に押すボタンをつい、押し間違えそうになった経験はありませんか？ 最後の一手を、うっかり押し間違えないように これまではてなブログの記事編集画面では「公開する」ボタンと「下書きに保存する」ボタンを並べていましたが、これにより誤って隣のボタンを押し間違えてしまうということがありました。 今回のリニューアルでは、 ドロップダウンで選んでから押すことによって、2択を1択にすることで押し間違いを防止。 それぞれの状態で、ボタンのデフォルトを変えることによって毎回悩ませることを減らしました。 下書きの状態から 公開済みの状態から インターフェースに完成はない これからも様々なユースケースを考えて、改善していきたいと思います。 ぜひ、新しくなった公開ボタンではてなブログをご利用ください！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
