[こかげ] フォント : Nu みちしるべ
概要 「Nu みちしるべ」は、日本の道路標識に基づいて作ったフォントです。標識の数字に興味を持ったのが切っ掛けで作りましたが、数字だけだとフォントとしてあまり面白くないので、周りの赤い円を含めて自動的に組み立てられるように作り込んでみました。道路標識の全種に対応しているわけではないです。用途は…何かあるでしょうか。 標識を自動的に組み立てるには、アプリケーションが OpenType‐フォントの高度な機能に対応している必要があります。非対応のアプリしか持っていない場合、手動で画像編集をして部品を組み立てる事になりますが、その部品としてフォントを利用できます。 ウエブブラウザーも今のところ対応状況が微妙なので、次の見本は崩れて表示されてしまうかも知れません。「直接編集」や「自動着色」を切り替えてみると表示が改善する場合があるようです。（なお「直接編集」を無効にした場合、文字列の書き替えは左上の
pixivのUIを迅速にアップデートする UIUXチームのフロントエンドモダン化の歴史 - pixiv inside
こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s
モバイルアプリにおけるUIデザイン - Qiita
1.はじめに 私は(筆者は)モバイルエンジニア転職を目指す立場です。個人的にアプリのUIデザイン知識はデザイナーだけでなくエンジニアにも必須だと思っています。私自身がアプリ開発の過程でデザインについて指摘され、「このままデザインに無知では良くないと思った」、「同じような立場の方にモバイルアプリのデザインの事を少しでも知ってもらいたいと思った」その２つの理由から本記事を執筆しました。 現在、エンジニアを目指している方やアプリ開発はしているけどモバイルデザインについて改めて知りたいという方、そのような方向けに改めてiOS・Android双方のデザインガイドラインについてまとめてみました。 2.iOSとAndroidのデザインの考え方 2020年現在、iOSではHuman Interface Guidelines、AndroidではMaterial Designの考え方をもとにアプリUIが作られ
『マネーフォワード ME』Web版リニューアルに関する今後の方針について｜Yosuke Tsuji
7月7日に実施した『マネーフォワード ME』Web版リニューアルについて、現在、ユーザーの皆様よりたくさんの貴重なご意見を頂戴し誠にありがとうございます。私やプロジェクト責任者も、すべてに目を通しています。 そしていただいたご意見を真摯に受け止め、昨日、今日にかけて、関係者で集まり議論し、一旦リニューアル前の旧バージョンに戻すことを決断いたしました。今晩深夜メンテナンスを行い、明日の早朝より旧バージョンをお使いいただけるように準備をしております。 今回、「このリニューアルは改悪だ」という内容のTwitterやメールを、たくさんの方からいただきました。事前に一部のユーザー様にβ版をお試しいただいた上でのリニューアルでしたが、大幅なデザイン変更や一部の機能削減などにより、特に資産管理を目的としたユーザーの方々にとって、一部使いにくい変更となってしまいました。 そして、普段からWeb版を利用され
やめてほしいUIアニメーション
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ！と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ？と思ってしまう、そんな「これはやめてほしい
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
ユーザー体験の質を左右するナビゲーションのパターン６選
アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれば、65％近くのユーザーは、アプリ体験が好ましくないブランドを否定的に感じています。したがって決定的に重要なのは、ユーザーが労力を使わずに自分たちの課題の解決策にたどり着けるよう、インターフェイスのデザインをシンプルにすることです。 Gerry McGovern氏は『Usability: Navigation is More Important than Search』という記事の中で、機械に詳しい70％のユーザーはリンクをクリックすることからタスクを始めている一方で、残りの30％は検索から始めていることを明らかにしました。 これを踏まえると、ナビゲーションがユーザー体験でとても重要
ユーザーがアイコンを誤タップするのを防ぐためには
AnthonyはUX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 これまでにモバイルアプリをデザインしたことがある人なら、アイコンボタンがどれだけ便利で普及しているかはお分かりかと思います。しかし、それらが近すぎる位置に配置されたとき、どれだけユーザーの誤タップを招いているかご存知でしょうか。 これはアイコンボタンが一列に並んでいる場合によく発生する問題です。ユーザーは、ボタンの間に十分なスペースがない場合、隣接するボタンを簡単に押すことができてしまいます。このミスはユーザーを苛立たせ、行いたいタスクを遂行しづらくする可能性があります。 アイコンとアイコンの間に余分なパディングを追加する ユーザーの誤タップを防ぐにはパディングを追加します。アイコンの上に指を置いて、十分なパディングがあるかどう
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
月500円の不労所得を得るためにWEBサービスを開発した話 〜 もうやめて！とっくに個人開発者のライフはゼロよ！ 〜 - Crieit
月500円の不労所得を得るためにWEBサービスを開発した話 〜 もうやめて！とっくに個人開発者のライフはゼロよ！ 〜 こんにちわ！ミツダマです。 毎月WEBサービスを開発して技術とノウハウうっはうは祭りを主催しています。 1・2月に続いて3月にもWEBサービスを開発しました。 そのときの記事はコチラ ▼月500円の不労所得を得るためにWEBサービスを開発した話(1) 3月は究極の選択メーカー(仮)をつくってます。 おかげで少しずつですが不労所得に近づいてきました。へへ。 以下報告記事です！ あらすじ 〜成功のノウハウ探し〜 花粉症に悩まされひたすらティッシュを浪費する仕事に勤しんでいたある日のことです。 空いてる時間を使って「個人開発で成功するためのノウハウ」について調べていました。 多くの記事を読み漁った結果、どの記事でも共通して書かれている大原則を見つけたのです。それは どれだけキレイ
Unityでパフォーマンスの良いUIを作るためのTips UIのリビルドとの上手な付き合い方
UIのリビルドについて 山村達彦氏（以下、山村）：では、フィルレートの話も終わったので、次の話をしましょう。UIのリビルドについてです。これが初耳という方は、どれぐらいいらっしゃいますか？ （会場挙手） 意外と少ない。じゃあきっと大丈夫ですね。UIのリビルドの話をしましょう。これがUnityのUIにおいて大事な部分です。ぶっちゃけ前の2つは忘れても良いので、これだけは覚えてもらえればと思います。 （会場笑） 先ほども紹介しましたように、UnityのCanvasは、描画をまとめてバッファを作って、それを使って描画します。UnityのUIの流れはこれです。 Canvasになにかをやらせる。Canvasで描画をまとめて、描画する。 このバッファはCanvasで1回作るんですが、これは基本的に使い回されます。これのなにが良いかというと、UIを大量に置いた場合でもほとんど負荷がかかりません。これはi
効果的なUXライティングのための16のルール | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラベル、エラーメッセージ、セキュリティの注意喚起、利用規約、その他のプロダクト使用に関する指示などが含まれます。 UXライティングの主な目的は、ユーザーとデジタルプロダクトのコミュニケーションを解決することです。この記事では、効果的なUXライティングに関する実践的なヒントを提供します。 ※編注：当記事はあくまで英語におけるUXライティングについての紹介になります。 なぜUIのテキストをいじることがデザインプロセスにおいて重要なのか 多くの場合、プロダクトの開発者は、UIのテキストをプロダク
リニューアル直後に月間利用300%伸び、Web会議システム「Calling」のデザイナーが仕掛けたUXとは？ - ネオキャリアグループ エンジニアブログ
はじめまして、2018年の5月からCalling（https://www.calling.fun）でプロダクトデザインを担当しているKottyです。 今年の9月に、Callingはプラットフォームサービスとしてリニューアルしました。 もともとバラバラだったサービスを、どのようにリニューアルしたのか、リニューアル直後に月間利用時間が300％も伸びたサービスをどのようにデザインしたのか、をデザイナー視点から紹介します。 デザイナーって何をする人？ デザイナーは、成果物を人に見てもらいやすい職業なので、よく「綺麗なデザインをする」「サイトをコーディングする」という印象を持たれることが多いです。 実際にはそれだけではなく、「情報設計」や「ユーザー体験（UX）」といった成果物が見えづらい事を考える重要な役目も担っています。 その設計を元に、ユーザーが操作するウェブサイトに表現するところまでがデザイナ
カルチャーの違いを考慮したデザインのポイント
様々なもののデジタル化が進む中で、デザイナーの役割も大きく変化し始めている。特にインターネットを介したサービスにおいては「design, Design, DESIGNの違いを知っていますか?」でも紹介されている通り、世界中の不特定多数のユーザーを念頭にデザインしなければならない時代になってきている。 それは同時に、受け取り側の趣味嗜好や価値観を十分理解した上で、プロダクトやメッセージングを考える必要があるということでもある。デザインコミュニケーションとして、単純に言葉を翻訳しただけでは不十分なのである。 目で表情を伝える日本人、口で表情を伝える欧米人日本と欧米では絵文字の表現方法が大きく異なる。特に日本では「目」を主な表現として利用しているのに対し、欧米では主に「口」の形の違いで感情を伝えている。 この違いの原因の一つが日常生活における人々の生活習慣の違いだろう。ご存知の通り、花粉症の時期
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
iOS エンジニア以外にも知ってほしい iOS アプリ用語 -概念名, その他編- #Zaim｜akatsuki174
前編のおさらいと今回の内容こんにちは。Zaim で iOS アプリ開発をしている @akatsuki174 です。 前編では iOS アプリにおける UI 部品について、それが何という名前でどんな役割を果たしているのかをまとめました。今回は UI 部品以外の iOS アプリ用語について説明したいと思います。 注： 今回も①頻出度合い、②iOS アプリを語る上で知っておいてほしい度合いを元に、勝手に重要度を振っています。 ほとんど Human Interface Guidelines（以下 HIG）から情報を引っ張ってきているので、もっと詳しく知りたい方はそちらへ。重要度★★★モーダル 下から上にせり上がって表示される画面のことを指します。モーダルは画面全体を覆うこともあれば、画面の一部だけ覆うこともあります。モーダルで表示することで、この画面に集中してもらえます。逆を言えば、タスクが完了す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch
「MS P ゴシック」「MS UI ゴシック」を使ったExcelシートのレイアウトが狂う問題（5月16日追記）／2019年5月のセキュリティ更新で修正ずみ
ユーザーインターフェースをいい動きにするには２つの要素が大事らしい→試してみると確かに急にカッコよくなってすごい
高齢者UIプロトタイプ検証の学び
