JOURNAL, Webと仕事, Webデザイン, 人の観察 |

人は、自分の世界観で生きている

世界観って、なんだろう？

世界観とは？

わたしたちは普段、「世界観」という言葉を、よく使っています。映画やアニメ、ゲームだけではありません。ファッションにも世界観があるし、店舗にも世界観がある。無印良品には無印良品の世界観があるし、ジブリの作品には、ひと目見ただけで「あ、ジブリだ」と感じる世界があります。

「世界観って、なんだろう。」

なんとなくわかっているし、感じている。でも、それを言葉で説明しようとすると、なかなかうまく説明できません。ウェブデザインの制作現場においても、「世界観の設計」は、とても重要な役割を担っています。

世界観は「感じるもの」

たとえば、映画を観たとき。画面に映っているのは、登場人物だったり、建物だったり、風景だったりします。それは、「懐かしさ」だったり、時には「怖さ」だったりするかもしれません。静か・華やか・そしてどこか寂しい。そんな目に見えない「何か」を感じ取ったとき、いろいろなものが組み合わさって、ひとつの空気が生まれます。

その空気と感情を、わたしたちは「世界観」と呼んでいるのではないでしょうか。世界観は、そこにある「もの」ではなく、「そこから感じるもの」です。そして、世界観は、人それぞれ個々に感じるもの。そして自由。だから、世界観に正解はないんですね。

ウェブデザインの世界観。

ウェブデザインやマーケティングの場合は、映画やゲームとは少し違うところがあります。それは、「何を伝えたいのか」が先にあるということ。自由に受け取っていいのではなく、「伝えたいこと」が明確にあります。

たとえばホテルのウェブサイトなら、「日常を忘れて、静かな時間を過ごしてほしい」というホテルと、「家族みんなで楽しい休日を過ごしてほしい」というホテルでは、同じホテルでも伝えたいことが違います。なぜなら、客層が違うからです。伝えたいことが違えば、当然、世界観も変わります。

わたしはここを、コンセプト → 世界観 → デザインという順番で考えています。まず、何を伝えたいのか。それを、どんなふうに感じてもらいたいのか。そして、その感覚を目に見えるものへ変えていく。それがデザインです。

人はテキストを読む前に、デザインの空気を感じています。ウェブサイトを開いた瞬間に、「高そうだな」「楽しそう」「なんとなく安心できそう」「自分にはちょっと違うかな」そんな判断をしています。それは、一瞬で感じてしまうイメージなのだと思います。

まだ内容をほとんど知らないのに、開いた瞬間に、何かを感じてしまう。情報を伝える前に、無言の空気が先に伝わってしまう。この先を読むか読まないか、興味が持てるか持てないか。一瞬のイメージで大方決まってしまいます。

わたしは、世界観というものを単なる「雰囲気づくり」だとは考えていません。もちろん、きれいなサイトをつくるためだけのものでもありません。伝えたいことを、説明する前に感じてもらう。伝えたいことを、しっかり伝えるために、世界観はとても重要だと考えています。

世界観をつくる要素。

ウェブデザインの世界観は、写真・ビジュアル／言葉・コピー／書体・フォント／余白・レイアウト／アニメーション／色・トーン。これらの要素が組み合わさることで、ひとつの世界観が生まれます。

写真・ビジュアル

写真は、一瞬で世界観を伝える。

写真は、同じ被写体でも、ライティングやアングルによって印象がまったく変わります。人物写真であれば、年齢や性別、表情によっても、見る人が受ける印象は大きく変わります。カメラ目線の笑顔なら、親しみや安心感を感じやすい。一方で、ふとした自然な表情を切り取れば、その場にいるようなリアリティが生まれます。

また、彩度を抑えたり、陰影を強くしたりすることで、静けさや重厚感を表現することもできます。写真を選ぶ際は、単に「きれいな写真だから」という理由だけで選ばないことです。「なぜ、その写真が選ばれたのか？」世界観に大きな影響を与える写真は、慎重に選定する必要があります。

言葉・コピー

ことばのちから。

世界観をつくるうえで特に重要なのが、キャッチコピーです。キャッチコピーは、できるだけ短く、伝えたいことや、ユーザーが共感できることを、できるだけ直球で届けます。たった一行でも、言葉は人の心を動かします。「これ、自分のことだ」「そうそう、これが言いたかった」そんな感情が生まれたとき、そこに共感が生まれます。

AIを味方に。

近年ではAIも、目的やターゲット、伝えたい内容をきちんと与えれば、さまざまなキャッチコピーを提案してくれるようになりました。そのまま採用する必要はありません。自分では思いつかなかった言葉や切り口を探すための「壁打ち相手」として使うだけでも、とても有効だと思います。

自分の心を動かす。

心を動かす訓練を。
人を感動させるには、まず自分の心を動かすこと。
自分の心が、なぜ動いたかを問い詰める。
そうすると、ああそういうことかと、
人もわかってくれる。

『松本隆 言葉の教室より』（延江浩著／マガジンハウス）

言葉は、たった一行でも、人の心を動かすチカラがあります。日常の中で、「自分はなぜ、心を動かされたのか？」に気づく。小さな感動を見逃さないことが、誰かを感動させることに繋がります。

書体・フォント

書体は、生きている。

書体も、世界観に大きく影響します。日本語のWebデザインでよく使われる書体を大きく分けると、ゴシック体と明朝体があります。ゴシック体は線の太さが比較的均一で視認性が高く、現代的、力強い、シンプル、親しみやすいといった印象をつくりやすい。

一方、明朝体は線に強弱があり、繊細さ、上品さ、伝統、知性などを表現しやすい書体です。もちろん、すべてがこの通りになるわけではありません。同じゴシック体でも、太さや文字間、サイズによって印象は大きく変わります。

「なぜ、そのフォントを使うのか？」
フォント選びは、伝えたいことを適切に伝えるための手段です。慎重に選びましょう。

手書きフォントの効果

近年、ウェブサイトやチラシでもよく見かけるのが「手書きフォント」です。手書きフォントというと、「親しみやすい」「やわらかい」というイメージを受けますが、それだけではありません。

手書き文字は、まさに「人が書いた」というイメージを与えます。書いた人の癖や勢い、温度のようなものが残る。まるで「誰かがそれを言っている」ように感じさせる。整然とした活字とは違い、文字の線や大きさが均一ではないため、そこには少し賑やかさや動きも生まれます。手書きフォントによって全体のイメージが、大きく変わりますから、採用する際には、注意が必要です。それほんとうに、手書きフォントが合っていますか？

余白・レイアウト

余白は、呼吸する。

余白は、世界観をつくります。余白を大きく取れば、ゆったりとした印象や上質さ、落ち着きを表現しやすくなります。逆に情報を密度高く配置することで、活気や勢いを感じさせることもできます。でも、「高級感を出したいから、余白を広くすればいい」というわけではなく、余白が大きすぎると、情報同士の関係がわかりにくくなったり、間延びして見えたりします。逆に余白が足りなければ、窮屈になり、読むこと自体が疲れてしまいます。余白は、情報と情報の関係を整理し、見る人の視線や呼吸をつくるための空間なのです。

アニメーション

静と動をつくる。

ウェブデザインは、アニメーションによって、「時間」と「動き」を加える表現ができます。ゆっくり写真が現れ、文字が静かに浮かび上がる。スクロールすると、次の世界が開いていく。反対に、素早い動きや大胆な切り替えによって、エネルギーや躍動感を表現することもできます。

効果役割・意味
注目・印象付け動きで視線を集め、重要な情報やメッセージを印象的に伝えます。
躍動感・世界観の表現ブランドの個性や空気感を動きで表現し、サイト全体に一体感を生み出します。
理解のサポート情報の流れを視覚的に整理し、内容の理解を助けます。
感情の高揚・没入感ストーリーへの没入感を高め、感情を動かす効果があります。
ナビゲーションの補助次に見るべき場所や、操作の流れを自然に誘導します。

アニメーションには、「印象づける」という大きな効果があります。さらに、動きによって視線を誘導し、「次はここを見てください」という順番を、言葉で説明しなくても伝えることができる。静と動をつくる。このメリハリが、Webサイト全体のリズムを生みます。

印象づけたい場面では動的な演出を加えることでより強い印象を残せますが、テキストをしっかり読ませたい箇所では静的な表示にするべきでしょう。

アニメーションはユーザーの視線や行動を大きく左右します。そのため、情報の的確な伝達を妨げてしまうようであれば、どれほど美しい演出であっても逆効果になってしまいます。ただ動かすことが正解なのではなく、どのように取り入れれば効果的なのかを慎重に設計することが重要です。

ストーリー性と世界観。

共感 → 興味・期待 → 理解・納得 → 行動・未来

様々な要素をうまく取り入れ、それらをひとつの線にすることで、ウェブサイトは、ストーリー性を生み出します。ストーリーには、流れがあり、感情を途切れさせないことが、世界観全体を「体験」に変える鍵になります。サイトを訪れた人が、最初に何を感じ、次に何を知り、どう気持ちが変化し、どこへ着地させるのか。

その感情の流れを設計します。全体がつながっていること。そして、そこにリズムがあること。どこか一箇所でも世界観に合わないものが入ると、そこに「違和感」が生まれます。

せっかく引き込まれていても、小さな違和感によって、高まっていた感情が一気に冷めてしまうことがあります。特にLP（ランディングページ）は縦長の設計ですから、「共感→興味→理解→納得→行動」ユーザーの感情を途切れさせず、目的まで運んでいくことが、マーケティングとして重要なポイントだと考えます。

色・トーン

カラーコンセプト

世界観をつくるうえで、「配色」は、もっとも大きな影響を与えます。同じ写真、同じ書体、同じレイアウトであっても、色が変わるだけで、イメージが大きく変わります。コンセプトを伝えるために、選ばれた色を、コンセプトカラーと呼ぶことがあります。「なぜその色なのか？」ここにも、伝えるための理由が存在しています。

※「色」については、実に奥深い世界があるので、
また別記事で、掲載してみたいと思います。

世界観って何だろう？

世界観は、目には見えません。でも、わたしたちは、確かにそれを感じています。映画を観ても。お店に入っても。Webサイトを開いても。そこに流れている空気を、知らないうちに感じ取っています。そして同じものを見ても、何を感じるのかは、人によって少しずつ違います。好きだと思う人もいれば、なぜか落ち着かないと感じる人もいる。

それはきっと、みんなそれぞれ違う経験をして、違うものを見て、違うことに心を動かされながら生きてきたからなのでしょう。わたしたち自身の中に、それぞれの価値観、そして世界観がある。共感したり、惹かれたりしながら、自分の世界観がある。

人は皆、自分の世界観の中で、心地よさを見つけながら、暮らしているのではないでしょうか。

お読みいただきありがとうございました。
MITSUYO NAKATA.