デザイン基礎フォントの知識はデザイナーの常識!書体とフォントの基本を学ぼう!【残り8名】2020年5月スタート17期生募集中たにまちくんレイアウトは考えられるようになったけど、文字はどうやって扱っていけばいいの?フォント?ゴシック?覚えることが多すぎてわからないよ...トリペン先生フォントやタイポグラフィの世界はとても奥深いから、始めから全部覚えなくても大丈夫だぞ!大体の用語くらいは知っておこう!レイアウトの次は、デザイン制作をするうえで欠かすことのできない「文字」のデザインを学びます。文字の基本となる形や用語などから覚えていきましょう。和文の代表的な書体を覚えよう。まとめ:書体はそのデザインに合わせて最適なものを選ぶフォントの基本:「フォント」と「書体」を理解するデザインを考えていく上で欠かせないのが「文字」の要素です。文字はそれだけでロゴやタイポグラフィとして、デザインができるとても奥深い要素です。学ぼうと思えばどんどん情報がでてくるので、難しいと感じてしまう方もきっと多いでしょう。最初から全ての用語を理解する必要はありません。書体とフォントの基本的な情報を覚えていきましょう。次の項でもう少し詳しく紹介していきます。書体とは?書体とは、文字を一定のルールで統一したデザインにした文字の形のスタイルのこと。タイプフェイスとも呼ばれます。例:明朝体、ゴシック体、サンセリフ体など......。1セットになったもの」のことを本来表していました。インターネットの普及に伴って、書体とまとめて文字のスタイル全般を表すような言葉になりました。厳密に両方の違いをきっちり分ける必要はありません。Webの業界では主に「フォント」の方がよく使われます。多くの方はフォントと書体を同じような意味で使っていることがほとんどです。会話の中で何のことを指しているのか判断できるように、用語は両方とも覚えておきましょう。一つのフォントを基本にして、バリエーションを増やしたものをまとめて「フォントファミリー」といいます。以下のように派生していることが多いです。最初のうちは細かい部分まで覚えなくても大丈夫ですが、「ウェイト(太さ)」などは、用語としてよく使われるので覚えておくといいでしょう。ウェイト(太さ)が違うものオブリック・イタリック(斜めに傾いているもの)コンデンスト(文字幅の狭いもの)エクステンデッド(文字幅の広いもの)など...和文の代表的な書体を覚えよう。具体的にどんな書体の分類があるのかを、和文と欧文のそれぞれを見ていきましょう。「和文」とは日本語の書体で、「欧文」は英字の書体のことを指しています。筆で書いたような「はね」と「はらい」「山」があり、縦線が太く、横線が細いのが特徴。日本語らしい書体は明朝体です。Aオールド明朝はんなり明朝など...○ゴシック体すべての線が同じ太さで書かれている、直線的で力強い印象を与える書体。Webの書体はゴシック体が採用されていることが多く、視認性や可読性が高い書体です。小塚ゴシック源ノ角ゴシック見出ゴMB1など...○丸ゴシック体ゴシック体の角を丸めたフォント。通常のゴシック体よりも柔らかく、優しい印象を与えます。明朝体よりも筆で書いたような形が強く、書道の見本・教科書などに使われる書体。...欧文の代表的な書体を覚えよう!欧文の書体は、書体をつくるために必要な文字数が少ないため、和文の書体に比べてかなり多くの種類があります。和文と同じように明朝体やゴシック体のようにある程度の特徴で分けることができます。英字についている「ひげ」「ウロコ」のような装飾(セリフ)がある、欧文書体でもっともスタンダードな形。セリフがある書体は「ローマン体」と呼ばれます。...○サンセリフ上記のセリフ体と異なり、装飾(セリフ)がない書体。ゴシック体とよく似ていて、線の太さがほぼ同じで印象的で力強い印象の書体です。手書きの筆記体で書かれたような高級感がある書体です。レストランのメニューや、ブランド品などによく使われるフォントです。○スラブセリフ体セリフの角が四角になっている、力強くゴツっとした書体。丸ゴシックのように角が丸く、柔らかく優しい印象を与える書体。最後に文字をキレイに読ませるというよりも、ロゴやジャケットなどのアクセントを与えるのに効果的な書体です。気をつけたほうがいいフォントの豆知識を紹介していきます。商品のイメージや雰囲気に合わないフォントを選択してしまうことです。フォントを選択するときは、最初からこれを使うと決めてかかるのではなく、いくつか候補を選んで比較して見ることが大切です。▽白と黒の画面で気になるフォントを並べてみよう。印象が違うことがわかる。フリーフォントを商用利用する場合は、必ず規約をチェックするフリーフォントとは、一般企業や個人、団体などが制作したオリジナルのフォントのことです。世の中にあるスタンダードな書体をベースに、近年様々なフリーフォントが登場しています。中には、かなり特徴的な形のデザインをしているフォントも増えており、無料で提供されているものも多いことから、かなりの需要があります。フリーフォントには「商用利用」できるものと、できないものがあります。広告のバナーや販促物に使用する場合は、必ず事前に「商用利用」が可能かチェックする必要があります。このあとで紹介するAdobeの「TypeKit」に登録されているフォントは、商用利用できます。Adobeの「Typekit(タイプキット)」とGooglefontって何?「AdobeCC」に登録している方が使える「Typekit」と「Googlefonts」について紹介します。Webでfontを扱う際に必ずでてくる用語になるので、どんなものなのか簡単に理解していおきましょう。○Adobeが提供している「Typekit(タイプキット)」について「Typekit(タイプキット)」とは、AdobeCCの対象のプランに登録している方が使える、フォントのサブスクリプションサービスです。和文・欧文ともにかなり多くのフォントが登録されているので、好きなものをダウンロードして使うことができます。サイトで使用できるフォントを提供するサブスクリプションサービスです。出典:https://helpx.adobe.com/jp/typekit/using/what-is-typekit.html○「Googlefont(グーグルフォント)について「Googlefonts」とは、Googleが提供しているフォントのオープンソースサービスです。Webサービスやサイトを作る際に、どの環境から見ても同じフォントで表示されるようにするには、このGooglefontsに登録されているフォントのソースコードをダウンロードすることができます。Webデザインをしていると、必ずお世話になるサイトなので、ぜひ知っておきましょう。まとめ:書体はそのデザインに合わせて最適なものを選ぶ書体とフォントの基本的な用語や要素は整理できましたか?書体一つでデザインの印象が大きく変わることもあるので、自分でフォントを決められる場合は、そのデザインや商品に合わせたフォントを選択しましょう。最後にこの記事で学んだことをまとめます。デザイン制作では、文字を調整したりデザインや目的に合わせたフォントを吟味することはとても大切です。フォントの選び方次第で、デザインの良し悪しが決まってしまうこともあるので、たくさんのフォントを楽しみながら学んでいきましょう!書体にはそれぞれ一定のルールで決められた特徴がある。フォントファミリーは、1つの書体を元にバリエーションを増やしたものフォントに慣れるには、多くのフォントを並べて比較してみる商用で使う場合、フリーフォントの扱いには気をつける。トリペン先生いろんなフォントを見て、触りながら覚えていけばOK!次回は、文字をバランスよく見せるための「カーニング」の調整方法について学んでいくぞ!【残り8名】2020年5月スタート17期生募集中クリエイターズ・ファクトリーでは毎週、個別の説明会・相談会を開催しております。受講生の9割が全くの未経験からWeb業界へ進んでいますので、不安を感じている方でも安心して受講いただけます。詳しく聞きたい方は、説明会にご参加下さい。Mr54475519flag受講コースについてhow_to_reg先輩インタビューsmsよくあるご質問まずは説明・体験会にご参加ください説明会では、ヒアリングをしてスクールの説明をします。お悩みの事や質問などは、お気軽にお聞きください。