共創するためのデザイン批評 - Speaker Deck

2021/02/26 20 users Speaker Deck デザイン批評 figma etc

Transcript 共創するためのデザイン批評 2021.02.26 Takanori Oki @Front-End Study #4 「いま考えるユーザー体験とデザインの世界」 自己紹介 • UI designer at ClassDo • Organizer of Web Platform Study Group • Figma, Web Font, 11ty, etc… • 最近引っ越しました 2 デザイン批評の基本 3 デザイン批評の 基本 • 批... 続きを読む

Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗｜note

2021/01/25 10 users Note Core Web Vitals tsuj 影響 方法

だれかWebのチョットワカル人、 「(日本語など大容量の)Web FontのCore Web Vitalsへの影響 使い続ける方法とその是非」 を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vita... 続きを読む

Puppeteer で静的サイトの Font Subsetting | blog.jxck.io

2020/09/07 10 users puppeteer サブセット Noto Sans こん 当初

Intro Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。 Web Font の静的サブセット 本サイトで提供している Web Font は当初、文字を事前に選定して生成したものを使っていた。 Noto Sans の Web Font 対応とサブセットによる最適化 当時はコン... 続きを読む

pplogのGemfileを眺めて気になったやつ - けんちゃんくんさんのWeb日記

2015/01/07 28 users Gemfile pblog pplog メトリクス 数値

pplogのGemfile - pblog が公開されていたので眺めながら、気になったやつを調べてみました。 garb Google Analytics API の Ruby クライアント。管理画面とかで使ってるんですかね。 数値だけもってきて他のメトリクスと合わせて表示できると便利そうなのであとで試してみよう。 inuicon-rails なんだこれ？と思ったらWeb Font!!! 便利だ。 ... 続きを読む

Evil Icons·すっきりしたデザインのSVGアイコン集 MOONGIFT

2014/12/31 58 users MOONGIFT カスタムフォント icons Evil 難点

Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます（IEにおいてはIE4から使えます）。難点としては作り手のスキルが必要ということでしょうか。 もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを紹介します。 Evil Iconsの使い方 Evilなんて言いますが意外とすっ... 続きを読む

IcoMoon·pplogの中で使われているアイコンフォント（Web Font） MOONGIFT

2014/07/17 16 users MOONGIFT IcoMoon アイコ pplog.net

最近は画像でアイコンを表示する代わりにWeb Fontを使うケースが増えてきました。Font Awesomeをはじめとして、公開されているものを使うのは容易ですが、自分のために新規で作成するというのは難しい印象があります。 そんな中、参考にしてみたいのがIcoMoonです。pplog.netの中で使われているアイコンフォントになります。 IcoMoonの使い方 こちらがフォントです。かわいいアイコ... 続きを読む

時刻表っぽいフォント — DiaPro

2014/03/29 941 users DiaPro Opentype 本領 フォント 記号

DiaPro の特徴 DiaPro は印刷用だけでなく、ヒントというスクリーン表示最適化情報も持たされ、Web Font としても本領発揮することができます。 たとえば乗り換え案内サイトや携帯アプリでも本領発揮できそうです。 DiaPro の記号は OpenType の合字（リガチャー）として定義されています。 そのためフォントの適用ができない場合（サーとエンジンのSEOなど）でも可読性があります... 続きを読む

Glyphr - ここまで出来るとは！Webベースのフォントエディタ|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2014/03/06 39 users フォント プログラミング ソフトウェア エンジニア 普段

フォントエディタとしては十分な機能ですね！ Web Fontの影響もあって、フォント自体の魅力が見直されています。特徴的なフォントはもちろん、プログラミングしやすいフォントや可読性高いフォントなど普段使いできるものを知っていると重宝するでしょう。 そんなフォントをWebベースで作成、編集できるのがGlyphrです。HTML5で作られており、自由にフォントの作成が可能になります。 Glyphrの使い... 続きを読む

Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる | 歴史雑談録

2012/12/20 89 users Fireworks SVG 家紋 戦国武将 Photoshop

どうも、松田直樹@まぼろし でございます。 当方、実はWeb制作が本業でして、このような記事を書くハメになってしまいました。（いや、喜んで書いてますよ） 「Fireworks」ってのは Photoshop のようなグラフィックツールでございまして。 Web制作に特化した機能が豊富だったりで Webな方々には多く使われていたりするのですが、僕も右に倣えで頻繁に使用しているわけです。この Firewo... 続きを読む

200を越えるアイコンが揃ったBootstrap向けWeb Font「Font Awesome」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2012/06/15 295 users MOONGIFT アイコンパック Font Awesome

Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 0 続きを読む

無料で使えるCSS3のwebフォント・Google web fontからシンプルでカッコイイフォントまとめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2012/01/26 127 users カッコイイフォント Webデザインクリップ CSS3 無料

Google Web Fontとは 通常、ブラウザで表示する文字に適用できるフォントは、そのパソコンにインストールされているものだけです。 ところが、Web上のサーバー側にあるフォントを利用して、オシャレなフォントが手軽にデバイスフォントとして利用できてしまうのがWebフォントです。 中でも“Google Web Fonts”では、多数のフォントのリストから好きなフォントの種類・ウエイトを選ぶと利... 続きを読む

CSS3のWeb Fontを使ってみたよ。 | Ginpen.com

2011/02/28 112 users Ginpen.com fonts フォント CSS3 マシン

英語だけですが……、Google web fontsのリソースとGoogle Font APIを使うと、簡単にWeb Fontを使って、文字のまま装飾する事ができます。Web Fontって？CSS3で追加される機能で、サーバーに置いたフォントを使ったデザインを作れるようになるものです。今までもフォントを指定することはできましたが、利用者のマシンにそのフォントがインストールされていないと無意味でした... 続きを読む

Google Font API で手軽に始めるフォント遊び : could

2010/05/20 412 users レンダリング 作り手 could コントロール タイミング

共有ボタンと検索がページ上に移動しました。もし、じっくり記事を読みたいという方は一番右の「読みモード」ボタンをご利用ください。 googleデザイン Google Font API で手軽に始めるフォント遊び CSS ファイルをリンクするだけで手軽に Web Font を楽しめる Google Font API。その手軽さはフォントのレンダリングのタイミングのコントロールまで及んでおり、作り手とし... 続きを読む