NOTE

セブンシックス・ノート

第6回 デザインで伝える

ユーザーに伝えようとする気持ちが、成果を上げるデザインには必要不可欠だ。

第一印象の重要性

あなたは、はじめて会った人が革ジャンを着て、髪型はリーゼント、腕にトムとジェリーの刺青を入れていたらどう感じるだろうか。私だったら「ちょっとロックンロールすぎやしないか?」と感じることだろう。ほとんどの人が、第一印象を見た目で決めている。ホームページも、第一印象の影響は大きい。

あなたはインターネットで買い物をする時、ホームページのデザインが良いという理由で商品を買うだろうか。おそらく、そんなことはない。きっと、商品が気に入ったから買うのだと思う。

その一方で、デザインが悪いホームページでは、なんとなく不信感から購入をためらった経験があるかもしれない。これは明らかに見込客を逃している。商品が全く同じで値段が少し高くても、信頼できるお店で買いたいという人は多い。

つまり、ホームページの第一印象は、訪問者がホームページの閲覧をこのまま続けるかどうかを判断する基準になっている。そして、その第一印象を決めるのは、内容の良し悪しではなくデザインだ。

ホームページとしてのデザイン

ホームページのデザインは、同じ平面である印刷物とは似ているようで全く違う。あなたが将来、正しい判断をするためには、この違いをきちんと把握する必要がある。

操作する人への配慮。

ホームページはユーザーが「操作する」ものである。ホームページには取扱説明書がない。ユーザーにはページ間の移動やフォームへの入力など、様々なアクションをしてもらう必要があるので、操作しやすい配慮が必要だ。

あらゆる環境への配慮。

パソコンの大きな画面。スマートフォンの小さな画面。ホームページは、見る人の環境によってキャンバスが変わる。デザイナーは、1枚の静止画でデザインを作成する。しかし、実際に表示されるホームページは、画面が広かったり狭かったりするため、それを前提としたデザインをしなければならない。

レスポンシブウェブデザインとリキッドデザイン。

あらゆる環境にホームページを対応させるため、制作者たちは様々な手法を用いてホームページを制作している。中でも重要なのが、「レスポンシブウェブデザイン」と「リキッドデザイン」の2つだ。

画面幅でレイアウトを切り替える、レスポンシブウェブデザイン

スマートフォンが普及する以前は、パソコン向けのホームページがあれば十分だった。しかし、スマートフォンがパソコンのユーザー数を超えた今では、スマートフォン向けのホームページが欠かせない。

だから、ホームページに力を入れる企業は、パソコン用とスマートフォン用の2つのホームページを用意するようになる。当然、コストは倍だ。ホームページ完成後も、更新するたびに、2つのホームページを改修しなければならない。

レスポンシブウェブデザインは、画面幅に応じてレイアウトを切り替えることで、ひとつのホームページをパソコンとスマホの両方に対応させる手法だ。Googleも推奨している。

ただし、ふつうにホームページを作る場合に比べて、制作者の高いスキルが求められる。特に、デザイナーがレスポンシブの仕組みを理解できていないと、その後の工程でトラブルが起きやすい。

画面幅にフィットさせる、リキッドデザイン

リキッドデザインとは、デザインの横幅を固定せず、見る人の環境に合わせて柔軟に伸び縮みできるよう配慮されたデザインである。レスポンシブウェブデザインと組み合わせて使われることが多い。

同じスマートフォンでも、機種によって画面サイズは大きく変わる。端末によって左右が見切れたり、横スクロールが発生しないようにするための技術だ。

これも、デザイナーがリキッドデザインの仕組みを理解していなければ成立しない。特に、横幅が固定されている印刷物を中心に手がけるデザイナーは、リキッドデザインを苦手とするケースが多い。静止画のデザインでは問題なく思えても、横幅の可変を考慮していなかった、なんて事態はよくある話だ。

目的達成のためのデザインを。

ホームページで最も重要なのは、ユーザーの目的を達成することである。そして、デザインは、それをユーザーに効果的に伝えるためのものだ。デザインが持つ力を有効に使うことで、ユーザーは「書かれている内容に目を向けてくれる」ようになる。成果を手にするための、第一歩だ。

前田 大地

Designer / Developer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

セブンシックス・ノート一覧