H&Co designs fonts for print, web, and mobile environments.
PixelMplus(ピクセル・エムプラス)というフォントを作成しました。 8bitゲーム機のビットマップフォントのような感じを出せるフリーフォントです。 特徴 ビットマップフォントのように見えるが、アウトラインのみのTrueTypeフォント。埋め込みビットマップは なし。ボールド体(太字)あり。 JIS第1・第2水準のすべての漢字を収録。ISO-8859-1(Latin-1)の文字も収録。そのほかにもいくつかの記号を追加。 ヿ〼 ヿ テハートのエレヘーター デパートのエレベーター 記号 紋章は☀♨☂ この武器は〠! 方向指示 ▷▶◁◀ トランプマーク ♤♠♢♦♡♥♧♣ 実体は単なるTrueType等幅フォント。テキストエディターで使用することもできる。 ライセンスは自由なM+ FONT LICENSE。 元にしたM+ bitmap fontsは10年以上前から使用されているので安
海外デザインブログCanva Design School Blogで公開された「10 Golden Rules You Should Live by When Combining Fonts: Tips from a Designer」の著者より許可をもらい、要点をまとめて日本語抄訳しています。 デザインやアートの世界には、変えることができないいくつかのルールがあります。基本ルールを知ることで、自由にルールを壊すこともできるようになります。では、フォントの効果的な組み合わせ方はどのように学べよいでしょう。デザインとしてうまく利用できると証明されている、いくつかのガイドラインを見ていきながら、実践的なデザインの基本を学んでいきましょう。 詳細は以下から。 01. デザインに合ったフォントを選ぼう 多くのフォントはカジュアルさや、陽気さ、真面目さ、エレガントさなど、他とは異なる雰囲気(英: M
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
普段何気なく目にする、文字。書籍や新聞、パソコンで読む様々な書体は、どのように生まれるのでしょうか?今回お話を伺うのは、有限会社字游工房の代表取締役であり、ヒラギノや游明朝体などのデザインで知られる書体設計士の鳥海 修(とりのうみ おさむ)さん。ユナイテッドアローズ社オリジナルの欧文書体も手がける鳥海さんに、これまでに制作した書体のこと、つくり手としての思い、そしてこれからについてお聞きしました。 Photo:Takahiro Michinaka Text:Yukino Yagi 書体の構想は、イメージの言語化から。 ー書体デザインの背景について教えていただけますか? 鳥海:書体制作に関わった当初は、生涯のうち一書体でもつくることができたら幸せだと思っていたんです。10年間の会社員時代は、一書体もつくっていませんでしたし。字游工房を設立した後、クライアントから「自分たちが自由に使える書
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか? モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな?ほら、このカタカナとかキモい。。」 「Webで文字詰めだと?無理なんだよあきらめな!」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
有名ハイブランドのロゴはロゴタイプのみのシンプルなものが多いです。シンプルながらすべてのロゴがブランドを象徴する圧倒的存在感を放つことに成功しています。そこには文字間に徹底的に拘るなどの秘密が隠されています。さてこれらのブランドロゴにはどのようなフォントが使用されているのでしょうか?気になる方も多いと思います。実際にどのようなフォントが使用されているのかを見ていきます。 LOUIS VUITTON | ルイ・ヴィトン 欧文フォントとしてはもっとも有名なフォントの一つです。Mac osでは標準インストールされているので馴染みのある方も多いはずです。CとOの丸みが印象的です。ルイ・ヴィトンのロゴはこのフォントを使用して、字間を巧妙に調整し美しいロゴに仕上げています。 CHANEL | シャネル 欧文フォントで一番と言っていいほど有名なフォントです。こちらもMac osに標準インストールされてい
デザイナーの道具箱 第1回 Font Awesomeの概要 この記事では、さまざなアイコンをフォントファイル形式にまとめたFont Awesomeを紹介します。多端末対応、Webパフォーマンス向上に、アドバンテージを持つ技術です。 Font Awesomeとは Font Awesome*は、使い勝手のよいアイコンをフォントファイル形式にして公開しているアイコン集です。Webで使用する際は、CSSのclassで特定のフォント(アイコン)を指定し、それを元にフォントデータが表示されるという仕組みになっています。 *注:Font Awesomeの開発 Font Awesomeの開発はGitHub上で行われています。米ツイッター社が提供しているUIフレームワーク「Bootstrap」のために作られているので、すでにご存じの方も多いかと思います。 SIL OFL 1.1のライセンスで公開されています
アプリの企画、制作 ウェブアプリからスマホアプリ、システムまで、要件に合わせて環境やプロジェクトチームの構築から行います。代表がNuxt.js好きです。 使用技術 フロントエンド HTML, CSS, movie, JavaScript, Vue.js バックエンド PHP, Node.js, Python DB MySQL, PostgreSQL, MongoDB, SQLite クラウド AWS, Firebase, Heroku, Netlify no code studio アプリ開発 Electron, Capacitor プログラミング教育 大人向けに自社開発のテンプレートを使ったレクチャーを、子ども向けにロボットを使った教室を行っています。 地域活性化支援 CivicTech(シビックテック)をはじめとして、政策提言のサポート、雇用創出の支援を行っています。
Font Awesomeとはアイコンを文字として扱うことを可能にしたツールです。画像ではなく文字なので、大きさや色などを変更することが可能!ところが説明は英語でかつ、ソースをコピーしてHTMLに書き込むなど、初心者にはなかなか難しいツール。そこで、今回はそんなFont Awesomeの使い方を、初心者でもわかるように簡単に解説してゆきます。 Font Awesomeとは? Font Awesomeとは、Web上でよく利用される上記のようなアイコンをアイコンフォントという文字として使うことができるツールです。画像ではなく文字なので、大きさ・回転・重ね表示、そして色までも変更することができるという優れもの!もちろん無料で、商用利用も可能です。 では早速、Font Awesomeの使い方をみてゆきましょう。 ダウンロードと設定方法 ⑴まずはFont Awesomeのサイトに飛んでください。 【U
デザイナーとして学ぶことができる重要なスキルのひとつは、書体を選択する力です。デザインの主要ポイントのひとつとして扱われることが多いフォント、書体は、デザインの仕上がりを良くも悪くもしてしまいます。 この記事では、これから学びたいひとに向けた書体をうまく選択する基本ルールをまとめてご紹介します。普段からよく利用しているフォント以外に、新しい組み合わせ方を詳しくみていきましょう。 デザインの目的をはっきりさせよう。 デザインをはじまる前に、目的はなにかきちんと確認しましょう。どのような情報を伝えたいですか。ウェブや印刷などどんな媒体を対象にしていますか。 優れているとされるデザインは、その目的に合わせてタイポグラフィーを合わせています。これは、タイポグラフィーが雰囲気や色調、スタイルを決める鍵となるからです。 たとえば、イラストを多用したグリーティングカードをデザインするとき、イラストのスタ
あなたがデザイナーであろうがなかろうが、「タイポグラフィー」に触れることなく終わる日など1日も無いだろう。 なぜなら文字とタイポグラフィーは切っても切り離せない関係であり、現代において文字こそが一番のコミュニケーションツールであるからだ。 タイポグラフィーは文字に雰囲気を纏わせるという形で文字と人間のコミュニケーションをより確実性の高いものにしてくれる。 私達が普段何気なく広告や商品のパッケージを見る時もその文字からだけではなく、実は使用されているフォントからも無意識的に情報を得ているのだ。 勘の鋭い方ならここでタイポグラフィーとブランディングが繋がったかもしれない。以前の記事「なぜ日本企業はブランディングに苦戦しているのか」でも紹介したように、ブランドの定義もまた“人間味”や”“雰囲気”といった言葉で説明することが出来るからだ。 このことからタイポグラフィーとブランディングには密接な関係
だいぶ前ですが、Illustratorでパスのオフセットを重ねがけすることで、アウトラインを取らないまま文字を角丸処理できるよ、という方法を記事にしました。 Illustratorで印刷物風のかすれの描き方 『印刷風の』というタイトルでしたが、このやり方はオフセットの数値を変えれば違ったイメージも出せるので、いくつかバリエーションを作ってみました。 パソコンをWindows8に買い換えたので、画像のフォントは遊明朝と遊ゴシックです。 違うフォントでは再現できないものもありますが、数値を微調整すれば近いものが出来ると思います。 ※アウトラインを取らずに文字の書き換えが出来ますが、入稿時には安全のためアウトラインを取って下さい(前回記事及びこの記事の最後の注意事項も参照して下さい)。 ※ある程度大きめの文字でやらないとオフセット効果が無効になってかかりません。 いろいろな角丸文字 細めにかけて
2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ!」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫!今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです!紹介する素材はすべて商用利用OK!参考になるデザインのWebサイトもいくつか紹介します!(あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw) ↑私が10年以上利用している会計ソフト! 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ
目次 やわらか・繊細系の日本語フォント 12種類 力強い太文字系の日本語フォント 8種類 手書き・毛筆系の日本語フォント 6種類 レトロ系の日本語フォント 3種類 コミック系の日本語フォント 2種類 民芸風の日本語フォント 2種類 変わり種の日本語フォント 4種類 フォントを利用する際は必ず規約の確認を 商用利用の可否や条件については調査し記載していますが、商用利用のみ有料版の購入が必要だったり、配布元への連絡だったりする必要なケースもあります。ご利用の際は、必ずフォント配布元サイトで利用規約をご確認ください。 1. やわらか・繊細系の日本語フォント 12種類 落ち着いた優しいデザインにマッチする、繊細なフォントを集めました。癖が強くなく使いやすいものが多いので、重宝できます。 イマジン・ヨコハマフォント イマジン・ヨコハマフォント ひらがな・カタカナに加え、横浜市に関連する漢字が使えます
Webフォントを使用して、Webサイトを制作すると、表現できるデザインの幅が格段に広がります。 何となく使用方法が難しいと思われがちなWebフォントですが、一度理解できれば意外に簡単です。 以下の記事でWebフォントの使用方法を解説したので、一読することをオススメします。 意外と簡単!Webフォントを理解しよう 今回は、日本語に対応しているWebフォントがダウンロードできるWebサイト25選をご紹介します。 1.Noto Sans Japanese https://www.google.com/get/noto/ Googleが提供しているフォントサイトです。 和文だけではなく、様々な言語の一般的なフォントが揃えられていますので、まず導入として使用してみることをおすすめします。 2.TypeSquare http://typesquare.com/ 日本で最も有名な和文フォントサイトです。
こんにちは! デザイナーのすーちゃんです。 みなさん、フォントはお好きですか? 私は大好きです! フォントについてはそんなに詳しくないのですが、最近フォントの本を3冊くらい買ってしまい、疲れたときにフォント辞典を眺めては癒やされています。 ということで、今回は特に制作でお世話になっているフォントをご紹介します! インストールフォント編 バナーやアイキャッチを作成する際に、よく使用するフォントです。 1.DIN Next Pro ドイツの工業規格のフォントです。デザイナーの方にはおなじみのフォントですね! 字面枠にしっかり収まっているようにカチッとした書体がなんとも言えません……! 特にコンデンスドはその印象が強いですね! ファミリーフォントにラウンドもあるのですが、雰囲気はそのままに印象がやわらかくなるので、こちらも重宝しています。 ちなみに私は、タイトルとサブタイトルでコンデンスドを使い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く