フォント

3. フォントの基本と選び方

デザインを作っていて、フォント選びで迷ったことはありませんか?フォントは「声」の役割を果たすとも言われ、伝えたいメッセージの印象を大きく左右します。同じ言葉でもフォントが違えば、まったく異なる印象を与えることもあります。 ターゲットや伝えたい内容・印象に合わせたフォント選びができるようにしましょう! フォントの持つ印象 フォントは見た瞬間に「印象」や「感情」を伝える力を持っています。同じ言葉、商品、サービスでも、フォントが違えば伝わり方はまったく変わります。 フォントが与える印象の例 だからこそ この2つに合わせてフォントを選ぶことがとても大切です。 フォントの種類 デザインでよく使うフォントには、大きく分けて「日本語フォント」となどの「欧文フォント」があります。そして、それぞれに代表的な“スタイル”があります。 1. 日本語フォント 日本語フォントには主に2つのスタイルがあります ゴシック体:線の太さが均一で、現代的・力強い印象。チラシやWebでよく使われます。 明朝体:線に強弱があり、はらいやとめが美しい。上品で落ち着いた雰囲気を演出できます。 2. 欧文フォント 欧文フォントにも主に2つのスタイルがあります セリフ体(Serif):縦線が太く、文字の端に飾り(ヒゲ)があり、クラシックで信頼感のある印象に。 サンセリフ体(Sans Serif):線の太さが均一で飾りがなく、すっきりとしたシンプルな形。モダンで洗練された印象を与えます。 3. フォントの太さによる印象の違い 同じフォントでも太さによって印象が変わってきます。 太さ 印象 代表的な用途 太いフォント 力強さ・インパクト・エネルギッシュ 男性的・カジュアル・元気な印象に。見出しや低価格帯向け 細いフォント 洗練・繊細・上品・都会的 女性的・高級感・静けさ。本文や高価格帯商品向け フォントの選び方 ターゲットに合わせフォントの選び方 1. 子供向けフォントの特徴 ① 丸みのある形(丸ゴシックなど)② 太めの線(ウェイト)③ 楽しい・ポップな印象のもの④ カラーとの相性も重視 2. 女性向けフォントの特徴 ① 丸みのあるシルエット② 細めの線で繊細な印象(特に明朝体)③ 手書き風やカリグラフィー風④ エレガントなセリフ体(欧文) 3. 男性向けフォントの特徴 ① 直線的でシャープな印象② 太めのウェイト

2. 作文字「TypeCraft」「TypeExtrude」「TypeGradient」の使い方

TypeCraft(タイプレイアウト) TypeCraftは、文字をスタイリッシュなレイアウトに自動配置するアプリです。デザイン性の高いテキストアレンジが簡単にできます。 ・おしゃれなテキストデザインがすぐに作れる・SNS投稿やバナーに最適 TypeExtrude(立体文字) TypeExtrudeは、文字に立体感(3D効果)を加えられるアプリです。シンプルなフォントでも奥行きのあるデザインが可能です。 ・文字にインパクトを与えたいときに便利・3DポスターやYouTubeサムネイルに活用可能 TypeGradient(グラデーション文字) TypeExtrudeTypeGradientは、テキストにグラデーション効果を追加できるアプリです。単色ではなく、カラフルな表現が可能になります。 ・文字にインパクトを与えたいときに便利・カラフルな文字で目を引くデザインが作れる・ロゴやヘッダー画像に活用しやすい

3. 色のコントラスト

1. コントラストとは コントラストというのは広い意味で「差」「対比」を指します。デザインでは、色、形、大きさなどの視覚的な差異のことをまとめて「コントラスト」と呼びます。配色においては、文字と背景の“明るさの差”(=明度差)を指し、読みやすさ・伝わりやすさが決まる重要なポイントです。 比較例 下記の2つのバナーを見比べてみてください。AとBどちらのバナーが読みやすいでしょうか? A B Aの方が読みやすいと感じますよね。ではなぜAの方が読みやすいのか?答えは明度差にあります。 2. 明度差の確認方法 以下に明度差を確認する方法を二つご紹介します。 画像をモノクロにして確認する方法 ”良い”デザインに共通して言えること。それは白黒でも読みやすいということです。作成したデザインをモノクロにして確認してみましょう。一番強調したい文字が一番目立っているか確認できます。 Canvaで作成した画像をモノクロにしていきます。 ①まず作成した画像を一度ダウンロードします。共有→ダウンロード→ファイルの種類:JPGなど ②書き出した画像をCanvaにアップロードします。作成→アップロード→確認したい画像を選択してアートボードに配置します。 (ここではプレゼンテーションを選択しましたが制作したもののサイズでOKです。) ③編集→フィルター→Mono→ストレートを選択→モノクロを選択します。 作成した画像をモノクロで確認することができるようになりました。 モノクロにすると、色がないので明度差だけで「見やすい」「見づらい」の確認がしやすくなります!モノクロで見づらい文字があったら明度差が足りていないということ。背景を明るく(白く)文字を暗く(黒く)なるように調整して視認性を確保しましょう。 数値で確認する方法 Adobeのコントラストチェッカーを使用して明度差を確認することができます。コントラスト比とは明度差を数値で表したもので、大きいほど「明度差がある」ということになります。 例)下記のバナーのコントラスト比をチェックしていきます。 ①Adobe Colorのサイトを検索し表示させるhttps://color.adobe.com/ja/create/color-contrast-analyzer ②下記のような画面がでてきます。コントラストをチェックする際に必要なのが「テキストカラー

3.フォント

フォントの基本解説 この動画では主に以下のことを学べます 内容 動画 フォントの種類と選び方 00:50 フォントだけの添削製作時の注意点 04:00 フォントの一括変更(バラバラなフォントを1つのフォントに変更、太さ変更) 05:00 サイズ調整、行間調整、字間調整  06:13 手書きフォント使用の注意点 08:00 ▼テンプレートはこちらhttps://www.canva.com/design/DAG50BTIe_4/LFXgColUEbhiVMA3sT69vg/view?utm_content=DAG50BTIe_4&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink&mode=preview Canva標準搭載でおすすめ!竹田的に使いやすいフォント 1. ゴシック体 セザンヌ Noto Sans JP ZEN角ゴシックNEW Morisawa UD新ゴPr6N L 筑紫A丸ゴシック 2. 明朝体 筑紫Aオールド明朝 筑紫明朝(N仕様) Source Han Serif Jp ほのか明朝 はんなり明朝 3. 丸ゴシック 筑紫A丸ゴシック ほのかアンティーク丸 コーポレート・ロゴ丸 4. 手書き ふい字 しねきゃぷしょん 「英数字のおすすめフォント」「フォントの基本と選び方」は特別編 > Canva活用方法 ~フォント編~ > フォントの基本と選び方も参考にしてみてください

5. デザインの引き出しの増やし方

デザインを作ろうと思ったときに、「どんな構成がいいのか」「どんな配色がいいのか」で悩んだことはありませんか?デザインはゼロから生み出すよりも、過去に見た形・色・構成のストックから組み合わせる方が効率的で、クオリティも安定します。 また、奇抜で独創的なデザインよりも、見慣れたレイアウトの方がユーザーが迷わず情報にたどり着けるため、結果的に目的(集客・販売など)も達成しやすくなります。これは、初めて行く場所でも「一般的な地図記号」や「見慣れた標識」があると迷わず目的地に着けるのと同じでデザインも、見慣れた配置や色使いがユーザーの安心感と行動のしやすさにつながります。 1.目的別!参考デザインを探す場所 下記の表を参考に、デザインの参考元を積極的に探してデザインの引き出しを増やしましょう。 作りたいデザインの目的  探すと参考になる場所 参考ポイント 集客イベントやキャンペーン告知 電車の中吊り広告/ チラシ配布物 ・キャッチコピーを目立たせるレイアウト・文字組み ブランドの世界観を伝えたい 雑誌のレイアウト / ブランドポスター ・写真と文字のレイアウト・余白の活かし方 大きなインパクトを出したい 屋外ポスター / イベント看板 ・遠くからでも読める文字サイズ・色のコントラスト 配色のヒントが欲しい 本の表紙 / 業界系パンフレット/業界雑誌 ・業界の配色参考 SNS用バナーや投稿画像 Pinterest / Instagram広告事例 ・情報を整理する構図・文字サイズ・文字組み 信頼感や安心感を出したい 行政パンフレット / 医療・教育関連のチラシ ・信頼感のある配色・整列感のあるレイアウト 高級感を演出したい 高級ブランドの広告 / 店舗カタログ ・黒・ゴールドなどの配色・余白の取り方 幅広いアイデアや構図をストックしたい Pinterest / 電車の中吊り広告 / 雑誌レイアウト / ポスター / 本の表紙 目的やジャンルを問わず、複数の媒体から事例を横断的に集めることで引き出しが一気に増える 移動時間、隙間時間、旅先でも参考デザインは探せます。パソコンに向かっていない隙間時間でもどんどん引き出しが増やせるので、意識して身近にあるデザインを見てみましょう! Pinterest(ピンタレスト) スマホ一つで隙間時間にデザイン検索。世界中のデザインやアイ

3. デザインの原則

「デザイン」と聞くと、色をつけたり、おしゃれに・かっこよく装飾するもの、というイメージを持つ方も多いかもしれません。でも、実はデザインの本質は「伝えること」。見た目を整えるのは、そのための手段にすぎません。 チラシやバナー、Instagramの投稿でも、伝えたいメッセージがうまく届かなければ、どれだけおしゃれでも意味がありません。デザインとは、「伝えたいことを、見る人にストレスなく、正しく、魅力的に届ける仕組み」なのです。どんな場面でも、「デザインの原則」を意識するだけでぐっと伝わるデザインになりますよ◎ デザインの4原則 デザインをするときに意識すると、ぐっと見やすく伝わりやすくなる「4つの基本原則」があります。 1. 近接(Proximity) 関連する情報は近くにまとめてグループ化すること。関係性のある要素を近くにまとめることで、一目で伝わりやすく、視線の流れも良くなります。 下記の名刺を見てください。 パッと見て「どこから読んだらいいんだろう…?」って、ちょっと迷いませんでしたか? 次に下記の名刺を見てください。こちらはデザインの原則「近接」を意識し要素を配置した名刺です。 先ほどの名刺と比べていかがでしょうか?スムーズに読めたのではないでしょうか? 💡関連する情報がグループ化(近接)されているか、常に確認してみましょう! 2. 整列(Alignment) 全てのものを意識的に配置すること。要素の位置をそろえることで、視線が流れやすくなりデザイン全体にまとまりが生まれます。 下記の名刺はデザインの原則「近接」のところで見た名刺です。このままでもすっきり見ることができますが、中央揃えの場合、縁の線が曲線でソフトなので強い視線誘導ができません。 これを左揃えにしてみます。縁の線が直線になったことで、グループ化された情報がより強く団結して、先ほどより視線が流れやすくなったことがわかると思います。 中央揃え 左揃え 右揃え 💡図や絵とテキストの組み合わせも同様に、直線を意識して配置してみましょう! 3. 反復(Repetition) デザインの特徴(色・フォント・線など)を繰り返し使うこと。一貫性を持たせることで、全体が統一されて見え、ブランディングにもつながります。 一つのデザインの中で反復を使用しデザインすると 反復は一つのデザ

上部へスクロール