Tag Archives: デザイン

WEBフォントでデザイナーの実力がわかる!?違いってなに?

2020年10月22日

投稿者: リッキー

こんにちは!デザイナーのリッキーです!

デザイナーとして、デザインをするうえでこだわりなどはたくさんありますが、一番気を使うのは「フォント」です。

フォント選びでデザインそのものが変わってしまったりフォントの種類だけでなくその太さ細さによってそれぞれ印象がガラッと変わってくるのでフォント選びはちょー重要です。

デザイナーの腕の見せ所ですね!

自分はフォントを選ぶ際は使えるフォントを全部試してます!そして伝えたいデザインにあったものを選んで全部並べてその中から選定していきます。

フォントが好きなのでこの作業すら楽しいんですよね!
さっそく解説していきましょう!

let’s go

■セリフ体・サンセリフ体・スラブセリフとは?

違い


フォントには文字の先端に「ひげ」または「ウロコ」と呼ばれる装飾の有無によって大きく2種類に分かれます


代表となる・セリフ体・サンセリフ体・スラブセリフこの3つの特徴について説明していきます!

セリフ体の特徴

セリフ体とは、文字の先端に「ひげ」または「うろこ」と呼ばれる装飾があるフォントのことです。皆さんも聞いたことがあるかもしれない定番フォントの「明朝体」は、セリフ体に分類されます。洗練されているかつキレイなイメージです。

さらにセリフ体は

  • ブランケットセリフ:一般的なセリフ体・三角形のひげ・うろこがついている
  • ヘアラインセリフ:とてもほそいひげ・うろこがついている
  • スラブセリフ:縦横同じ幅のひげ・うろこがついている(このあとで詳しく説明します)

に分かれます。

スラブセリフの特徴


上で書いたように、スラブセリフ、またはスラブ体とはセリフ体の一種です。
通常のセリフ体が「縦線が太く、横線が細い」のに対し、スラブセリフは、縦横の線がほとんど同じです。落ち着いた印象を与えるフォントになっています。

サンセリフ体の特徴


「sans-serif]と書いて、フランス語で「セリフがない」という意味になります。その名の通り「ひげ」「うろこ」がないフォントです縦線、横線の太さはほぼ均一なものが多いですね。

■便利な拡張機能

WhatFont


WhatFontは、WEBサイトで使用されているフォントをワンクリックで調べることができるフォントオタクには欠かせないGoogle Chromeの拡張機能です。
WhatFontでは次のことを調べることができます。

  • font-family:フォントの種類
  • color:文字色
  • font-size:フォントの大きさ
  • font-style:標準・イタリック体・斜体といったスタイル
  • font-weight:フォントの太さ
  • line-hight:行間

サイト内で気になるフォントを見つけた時すぐに調べられるのでとても重宝しています。
WhatFont

■フォントオタクになるために

様々なフォントに触れていく中で、それぞれの、フォントのちょっとした違いがわかるようになってきます。

1つ1つのフォントの特徴を理解し、どの場面で使うのを身につけることができれば、繊細なフォントの使い分けができるようになり、よりデザインに合ったフォントを選ぶことができるようになるはずです。

少しずつでも慣れていけば誰でもフォントを使い分ける力を身につけることができます。

繊細なフォントの使い分けができるようになるためには、3つのステップでフォント選びに慣れていく方法がおすすめです。

  1. 定番のフォントから使ってみる
  2. 好きなフォントを見つける
  3. 好きなフォントの種類(レパートリー)を増やしていく

1つずつ詳しく解説していきます。

まずは定番のフォントから

WEBサイトや書籍を見ていると、「よくみるフォントだなー」とわかってきます。はじめの方は、まずこのよくみるフォント「定番フォント」を積極的に使っていくようにしましょう。

例えば、ゴシック体の定番でいうと「メイリオ」「ヒラギノ角ゴシック」「游ゴシック」など、最初はパッと見た時にどれがどのフォントなのか全くわからないと思います。自分はわかりませんでした。

しかし、デザインの中で意識して取り入れていけば、少しずつフォントのイメージの違いがわかるようになってきます!

まずは定番フォントをデザインの中で積極的に取り入れていって、それぞれの違いを学んでいくことで基本を身につけていくのがオススメです!

好きなフォントを見つける

次はお気に入りのフォントを見つけてみましょう。ここまでくると本当に面白いです!

好きなフォントをみつけたとき、WEBサイトであれば簡単に調べることができるので、先ほど紹介した「What Font」というChromeの拡張機能を使えばどのフォントが使われているか簡単に調べることができます!

便利すぎる!

What Font

レパートリーを増やしていけばフォントを使い分ける力が向上しているはずです!

種類を増やしていく

自分の気に入ったフォントをストックしていくことで、使うことのできるフォントの数も増えています。お気に入りのフォントがある程度溜まってきたら、ある程度フォントレパートリーを増やしていけばフォントを使い分ける力が向上しているはずです!

■フォント選びのポイント

イメージに合っているか


例えば、明朝体は洗練されたイメージ、ゴシック体であればしっかりしたイメージがあります。

どんなイメージのデザインなのか、それを考えた上でフォントを選ぶようにしていけばフォント選びの精度も向上していくはずです。

もちろん、トレンドがあったり、新しい書体が次々生まれています

より良いデザインにあったフォントを選ぶためにはフォントのレパートリーは増やしていかなければならないので、上記に説明したような3ステップでフォントを使い分ける力を育てていくことがとても大切です。

目的に合っているか

フォントは大前提としてデザインの意図・目的にあったものを選ばなければなりません。

例えば、目立たせたいときに使うフォントはパッと目に止まるようなインパクトがあるものがいいなど1つのデザインの中でも、状況にあわせて目的にあったフォントを使い分けるようにすると、それに合わせたデザインもより洗練されたものになっていくはずです!

■まとめ

フォントは少し違うだけでも与える印象は全くべつのものになります。

相手にどのような印象を与えたいのか、

イメージにあったフォントは何なのか、

それを見極めることがとても大切です。

フォントの世界は本当に奥が深く、新しいトレンド、新しい書体が次々と生まれています。

ぜひ、お気に入りのフォントを見つけてみてください!

以上、「WEBフォントでデザイナーの実力がわかる!?違いってなに?」でした。
ありがとうございました!

WEBデザインでカッコいいメインビジュアルの作り方

2020年10月16日

投稿者: リッキー

こんにちは!リッキーです!

今日はWEBデザインでカッコいいメインビジュアルの作り方を説明していきます!

WEBデザインにおける「メインビジュアルの役割」

ホームページはメインビジュアルがちょー大事!
人間関係で例えるなら、初対面での「第一印象」ってことになります。
もし対人であれば第一印象が悪くても、時が経つにつれて打ち解けていきますが、ホームページの場合だと、悪いと判断されればすぐに直帰されてしまいます。
そうならないためにもメインビジュアルの役割をしっかりと理解しておきましょう!

ホームページの顔 !「メインビジュアル」

まずメインビジュアルとは、主にWEBサイトの上部にある大きなイメージ画像、一番目立つ大きな画像のことです。

ホームページを開いた瞬間に、最初に目につくことから「ファーストビュー」と呼ばれることもあります。別名「キービジュアル・タイトル画像」など色々な呼び方があります。

多くが、目を引くキャッチコピーとともにネットユーザーに最も伝えたい写真や画像を配置しています。

ホームページでは、ユーザーに立ち止まってもらえるようなキービジュアルを配置し、離脱を防がなければなりません。

そのためには、ユーザーの興味・関心のあること、ユーザーが「自分に関係のあることだ」と思ってもらえるような表現が必要です。

メインビジュアルを作成する際は、ユーザーが何に興味があるのか、どんな目的でこのホームページを訪問するのか、そういったユーザーの興味・関心を意識しなければなりません!

今回は、前回投稿した

「【密着】WEBデザイナーの1日」

という記事のアイキャッチ画像で使用した画像の解説していくでぇぇぇ!

重要なのは何を伝えたいのか

まず単にカッコいい写真だけで見せるのではなく、キャッチコピーをしっかり読ませる事で「そのサイトの意図を伝える」という事が重要!

これを念頭においた上でのビジュアルの選定基準として「文字をおいても読みやすい写真」というのが重要なポイントです!
つまり、背景がごちゃごちゃした写真だと文字が読みづらくなるので「シンプルな写真を選ぼう」ってことです。

良い例○

↑文字が見やすい○
↑文字が見やすい○

悪い例×

↑文字が見づらい×
↑文字が見づらい×

写真選定の「悪い例」

この場合、背景に自転車が並んでいたりごちゃごちゃしてて「文字を乗せても少し読みづらい」。オススメできない写真です。自分だったら別の写真に変えます

メインビジュアル写真を自由に選べない場合

クライアントから支給された写真で「写真を変更ができない」場合は、デザイン処理で工夫するか、写真を加工するしかありません。

この場合いくつか方法があると思うので、例を上げていきましょう!

「写真の文字を読みやすくする方法」の残念な例

背景写真がごちゃごちゃしていると時に文字を読みやすくする方法として、文字の周りを読みやすくなる色で縁取る「袋文字(ふくろもじ)」という手法があります。

↑読みやすくはなったけど…残念というかイケてない!

この手法はよく使われるので覚えておいて損はないけど今回は別の手法を使っていきましょう!

「写真の上の文字を読みやすくする方法」の良い例

写真に文字をのせても見やすくする「写真の背景だけをぼかす」という手法があります!
具体的に、photoshopの

①「レイヤーを複製」

②一方のレイヤーでぼかさない場所だけ「マスク」をかける

③ぼかしたい別レイヤーで「フィルター」→「ぼかし」→「ぼかし(ガウス)」を選択

2つのレイヤーを組み合わせるという方法

シンプルだけど「文字が読みやすい背景」!イケてる!

オシャレな雰囲気を出すテクニック!

「背景画像をぼかす」手法だけでも文字は少し読みやすくなった!

でもフルカラーの写真で見ると「色目がちょっとうるさい」印象があります。

こんな時に、簡単にオシャレな雰囲気を出すテクニックとして

「写真の彩度を落とす」という方法があります。(「彩度」とは色の鮮やかさの度合いのこと)

具体的には、Photoshopの調整レイヤーの「色相・彩度」をいじって、写真全体の「彩度」を落とします

洗練されたかっこいい雰囲気に!イケてる!

今回はよりビフォーアフターがわかりやすいようにモノクロにしてみます!

モノクロのやり方

具体的なやり方はぼかす方法と同じで、photoshopの

①「レイヤーを複製」

②一方のレイヤーでモノクロにしたくない場所だけ「マスク」をかける

③モノクロにしたい別レイヤーで「調整レイヤー」の「白黒」を選択

2つのレイヤーを組み合わせるという方法

かっこいい。惚れた

小技テクニック

大まかなデザインが決まったらあとは細かいちょっとしたデザインを決めていきます

このちょっとした細かいデザインがWEBデザイナーの醍醐味!

さっそく説明していきます!

let’s go!

文字の太さを変えてみる

デザインの基礎中の基礎!文字の大きさで強弱をつけることでデザインにメリハリをつけることができます!

背景にシェイプを入れる

写真と文字のコントラストがはっきりしなくて読みにくい場合には、文字の後ろにシェイプを入れる方法がオススメ!

ベースの写真も見えるようにシェイプを透過してあげるとお洒落!この方法はめちゃくちゃ使えるし簡単だからどこでも使えるよ!

ラインを入れる

文字のしたにラインを入れるだけで、写真と文字との境目がわかりやすくなり読みやすくなります。

写真加工前と加工後のビフォーアフター

↑加工前:背景がごちゃごちゃしていて情報量が多い
↑文字が読みやすく少し雰囲気のあるデザインになった!僕かっこいい

最後に

今日はWEBデザインでカッコいいメインビジュアルの作り方を説明していきました!

1枚のデザインでも複数のテクニックを組み合わせることで何倍も伝わるしカッコよくなります!

「ちょっとしたひと手間」


これを考えるのがめっちゃ楽しいしデザイナーの醍醐味ともいえます!


今日説明したのはほんの一部で世界にはまだまだたくさんの技術があります。
あなたなりのデザインを探してみてください!!

以上、【WEBデザインでカッコいいメインビジュアルの作り方】でした!
ありがとうございました!