より良い相対日時表記についての考察
ニュース系ウェブサイトの記事リストやソーシャルメディアのフィードなどでは、各記事の公開日時を相対表記で表現することがあります。「5分前」「3時間前」「きのう」というように、記事の公開からどれだけ時間が経過しているかを表現する形式です。具体的には、JavaScriptで記事のタイムスタンプをユーザーの閲覧時の日時と比較し、相対表記に変換することになります。一方、「2018年10月1日」のような形式は絶対表記と呼ばれます。各記事の個別ページでは絶対表記が採用されることが多いようです。 もっとも単純な相対日時の実装は、60分前までは「m分前」、24時間前までは「h時間前」、そしてそれより前は「d日前」というように、時間の単位どおり機械的に処理したものです。しかし私たちの日時の捉え方はカレンダーや時計のとおりではなく、もっと感覚的なものです。日時の相対表記を導入する意義は、正確に何時間何分前の記事
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
スプラトゥーン、みまもりSwitchなど任天堂のUI/UXデザイナーさんによる「“娯楽”を追求するUIデザイナーの仕事とは」 #uicrunch
リンク connpass UI Crunch #13 娯楽のUI - by Nintendo - (2018/04/27 19:00〜) ## “娯楽”を追求する、UIデザイナーの仕事とは 私たちは日々、実用品と娯楽品に囲まれて生活しています。どちらも生活に大切なもの。 今回は"もっと便利に"を追求するのではなく、"もっと楽しく"を追求する、UIデザイナー3名を任天堂からお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきます。 子どもから大人まで楽しめる娯楽の裏側には、どのような想いや工夫があるのか。 みなさんと一緒に学べる機会になればと思います。 また、後 59 users 1621 UI Crunch @ui_crunch 「娯楽のUI」、開場しました！19:30より、任天堂さんのUI/UXデザイナーさんにご登壇いただきま
娯楽を超えたデザイン （UI Crunch #13 娯楽のUI イベントレポート）｜のっち Ryosuke Inoue
「UI Crunch #13 娯楽のUI - by Nintendo -」に参加しました。世界的にも注目される企業かつあまり表に出てこないデザイントークが聞けると言うことで、倍率も相当なものとなっておりました。この企画は構想から2年くらいかかったそうで、とても濃いお話を聞くことができました。めちゃ感動しました。今回は、そちらのイベントレポートです。最初の方あまり写真を撮らなかったので、後半の写真が多めになります。 1人目は、UI/UX デザイン チーフの正木さん。「娯楽UIの思考の原点」についてお話いただきました。 Nintendo流の「伝え方」Nintendoが人に何かを「伝える」時にこだわっていること。それは、以下の3つです。 ・「教える」ことよりも「体験する」ことで、より早く、的確に伝えることができる。 ・初めての体験は一度きり。新鮮な印象を大切にする。 ・体験はやっぱり面白くしよう
iOSアプリデザインリニューアルの舞台裏 - クックパッド開発者ブログ
モバイルファースト室の @slightair です。 先ほど、デザインをリニューアルしたクックパッドiOSアプリ 6.0.0 をリリースしました。 https://itunes.apple.com/jp/app/kukkupaddo-no.1reshipi-jian/id340368403?mt=8 この記事では、どのようにして新しいデザインをiOSアプリに適用していったのかを紹介したいと思います。 新しいアプリの画面 スクリーンショットを見ていただければわかるように、全体的にフラットな印象を与える画面に変わりました。 トップ レシピ詳細画面 サイドメニュー この記事で全ての画面を紹介することはできませんが、ぜひダウンロードしてお手持ちのiOS端末で触ってみてください。 新デザインの適用 基本的には、画面デザイン案をもらい、既存のアプリを修正して少しずつ適用していく形で進めていきました。
UIが変わる度に文句いう人 - 良いあそなすちゃん
iOSを始め最近あちこちのWebサービスでUIが変わり始めていますね。UIが変わる度に主にTwitterで文句を垂れる人がいるけど、じゃあ、お前の中でどうなったら最適なUIなのかをブログにかいてくれよ。って僕はいつも思ってる。UIが変わる度に条件反射でTwitter開いて「クソUI」の4文字をテキストエリアに叩きこむ余裕があるなら、UIが変わった理由を考えてほしいし、ちゃんと客観的な理由でクソであるんだったら「クソUI」の4文字を許容できると思う。WebサービスのUIが変わる度に思考停止気味な「クソUI」の文字列にうんざりするし、僕が1番危惧しているのは、思考停止の塊の連中がうだうだ言うせいで、Webサービスのユーザの幸せを願ってUIの改善に注力しているチームがUIを改善することに抵抗を感じてしまうとそれはもうWebサービスっていうかものづくりの破滅の始まりだ。 慣れたUIがいい人達、必要
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
思わず触りたくなるiOSのUIデザイン - RyoAnna
ユーザーインターフェイスが洗練されているアプリは、使っていて気持ちいい。ボタンの形、配置、配色、画面の遷移、アニメーション。これらのデザインと機能がマッチすると、多くの人に受け入れられるアプリになる。 今回はiOS、特にiPhoneのUIデザインを紹介したい。どれも触りたくなるものばかりだ。 Qiwy iOS/iPhone app curl test by Mikael Eidenberg UX/iOS/UI iPhone idea with video process by Cuberto Qiwy iOS/iPhone app switch and slider by Mikael Eidenberg Untitled iOS/iPhone synth app navigation by Mikael Eidenberg Iphone UI by Matthias Mayr Busin
iOSで吹き出しを描こう - Qiita
完成品はこんな感じ メッセージアプリとかでよくあるやつなんだけど、画像でもいいんだけどセリフの長さによってサイズ変えたりしたいから、描いたほうが楽だなってことで簡単なんで描いちゃいましょう。 コードは主要部分はこんな感じ //描画するぜ！ - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextBubblePath(context, CGRectMake(60.5, 40.5, 170, 70)); CGContextStrokePath(context); } //角度→ラジアン変換 #if !defined(RADIANS) #define RADIANS(D) (D * M_PI / 180) #endif //吹き出しを描く void CGConte
Design Tip: Never Use Black by Ian Storm Taylor
One of the most important color tricks I’ve ever learned was to avoid using the color black in my work. Mrs. Zamula, my childhood art teacher, first warned me about black when I was in middle school. And I heard the same again multiple times at RISD. It sounds weird at first, but it’s good advice. Problem is, we see dark things and assume they are black things. When, in reality, it’s very hard to
クックパッド流UIの作り方 - takeshi nagayama's blog
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
【ちょい保存版】ヒートマップ分析、H&Mの水着広告の男女差など9選 | PRFREAK
広告は本当のところ見られたのか、そしてドコに注目が集まったのか、知る必要があります。 ヒートマップとアイ・トラッキングの技術が向上した結果、人々の視線の行方を正確に知ることができるようになりました。広告会社には不都合な真実かもしれませんが、Business Insiderの「16 Heatmaps That Reveal Exactly Where People Look」という記事を厳選して紹介します。 1. H&Mの水着広告 男性は水着姿の女性モデルを凝視します。一方、女性はモデル周辺の広告メッセージにも視線を十分に配ります。 2. 美女のヌードと靴 男性は全然、靴に興味を示していません。靴しか身につけてないのに・・・ 3. 視線で誘導 女性モデルの視線が商品に向いてると、読者の視線も商品へ誘導されます。 4. バナーブラインドネス サイト閲覧者は当然、記事を読みますし、バナー広告をほ
ふつうのformをつかいたい - はまちや２ - ニコニコ超会議2012
こんにちはこんにちは！！ はまちや２ (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう？ プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 本日のテーマ： 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…（はいはい） フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた！) (これで送信、と…) ※エラー：住所を正しく入力してください (え、なんで！？) ※住所は全角で入力してく
ソシオメディア | 「国立国会図書館サーチ（開発版）」のUIデザインコンセプト
ソシオメディアは、国立国会図書館様が運営する「国立国会図書館サーチ（開発版）」について、2010年1月から2011年3月まで、国会図書館ご担当の皆様・株式会社NTTデータ様とともにUIデザインをさせていただきました。 （事例：「国立国会図書館サーチ（開発版）」のUIデザイン [国立国会図書館様]） 国立国会図書館は多くの文献検索サービスを運営しています。その中でも、この新しい国立国会図書館サーチは特別な位置づけにあると言えます。 国立国会図書館サーチは、国立国会図書館が所蔵する全ての図書、デジタルアーカイブ、レファレンス情報（探し方／調べ方の事例など）、都道府県立図書館、政令指定都市の市立図書館の蔵書を検索（非同期での横断検索）できるほか、書誌属性情報にもとづいた多段階での絞り込み、連想キーワード検索、翻訳表示、書誌同定、外部サービス（各種検索エンジン、ソーシャルサービス、所蔵機関サイト、
スマホUI考3 ～ ジェスチャ入力について | fladdict
スマホUI考１ 〜 ボタンについて スマホUI考２ 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
排卵期予測アプリ「Clue」がデザインにピンクを使わない理由
【UI設計】シンプルに「見せる」、3つの簡単なテクニック [ITL]
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
Google Bootstrap has moved!
layer8.sh