名刺を作りたい時や、自分のイメージ通りのバナーを制作したい時、フォントの雰囲気が合わなくて名刺やバナーの仕上がりが微妙になってしまうことってありますよね。 WEBデザインに大きな影響を与えるフォント。無料でも商用利用可能のフォントがたくさんあることはご存知ですか？ そんなWEBデザイン初心者の方に、商用利用が可能なフリーフォントをまとめました。 ※30種類のフォント一覧表は最下部に記載 1    フォントポにほんご ダウンロードはこちら http://yoshihisa.que.jp/fontopo/nihongo.html 2    ぼくたちのゴシック ダウンロードはこちら http://yoshihisa.que.jp/fontopo/index.html 3    ニクキュウ ダウンロードはこちら http://yoshihisa.que.jp/fontopo/nikukyu.htm

あるサイトで、アイコンフォントに Font Awesome を導入していました。 Font Awesome（現時点での最新バージョン 4.3.0）では 500 種類以上のアイコンが用意されていて、何も考えずに使用していると、woff ファイルで 70KB という結構な容量のフォントファイルを読み込むことになります。 実際にサイトで使用しているアイコンは数種類だけだったので、使っていないフォントを削ってフォントファイルの容量を軽くしてみることにしました。 IcoMoon か Fontello か アイコンフォントのサブセット化のサービスでは IcoMoon と Fontello という2つのサービスが有名です。 どちらも同じようなことができるようですが、細かい設定もできて使い勝手が良かった IcoMoon を使用しました。 Fontello は、ユニコードやアイコンの名前が Font Awe

デザイナーにとって、さまざまなプロジェクトや用途に合うフォントを持っておきたいところ。しかし無数にあるフリーフォントから、お好みの書体を見つけるのは、なかなか大変な作業です。 当サイトでこれまで紹介したフリーフォントより、目的やテーマ別に揃えたこの素材集を利用すれば、デザインの幅をグッと広げてくれるでしょう。紹介しているフォントの多くは、商用利用にも対応した素材となっているので、クリエイティブなアイデアを手軽に表現することができます。 当サイトでは、新しく公開されたフリーフォントを定期的に集め、紹介しています。こちらも参考にしてみてはいかがでしょう。 カテゴリ「フォント」を確認する

インターネットが家庭に普及し始めた四半世紀前、Webサイトはコンピュータの画面を介して「情報」を得るための媒体として活用されてきました。それは現在、さまざまなデバイスを介して「体験」を届けるプラットフォームとなり、その中で「文字」という要素が担う役割も変わってきています。今、その最前線に立つクリエイターはWebサイトの中で文字とどう向き合っているのでしょうか。 今回お話を伺ったのは、株式会社MONSTER DIVE（以下、MONSTER DIVE）の代表取締役 岡島将人さん。技術もクリエイティブも手を動かしモノをつくってこそ�—同社は岡島さんのそんな思いから設立された「職人とオタクを集めた集団」だといいます。 職人肌のこだわりとオタク気質な探究心が、モノづくりの原動力なんですね。 「本を読んでいるだけではいいモノはつくれません。勉強して、実際に手を動かしてコードを書いたりデザインして、触っ

This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice. Updated July 27, 2017 with new information on font-display. Updated August 14, 2017 with a link to a glossary page. Jump to: # Unceremonious @font-face font-display preload Don’t use web fonts Inline Data URI Asynchronous Data URI FOUT with a C

Typography for User InterfacesJun 21st, 2016Back in 2004, when I had just started my career, sIFR was the hottest thing out there. It was developed by Shaun Inman and it embedded custom fonts in a small Flash movie, which could be utilized with a little bit of JavaScript and CSS. At the time, it was basically the only way to use custom fonts in browsers like Firefox or Safari. The fact that this t

（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ

このブログでは本文に自作の「約物Webフォント」を試しに使っています。 要は、「←こんな感じに」（←約物が連続しても）、←自動的にアキすぎない体裁になるわけです。 特定の約物グリフが並んだらligaで合字グリフに置換しているだけ。 CSSで「約物Webフォントをフォント指定の先頭にする」「ligaが効くようにする」と、ちゃんと良い感じになってくれました。 カンタンなのでやってみると楽しいですよ！ Tweet

HuluやNetflix、Amazon Primeなどの動画配信サービスによって、海外ドラマは私たちにとってより身近となってきています。 海外ドラマのタイトルロゴには様々なフォントが使われており、英字のタイトルをデザインする際に参考になる点がたくさんありますので、近年人気だった海外ドラマをピックアップして、それぞれのフォントを20個ほどまとめてみました。 ※中にはオリジナルにデザインされたもので、完全一致ではないものもあります。 DAREDEVIL 元フォント：The Story So Far HOUSE OF CARDS 元フォント：Bourgeois Bold Cond FULLER HOUSE 元フォント：Full House Breaking Bad 元フォント：Cooper Medium / Helvetica Bold 再現フォント：Heart Breaking Bad GAM

Drop&Typeで試作フォントを生成するのに必要な時間は、約30秒。手描きした文字をスキャンしてアウトラインをとり、専用のドロップシートに収めてドロップするだけの簡単なステップで、オリジナルデザインの試作フォントを生成することができます。

2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。

欧文フォントを使ったものが多めですが、参考になるタイポグラフィーデザインが多数まとめられているギャラリーやwebフォントを利用して様々なデザインを表現しているプロジェクトなど、タイポグラフィーやフォントに関連するようなものを幾つかまとめてみました。 ちょっと特徴的なフォントがどのようにしてデザインに上手く取り入れられているかとか複数のフォントを用いた場合の組み合わせ方など勉強になる部分も沢山ありますが、とにかくフォント好きな人は見てて楽しいものが多数あると思います :) Typewolf フォントに関する有益な情報が多数まとめられているブログとしてご存知の方も多いと思います。 参考デザインのギャラリーでは使用されているフォント名だけでなくそれらをダウンロードできるページヘのリンクなども用意されており、他にもフォントに関するブログエントリーや便利なリソースなどの情報もまとめられています。 F

「新婚さんいらっしゃい！」や「探偵！　ナイトスクープ」などの番組タイトルを制作した職人、竹内志朗氏の著作本『テレビと芝居の手書き文字』がPDFデータとして無償配布中です。 竹内志朗氏は演劇の舞台装置のデザイン・設計と並行し、芝居やテレビ番組のタイトルやテロップを手書き制作しています。「新婚さんいらっしゃい！」や「探偵！　ナイトスクープ」「プロポーズ大作戦」「鬼平犯科帳」など、そのタイトルに見覚えのある人も多いのでは？ 竹内氏の著作本『テレビと芝居の手書き文字』は『舞台道具帳』と合わせて販売・配布してきたものの、現在は再版も完売し在庫がない状態。 出版当初の目的の「竹内志朗の行ってきた仕事、テレビ・舞台の裏方職業を皆様に周知していただく」を果たすため、このたびwebでの無償配布を行うことにしたそうです。 データは専用サイトの注意事項に同意した上で、メールフォームにより必要事項を記入、追ってダ

フォントはデザインにおいて、非常に重要な要素です。 プロのデザイナーが当たり前のようにやっていることが、初心者には見落とされていたり、実践されていないこともあります。 持っている日本語フォントがそんなに多くなくても、文字デザインの表現の幅を広げる日本語フォントの組み合わせ方を紹介します。 先週紹介したスライドと同じく、日本語デザイン研究会中部の勉強会でプレゼンされた日本語のタイポグラフィのスライドで、特別に掲載許可をいただきました。 DTPの勉強部屋（名古屋）で登壇しました 日本語デザイン研究会中部は、タイポグラフィの大切さと楽しさを伝えるため・学ぶための交流の場として結成されました。 スライドは全部で51ページ。 フォントに含まれている全ての字形がバランスよく、カッコいいものはあまり多くはありません。多くのデザイナーが使用している各フォントの特徴を理解し、漢字と仮名、そして英数字・約物・

こんにちは。デザイナーの廣澤です。 ヤフー社内のデザイナーが実施している取り組みのひとつをご紹介したいと思います。 ビジュアルデザイン推進WGの活動ヤフー社内では、ビジュアル設計黒帯の青柳を中心に、社内のビジュアルデザインに特化したデザイナーが有志で集まって、勉強会や交流会を通じてデザイナー同士のつながり、技術や知識向上をめざす事務局を立ち上げ、活動しています。 ビジュアル設計黒帯　青柳 その一環として、2015年8月26日、本社セミナールームに於いて、有限会社字游工房の代表取締役であり書体設計士の鳥海修さんをお招きし、講演会を行いました。 鳥海修さん 1955 年山形県生まれ。多摩美術大学GD科卒業。 1979 年株式会社写研入社。1989 年に有限会社字游工房を鈴木勉、片田啓一の３名で設立。 現在、同社代表取締役であり書体設計士。 株式会社 SCREEN ホールディングス のヒラギノシ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。