文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
ABテストが難しい場合の施策効果の評価・推定方法
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。サイエンス統括本部でデータ分析による社内サービスの課題解決支援をしている関口です。 ヤフーではたくさんのABテスト（※1）が常に行われており、サービス改善に活かされています。しかしながら実際には、さまざまな理由からABテストができないことがよくあります。本記事では、そのような場合にどのようにして施策の効果を評価・推定するかについて、具体的なケースからアイデアを紹介していきます。 なお今回はYahoo!ショッピングを題材にしたケースばかりですが、アイデア自体は汎用的なものとなっています。 ※1： ABテストはウェブサービス上のUI改善、機械学習モデル改善、機能追加etc.といったさまざまな施策が、KPIにどれくらいのイン
難解なソフトウェアをデザインする人にこそお勧めしたいOOUI（オブジェクト指向UI）
みなさまこんにちは。ヤフーでデータソリューション事業のUI/UXデザインを担当している、横内です。 2022年11月に弊社が運用するデータ可視化ソフトウェアのDS.INSIGHTで人流データを分析できるPlace機能を大幅アップデートしました。その際使用したOOUIという設計手法から得られた学びをプロジェクトの実例を交えながらご紹介します。 OOUIとは そもそもOOUIとは何者でしょうか。OOUIとは、Object Oriented User Interfaceの略語で、通称オブジェクト指向UIと呼ばれています。 オブジェクトとはその名の通り「役割を持ったモノ」を指す言葉です。例えばお店で買うクロワッサンや、ECサイトでカゴに入れる衣服など、その場の実体あるなしにかかわらず、私たちがモノとして認識できる対象のことを指しています。 この、ユーザーが認識できるモノ（オブジェクト）を起点にUI
25年続くYahoo!ニュースを支える、Figmaを用いたデザインシステム
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記事では、Figmaの利用に至った背景や、運用し続けられるものにする工夫、デザインシステムによってデザイン業務がどのように効率化されたか、お伝えします。 Yahoo!ニュースが抱えていたデザインにおける課題と解決方法 この章では、Yahoo!ニュースが当時抱えていた複数のデザイナーがデザイン
データをデザインするということ 〜 データビジュアライゼーションの方法
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog データ領域、サイエンス領域のデザイン責任者兼クリエイティブディレクションを担当している駒宮大己(コマミヤヒロキ)です。私たちのチームでは、ヤフー・データソリューションサービスをはじめ、Yahoo! JAPAN研究所、サイエンスを活用した最先端技術のインターフェイスデザイン、ヤフーを利用されるお客様のデータ保護やプライバシーに関するUXデザインを担っています。 私たちはビッグデータという、まだ正解のない新しい領域のデザインをしています。その上でビジュアライゼーション時に自分自身が意識していること、学んだことを、チームメンバーの奥村奈々(オクムラナナ)とともに紹介いたします。 ヤフー・データソリューションとは 私たちが主として担当して
フロントエンドから取り組むデザインシステムの改善 #UI
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
ヤフーのスクラム開発実践者の経験年数ごとの学習方法の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ アジャイルコーチの荒瀬です。 ヤフー、および関連会社のアジャイル開発支援や研修を担当しています。 今回はヤフーのスクラム実践者の学習方法についてお話しします。 イベントや研修の中で、スクラムの勉強方法をいろいろな方から質問されることが多かったので、記事にするとより多くの人の役に立つのではないかと思い執筆することにしました。 また、せっかく書くのであれば、ヤフーの中にいるさまざまなスクラム実践者の話も交えると、経験年数別に、より参考になりそうな書籍、セミナーや研修を紹介できるのではないかと考え、ヤフーのスクラム経験者にも協力いただいています。 スクラムを始めた頃の自身のことを考えながら、こういう記事があるといいのにと思
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
複雑な乗換体験を直感的に！ 乗換案内アプリのデザイン
これらを鑑みると、 アプリの画面上では乗り入れ箇所で路線色が変わり、誤って降車するリスクがある 行き先が異なる複数の乗客に対して、駅員さんは「直通運転」であることはアナウンスできても「乗換不要」という案内はできない アプリの画面を見ているのは本人のみ、かつ目的地まで目視できるので「乗換不要」と伝える方が有益 このような経緯から、あえて「乗換不要」としています。 手法は大事、ユーザー視点はもっと大事 文言はサービス内で表現のズレが起きないよう、用語辞典を作成しています。「ルート/経路」「電車/列車/鉄道」など。ただし意味が伝わりづらい箇所では、表現のズレを許容しています。注意しなければならないのは、このようなフレームワークや手法などを優先して、ユーザー視点を見失わないようにすることです。 ワイヤとビジュアルを並行して行うことでUX品質を高める 路線情報チームのデザイナーは、ワイヤフレームとビ
モリサワ/ヤフーデザイナー座談会 第3回もじもじ勉強会を開催しました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフー株式会社メディアカンパニーの廣澤梓です。 不定期に文字関係のデザインおよびサポート業務をしています。 2019年2月13日、LODGEにて、株式会社モリサワの皆様をお招きし、「もじもじ勉強会 -モリサワのフォントデザイナーが語る！ フォントの作り方と使い方-」を開催しました。 ヤフーとモリサワのデザイナーを交えて⾏った「作る⼈・使う⼈」というテ ーマのセッションを中⼼にご紹介します。 もじもじ勉強会とは ヤフーでは社内のビジュアルデザイン勉強会「もくもく勉強会」を実施しておりました。そこから派生した文字をテーマとした勉強会を「もじもじ勉強会」と題し、不定期で開催しています。 今回はモリサワのフォントデザイナーの方
「本気ではじめるiPhoneアプリ作り」という本を執筆しました
概要 アプリを作り上げていくにはさまざまな基礎知識が必要になるわけですが、本書ではiOSアプリ開発において重点的に押さえておくべき基本をまとめつつ、実際にApp Storeへリリースできるアプリを開発できるようになるまでを爆速で支援するように書いています。 最終的にはWeb API（インターネット通信を使ったデータ取得の手段）を行いながら、ヤフーショッピングの商品を検索することができる「商品検索アプリ」を開発できるようになります。 通信を行うアプリはiOS入門者には難しいといわれています。しかし、通信を行う方法を学習すると、作ることができるアプリの種類やアイデアを爆発的に増やすことができます。世の中のさまざまな課題を解決するアプリを考えられることは素晴らしいことですし、とても楽しいものです。 そのためヤフーが提供するWeb APIを利用してアプリ開発を行うことができるようになるところまで到
ひとりの開発者から始まった、ヤフーのヒートマップとは
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、データ＆サイエンスソリューション統括本部、企画の舩水です。 私は社内で開発された分析ソリューションの利用推進やサポートを行う業務を担当していました。その分析ソリューションの1つにヒートマップという分析ツールがあります。ヒートマップとは、ウェブサイト上でのユーザーの行動をサーモグラフィによる温度分布のように色の濃淡で可視化して表す分析手法です。ご存じのとおり、サーモグラフィとは物体の表面温度の高い部分を赤、低い部分を青とし画像化されたものを指しますが、分析におけるヒートマップでは、ウェブサイト上でよく利用される部分を赤、利用されていない部分を青としてデータ処理し、色によって可視化したものを指します。下の図を見ていただくと
Unicodeを斬りたい
※2014/4/17 記事の内容に関していくつか訂正させていただきました。 ご指摘いただいた皆様ありがとうございました。 誤字脱字を修正しました。 ソースコードの間違いを修正しました。 BOMの記述を分かりやすい表現に修正しました。 合字に関する記載を追記いたしました。 こんにちは。 Yahoo! JAPANで通知プラットフォームの開発をおこなっています佐々木海（@Lewuathe）と申します。 普段は全社向けのPush通知プラットフォームやメール配信プラットフォームの開発、保守をしています。通知というのはPush通知にしろ、メール配信にしろ基本的には「テキストデータ」を送ることになります。プラットフォーム内ではこれらのテキストに対してさまざまな処理をかけることになるのですが、さすが日本語といったところでしょうか、一筋縄ではいかない部分が出てきました。具体的にはUTF-8でエンコーディング
「ヤフーvsクラスメソッド iOS 炎の7番勝負」ヤフー側の発表スライドを公開します #yxcm
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、「ヤフーvsクラスメソッド iOS 炎の7番勝負」という勉強会を開催しました。 http://connpass.com/event/5159/ おそらく業界初となる対決形式の勉強会で、7つのテーマで各5分のLTを行いました。 1人5分の持ち時間では説明しきれない部分もありましたので、 補足スライドも含めてヤフー側全セッションの発表資料をすべて公開します！ ▼発表を見逃した方はUstアーカイブをぜひご覧ください！ Ustream前編：//www.ustream.tv/recorded/44215492 Ustream中編：//www.ustream.tv/recorded/44217060 Ustream後編：//www.us
iOS 7勉強会 全セッションの資料と動画を公開します！ #ios7yahoo
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、iOS 7に関する勉強会をヤフーで開催しました。 http://connpass.com/event/3497/ 世界の注目するiOS 7がテーマということもあり、250席があっという間に満席。 Ustream配信でも多くの方に見ていただき、大盛況の勉強会となりました。 参加者の方からのリクエストをいただきましたので、全セッションの発表スライド、ソースコードをまとめて公開致します！ ▼発表を見逃した方はUstアーカイブをぜひご覧下さい！ Ustream前半：//www.ustream.tv/recorded/39618130 Ustream後半：//www.ustream.tv/recorded/39619493 Toget
第二回！楽天・ヤフー・リクルート共催のハッカソンでお小遣いを稼ごう！
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!デベロッパーネットワークです。 前回、Hackathonとしてはたくさんの参加者に集まっていただき、大好評だった楽天WEBサービス、リクルートさんと共催で開発者の皆さんのお小遣い稼ぎに役立つアフィリエイトAPIのTips紹介とその勢いで開発しちゃおう！という「アフィリエイトソン」の第二回を開催いたします！ しかも、前回参加者による開発した作品が実際に売り上げた金額で優勝者を決定し、そのナレッジも参加者間で共有する試みです。前日の前夜祭では懇親会も行いますので、参加に興味はあるけど仲間が見つからない方も気軽にご参加いただけます！ 前夜祭
HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)-
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは、EveryWhere開発部の久下孝順、高橋淳史と申します。 先日リリースされました、iPad用Webアプリ「えほんのじかん」（iPad版）の紹介をさせていただきます。 このサービスの内容はごく単純で、たくさん並んだサムネイルから気に入ったものを選択すると、アニメーションと朗読によって構成された絵本風の動画が流れる、というものです。 もともとこの「えほんのじかん」の元祖は、「テレビ版」でした。 インターネット対応テレビ向けに提供しているテレビ版Yahoo! JAPANやYahoo! JAPAN for AQUOSなどからみることができます。 iPad版より作品収録数は多く、30作品以上を掲載しています。 テレビ
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
iPadでHTML5でWebアプリを作ってみました。
こんばんは。LatLongLabの河合（@inuro）です。 ようやくiPadが日本でも発売されましたね。入手された方もたくさんいらっしゃることかと思います。 ヤフーではこのiPad国内発売にタイミングを合わせ、Yahoo!ラボで「yubichiz」というiPad専用の地図Webアプリを公開しました。 Yahoo!ラボ - yubichiz（ゆびちず） 詳しい機能はリンク先ページを見ていただくとして、 地図に書かれた文字（大塚家具、とか紀伊國屋書店、とか）をタップするだけでその店舗の詳細情報が表示されます 地図を指でなぞるだけで、なぞったラインの距離を測定できます 同様に地図を指でなぞるだけで、道沿いのお店を検索できます といった特徴があります。 またyubichizは、App Storeからダウンロードするいわゆる「アプリ」ではなく、HTML5を用いてiPadのSafari上で動作するW
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOS 8/Swift 勉強会 全セッションの資料を公開します #ios8yahoo
