本記事は、Cerevoスタッフが業務や趣味について思うままに書き綴るアドベントカレンダー企画「Cerevo アドベントカレンダーTechBlog 2019」の第1日目です。
Cerevo アドベントカレンダーTechBlog 2019
https://tech-blog.cerevo.com/archives/category/adventcalendar/2019/
はじめまして。Cerevoで主にWebデザインを担当している毛利です。
他にはよくわからない音楽を作ったり演奏したりしています。
バブルの崩壊と共に生まれ、@peps!や魔法のiらんどで初めてHTMLに触れ、MySpaceでページを組む楽しさを知り、コスプレイヤーの画像収集でソースコードの便利さを知った世代です。
少し前にCerevoのコーポレートサイトをリニューアルしましたが、そちらも踏まえて僕の考えるWebデザインの考え方にお話させていただきます。
デザインとはなんぞや
まず、みなさんは「デザイン」とは何だと思いますか？
美しいものや楽しいものを作ること？文字を極力排除したインターフェイスを作ること？
それは「デザイン」を目的だと勘違いしてしまっている人がよくやってしまうことです。
これはとても重要なことなのですが、デザインというのはそもそも手段なのです。
伝えたい情報を伝えたい相手に一番伝えやすい形で伝えるための手段がデザインなのです。
例えば、あなたが誰かに好意を伝えたい時に口を使って「好きです」と言えば、相手に好意を伝えることはできます。でも、もっとしっかりと伝えたい時に相手の手を握ったり、目を見たり、抱きしめたりしながら「好きです」と言えばあなたの好意はもっと相手に伝わりやすくなります。それがデザインです。
誰かが誰かに何かを伝える時に使う手段がデザインなのです。
デザインにおいて最も重要なこと
先程の説明でそもそものデザインとは何かを伝える手段なんだというのは理解していただけたかと思います。
そして、デザインにおいて最も重要なことがあります。それは、伝えたい相手のことをちゃんと知るということです。ちょっとよくわからないと思うので例を出します。
もし、あなたが違う言語圏の人に好意を伝えたい時にいくら「好きです」と言っても相手には全く伝わらないですよね。相手がどんな言葉を使って、どんな伝え方を好むのか調べるなどして理解しないと、伝えることはできません。
受け手側のことを考えて、どうやって伝えるのが一番伝わるのかしっかり考えるということがデザインにおいて一番重要です。
先程も出てきた「文字を極力排除したインターフェイス」ですが、受け手にそれが伝わるのかどうかが1番の問題です。
そのものがどういった場所で誰にどのように使われるか考えた時に、それが最前のものなのでしょうか。例えばそれが老若男女、幅広く利用するためのものとして考えると難しいように感じますね。
この様に、何かをデザインする際にはそれを伝える相手のことをしっかり考えないと失敗してしまいます。
伝えたい相手に伝わらないとデザインは意味を持ちません。
Webデザインとは
ウェブデザイン（英: Web design）は、デザインの一種。ウェブページやウェブサイトにおける視覚面（意匠・要素配置等）に対し、整理・再構築・意匠等を施すことである。
Wikipediaに書いてあるとおり、WebデザインとはWebを用いたデザインです。つまり、Webを用いて伝えたい情報を伝えたい相手に一番伝えやすい形で伝えることをWebデザインといいます。
では、そもそも「Web」とは何でしょうか？
Webとは文字列の集合体である
ここから先は僕独自の考えや思想になってしまうのですが、僕はWebというものは文字列の集合体をCSSなどを使用して読者に見やすい形に再構築したものだと考えています。
これはどういうことかと言うと、試しにあなたの好きなWebページを閲覧している時に[右クリック→ページのソースを表示]と選択してソースを開いてみてください。あなたの大好きな写真や、色、バラエティに富んだタイポグラフィ、素敵な動画は全部表示されずに意味不明な文字列と、読める文章がたくさん表示されます。
このたくさんの文字列にCSSなどを用いて「ここはこういうふうに表示してね」という命令を出してあなたが読みやすい形に再構築し直したものが普段見ているWebページです。
普段はこの文字列の集合体を見ることはあまり無いかもしれませんが、この文字列の集合体がWebなのです。
文字を大量に使って表示している、これがWeb本来の姿です。
そもそも、文字というもの自体、人類が言葉や言語やいろいろな物事を記録し他人とコミュニケーションをとるために生まれたものです。
何が言いたいかというと、他人に伝えるために生まれた文字を使用して、他人に伝えるために作られたのがWebページであり、他人に伝えるということがWebページに与えられた役割であるということです。
僕がWebデザインを作成する時に気をつけている点
先程からひたすら「人に伝えることがデザインだ」と言ってきましたが、やっと具体的な内容に入っていきましょう。これが100％ではないし、2020年に通用しないかもしれないし、僕が一般的な人とかけ離れてしまっているという自覚がありますが、以下のことを最優先に考え僕はWebデザインを作成しています。
- 秩序を守る
- 3行以上の文は人の読む気を一気に奪う
- 誘目性は有彩色(暖色) > 有彩色(寒色) > 無彩色の順番で高い
秩序を守る
人はWebより前から紙に印刷された文書や小説等に慣れ親しんでいます。
そういった文書では必ず見出しのフォントサイズは大きく、本文は小さくなっています。強調する部分があったとしても、それは太字にしたり色が変わっていたりしていて見出しより大きくなることはありません。（絵本などは別）
Webにおいてもその秩序は守られるべきだと思っています。何故なら、Webは全世界に向けて発信されているものであり、それを受け取る人がどんな人なのか想定できない場合もあるので、そういった人でも「これは見出しだ」「ここから本文なのだな」とわかりやすくするためにフォントサイズ等の秩序を守り、安心して見ることができるようにする方が受け手にとって優しいWebサイトだと思います。
もし、フォントサイズ等の秩序が不安定だったら、読み手は読みながら「これは見出しなのだろうか」などと考えなくてはいけなくなってしまいます。
3行以上の文は人の読む気を一気に奪う
先程小説などの例を出したくせにこいつは何言ってるんだ？と思ったかもしれないですね。
基本的に、小説や新聞などの文章は受け手側が能動的に「読むぞ！」と思って読む文章です。さらに自分のペースで読むことができます。
なので、こういった文章は何行であろうと、多少文字が多すぎて読みにくくても受け手側はしっかり読むことができます。
しかし、Webの文章というものはなぜか私達の脳内では受動的な情報として処理されてしまいます。どんなに集中してWebの文章を読もうとしてもすぐに気が散ってしまう経験はありませんか？
この様にWebの文章は読みづらい傾向にあるので、できるだけ3行程度にまとめて表示した方が受け手側が受け取りやすい文章になります。
誘目性は有彩色(暖色) > 有彩色(寒色) > 無彩色の順番で高い
誘目性とは
いろんな色などの情報が存在する中での目立ちやすさのことを言います。
一般的に、
- 無彩色よりも有彩色の方が誘目性が高い
- 寒色系よりも暖色系の方が誘目性が高い
- 明度が低いものよりも高いもの方が誘目性が高い
とされています。
交通標識などはこの誘目性を利用したものの中で一番身近なものです。注意や危険を伝えるようなものは黄色や赤などで作られていますね。
この誘目性を利用することで、Webを見る人の視線の動きをある程度コントロールすることができます。
人は有彩色→無彩色の順番で見てしまう傾向があるので、最も伝えたいことを有彩色で表現し、それに付随するものを無彩色で表現するようにすると受け手はより少ない時間で内容を簡単に利用することができます。
まとめ
僕はいつもこの様に受け手のことを考えて、受け手が一番受け取りやすい形で受け手が欲しい情報が手に入るWebにしようね！をモットーにランディングページやコーポレートサイト等を制作しています。
そして、なるべくわかりやすいWebページを制作し、みんながディスプレイを見る時間を減らして、情報を理解する時間をなるべく少なくして、その結果みんなが家族や友人と過ごす時間を増やして、世界が愛に溢れることを望んでいます。結局一番大切なのは愛だと思います。
愛、良いですよね。
