このドキュメントは、Framerを利用している国内ユーザーが英語の資料不足により学習に困難を感じることが多いため、それをサポートするため公式ブログの本文を日本語でまとめたものです。元の文章には含まれていない説明や例は、日本のユーザー環境に合わせて追加され、実務に役立つことを願っています。

以前はウェブサイトが単に情報を含む「静的ページ」だったのに対して、今はユーザーの体験と没入感が競争力となっています。特にノーコードツールのおかげで、誰でも簡単にインタラクティブなウェブサイトを作成できるようになり、単純な静的デザインはむしろ機会を逃していることになってしまいます。

しかし、ここで重要なのは「意味のない華麗さ」ではなく、ブランドメッセージに結びついたインタラクションを創り出すことです。以下の5つの実際の事例は良いインスピレーションを提供するでしょう。

Multi - インタラクティブな製品体験

コラボレーションソフトウェアは言葉よりも実演することが効果的です。Multiはリアルタイムコラボレーションプラットフォームとして、ウェブサイトで直接インタラクティブなデモを提供しています。

ヒーローセクションを過ぎるとすぐにコラボレーション環境が開き、複数のユーザーのカーソルや画面共有が同時に表示されます。実際にコラボレーションに参加しているような没入感を与えます。

Note: Framer AcademyのFreeform Canvas講義を追って似たような経験を作る方法を学びましょう。Framerを使用すると、ドラッグ可能なレイヤー（画像、ビデオ、テキストなど）を作成し、ホバー効果、プレスアニメーション、カスタムカーソルを使用してレイヤーをさらにリッチにすることができます。

ウェブサイトを見る

Deleito - 3D効果

スペインのバルセロナにあるハンバーガーチェーンのDeleitoは、ブランドアイデンティティをデジタルで見事に表現しました。最初の画面には3Dハンバーガーボックスが浮かび、クリックすると実際の包装のように開いてハンバーガーと共に「Bienvenidos al cielo（天国へようこそ）」というメッセージが現れます。その後もメニューアイテムを裏返して見たりドラッグすることができるインタラクティブな要素が続きます。
Note: FramerとSplineを一緒に使用するとインタラクティブな3Dオブジェクトを簡単に挿入できます。Splineで作成したオブジェクトをユーザーのインタラクション（ホバー、スクロールなど）に反応するように設定し、FramerのEmbedコンポーネントで埋め込むことができます。

ウェブサイトを見る

Momday Club - カスタムカーソル & インタラクティブキャンバス

スペインのラスパルマスにあるタトゥースタジオのモムデイクラブ(Momday Club)は、タトゥースタジオウェブサイトによく見られる要素をすべて備えています。自ら制作したタトゥーアートの画像ももっています。モムデイクラブは、訪問者がホームページで自分自身のバーチャルタトゥーを作成できるインタラクティブキャンバスを提供し、印象を各刻しています。

ホームページに入るとカーソルがタトゥーの針に変わり、画面の上に直接絵を描くことができます。ただ単に作品の写真を見るよりもずっと記憶に残る体験を与えます。

Note: Framerでは、カスタムカーソル機能を通じてカーソルに効果を追加したり完全に変更することができます。クリック、ドラッグ、ホバー状態に応じてカーソルが変わるように設定することで、ブランドアイデンティティを強化することができます。

ウェブサイトを見る

Flighty - スクロールストーリーテリング

Flightyは遅延予測、到着航空機追跡、リアルタイムアップデートなどの航空便に関する全ての情報を提供するアプリです。ほとんどのデータは管制塔やリアルタイムの航空機位置データなど、直接の情報源から収集されます。Flightyが有名な理由は、ユーザーがパイロットより先に航空便の遅延情報を入手できることです。

Flightyアプリのウェブサイトはストーリーテリング形式のスクロールを積極的に活用しています。ただ機能一覧を列挙するのではなく、ユーザーがスクロールするたびに旅行の旅程が段階的に視覚化されます。飛行前の準備段階から始まり、リアルタイムの飛行データを表示し、空港地図や飛行後の分析に移行します。このParallaxベースのアニメーションはユーザーに代表的な飛行体験を案内します。 

Note: FramerのParallax Scroll機能を利用すると、コンテンツを様々な速さで動かすことができます。Framerを使用するとサイトの各レイヤーに直感的なコントロールを使用してパララックス効果を簡単に追加することができます。例えば、様々なオブジェクトを異なる速さでスクロールする機能などがあります。

ウェブサイトを見る

Graphy - マイクロインタラクション

AIベースのデータ視覚化ツールGraphyのウェブサイトは小さなディテールで差別化を図ります。チャートにマウスを乗せるとバーが跳ね上がり、パイが回転し、線グラフが動きます。マイクロインタラクションがどのように複雑なツールをシンプルで魅力的にするかを示す優れた例です。

ランディングページの視覚化資料にマウスを乗せると、まるで生きているように見えます。円形チャートは回転し、バーチャートは浮かび、線グラフは回転します。 このような色とりどりのアニメーションは「複雑なデータを簡単で楽しく理解できる」というGraphyのブランド哲学を表しています。

Note: Framerでは、LottieFilesやRiveプラグインを活用して様々なアニメーションを活用し、魅力的なマイクロインタラクションでサイトをより豊かにすることができます。各ツールのFramerプラグインを使用すると簡単または複雑なアニメーションをデザインしてFramerのウェブサイトに直接適用できます。

ウェブサイトを見る

Framerでインタラクティブなウェブサイトを作る方法

魅力的なウェブサイト制作の鍵は細心のインタラクティブです。Framerを使うと複雑なコーディングなしで基本的なアニメーションから高度なインタラクションまで魅力的なインタラクティブなユーザー体験を制作できます。

1. イントロアニメーションで第一印象を作る

ページがローディングされる際に要素が順次登場すると、訪問者は自然にコンテンツに集中できます。Heroセクションではフェードイン、その後のセクションはスライドインやスケールアップなどを組み合わせてみてください。
ホバー効果やページ遷移効果もまた、ウェブサイトを複雑にすることなくインタラクティブな感触を加えることができます。

2. スクロールを一つの旅路に変える

Framerのスクロールアニメーション機能で、ユーザーの旅路を能動的に構成できます。ユーザーがサイトをスクロールするときにビデオ再生を自動的に制御するスクロールバリアントを設定できます。
同様に、スクロールベースのトリガーを利用してナビゲーションバーの外観を動的に調整しセクション間の遷移効果を作り出すことができます。
Note: ただしアニメーションは自然な流れを妨げないようタイミングの調整が重要です。

3. 3D効果で没入感を増す

FramerのTransform機能を利用すると要素にX、Y、Z回転を与えることができます。カードフリップ、インタラクティブな回転なども可能です。Splineと連動するとより多様な3D表現が可能になります。

4. コンテンツを動的に作る

Carouselコンポーネントはポートフォリオ、製品展示などで滑らかでスクロール可能なコンテンツセクションを作成し、Tickerはレビューやニュースフィードなどの無限のコンテンツループを生成します。両コンポーネントともMotionベースでInsertパネルから簡単に追加できます。

5. コンポーネント単位でアニメーション設定する

Framerの構成要素効果を使用すると構成要素にアニメーションとインタラクションを追加できます。
Opacity、Position、Scaleなどの属性をHover、Scroll、Clickなどのイベントに応じて調整してみてください。
例えば、ギャラリーでマウスに従って画像が傾き、テキストが現れ、クリック時に全画面表示に拡大するような構成です。
Note: 効果をレイヤー単位で適用するとより精巧にコントロールできます。

6. 性能最適化は必須

Framerはレンダー最適化のための機能が内蔵されていますが、無分別なアニメーション使用は速度低下につながる可能性があります。
メディアファイルは事前に圧縮し、オフスクリーンコンテンツはレイジーローディングを設定してください。特にフォールド上の領域ではAppearアニメーションの過度な使用を避けるのがよいです。

まとめ

Framerの強力なインタラクション機能をうまく活用すると、ユーザーを引き付けながらブランドメッセージも効果的に伝えることができます。むやみに効果を追加するのではなく、コンテンツの流れと目的に合わせて「考えられたインタラクション」を設計しましょう。制作の準備ができましたか？
Framerギャラリーでさらに多くのインスピレーションを得て、Framerアニメーションプラグインでツールキットを強化し、Framerに登録して自分だけのインタラクティブなウェブサイト制作を始めてください。

本稿はFramer公式ブログの「Five Exceptional Interactive Websites from the Framer Gallery」を翻訳・改作したコンテンツです。