デザイナー

WEBサイト制作で知っておきたい基本のデザインの話 〜スマホデザイン・フォント編〜

WEBサイト制作で知っておきたい基本のデザインの話 〜レイアウト・フォント編〜

WEBサイトを作りたいと思っているものの、どんなデザインがいいか、そもそも何から始めればいいか分からずに困っていませんか。

デザインのコト。ではこれまでWEBサイトデザインに関するさまざまな情報をご紹介してまいりました。

今回は、これからWEBサイトを作成しようと思っている方に向けて、これだけは知っておいてほしいポイントと共に、大切なスマホデザインとフォントの話についてご紹介します。

すでにWEBサイトを持っているけれど、リニューアルを考えているという方も必見です。

WEBサイトと紙媒体の違いとは?

WEBサイトのデザインを考える上で、まず把握しておきたいのが紙との違いです。

パンフレットやPOP、チラシなど、企業が活用する紙媒体にはさまざまなものがあります。

これらに携わっているから、WEBデザインなんて簡単だろうと考えている方もいらっしゃるかもしれません。

しかし、実はWEBと紙ではデザインに大きな違いがあるのです。

主な違いは以下6つです。

・レイアウト

・フォント

・表現する色

・サイズ

・校正

・デザイナー

参考:WEBと紙媒体のデザインは全く別モノ?特徴と違いを知っておこう

例えば紙の場合、A4、B3というように、印刷できる紙の範囲が限られています。

そのため文字数やその配置なども、限られた範囲に納めなくてはなりません。

一方、WEBデザインの場合、ユーザーはさまざまなデバイスを使ってWEBサイトを見ることになります。

そのためデバイスに応じてレイアウトを考える必要があります。

WEBサイトで重要な「モバイルファーストインデックス」の重要性

特に近年は「モバイルファースト」と呼ばれる通り、スマホでWEBサイトを見る人が増えています。

実際に検索サイト大手のGoogleでも、スマホに対応していないサイトについては検索順位を下げる、もしくは除外するといったことが行われています。

Googleは数多ある検索エンジンの中でも、全世界の6割強が使用しているサイトとして知られています(2020年1月15日時点の情報です)。

そのためGoogleの検索順位が下がるということは、見てもらえる機会が減ることを意味しているのです。

近年はどんなデバイスにも対応できる「レスポンシブデザイン」が注目を集めています。

WEBサイトを作成する場合は、ぜひレスポンシブデザインについても把握しておきましょう。

WEBと紙媒体のデザインは全く別モノ?特徴と違いを知っておこう
WEBと紙媒体のデザインは全く別モノ?特徴と違いを知っておこうWEBデザインを、紙媒体のデザイナーにも同じように依頼できると思っている方が意外に多いようです。 基本的なデザインスキルはどちらも...

ユーザーに愛されるスマホデザインのポイント

レスポンシブデザインと共に把握しておきたいのが、「スマホで見やすいWEBデザインのポイント」です。

レスポンシブデザインは、あくまで「デバイスに対応したレイアウトに調整する」ものです。

どれだけレイアウトが変わっても、ごちゃごちゃしていたり操作しにくかったりするサイトには、ユーザーは長く留まりません。

ではどのようなポイントに気をつければよいのでしょうか。

レスポンシブデザインとスマホで見やすいWebデザインの特徴とは」ではユーザーの使いやすさやみやすさ、伝わりやすさを重視するためのWEBデザインのポイントについて、以下2点を挙げています。

・スマホ画面にあったシンプルなデザイン

・使いやすいUI/UXを意識する

引用元:レスポンシブデザインとスマホで見やすいWebデザインの特徴とは

大切なのは「ユーザーがどう感じるか」

「たくさんのことを伝えたい」「あれもこれも見てほしい」と、WEBサイトに沢山の情報を詰め込もうとする方がいらっしゃいます。

しかし、あまりにも1ページの情報量が多いWEBサイトは、ユーザーに嫌われる傾向が。

またスマホの画面は小さいので、ボタンとボタンの距離が短いと誤操作してしまう恐れもあります。

こうした点からできるだけシンプルなデザインが好まれるのです。

またUIとは「ユーザーインターフェイス」のことで、WEBサイトの見た目とも言い換えられます。

UXは「ユーザーエクスペリエンス」の略称で、ユーザーがサイトを使ったときの体験や感想のことを指す言葉です。

これらが良いということは、ユーザーにとって使いやすいWEBサイトということですから、UI/UXを意識したWEBサイト制作が必要だと言えます。

スマホで見やすいWebデザインの特徴
レスポンシブデザインとスマホで見やすいWebデザインの特徴とは多くのユーザーがスマートフォンでWEBサイトを見るようになった昨今、WEBデザインには見やすさや操作しやすさが大きな鍵を握ります。今回は多くの人に繰り返し利用してもらうためのWEBデザインの特徴についてご紹介します。...

より良いUI/UXのためにやるべきこととは?

基本的には、先程ご紹介した「基本のキ」の6つのポイントを変えるのがおすすめです。

非デザイナーも知っておきたいUIとUXの話」ではさらに、よりよいUI/UXのために何を改善すべきか、例をあげてご紹介していますので、ぜひこちらも合わせてご覧ください。

非デザイナーも知っておきたいUIとUXの話
非デザイナーも知っておきたいUIとUXの話ここ数年、ビジネスの場で使われるカタカナ語が以前に比べて多くなったと感じませんか?。 毎日のニュースなどにおいて使われている言葉や...

意外と大事なフォントの話

上記のサイトでもご紹介していますが、実はWEBサイトにおいてフォントは重要な役割を果たしています。

フォントとは「明朝体」や「ゴシック体」などに代表される、いわゆる書体データのことを指します。

フォントが違うだけで、ユーザーに与えるイメージは大きく異なります。

例えば同じ文章でも、明朝体にするかゴシック体にするかで、見た目の印象は大きく異なります。

明朝体は和のイメージが出やすく、上品さが感じられる書体です。

一方、ゴシック体は男性イメージが比較的出やすく、親しみやすさが感じられる書体とされています。

メインユーザーに応じてフォントを選ぶことで、よりユーザーにマッチしたデザインに仕上げることができるでしょう。

Webデザインにオススメのフォントと使い分けるポイントとは?
Webデザインにオススメのフォントと使い分けるポイントとは?Webデザインでは、Webサイトのイメージに合わせたフォントを選ぶことが重要ですが、あまりに種類が多すぎて迷っている方も多いのではないでしょうか。今回は主要なフォントの種類と、WEBサイトごとに使い分けるポイントなどをご紹介します。...

有料フォントやWEBフォントを利用しよう

意外と知られていないのが、フォントを購入できるということです。

フォントは国内外問わず、さまざまなフォント開発・販売会社がある他、フリーランスのデザイナーが販売していることもあります。

有料フォントって何?相場と商用利用の際の注意点
有料フォントって何?相場と商用利用の際の注意点日常生活に溢れかえっている文字ですが、最近は手書きではなく、インターネット上でよく見かけるという方が多いかもしれません。 WEB上...

その他にも、近年ではWEBフォントと呼ばれるサービスも登場しています。

これまでフォントは、閲覧するためのデバイスにその情報(データ)がダウンロードされている必要がありました。

そのためWEBサイトを作成したパソコンにAというフォントデータが入っており、それを使ってテキストを打ったとしても、ユーザーのデバイスにAのデータが入っていなければ、フォントが自動的に別のものに変換されてしまうのです。

そこで登場したのが、デバイスごとにフォントデータのダウンロードが不要なWEBフォントです。

WEBフォントを活用すれば、どのデバイスでも同じ見た目に統一することができ、ブランドイメージを正しく伝えることができます。

WEBフォント導入のメリット・デメリット

「WEBフォントって何?メリット・デメリットとオススメサービスをご紹介!【2020年】」では、WEBフォントのメリットとデメリットについて触れています。

<メリット>

・デバイスを気にせずにフォントデザインが選べる

・SEO対策を強化できる

・レスポンシブデザインとも相性が良い

<デメリット>

・利用料が必要になることがある

・表示速度が遅くなることがある

・利用規約によっては商用利用できないことがある

引用:WEBフォントって何?メリット・デメリットとオススメサービスをご紹介!【2020年】

上記を把握した上でWEBフォントを有効活用すれば、素晴らしいWEBサイトが出来上がるはずです。

ぜひ参考にしてみてくださいね。

WEBサイト制作で知っておきたい基本のデザインの話 〜スマホデザイン・フォント編〜 まとめ

WEBサイトデザインと紙媒体の違い、そしてWEBにおいて重要な要素のひとつであるスマホデザインとフォントについてまとめました。

これらを知っているだけで、貴社にピッタリのWEBサイトデザインを作成しやすくなるはずです。

これからWEBサイトを作成しようと思っている方はもちろん、すでに持っているものの、なんとなくデザインに不満があるという方はぜひチェックしてみてください。