(Please note that this article is a localized (to Japanese) version of a corresponding tech blog article in the English language) Netflixでは、2015年9月の日本における配信サービス開始時から日本語字幕を提供しています。 今回のブログでは、日本語字幕提供に至るまでの技術的な取り組みについて説明します。 字幕ソースファイルの仕様、字幕ソースファイルからNetflix配信用字幕への変換モデル、Netflixにおける日本語字幕の納品モデルなどを取り上げます。さらに、W3C字幕規格Timed Text Markup Language 2 (TTML2)導入に向けた対応についても触れます。 2014年の終盤にかけて、Netflixでは2015年9月に予定していた日

Material Designを使いこなすための最速の手順を紹介します。最近UIデザインを始めた方、iOSアプリのデザインはしていたけどAndroidのデザインも行う必要になった方、WebサービスでMaterial Designを使ってみたい方、Androidエンジニアでデザイン方面ももっと知りたい方などは参考にしてみてください。 Material DesignとはMaterial DesignとはGoogleが構築したUIデザインフレームワークです。Androidだけでなく、WebやiOSのデザインにも活用できます。 ざっくりとした内容は「Material Designとは」でググってみてください。基本理念をわかりやすく解説している記事が並んでいます。この段階ではなんとなくMaterial Designってこんなんだなって理解したら十分です。 それではガイドラインを読み込む前に、まずは準

CAMはエンタメコンテンツ、ビジネスバラエティメディア、ライフスタイルメディアを主軸に30以上のサービスを展開しています。エンタメコンテンツの分野では、国内外で圧倒的人気を誇るアーティストやアイドルグループとのパートナーシップを結び、オフィシャルファンサイトや動画関連サービスを運営しています。

直近だと…（2022/01/13追記） あれから4年近く経ち、私も転職したことで、デザイナーではなくなりました…。 この記事がたまに見られてるっぽいので、一応アップデートしておきます。 現代だと、gap という、まさしくこの記事の意図を表現するプロパティが出来たため、そちらを使うことを推奨します。 この記事の内容で書かれていた方は、コード内を margin-top で検索すれば、置き換えはそんなに難しくないのではないかと思います。 この記事は... 「CSSで「余白」を制してデザイナーに好かれよう」というとても素晴らしい，本当に有難い記事が上がっていたのを見て，じゃあデザイナー(主語がでかい)は余白をどう考えているのかを，CSSを書いている一デザイナーの身から書き下してみよう、というものです． 「余白」の意味の書き下しと『marginは下ではなく「上」で取る！』ことが多い理由の分析 「余白

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

エンジニアが知っておくべきデザインの基本。「デザインガイドライン」と「コンポーネント」を学ぶ！ Appleをはじめとする多くの成功企業がデザイナを役員に据えるなど、デザインに対する重要度が年々上がっているこの時代、若手のうちにUIデザインに関する基本的な考えを身につけ、より良いプロダクトを制作できるエンジニアを目指しましょう。 こんにちは。 グロースデザイナ/フロントエンジニアとしてWebサービス開発に携わっている右寺（@migi）と申します。最近は複数の企業で、数値解析から企画提案、開発も含めてサービスを成長させるためのお手伝いをしています。 現在はフリーランスとして活動していますが、直近では株式会社グッドパッチというUI（ユーザインターフェイス）デザインに特化した会社に勤めており、そこではデザインとの距離がとても近いところで開発をしていました。 そんな私の経験から、この記事では「エンジ

フローティングアクションボタン（FAB）は主にAndroidアプリにおいて、よく使われる操作方法です。FABは、UIの上に浮く丸いアイコンのような形で、デザイナーにとってはアプリの製品ストーリーの重要な部分を表現するためのツールです。 FABは非常にシンプルで導入しやすいUI要素ですが、実際にはデザイナーは間違ってデザインに取り込んでいることが多くあります。 この記事では以下の質問に答えていきたいと思います。 FABを使うタイミング FABのベストプラクティス UXを向上させるための、FABとアニメーションの組み合わせ方 FABを使うタイミング 特徴的なアクションを強調したいとき FABはもっとも関連性があったり、頻繁に使われるアクションを強調します。アプリの中でも、強い特徴を持つアクションに対してFABは使われるべきです。理想的には、以下の画像のようにFABはアプリ全体において中心的な機

iPhone 15 got USB-C, a great upgrade just for the sake of cable management sanity, but that also brought support for native video out. That means you can connect displays to the iPhone easily with a s

Rocket Lab is waiting until Neutron is more technically mature before signing launch contracts with customers, CEO Peter Beck told investors on Wednesday. The statements provided an inside look on how

2017年4月13日の「DevLOVE 関西『デザインリニューアルの難しさ』」にて発表された、Backlog UI リニューアルの舞台裏のスライドです。

ボタンはごく普通の、インタラクションデザインの日常的な要素です。ボタンはとてもシンプルなUI要素に見えますが、過去数十年間でそのデザインはかなり変わってきました。しかし今でもボタンのUXデザインは認識しやすさと明確さについて言及されています。 この記事ではボタンデザインの発展を辿りながら、有効なボタンを作るために何が最も重要で最適なのかを見つけて行きたいと思います。 スタイルの発展 3Dボタン 初期からオペレーティング用のボタンは、周りのコンテキストと区別するために、浮き彫りと影に依存していました。この設計の解決策は枠、グラデーション、ドロップシャドウを使用して、要素を背景やコンテンツから目立たせ、クリック可能な要素だと簡単に認識できるようにするといった単純な原則に基づいていました。 ボタンが浮かび上がっているように見えます。 このWindows95のダイアログボックスは、濃い影とハイライ

[レベル: 中級] AMP プロジェクトは、AMP HTML で構成したウェブサイトを簡単に作成するためのテンプレートの提供を始めました。 AMP Start という名称のサイトで公開しています。 まずは2種類のテンプレートを配布 AMP Start で公開されているテンプレートを使えば、AMP に対応したサイトをゼロから構築する必要はありません。 テンプレートはデザイン的に洗練されており、たいていのサイトに必要な要素を備えています。 現在公開されているテンプレートは、次の2種類です。 記事用 ブログ用 記事もブログも大差ないように思いますが、ナビゲーションメニューやソーシャルボタンなどの要素に多少の違いがあります。 “COMING SOON”とあるので、もう1種類のテンプレートが近々公開されると思われます。 RWD + AMP HTML どちらのテンプレートも、レスポンシブ ウェブ デザ

KMC 春合宿2017で発表したトークです。

みなさんは、CSSを書くときに管理のしやすさを意識していますか？　CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設

2017/3/10 DroidKaigi 2017 DAY02 room3 16:00~

初めまして、rootアシスタントデザイナーの内藤です。 今日はFacebookのモバイルUIを事例に、UIデザインにおける「グレースケール」の使い方について考えてみます。 そもそも「グレースケール」とはなんなのか。僕も、言葉だけ知っていてなんとなく使っていたので改めて調べてみました。 IT用語辞典（e-words.jp）によると グレースケールとは、画像などに使われる色の種類・範囲を表す用語の一つで、白と黒とその中間の何段階かの灰色のみを用いること 一言でいってしまえば、限りなく黒に近いものから限りなく白に近いものまで「いろんなグレー」ということでしょうか。 グレーという色は地味ですが、UIデザインにおいて実はもっとも重要で、なおかつ難しい色なのではないかと考えています。 例えば、Webサイトのキーカラーなどは、目立ちますし、サイト、しいてはブランドそのものの印象を決定づける色なので、色選

パブリッシャーは、トップページへのトラフィックの全体的な減少に苦しんでいる。だが、ブルームバーグメディア（Bloomberg Media）は、その対策を見つけたと考えているかもしれない。10月にテクノロジーセクションを再開した際、各記事を下へスクロールしていくと、トップページが現れる仕様したのだ。 パブリッシャーは、トップページへのトラフィックの全体的な減少に苦しんでいる。だが、ブルームバーグメディア（Bloomberg Media）は、その対策を見つけたと考えているかもしれない。10月にテクノロジーセクションを再開した際、各記事を下へスクロールしていくと、トップページが現れる仕様にしたのだ（Technology – Bloombergのトップからどれか記事を選んでスクロールしてもらいたい）。 「メディアでは、全体としてトップページへのダイレクトなトラフィックが徐々に減少する傾向がある。新

お店で誰かに商品の場所を尋ねたとして、その相手がただそこに立ったままだったとしたらどう思うでしょうか。きっとイライラして、その場を立ち去りますよね。同じように、ユーザーは長い間スクリーン上のスピナー（通信やローディング時にくるくる回るアニメーション表示の）を見ていると、このような心理状況に陥ります。 スピナーは時間のかかる処理には適さない スピナーは、その処理が終わるまでどのくらいの時間を要するのかをユーザーに伝えません。長時間の処理にスピナーを使うと、最終的にユーザーはアプリに何か問題が起こったのではないかと疑問に思うでしょう。フィードバック無しでは不確実性が生じ、ユーザーは最悪の場合を想定することになります。 ユーザーは読み込みに時間がかかるだろうと考え、待つ気をなくすのです。そしてしびれを切らして、戻るボタンを押したり、またはアプリを終了したりするでしょう。 ４秒ルール ユーザーをア

はてなブックマークボタンの新たなボタンタイプを2月上旬に追加予定です。またこれに伴い、現在のはてなブックマークボタン（2012年以降バージョン）のデザインを変更する予定です。すでにブログやサイトなどに設置されているボタンのデザインは自動的に最新版へ変更される予定ですので、ユーザーがタグの再設定をする必要はありません。 新たに加わるボタン 新たなボタンタイプは、スマートフォンでも利用しやすいデザインになっています。また今後は、ボタンタイプごとに幅や高さのカスタマイズが可能になる予定です。 新しいボタンタイプ カスタマイズ例 デザイン変更を行うボタン これまでのはてなブックマークボタンのデザインを、他サービスボタンのテイストに合わせて変更する予定です。バーティカル型のボタンは高さに変更（→ height:40px）があります。 左: これまでのボタン / 右: 新しいボタン 今後とも、はてなブ