皆さんは「Webデザイン」と聞くと、どんな能力やスキルを思い浮かべますか？

一般的には、Adobe photoshopやIllustratorでデザイン物を作る能力、Adobe XDでUIやUXを高めるスキル、HTML、CSS、Javascript、PHPといったフロントエンジニアリングなどがWebデザイナーの定番の能力だと言えます。

しかし、テクノロジーが進む中で、Webデザイナーにはもっと違うスキルが求められています。

それが「タイポグラフィ」です。タイポグラフィとは、「活字を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸」です。

要は、Webデバイス上で文字を適切に配列し、デザインとして仕上げる力こそが、これからはWebデザイナーにとってかなり重要な能力となっていくのです。

そこで、今回はWebデザインとタイポグラフィの重要性を掘り下げて解説していきます。

モバイルファーストによってWebタイポグラフィが重要になった

Webデザインはアイキャッチ画像と文章だけで十二分に「魅せる」ことが可能になっている

スマートフォンが一般的なWebデバイスになり、多くのWebデザイン設計がモバイルファーストになっています。

スマートフォンはPCに比べ、可視範囲が狭く、ユーザーは縦方向スクロールで閲覧します。モバイルで快適に閲覧することを考えると、Webデザインというのは、多くのブロックが1カラムのデザインになります。

つまり、モバイルファーストのデザインは基本的にはシンプルイズベストになります。

実際に、見込み客の獲得から高額商材の購入まで、「フリー素材画像」＋「小見出し(h2～h3)」だけで事足りることは非常に多くなっています。

「デザインフルじゃないと集客できない」と思い込んでいるデザイナーは、クライアントのニーズや要望に対して、必要以上にコストを掛け、センスのないパフォーマンスを提供しているでしょう。

横幅の狭いブロックに、ユーザビリティが高く、それでいてサイトの目的(成約・購入)を満たすデザインにする際に、テキストの重要性がかなり高まるわけです。

なるべくシンプルなデザイン技術を使いながら、文字をうまく配置し、サイトのブランド性や情報性を高める、このスキルこそがタイポグラフィなのです。

デザイン画像の不必要性によってWebタイポグラフィが重要になった

デザインソフトで創る必要がなく、CSSで解決できるようになっている

HTML、CSS、Javascript、PHPで実現できるデザインの幅があまりにも広がっています。そのため、photoshopで細かくデザイン画像を作る必要もなくなっています。

文字を含む部分をデザイン部分には画像をなるべく使わない方が、デバイスごとの見栄えも手軽にキレイに保つことができます。

CSSで文字をキレイに魅せるには、タイポグラフィのセンスを磨く必要があります。無駄にphotoshopやIllustratorでパーツやバナーを作り過ぎている人は、CSSだけで作り込んでいくアイデアやマインドが不足しているかもしれません。

また、タイポグラフィはブラウザ上のアニメーションが加わると、同じ配置でもアニメーションがない場合と与える印象が異なります。

Webデザインとタイポグラフィの本質を理解するには、フロントエンジニアリングのリテラシーも必要になってきます。

Webデザインツールの進化によってWebタイポグラフィが重要になった

WebデザイナーはゼロからWebを作らない提案をすることが多くなっていく

これからは、様々な進化したWebデザインツールが登場し続けてきます。Webデザインのスキルや知識がなくても、より簡単にWebサイトを作ることができるツールが、もっともっと洗練されていきます。

そして、企業はこのようなWebデザインツールを導入したいと考えるようになるでしょう。理由としては、管理や変更を自社でも素早く手軽に行うことができるようになるからです。

Webデザインツールといえど、素人向けに作られているので、できるデザインには限りがあるでしょう。また、Webデザインのスキルを駆使してカスタマイズし過ぎると、今度はクライアントが管理や変更を手軽にできなくなります。

そこで、なるべくタイポグラフィで上手に魅せ、クライアントの変更が手軽かつ、効果の高いサイト作りをバックアップしていくことになっていくでしょう。

また、クライアントにWebとタイポグラフィのコツを教えたり、マニュアルとして渡すようなことをしていくのも大きなポイントです。

字面に漢字が多いからデザインが全体と調和が取れているにもかかわらず、横文字で変更して、サイト全体のブランドが崩れてしまうといったことも考えられます。

文字に合った画像を入れ込んでいたのに、画像を差し替えて、デザイン性が落ちるケースもあります。しかし、素人からしたら、ただ差し替えているだけだと感じてしまいます。この点をクライアントに上手く伝えることができれば、クライアントの管理や修正もうまくいきやすく、サイトの効果も持続しやすくなるでしょう。

最後に：Webデザインをタイポグラフィの観点から捉え続けよう

タイポグラフィとライティングを駆使できるWebデザイナーはこらからますます最強になる

以上、Webデザインとタイポグラフィの重要性について掘り下げてきました。

Webデザインをタイポグラフィの観点から切り取って閲覧してきてないWebデザイナーは、ぜひ、Webデザインをタイポグラフィの観点から捉え続けてみてください。

タイポグラフィは単なるテキストですが、実際の案件では、文字はターゲットユーザへ訴求するためにかなり重要な情報として打ち出しますよね。

結果的に、セールスライティングのスキルやマーケティング感覚に優れていないと、限られたスペースに、デザイン性も高く、集客性も高いといったテキストをデザインすることができません。

結果、Webデザインのタイポグラフィを突き詰めたWebデザイナーは、圧倒的な力を手にしていきます。クライアントへ提供するべきパフォーマンスの取捨選択もバッチリで、効率よくスピーディーなWeb制作力を備えていくでしょう。

ぜひ、Webデザインとタイポグラフィについて、自分なりの感覚を日々磨き上げていってください。