あなたはデザインを見る目と判断する知識を備えているか、勉強にもなるUIデザイン検定問題 -Can’t Unsee | コリス

2019/01/30 87 users UIデザイン 1px コリス ライン 正しいデザイン

面白くて勉強になるUIデザイン検定問題を見つけたので、紹介します。 2つのUIデザインが表示され、どちらが正しいデザインかを選択するゲームです。 デザインは、見る目を養うことも大切です。1pxのライン、文字詰め、ツラ合わ...記事の続きを読む 続きを読む

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA

2016/11/30 1086 users font-feature-settings プロパティー

「Webでは文字詰めはできない」と諦めていませんか？ 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つされています。 そんな文字詰めですが、HTMLでも実はCSSの font-feature-settings プロパティーを指定するだけで 自動カーニングができます 。ほとんどのブラウザがサポートしており、実務で... 続きを読む

【フォントの些事】第2回 フォントのボディとPhotoshopでの文字詰めについて | 株式会社LIG

2015/04/23 91 users Photoshop フォント 些事 フリーフォント ボディ

どうも、デザイナー兼イラストレーターのもりたです。 前回の「【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識」で次回予告したものがうまくまとめられなかったので、今回は第3回で予定していた、Photoshopのフォントと文字ウィンドウについて書きます！ 普段仕事でPhotoshopを使ってる人でも、文字ウィンドウはその数値が何を指しているのかよくわからないまま使ってい... 続きを読む

綺麗な文字組は『文字詰め』から | フォントの話 | つみきブログ

2015/03/13 45 users フォント つみき 文字組 文字 見栄え

つみきのデザイナー若月です。フォントの話 第10話。 今回は文字詰めについて。 文字詰めとは、文字同士の間隔を調整する事で、主に見出しやキャッチコピーの見栄えを整えるために行う技法のことを言います。 Htmlの本文は意図した文字組みができないため、Webデザイナーには文字詰めが不得意な人が多い印象があります。 僕もあまり得意ではないので、おさらいの意味も込めまとめました。 なぜ文字詰めが必要なのか... 続きを読む

デザイナーは文字詰めに命をかけよう　～和文と欧文のフォーマットの違いから考える～ | ACTZERO - 株式会社アクトゼロ

2013/06/27 194 users 明朝体 欧文 ACTZERO 欧文書体 和文書体

先週は明朝体とゴシック体について書きましたが、今週は和文書体と欧文書体について書こうと思います。 フォントには日本語の漢字、ひらがな、カタカナで構成された「和文書体」と、アルファベットで構成された「欧文書体」があります。二つの書体は、文字の形状の違いから文字のフォーマットも違います。 それぞれのフォーマットから、文字間隔の詰め方について考えてみましょう。 和文書体のフォーマット 和文書体は【仮想ボ... 続きを読む

ワンランク上のデザインにはかかせないPhotoshopの文字詰め「カーニング・トラッキング」についてのまとめ | クリエイティブメモメモ

2013/04/18 534 users Photoshop クリエイティブメモメモ カーニング 文字

ワンランク上のデザインにはかかせないPhotoshopの文字詰めについてのまとめ記事です。デザイナー目線で特に「カーニング」「トラッキング」の使い方について説明しています。こんにちは。今日も元気にPhtoshopと戯れます井畑です。 今回はPhotoshopの文字詰めに使うツールについてちゃんと調べてみました。 今では息をするように文字詰めをしていますが、デザイン初めたての時は勝手が分からず苦労し... 続きを読む

文字詰めの次はベジェ曲線をマスターできるゲームだと・・・？！ | IDEA*IDEA

2011/11/09 129 users IDEA Compare ベジェ曲線 ベジェ スコア

ちと出遅れた感がありますが、なんとも楽しいので。前回ご紹介した「文字詰めゲーム」に続き、「ベジェ曲線ゲーム」が登場したようです（DTP-Transitさんに教えてもらいました）。 ↑ ピンクの丸をドラッグしてベジェ曲線を調整していきます。 ↑ 適当に調整して「COMPARE」するとスコアと正解が・・・むずいｗ。 ベジェは正解が見えにくい微妙なところなのであれですが、腕に覚えのある方は是非どうぞ！ ... 続きを読む

デザインに必須の「文字詰め」をゲーム感覚で勉強できる『Kern Type』 | IDEA*IDEA

2011/10/10 561 users IDEA Compare Kern Type 文字 ゲーム感覚

あ、確かに楽しいｗ。DTP Transitさんで教えてもらいましたよ。文字詰めをゲームっぽく勉強できるサイトです。 ↑ こういうのが出題されるのでマウス or キーボードで文字詰めをします。できたら「Compare」で回答と比較できます。 ↑ こんな感じにどこがどうずれたかわかります。今回は100点もらったぜー。 文字詰めは感覚的にさっと出来るといいですよね。こういうところでセンスを磨くのもいいか... 続きを読む

Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き

2011/08/31 833 users 注意書き タイポグラフィー Webデザイナー DTP 名刺

タイポグラフィーデザインの基本、文字詰めなどから、レイアウト手法まで学んだことをまとめてみました。私はWebデザイナーなので、DTPデザインは苦手です。でも、ここで学んだことは、WebもDTPも関係なくデザインの幅を広げてくれる内容でした。主にタイポグラフィーのレイアウトについてです！私はDTPデザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを... 続きを読む

fladdict » HTMLで文字詰めするタイポグラフィー用JS

2011/02/27 392 users fladdict 字詰め jQuery zip スクリプト

HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。 実行はとても簡単。jQueryと一緒にhtmlにロードして、FLAutoKerning.pr... 続きを読む

[Webデザイン] 文字組みについて本気出して考えてみた :: Stocker.jp / diary

2011/02/16 2402 users Flash Stocker.jp diary 立場 背景

これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もな... 続きを読む

シロクマデザイン室 | 文字詰めについて考える　書体設計・組版・日本語

2006/11/30 163 users 日本語

続きを読む