技術と表現約 5 分で読めます

  • 解説
  • 架空の例を含む
  • 研究

ホームページ改善。その美しさで、何を伝えるか

デザインを一新したのに、問い合わせや商談の中身は変わらない。美しさが「何の会社か」「なぜ信頼できるか」の理解につながっていないのかもしれません。3D や動きを使うかどうかも含め、美しさで何を伝えるかを先に決める考え方を、平拓の作品で下した判断から紹介します。

雨の夜の石畳に置かれた朱の蛇の目傘。提灯の光が雨と水たまりに映る(箱庭「雨に、ひらく」)

架空の場面から始めます。

ある製造業の会社が、ホームページを新しくしました。「古く見えるので、洗練された印象にしたい」「動きや 3D を入れて、技術のある会社に見せたい」。公開後、社内や取引先からの見た目の評判は上々です。けれども、届く問い合わせの数も中身も、以前とほとんど変わりません。

「美しくすれば、信頼される」

見た目を整えれば信頼される。3D や動きがあれば、技術力が伝わる。そう考えるのは自然なことですし、間違いでもありません。古びた印象のサイトは、それだけで不安を与えます。印象は、信頼の入口です。

ただ、入口を通った人が何を確かめに来たのかを決めないまま美しくすると、美しさは「きれいなサイトですね」で終わってしまいます。

平拓では、この現象を「美しさの空回り」と呼んでいます。見た目は良くなったのに、それが会社への理解や問い合わせにつながらないことです。

見落としやすい条件

誰が、何を判断しに来るのか。 製造業のホームページを見に来るのは、購買の担当者、技術者、経営者、取引先、働きたい人とさまざまです。それぞれ、判断したいことが違います。全員に同じ印象を与えようとすると、誰の判断も助けないサイトになりがちです。

最初の数秒で、何の会社かが分かるか。 初めて訪れた人は、まず「何をしている会社か」「自分に関係があるか」を確かめます。そこが分からなければ、どれだけ美しくても先へ進んでもらえません。

美しさは、何の証拠になっているか。 細部まで整った画面は、「この会社は仕事を丁寧に扱いそうだ」という期待につながりえます。それは、伝えたい内容と結びついているときです。内容と関係のない飾りは、かえって伝えたいことを埋もれさせます。

重さと、読まれ方。 3D や動きは、表示までの時間を長くし、スマートフォンでは電池や通信の負担にもなります。また、3D の画面の中に描いた文字は、検索や読み上げの機能に届きにくいものです。このサイトでも、主要な情報と導線は HTML の文章として置き、3D の中の文字には頼らないようにしています。

誰が、どう更新するか。 作った後に、誰が、どれくらいの頻度で情報を更新するのか。更新しにくい作りにすると、美しさより先に情報が古くなります。

一つの判断を深く見る:「雨に、ひらく」の和紙

美しさで何を伝えるかを先に決める、とはどういうことか。平拓の研究の場である箱庭の作品「雨に、ひらく」で、実際に下した判断を一つ取り上げます。

この作品は、京和傘ができるまでを、一本の竹からスクロールでたどるものです。竹を割り、骨を組み、紙を張り、油を引くという工程が、作品の中心です。

何を伝えるか。 傘の紙には、和紙ならではの、やわらかな厚みのむらと、細く曲がった繊維を描いています。和紙は、光を透かすと、薄いところが明るくなり、繊維や紙の重ね目が暗く浮かび上がります。作品では、提灯の灯を透かす和紙として描いています。

その美しさに見合う重さか。 こうした表現は、ただでは手に入りません。表現を足すと、1 フレームの描画にかかる時間が増えます。足すたびに描画の時間を測って残しておくと、その美しさに見合う重さかどうかを判断できます。この作品では、和紙の表現を残しています。

払わなかったもの。 外した表現もあります。地面に落ちる雨の輪は、白い線を足さず、水面の映り込みの揺れだけで表しています。箱庭の制作全体でも、画面全体に毎フレーム変わる粒子を重ねたときは砂嵐のようにちらついて見えたので外し、背景にぼけた光の円を浮かべる案は、かえって品が下がったので入れませんでした。

伝えたいことに結びつく表現には重さを払い、結びつかない表現は外す。美しさを「足すもの」ではなく、「伝えたいことから選ぶもの」として扱う判断です。

3D を選ぶ理由、選ばない理由

3D や動きが力を発揮するのは、写真や文章では伝わりにくいものがあるときです。製品の内部の構造、部品の動き、実際の大きさ、工程の順番。平拓の製品ビューア KARAKURI Viewer では、「3D は理解を早くするための道具」という考え方で、分解・断面・動きを見せています。

反対に、伝えたいことが写真と文章で十分に伝わるなら、3D は要りません。更新の頻度が高い情報や、閲覧する環境が限られる相手に向けた情報も、3D には向きません。

自社で確かめる問い

  • ホームページを見に来るのは誰で、何を判断しに来ますか。
  • トップを開いて数秒で、「何の会社か」「自分に関係があるか」が分かりますか。
  • 自社の製品や技術のうち、写真と文章では伝わらないものは何ですか。
  • 見た目を一新した後、何が変われば成功ですか。問い合わせの数ですか、中身ですか、商談の進み方ですか。
  • 公開した後、誰が、どれくらいの頻度で更新しますか。

選択肢

  • 情報の順番と文章を直す。 見た目は大きく変えず、誰に、何を、どの順で伝えるかを整理し直す。
  • 写真と図を作り直す。 製品や現場の写真、仕組みの図を、伝えたいことに合わせて撮り直し、描き直す。
  • 一部の製品だけ、3D や動きで見せる。 写真では伝わらない製品に絞って使う。
  • 製品ビューアをつくる。 内部・断面・動きを、相手が自分で確かめられるようにする。
  • 全面的に作り直す。 誰に何を伝えるかが大きく変わったときに。

関連する支援

平拓は、誰に、どの価値を、どう理解してもらうかを整理するところから、それを伝える Web の体験づくりまでを支援します。3D を使うかどうかも、その整理の結果として決めます。詳しくは会社や製品の良さが伝わる、ホームページと説明をつくるを、研究と作品は箱庭をご覧ください。

※本文のホームページの場面は、説明のための架空の例です。カバー画像は、箱庭の作品「雨に、ひらく」(平拓)の画面です。作品に登場する工房は架空のものです。