文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ
Posted by NAGAYA on Mar 9th, 2017 こんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか？ 馴染みがあるのは、横方向に対して中央寄せを行うtext-align: center;やmargin: 0 auto;。では縦方向のときは？となると…途端に「なんだっけ」と止まってしまう方もいるかと思います（私です）。 そこでCSSの「中央寄せ」について、レスポンシブWebデザインにも対応しやすい7つの方法をまとめてみました！ 当記事で紹介していく方法はすべて、下記のHTMLを共通して使用していきます。 <div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod t
新人必見！倍速かつ高品質なバナーを作るためのコツを全公開します - Qiita
（この投稿は2013/10/02に書かれたものです。nanapi TechBlogから転載しました。） はじめに こんにちは、nanapiデザイナーの永田ゆにこです。 nanapiではタイアップ記事なども扱っているため、バナーを作る機会も多くあります。今回はわたしが実践している「倍速かつ高品質なバナーを作るためのコツ」をまとめて紹介します。 貰ったワイヤーは見過ぎない 一番はじめのコツとして、貰ったワイヤーや、参考にしてと渡された別バナーなどを見過ぎないことです。そのままの構成に引っ張られ、レイアウトのアイディアを出す邪魔になってしまいます。ワイヤー内の必要な要素だけを別の場所にメモし、極力何度も見ないようにします。 メイン文言とサブ文言の調整 時にはワイヤーなしで入れる文言等の要素も任されることがあります。 nanapiのライフレシピからPR記事へ、内部→内部の導線の場合を例とした場合、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
