デザイン|基本の作り方コンテンツへスキップこのwebサイトの先進的な機能は、ブラウザーのJavaScriptを有効にする必要があります。コメントを残すこんにちは。前回はタイポグラフィのコレクションをしに外出してみようよ、というお話で終わりましたね。タイポグラフィを収集する方法はそれだけではありません。さりげに買ったお菓子のパッケージ、あるいは深夜に観たアニメや映画の中にも優れたタイポグラフィが埋もれています。本当は、タイポグラフィで注意する基本項目について解説しなければならないのですが、それは後でも大丈夫なので、今日は別のお話をしておきます。筆者が思った、「これイイ!」というタイポグラフィを紹介します。デザイン系の書物にそう書いてあったり。そのとおりではありますが、そんなに肩に力を入れなくて良いですよ。ご自分で、「あっ、これイイ」と少しでも思ったら、チェックしておきましょう。できるなら、収集しコレクションにしておきましょう。スーパーで買ったお菓子のパッケージでも良いです、深夜に観たアニメや映画の文字の使い方でも良いです。ご自分が正直に「これイイ!」と思った何かは要チェックです。ちなみに、筆者が最近「イイ!」と思ったのは、明治のチョコレートのパッケージ。スタイリッシュで、これならパッケ買いしてしまいますね。チョコは大人味で、もちろん美味しいです!明治のチョコレートのパッケージ。画面構成・色のバランス、フォントの選択、紙の選択も見事ですね。「新世紀エヴァンゲリオン」のタイポグラフィ1990年代後半に、「新世紀エヴァンゲリオン」の深夜再放送がありました。あの直後、エヴァっぽいタイポグラフィがグラフィックデザインの業界の中でちょっとしたブームでした。極太の明朝体を使い、極端なまでに文字の大小のメリハリをつけ、時には長体をかけ、文字の配置の仕方は「第○話」のテロップのような。エヴァ的な影響が見られるタイポグラフィは、あの直後、巷のリーフレットやカタログで散見できました。当時筆者が在籍していた事務所のデザイナーも用いてました。黙っていようと、デザイナーならあの文字の組み方を見ればわかりますよ。「あなたもエヴァンゲリオンを観たのね」と。あの手の文字の配置の仕方や効果的な明朝体の使い方は、それ以前から「ぽい」ものならありました。エヴァでは随分キャッチーなデザインに昇華し、センセーショナルでした。「新世紀エヴァンゲリオン」をとりまくこうした一件は、タイポグラフィが優れていた一方、それに感動し食いついてしまったデザイナーも多かったのだということを示していると思います。筆者もデザイナーとして心躍らされた一人です。それだけ、あのタイポグラフィがオーラを放っていたといことでもあります。いった優れたタイポグラフィは日常に潜んでいるのですよね。日常の中でも「これイイ!」ってなってしまうデザインは、見過ごさないようにしたいものです。ちなみにエヴァで使用しているあの極太明朝のフォントですが、フォントメーカー「フォントワークス」の「マティスEB」です。画像出典:「フォントワークス」サイト(https://fontworks.co.jp/products/font/evamatisse)映画のタイトルも要チェックです映画のタイトルにも秀逸なタイポグラフィがかなり潜んでいます。映画好きの方なら、ちょっと気にして見て見ると良いですよ。タイポグラフィの中で重要な要素に「字詰め」があります。これは文字と文字の間のアキを調整することを指します。丁寧に「文字詰め」と言ったりもしますし、Adobeのソフトに倣って「カーニング」と呼んだ方が今時しっくり来るかもしれませんね。この「字詰め」ですが、これが絶妙なタイポグラフィの例があります。1970〜80年代の角川映画のタイトルロゴのデザインが、まさにその例です。太いゴシック体に字詰めキツキツのタイトルロゴです。文字と文字がくっつかんばかりで1970〜80年代の流行だったのでしょうが、「字詰め」の重要さが良くわかる例です。「野生の証明」(高倉健主演)とか「復活の日」(草刈正雄主演)とか、ナイス字詰めです。書体自体は太いゴシック体のシンプルなデザインだったりしますが、映像に合った緊張感があります。タイトルロゴのデザインは、装飾を施して「盛る」手法もあります。禁欲的に字詰め一つの器量でここまでやれてしまうこともあるんですね。それはまるで、シンプルな坊主頭で通しながらいい男で居続けた、高倉健さんにも通じるところがありますね。コメントを残すこんにちは。フォントデザインにご興味をお持ちの皆さんは、タイポグラフィについてもご興味をお持ちになるのではないでしょうか?「タイポグラフィ」は簡単に言ってしまえば、文字や文字周りのデザインですが、そもそも、グラフィックデザイン全般において重要な要素となっています。今日はタイポグラフィのお話をしておこうかと思います。よれば、「印刷物の体裁に影響を及ぼす、文字の書体、大きさ、配列のしかたなど、視覚効果の総称。最初に言ったように、文字や文字周りのデザインと考えて差し支えないでしょう。書体そのもののみならず、文字のレイアウトも含み、「字詰め」や「行間」の調整もその要素です。文字を含むグラフィックデザインのジャンルであれば、タイポグラフィは避けて通れません。グラフィックデザインの様々なジャンルのデザイン要素となっています。グラフィックデザインはタイポグラフィ抜きに語れないのです。それを考えれば、タイポグラフィを制すればグラフィックデザインをも制することができる、と言えるわけです。タイポグラフィの基本タイポグラフィ、つまり文字周りのデザインについてですが、基本中の基本だけのお話にしておきます。いうと、デザインに正解はない、というのが私のデザインについての考え方なので。時代とともに正解を新しく考案していくのがデザインとも言えるでしょうし。デザインツールの使い方と異なり、私が考えている「こうあるべき」というデザインの理想を誰かに押し付けることには、ほとんど意味がないでしょう。そんなこともあるので、基本中の基本だけのお話にしておきます。・適切な書体を選ぶ・適切な字詰め行間の調整をする・若い層向けなら本文小さめ・字詰めキツキツでOK・中高年層向けなら本文は平均の大きさ以上・字詰めはキツくしすぎない・まずタイトル周りのデザインをしっかり決めてしまう・なるべく読みやすい字切りにするタイポグラフィで注意する基本項目はこんなところです。上記項目について、詳細を解説したいと思いますが、いきなり理論に行くのはやめておきましょう。理論通り作業したからといって、デザインがうまくいくわけでもないですから。それよりも、資料集め兼がね遊びに行きましょう!資料集めに出かけましょうデザインで何が大事かというと「カッコイイ!」とか「カワイイ!」とか、そういったワクワク感だと思います。いった感覚的な何かが伝わるデザインは、生き生きして見えます。自分の感覚というものを確かめる作業をしてみましょう。なりますが、まず、気になったタイポグラフィのコレクションをしてみましょう。遊びの感覚で資料集めに出かけてみましょう。資料集めなら、インターネットでも良いしピンタレスト巡りをしてピンをして回っても良いですが、お散歩がてらあるいはウィンドウ・ショッピングがてらでも構いません、外出をおススメします。デパート等の好きなショップに行ったりすると、偶然素敵なカタログやリーフレットに出会えたりするものです。気に入ったものはいただきましょう。万引きはいけませんが、「自由にお持ちください」という無料のカタログ等も置いてありますので。世の中、変テコリンなデザインの何かが結構あるもので、普段見過ごしていたりもします。歩いていると、そういったデザインに気づいたりして、驚きがあります。そんな感じで自分のコレクションが出来て行くわけですが、そういったことをしているうちに、自分の感覚が解って来ます。自分のデザインの理想はこんなかんじだなあ、と。「こんなデザインがしたい」と思い理想を形にする時、「本文って通常どれくらいの大きさなのだろう」などと気になる部分が出てくるかと思います。その時、先ほどあげた、タイポグラフィで注意する基本項目をチェックしてみても遅くはありません。肩の力を抜いて、ラクに楽しく行きましょう。タイポグラフィは本来面白いものなのですから。シャレてますね!続きは次回。コメントを残すこんにちは。Miniのメトリクス関連情報の設定の途中まで解説しましたね。「キャップハイト」「xハイト」の設定をしてみましょう。Miniでの表記は「xハイト」)」の設定の前に、ちょっとメトリクスのお話を復習しておきますね。「フォントの作り方(13)〜メトリクスの話〜」で触れてますが、従来の「欧文書体設計のためのライン」において言う「アセンダー」と、フォント作成ソフトで言う「アセンダー」は、意味が異なります。Miniにおいても例外ではありません。厳密には「ディセンダー」についても同じことが言えます。Miniにおいて言う「ディセンダー」は、それぞれ指している意味が厳密には異なります。フォント作成ソフトを利用した現在のフォントデザインの潮流では、一つ一つのグリフが、emスクエアよりも一回り小さくデザインされている例を多く見かけます。Miniにおいて「ディセンダー」と言う時に、従来の意味とは厳密にはズレが生じてきているようです。従来の「欧文書体設計のためのライン」においては、「ベースライン」から「ディセンダーライン」までの部分を「ディセンダー」と呼んでいました。Miniでは「ベースライン」から「ディセンダーライン」までを指して「ディセンダー」とするのではなく、「ベースライン」からemスクエアの下端までを指して「ディセンダー」としてしています。Miniを使用してデザインする際、emスクエアよりも一回り小さくグリフをデザインする現在の潮流に従うならば、「ディセンダーライン」の一周り外側までを含んで「ディセンダー」と呼ぶことになってしまっています。Miniにおける場合とでは、このように、細かな部分では意味が異なります。モヤモヤするかもしれませんが、従来使われて来た文言の意味の細々した部分は、時代とともに変化してしまうことは自然なことでもあります。Miniにおいて言う全く同一の意味とは限らないので、ちょっとだけ注意しておきましょう。Miniのメトリクス関連情報の設定に戻ります。「キャップハイト」は「ベースライン」から「キャップライン」までの高さを指します。「xハイト」は「ベースライン」から「エックスライン」までの高さを指します。「元AI」では「キャップライン」と「エックスライン」をガイドラインとして描いておきましたね。あとはスムースだと思います。Miniのメトリクス関連情報の「キャップハイト」「xハイト」の欄に入力してください。「Alfalfa」では、「キャップハイト」が「667」、「xハイト」が「493」。小数点以下の端数は整理しました。「イタリック角度」ですが、デフォルトのままにしておきます。それから、「アラインメントゾーン」は一番右の黒いボタンを押しておきましょう。Miniのメトリクス関連情報の設定グリフの画面はこんな感じですグリフの画面を開いてみてください。Miniのグリフの画面こうしたガイドがあれば、正しい位置を踏襲したフォントがデザインできているかどうか、確認しながら作業ができますね。小文字もデザインする場合、「フォント情報」設定は以上のように、「キャップハイト」「xハイト」も測定した数値を入力しなければなりません。ここまで出来れば、小文字なしのデザインの時と同じ作業です。Miniに読み込ませていきます。Miniの使い方(後編)〜」あたりからが良いでしょう)を読んでみてください。コメントを残すこんにちは。今回は、アルファベット・フォントの大文字に加え小文字もデザインする際のお話の続きです。Miniに読み込ませるためのAIデータ=「元AI」作成まで進みました。MiniにAIデータを読み込ませる作業です。Miniを使った作業の流れについておさらいしますね。Miniに読み込ませてフォントデータ化して完成です。忘れてしまっていたら、「フォントの作り方」の過去記事((3)あたりからがいいでしょうか)を読み返していてください。前回までの解説では、「元AI」の作成まで進みました。小文字のデザインもするならばということで、「元AI用紙.ai」ドキュメント上に、キャップライン、エックスライン、ベースラインをガイドラインとして描きましたね。MiniにAIデータを読み込ませる時にスムースということでした。スムースなのかは、次の作業のお話の中で。Miniを起動しての作業となります。Miniを立ちあげ新規のドキュメントを開いたら、最初にする作業がありましたね。「ファイル」→「フォント情報」を選び各項目の設定をします。「ファミリー名」の設定、「クレジット関連情報」の設定、「バージョン」の設定は、大文字だけのデザインの場合と同様に進めてしまってください(忘れてしまってたら、「フォントの作り方(10)」を復習しましょう)。次に、メトリクス関連情報の設定があります。「アセンダー」「キャップハイト」「xハイト」「ディセンダー」の数値を入力しなければなりませんが、「元AI用紙.ai」ドキュメント上にキャップライン、エックスライン、ベースラインをガイドラインとして描いたことで、スムースに進むはずです。Miniを使用する手順はここだけ異なります。大文字だけのデザインの場合と異なり厳密に設定しなければならない部分です。メトリクス関連情報の設定は厳密にメトリクス関連情報には、「ユニット数(UPM)」「アセンダー」「キャップハイト」「xハイト」「ディセンダー」「イタリック角度」がありましたね。大文字だけのデザインの場合は「キャップハイト」「xハイト」はデフォルトのままで任意の数値が入ってれば良かったのですが、小文字もデザインする場合は、厳密な数値を入れます。復習を含めつつ順を追って説明しますね。「ユニット数(UPM)」についてです。これはデフォルトのまま「1,000」でOKです。Miniにおけるグリフのマスの高さはemスクエアの高さと同一視でき、「ユニット数(UPM)」という単位で示されます。Miniにおけるグリフのマスのユニット数は、仕様で1,000となっていますが、1,000のままにしておきます。Mini上の単位「ユニット」の大きさは、AdobeIllustrator上での単位「ポイント」の大きさに一致します。Miniにおけるグリフのマスのユニット数である1,000ユニットに合わせるためです。Mini上のグリフのマスの高さである1,000ユニットにピッタリ重ねられます。次に「アセンダー」と「ディセンダー」です。Miniにおける数値になります。Miniのメトリクス関連情報にそのまま入力すればいいわけです。「元AI」のベースラインからドキュメント上端までの高さが「アセンダー」、ベースラインからドキュメント下端までの高さが「ディセンダー」となります。高さを測った時「元AI」上で端数が出ていたら、切り捨てるなどして調整しましょう。「アセンダー」と「ディセンダー」の高さの合計は1,000になるようにします。emスクエア(の高さ)=アセンダー+ディセンダーでしたね。端数が出た時の調整では、「アセンダー」と「ディセンダー」の高さの合計は1,000になるようにしなければならないのです。グリフのマスの高さは1,000ユニット(UPM)です。元AIデータの高さ1,000ポイントは、これに合わせています。次は「キャップハイト」「xハイト」の設定ですが、続きは次回。VIBES/デザイナー・フォントクリエイター。デザインスタジオアウラコミュニケーションズ代表。東京都を拠点に、グッズ、グラフィック、フォントのデザインを中心に活動しています。HYBRID」シリーズは、初版からフォントクリエイターとして参加。他「月刊MdN」等のメディアでも掲載多数。公式WebサイトでDLできます。このサイトについて「フォント×デザイン|基本の作り方」は、フォントやグラフィックなどのデザインについて、作り方を基本から解説するサイトです。私のデザイナー歴も、気がつけばもう20年越し。デザインビギナーの方や、勉強をしすぎて基本がわからなくなってしまった方、そんな方達に私が伝えられることがあるのかもしれない・・・ふと思いました。それは、生業としてのデザインの現場で得てきた手法であったり、仕事の進め方であったり。デザインを通した遊びであったり。基本を覚えれば、あとは自分なりのアレンジや別の新しい手法をみつけられます。すれば「自分の作り方」を得ることができます。わたしもこのサイトを作ることによって基本を振り返ることもできるわけで、それも良いなあと思いました。役に立っても立たなくても、まずは基本からやってみましょう!お問い合わせE-Mail:info@fontxdesign.netご連絡はE-Mailのみで受けつけております。