Submit Search
Upload
いまさら訊けないWebフォント入門
•
5 likes
•
20,606 views
Yuki Ishikawa
Follow
社内で餅を焼きながら勉強会やったときの資料です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 27
Download now
Download to read offline
Recommended
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/234/room ーーーーーーーーーーーーーーーーーーーーーーー
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
Derek Halpern のコンバージョン心理学によるウェブ・デザイン設計手法の紹介。 コンバージョンだけがウェブ・デザインのすべてではないが、 コンバージョンという視点からまとめるとこうなるという原理の解説。 A1603talk conversion-psychology-web-design-161219 (内容は160704と同じ)
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
2016年4月19日にシナップ社内で開催されたアクセシビリティ勉強会で使用したスライドです。
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
レスポンシブWebデザインの概要から実装の基本まで。
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
2016年9月2日に開催された「Adobe MAX Japan」にて、crema design黒野明子と株式会社タガス浅野桜が発表したセッションのスライドです。
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
2016年8月25日に開催されたイベント「Design-JP 第1回 勉強会 : プロトタイピングの回」で使用したスライドです。公開向けに編集した抜粋版となっています。
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
takayuki katumata
第20回リクリセミナー 「Webディレクターの頭の中」で、自身がチームづくりで意識していること、実践していることについてお話しました。
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
eriko yamada
Recommended
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/234/room ーーーーーーーーーーーーーーーーーーーーーーー
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
Derek Halpern のコンバージョン心理学によるウェブ・デザイン設計手法の紹介。 コンバージョンだけがウェブ・デザインのすべてではないが、 コンバージョンという視点からまとめるとこうなるという原理の解説。 A1603talk conversion-psychology-web-design-161219 (内容は160704と同じ)
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
2016年4月19日にシナップ社内で開催されたアクセシビリティ勉強会で使用したスライドです。
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
レスポンシブWebデザインの概要から実装の基本まで。
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
2016年9月2日に開催された「Adobe MAX Japan」にて、crema design黒野明子と株式会社タガス浅野桜が発表したセッションのスライドです。
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
2016年8月25日に開催されたイベント「Design-JP 第1回 勉強会 : プロトタイピングの回」で使用したスライドです。公開向けに編集した抜粋版となっています。
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
力也 伊原
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
takayuki katumata
第20回リクリセミナー 「Webディレクターの頭の中」で、自身がチームづくりで意識していること、実践していることについてお話しました。
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
eriko yamada
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
ADC MEETUP ROUND05 HTML5 Design Tools (http://www.adobe.com/jp/joc/adc/meetup/round05/)の「Dreamweaver CS6で作るレスポインシブWebデザイン」のセッション資料です。
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
Webデザイン概論の講義資料です。 主な対象は業務支援システムの開発されている方です。
Web design
Web design
kazuko kaneuchi
Webサイトの構築に際して、デザイナーの領域とされていたデザインのトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資料です。
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
Web業界発注制作の教科書 発売記念セミナーで使用したスライドです。発注者向けのWeb制作トラブルを回避するための事前確認ポイントなどを現場レベルでお話ししました。
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
WCAF vol.10 こもり資料
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
Yahoo! JAPAN 社内セミナー用資料
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
WCAN2015 Autumnのセッションスライドです。国内のCMS事情、案件の傾向でどのようなCMSを検討すべきかの参考になれば幸いです。
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
2013年9月21日に札幌で開催された「Director's Night」に登壇した際に使用したスライドです。 ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
顧客コミュニケーション・マーケティングリサーチ・ユーザーアンケートなどに使える最先端のWEBアンケートツール。しばらく無料です!⇒ https://creativesurvey.com/
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
2015/1/18のWeb Creator Conferenceで使用したスライドです。
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
進級展作品プレゼン
3 presen
3 presen
asaoeiji
WordCamp Osaka 2012
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
WordCamp Osaka 2012でお話した「今から始めよう!WordPressで作る女子ウケ★スマホサイト」セッション資料です。
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
2013/06/26(水) に開催した スタートアップのデザイナー4人が語る、新しい価値を生み出すデザインプロセス http://eventregist.com/e/SoDjxLSoKmRO の登壇用スライドです。 スクーのウェブサイトを一例に、学生の「感情」を根拠としたデザインプロセスをひも解いていきます。 http://schoo.jp/
感情から読み解くデザインプロセス
感情から読み解くデザインプロセス
Tomofumi Ueba
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/1038/room ーーーーーーーーーーーーーーーーーーーーーーー
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
「自分でイラストを描けたら良いのにな」と思ったことはありませんか? Illustratorなら、描きたいモチーフの「しくみ」に適切な機能をあてはめることで、複雑なイラストにも挑戦できます。絵を描くのは苦手だという方でも大丈夫です。 今回は実例を交えながら、ブラシ機能や描画まわりのツール、Adobe Captureの活用方法などを中心にご紹介します。 特にCC以降の機能は、イラスト制作の効率を格段に上げるものばかり。新・旧機能の合わせ技で効率よく、更に豊かな表現を目指しましょう! page2017のクリエイティブゾーンセミナーに登壇させていただいた際のスライドです。実演で解説した部分は概要のみ追加しました。 page2017 http://www.page.jagat.or.jp/ 「新規アートに基本アピアランスを適用」の詳細は「Illustrator アピアランスのキホン 〜流用編〜」の「「新規アートに基本アピアランスを適用」OFFで連続描画」でも解説しています。 http://hamfactory.net/illustrator/illustrator-appearance-copy/
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
More Related Content
What's hot
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
ADC MEETUP ROUND05 HTML5 Design Tools (http://www.adobe.com/jp/joc/adc/meetup/round05/)の「Dreamweaver CS6で作るレスポインシブWebデザイン」のセッション資料です。
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
Webデザイン概論の講義資料です。 主な対象は業務支援システムの開発されている方です。
Web design
Web design
kazuko kaneuchi
Webサイトの構築に際して、デザイナーの領域とされていたデザインのトーン&マナーの方向性を導き出すため、簡便な手法をまとめた資料です。
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
Web業界発注制作の教科書 発売記念セミナーで使用したスライドです。発注者向けのWeb制作トラブルを回避するための事前確認ポイントなどを現場レベルでお話ししました。
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
WCAF vol.10 こもり資料
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
Yahoo! JAPAN 社内セミナー用資料
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
WCAN2015 Autumnのセッションスライドです。国内のCMS事情、案件の傾向でどのようなCMSを検討すべきかの参考になれば幸いです。
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
2013年9月21日に札幌で開催された「Director's Night」に登壇した際に使用したスライドです。 ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。
Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
顧客コミュニケーション・マーケティングリサーチ・ユーザーアンケートなどに使える最先端のWEBアンケートツール。しばらく無料です!⇒ https://creativesurvey.com/
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
2015/1/18のWeb Creator Conferenceで使用したスライドです。
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
進級展作品プレゼン
3 presen
3 presen
asaoeiji
WordCamp Osaka 2012
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
WordCamp Osaka 2012でお話した「今から始めよう!WordPressで作る女子ウケ★スマホサイト」セッション資料です。
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
2013/06/26(水) に開催した スタートアップのデザイナー4人が語る、新しい価値を生み出すデザインプロセス http://eventregist.com/e/SoDjxLSoKmRO の登壇用スライドです。 スクーのウェブサイトを一例に、学生の「感情」を根拠としたデザインプロセスをひも解いていきます。 http://schoo.jp/
感情から読み解くデザインプロセス
感情から読み解くデザインプロセス
Tomofumi Ueba
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
What's hot
(20)
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
Web design
Web design
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
Web Design Process for The Future
Web Design Process for The Future
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Director's Night 20130921
Director's Night 20130921
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
3 presen
3 presen
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
感情から読み解くデザインプロセス
感情から読み解くデザインプロセス
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Viewers also liked
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/1038/room ーーーーーーーーーーーーーーーーーーーーーーー
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
「自分でイラストを描けたら良いのにな」と思ったことはありませんか? Illustratorなら、描きたいモチーフの「しくみ」に適切な機能をあてはめることで、複雑なイラストにも挑戦できます。絵を描くのは苦手だという方でも大丈夫です。 今回は実例を交えながら、ブラシ機能や描画まわりのツール、Adobe Captureの活用方法などを中心にご紹介します。 特にCC以降の機能は、イラスト制作の効率を格段に上げるものばかり。新・旧機能の合わせ技で効率よく、更に豊かな表現を目指しましょう! page2017のクリエイティブゾーンセミナーに登壇させていただいた際のスライドです。実演で解説した部分は概要のみ追加しました。 page2017 http://www.page.jagat.or.jp/ 「新規アートに基本アピアランスを適用」の詳細は「Illustrator アピアランスのキホン 〜流用編〜」の「「新規アートに基本アピアランスを適用」OFFで連続描画」でも解説しています。 http://hamfactory.net/illustrator/illustrator-appearance-copy/
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
hamko ig
WCK Meeting Vol.37|新春ライトニングトーク大会2016|2016.01.15
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
玄 中野
2015/10/29にリクルートライフスタイルで行われた「CREATORS LIVERTY#4」の登壇資料です。 グッドパッチのデザインへの向き合い方と、デザインカルチャーについて話しました。
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
2017年5月28日に開催されたABC2017Springでの講演資料
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
CAMPFIRE Design #1 デザインとビジネスにおいて発表された資料です。
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
Yahoo!デベロッパーネットワーク
第27回HTML5+JS勉強会(平成28年12月2日)で発表したスライド資料です。 Windows 10やmacOSの「游ゴシック」の搭載をはじめ、ウェブで利用できる日本語フォントの選択肢が広がってきました。従来の「MS Pゴシック」の落とし穴、フォント字形から理解するデザインの向き不向き、字間の調整ができるCSS「font-feature-settings」など、多岐にわたり2016年のfont-family事情を紹介します。フロントエンドエンジニアやHTMLコーダー、デザイナーに役立つ内容となります。
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
Yasunobu Ikeda
デザインにおける4つの基本原則を、ウェブデザインどのように応用すべきかをまとめたスライドです。
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
2013年1月18日 NPO法人トップエスイー教育センター, 第6回SE勉強会 ―アジャイルで実現するUX―
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
2016年9月2日(金)開催 http://www.event-web.net/adobemaxjapan/
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
swwwitch inc.
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 http://schoo.jp/class/1611/room ーーーーーーーーーーーーーーーーーーーーーーー
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Sasaki Kouhei
新作スライド ボッチなデザイナーがクラウドファンディングを始めようとしたら「それでは3200人あつめてください」と言われた件 - https://goo.gl/co5NRN 公開しました! ぜひコチラもお読みください! 読んでくれてありがとう!面白かったらぜひぜひシェアしてくれると嬉しいよ!(`・ω・´)b ダウンロードもプリントも配布もご自由にどうぞ!たくさんの人にみてもらえれば最高です! デザインが苦手な人ほどオススメ! Aさんはデザインはこうだという。 Bさんはデザインはああだという。 ああああああもう!!結局どっちが正しいんだよ!? そんな疑問がたった13ページで解決します! "デザイン"なのに真逆のことをいう人達がいるのは、 実はこういうことだった! もう、デザインが苦手なんてことない!
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
BP study #46
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
Viewers also liked
(15)
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
UXの考え方とアプローチ
UXの考え方とアプローチ
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Similar to いまさら訊けないWebフォント入門
2012年5月12日に青山ブックセンター本店で開催された欧文書体セミナーTypeTalks第10回「もっと知りたい!Webフォント」のスライドです。 ・・・ 【追記1】スライド10の「Arialは何と呼ぶ?」は、日本においてArialは色々な呼び方が流通しているという蛇足話で、正しい読み方を追求する意図はありません。統計データは当ブログのFacebookページで皆さんに行ったアンケート結果です。スライドのペラ1画像がひとり歩きしてしまっているため、この場で補足いたします。 【追記2】スライド62の「OpenTypeフォント機能に対応するブラウザ」は、現在Chromeも対応しています。 ・・・ 1. Webフォントとは? 1-1. Webで使えるフォント 1-2. Webフォントサービス 1-3. 利用者にとってのメリット 1-4. 制作者にとってのメリット 2. Webフォントの今 2-1. Webフォントサービスの今 2-2. 付帯・補助サービスの紹介 2-3. OpenTypeフォント機能が実現 3. Webフォントの課題 3-1. Windows上の表示問題 3-2. 使いたいフォントが選べない? 4. フォントブログのWebフォント 4-1. 現在使っているWebフォント 4-2. ロゴをWebフォント化 5. 本日のまとめ 5-1. 相性がよいサイトとは? 5-2. Webタイポグラフィとは? ・・・ ABCでabcを語ろう! TypeTalks 第10回 「もっと知りたい!Webフォント Webフォントの基礎が分かる“これまで”と、海外の最新事情から知る“これから”」 http://www.aoyamabc.co.jp/culture/typetalks10/
TypeTalks第10回「もっと知りたい!Webフォント」
TypeTalks第10回「もっと知りたい!Webフォント」
Kosuke Yamada
PHPを学習中の新人エンジニアがフレームワークについて調べた事をスライドにまとめました。(テスト投稿) 【参考URL】 <サンリオ事件>について http://rocketnews24.com/2015/06/28/601546/ Laravelを採用しているギークス株式会社様が『SHOW BY ROCK!!』のアプリを開発されていました。 <laravel女子は可愛い>について https://geechs-magazine.com/tag/entertainment/20151215 Laravelを使う方を調べていた時にこの記事を見つけ、「Laravelを使う女性は可愛い」と知りました。
新人エンジニアがフレームワークについて調べたこと
新人エンジニアがフレームワークについて調べたこと
Yosuke Kasagawa
LT駆動開発 #06で発表した資料です #LT駆動
プログラミング同好会とすごい合同勉強会
プログラミング同好会とすごい合同勉強会
nemumu
モバイルOSとWeb標準とそれらへのアプローチ
モバイルOSとWeb標準とそれらへのアプローチ
Kisato
heroku meetup#11新年会LTスライドのフルバージョンです。
Heroku meetup#11(フル)
Heroku meetup#11(フル)
Hideki Ohkubo
2015/11/20「a-blog cms DAY in NAGOYA 2015/11」にて、Webフォントサービスについて、CMSと組み合わせた活用事例についてお話をさせていただきました。
CMSと相性抜群のWebフォント 主要3サービスのご紹介
CMSと相性抜群のWebフォント 主要3サービスのご紹介
Risako Imai
Similar to いまさら訊けないWebフォント入門
(6)
TypeTalks第10回「もっと知りたい!Webフォント」
TypeTalks第10回「もっと知りたい!Webフォント」
新人エンジニアがフレームワークについて調べたこと
新人エンジニアがフレームワークについて調べたこと
プログラミング同好会とすごい合同勉強会
プログラミング同好会とすごい合同勉強会
モバイルOSとWeb標準とそれらへのアプローチ
モバイルOSとWeb標準とそれらへのアプローチ
Heroku meetup#11(フル)
Heroku meetup#11(フル)
CMSと相性抜群のWebフォント 主要3サービスのご紹介
CMSと相性抜群のWebフォント 主要3サービスのご紹介
More from Yuki Ishikawa
2018.04.21 PyData.Okinawa #34
Introduction to GPU Programming in Python
Introduction to GPU Programming in Python
Yuki Ishikawa
2017.10.01 @ufo_ocha @__kyrieleison__ 結婚パーティで LT をしたときの資料です
新婚旅行を支える技術
新婚旅行を支える技術
Yuki Ishikawa
2017.03.19 だいたい新卒エンジニア向け技術交流会 vol.10 ※ ラマダーンについて真面目に解説するものではありません
ラマダーン入門
ラマダーン入門
Yuki Ishikawa
2017.02.14 Gaiax 社内エンジニア勉強会
ステージング環境のつくりかた
ステージング環境のつくりかた
Yuki Ishikawa
2016.06.14 Mackerel User Group Meeting Vol.1
マッカレル de おうちハック
マッカレル de おうちハック
Yuki Ishikawa
2016.06.04 (だいたい)新卒エンジニア向け技術交流会 vol.7
スタートアップのくせになまいきだ
スタートアップのくせになまいきだ
Yuki Ishikawa
2016.05.08 Kyoto.js #10 DEMO: https://github.com/hoto17296/http2-example
JavaScript over HTTP/2
JavaScript over HTTP/2
Yuki Ishikawa
2016.03.11 Gotanda.js #3 at freee
コンポーネント時代の CSS 設計
コンポーネント時代の CSS 設計
Yuki Ishikawa
2015.12.16 JS オジサン #6 二日目
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
2015.12.12 (だいたい)新卒エンジニア向け技術交流会 vol.5
闇の魔術に対する防衛術
闇の魔術に対する防衛術
Yuki Ishikawa
2015.12.08 Meguro.es #1
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Yuki Ishikawa
2015/10/29 GX 社内勉強会
Apple に依存する僕の生存戦略
Apple に依存する僕の生存戦略
Yuki Ishikawa
2015/10/28 Gotanda.js #1
gulp芸
gulp芸
Yuki Ishikawa
2015.10.15 GX 社内エンジニア勉強会
アニメーションしたい
アニメーションしたい
Yuki Ishikawa
2015.08.12 GX & MF 合同勉強会
趣きのある Bot
趣きのある Bot
Yuki Ishikawa
BigQuery と GoogleAppsScript を使って Bot に支出管理をさせてみました
Bot に家計を任せる
Bot に家計を任せる
Yuki Ishikawa
2015.06.18 GX社内勉強会
時をかけるほと
時をかけるほと
Yuki Ishikawa
(だいたい)新卒エンジニア向け技術交流会 vol.3 での発表内容です
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Flux の紹介です
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
2015.05.04 宇宙zsh #2 での LT 資料です
peco活用術
peco活用術
Yuki Ishikawa
More from Yuki Ishikawa
(20)
Introduction to GPU Programming in Python
Introduction to GPU Programming in Python
新婚旅行を支える技術
新婚旅行を支える技術
ラマダーン入門
ラマダーン入門
ステージング環境のつくりかた
ステージング環境のつくりかた
マッカレル de おうちハック
マッカレル de おうちハック
スタートアップのくせになまいきだ
スタートアップのくせになまいきだ
JavaScript over HTTP/2
JavaScript over HTTP/2
コンポーネント時代の CSS 設計
コンポーネント時代の CSS 設計
React+fluxを導入した話
React+fluxを導入した話
闇の魔術に対する防衛術
闇の魔術に対する防衛術
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Apple に依存する僕の生存戦略
Apple に依存する僕の生存戦略
gulp芸
gulp芸
アニメーションしたい
アニメーションしたい
趣きのある Bot
趣きのある Bot
Bot に家計を任せる
Bot に家計を任せる
時をかけるほと
時をかけるほと
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
peco活用術
peco活用術
いまさら訊けないWebフォント入門
1.
いまさら けない Webフォント入門 2015/02/04 GaiaX社内勉強会 @hoto17296
2.
あじぇんだ 1. Webフォントとはなにか 2. Webフォントのよさ 3.
Webフォントのつかいかた
3.
1. Webフォントとはなにか
4.
Webサイトでフォントを 変えたいときにどうするか font-family: "メイリオ", sans-serif; クライアントに 依存
バリエーション 少ない
5.
好き勝手に フォントを使いたい
6.
@font-face ルール @font-face { font-family:
'ほにゃ字'; src: url('honya.ttf'); } p { font-family: 'ほにゃ字'; } フォント 定義 使用
7.
独自フォントが 使える!!! ( ゚д゚) ほにゃ字Re http://honya.nyanta.jp/
8.
(余談) 実はIE4から使える
9.
時代が Microsoft に 追いついた
10.
2. Webフォントのよさ
11.
クライアントに依存せずに 好きなフォントが使える
12.
「いや、でも別に 標準のフォントで 困ってねーし...」
13.
それだけじゃない
14.
画像の代わりになる • 単色のアイコンなんかは Webフォントにしたほうがいい • color
プロパティだけで色変えれるの最高 • Retinaディスプレイでも荒くならない • 例: http://hoto.me/ (SNSのアイコン)
15.
画像アイコンだと Retinaディスプレイで 荒くなってダサい
16.
Cooooool!!!
17.
ラスタ画像で Webデザインする 時代は終わった
18.
これからは ベクタ画像の時代
19.
3. Webフォントの つかいかた
20.
つかいかた 4パターン • CDNなWebフォントを使う •
Webフォント用に配布されている フォントを使う • 普通のフォントをWeb用に変換して使う • フォント自作
21.
CDNなWebフォントを使う • Google Fonts
が有名 • サーバにフォントファイルを 置いておかなくていいので一番手軽 • 日本語のバリエーションが皆無
22.
Webフォント用に配布されている フォントを使う • アイコン用Webフォントは結構多い • Bootstrap3
の Glyphicon • IcoMoon (https://icomoon.io/) • 日本語フォントはあまりない印象
23.
普通のフォントを Web用に変換して使う • 自由度高い • 規約に注意が必要 •
何も考えずに日本語フォントを 変換すると重すぎて死ぬ • サブセットの切り出しをするとよい
24.
フォント自作 • がんばってください
25.
今日できなかった話
26.
今日できなかった話 • フォントのフォーマットの話 • ちょっと前までは大変だった •
最近は woff 使っとけばいいっしょ、て感じ • フォント変換・サブセット切り出しの仕方 • 武蔵システムは神 • Unicode の私用領域の話
27.
Enjoy!!!
Download now