この文書は、Framerを学んでいる国内ユーザーが日本語資料の不足で感じる困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様に少しでもお役に立てれば幸いです。

なぜウェブサイトにストーリーテリングが必要なのでしょうか？

良いウェブサイトは単に「見た目が美しい」だけではありません。訪問者をウェブサイト内の物語に引き込み、最後まで滞在させる力はストーリーテリングにあります。ウェブデザインにおけるストーリーテリングは、一般的な体験を越えて没入型の旅を作り出す重要な要素です。

Framerは、このようなストーリーテリングサイトを実現するのに最適化されたツールです。この記事では、実際にFramerで作成された7つのウェブサイトの事例を紹介し、デザインとストーリーテリングがどのようにシナジーを発揮して単なるスクロールを一つの物語の旅に変えていくのかを確認しましょう。

1. Height

Heightサイトは、初めから独特なアプローチで注目を引きます。製品のビルディングプロセスを「未来を見通すタイムトラベル」に例え、物語を展開します。この比喩を通じてユーザーの共感を呼び起こし、興味を引きます。

デザインは清潔でシンプルで、一筋のラインがなめらかに続き、ユーザーを各セクションへ自然に誘導します。小さなアニメーションが軽やかに動きながら没入感を高め、文章も明確で注意深さが感じられ、ユーザーが最初から最後まで興味を維持できるサイトです。

2. NOLO

NOLOのウェブサイトは、小さな町で誰もが簡単にお金を集める過程を「ゲームのように楽しい体験」に展開します。訪問者は、これを単なる説明ではなく、一つの物語の中へ招かれる感じを受けるでしょう。

明るく活気あるデザインは、アプリのエネルギーをよく表現しており、スクロールするとスライドをめくるように各セクションが続きます。アプリの目的、解決しようとする問題、そして創造的な解決法が次々と登場し、自然なストーリーが完成します。明確に記述された文章、スムーズに繋がるアニメーションのおかげで、最後まで読みたい気持ちにさせてくれます。

サイトに移動

3. Unifiers of Japan

Unifiers of Japanサイトは、初めから強烈なビジュアル要素と魅力的なアニメーションで訪問者を引きつけます。このサイトは単に織田信長という人物を称える場ではなく、日本統一を始めた「伝説的な人物の人生へと入っていく歴史的旅」を伝える場所です。

力強いグラフィックとスムーズなトランジションが共に溶け合い、物語を生き生きと伝えます。各ビジュアルとインタラクティブ要素は単なる装飾ではなく、物語に深く没入できるように設計されており、スクロールに沿って自然に展開するストーリーは、ユーザーがその歴史に深く入り込める没入感を一層高めます。

サイトに移動

4. Melnūdens Coffee

Melnūdens Coffeeのウェブサイトは、単にスペシャルティコーヒーブランドを紹介するだけでなく、「豆が一杯のコーヒーに完成するまでの旅」を物語ります。ブランドの開始から、高品質な豆をいかに調達し、ローストとブレンドの過程を経て完璧な味を作り出すのかまで、一つのストーリーとして展開しています。

スリムなデザインと繊細なアニメーションは物語を生き生きと伝え、ユーザーがページを巡りながらコーヒー制作の各段階を体験するように案内します。この過程は単なる製品紹介を越え、ブランドと感情的に結びつけるために没入を助けるストーリーテリングです。

サイトに移動

5. Cancel Culture

Cancel Cultureのウェブサイトは、アブラハム・リンカーンの人生の中で現代の視点で「彼の人生の一部をキャンセルする」ことが起きたらどうなるかを探ります。これは、リンカーンの大統領任期中の議論を示し、歴史が現代的基準でどのように評価されるかを考えさせる場所です。

ビジュアル的に強いカラーリングと大きなアニメーションは物語を力強く伝えます。特に、アメリカ全土に存在する「リンカーン」という地名を含むインタラクティブマップは圧倒的な体験を提供し、「キャンセル・リンカーン」ボタンを押すと都市の名前が一つずつ消えていき、彼の遺産を消していく間接的体験を提供します。このようなインタラクションは単なる視覚効果を超え、ストーリーに深い考察を引き出す装置となります。

サイトに移動

6. Mars Rejects

Mars Rejectsは、10,000個のユニークなNFTキャラクターを中心に構成されたサイトで、ウェブサイト自体が一つのグラフィックノベルのように展開されます。地球が破壊され、影響力のある少数者だけが火星に脱出する世界観を設定し、残された者たちが「Mars Rejects」という叙事詩を作ります。

漫画スタイルで精巧に描かれたグラフィックとアニメーションは物語をリアルに伝えます。サイトの各セクションはストーリーの異なる側面を見せ、ビジュアルとストーリーが有機的に組み合わさり、没入度を引き上げます。

サイトに移動

7. Punkt

Punktのウェブサイトは、訪問者が入る瞬間に紙にスケッチするようなデザインで迎えられます。これは「UXライターが直接作業する様子」を思い起こさせ、このスペースを親しみやすく感じさせます。

特にミキサーに乱雑に入れたテキストのようなグラフィックは、絶え間ない修正と混乱を直感的に示しています。ユーザーがカーソルを乗せると文字が混ざり合い、デザイン内で日常の問題を創造的に視覚化しています。続く「chaos everywhere」という文言と揺れる線は、UXライターの困難をはっきりと顕示します。このサイトは機能的な説明を越えてユーザーの情緒的な結びつきを作り出します。

サイトに移動

効果的なストーリーテリングウェブサイトを作る方法

Framerでストーリーテリングウェブサイトを作るには、デザイン、コンテンツ、機能が調和する必要があります。下のステップに従って、実際に作成してみましょう。

• Step 1. ストーリーを視覚化する

  Framerのフリーフォームキャンバスを開き、伝えたいストーリーを視覚的に展開してみましょう。
  制限のないレイアウトを活用して、望む流れと雰囲気を自由に配置できます。

  
  

• Step 2: 適切なフォントを選ぶ

  ストーリーテリングにおいてフォントは感情を伝える重要なツールです。
  Framerに内蔵されたフォントやカスタムフォントを使ってストーリーのトーンに合った書体を選択しましょう。

  
  

• Step 3: ページとセクションをつなげる

  訪問者が自然にストーリーを追えるようにセクションやページをつなげましょう。
  Framerのナビゲーション機能を使ってストーリーが途切れずに続くように設計しましょう。

  
  

• Step 4: インタラクション要素を追加する

  インタラクションは物語に生き生きとした感覚を加えます。
  Framerのエントリーアニメーションやスクロール効果を取り入れて、重要なシーンを強調し、サイト全体にリズム感を持たせましょう。

  
  

• Step 5: AIでテキストを磨く

  ストーリーテリングは視覚的な要素だけでなく、テキストも重要です。
  FramerのAI Rewrite機能を活用してテキストをより明確で滑らかに仕上げましょう。デザインとテキストが調和することで、本当に完成されたストーリーになります。

ウェブサイトを一つの旅に仕立てよう

ストーリーテリングは単なるトレンドではなく、人々と深くつながる強力なツールです。ウェブデザインにストーリーテリングを統合すれば、ウェブサイトは単なる情報を提供するスペースを越え、訪問者が没入する一連の旅になります。

皆さんなら、どんな物語をウェブサイトで展開したいですか？

この記事は、Framer公式ブログの『7 professional storytelling websites: UX Narrative case studies』を翻訳・アダプテーションしたコンテンツです。