タグ

ブックマーク / jdash.info (5)

  • Webフォントを使ってIllustratorで作った文字組みをWebで再現する方法《SVG→HTML変換》

    はてなブックマークで話題のページでこんな記述がありました。(以下は原文ママ) 文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか?それを実装するエンジニアの工数は効果に見合ったものでしょうか?ユーザーはどんなメリットが得らるのでしょうか?何をもって美しいタイポグラフィとするのでしょうか? Dear Web designer(Medium)なるほど。 でも、作り手の苦労はクライアントからしたら結構どうでも良くないですか? クライアントも、何の考えもなしに「紙とWebって同じようにできませんかねぇ」と言っているのではなく、(レイアウトやタイポグラフィ含め)印刷物で表現した世界観をWebでも同じように再現できれば、「紙のカタログは凝っているけど、ウェブはちょっと違うな…(メイリオフォント)」みたいな世界観の断絶

    Webフォントを使ってIllustratorで作った文字組みをWebで再現する方法《SVG→HTML変換》
    masakaz77
    masakaz77 2016/03/19
  • Google Analyticsの画面で何を見るべきか分からないウェブ担当者が、まず考えるべきポイントとは

    ウェブ担当者の悩みは「どこを改善すべきかわからないこと」 ウェブ担当者として、より良いウェブサイトを作ろうとして、まず悩むことは「どこを改善したら良いかがわからない」ことではないでしょうか。 改善のヒントとなるものとして、ウェブアクセスの解析ツールがあります。これはウェブサイトを閲覧した人がどのような行動をしたかを調べることができるので、ウェブ担当者であれば使っている人も多いでしょう。 Google Analyticsを使っていればウェブの改善点がわかるのでは? ウェブアクセスの解析ツールとして有名どころはGoogle Analyticsです。 無料で使用できるので、とりあえずウェブサイトに入れてある人も多いと思います。 「これがあればウェブ解析も簡単なはず! ここにヒントがあるはずだ!」ということで、Google Analyticsのレポートページを開くと様々な指標が踊っています。 この

    Google Analyticsの画面で何を見るべきか分からないウェブ担当者が、まず考えるべきポイントとは
  • Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)

    目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし

    Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox(Windows)
  • ≡ ←ハンバーガーメニューのデザインでクリック率は違う(2014年のA/Bテストの結果から)

    スマートフォン対応サイトで右上や左上にある「≡」こんな形の三線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。(サイトイメージは「グラシン工房」から) まずはBootstrapの標準に近い形式。三の線があるだけのパターン。 次に三の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三線を線(border)で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付

    ≡ ←ハンバーガーメニューのデザインでクリック率は違う(2014年のA/Bテストの結果から)
  • 日本語ウェブフォント「Noto Sans Japanese」の指定方法(なぜか日本語に適用されない方向け)

    概要 ▶ ウェブフォント「Noto Sans Japanese」(源ノ角ゴシック)を指定したつもりが、うまく指定できていない方向け。ドキュメントはよく読まないとダメですな。 ●Noto Sans Japaneseの指定方法はDTP Transitを新潟グラム × DTP Boosterの懇親会の時に、スピーカーの鷹野さんに「Noto Sansってウェブフォントの指定の仕方が分からないんですよ~」と質問したら「あ、それならDTP Transitのサイトソースを見てみて」と言われました。って、今さらって感じですが、その内容について書きかけだったので、書き終えて年末を終わろうかと。 実際、DTP Transitのサイトソースを見たら指定の方法は分かりました。 DTP Transit でも、この指定の方法って正式なモノなのか?って思ってしまいました。 (見たい人は http://www.dtp-t

    日本語ウェブフォント「Noto Sans Japanese」の指定方法(なぜか日本語に適用されない方向け)
    masakaz77
    masakaz77 2015/04/17
  • 1