本ドキュメントは、Framerを学ぶ日本国内のユーザーが日本語資料の不足により直面する困難を解決するため、公式ブログの内容を日本語に翻訳し、実務に有用な情報を追加しました。Framerを使用する皆さんに少しでも役立てば幸いです。

ポートフォリオをより魅力的に見せる

最新のプロジェクトリストを単に列挙するのではなく、よく構成されたインデックスページを作成すると、サイト全体が引き立ちます。単なるリストではなく、ユーザーと対話できる体験にすることで、訪問者に長く記憶に残る印象を与えることができます。この記事では、Framerコンポーネントを活用した方法を紹介しており、それを直接リミックスして適用することも可能です。

拡大する画像のホバーインタラクション

最初の例では、ホバー時に画像が表示される効果を使用しました。基本状態では画像の不透明度を0%に設定して小さく中央に配置しています。ホバー状態になると画像が表示され、大きくして角に移動させることで動きのある演出をします。テキストにはDifferenceブレンディングモードを適用して、テキスト要素に半透明の効果を追加しました。各項目ごとに異なる効果が適用され、それぞれの項目に対して効果を別々に制作しました。

大きいサイズの画像を埋める

2番目の例では、リスト項目の上にマウスを置くと画像が画面全体を埋める効果が現れます。基本状態で大きな画像は隠し、ホバー時に表示されるように設定します。また、コンポーネントの左側に矢印が表示されるように設定しましたが、OverflowをHiddenにして基本状態では見えないようにしました。コンポーネントはStackで整理されますが、画像はAbsolute位置を使用して独立してサイズと位置を調整しました。Propertiesパネルでタイトル、画像、年を追加し、このコンポーネントのバージョンを簡単にカスタマイズできます。

強調される背景付きのカード

3番目の例では、マウスを置くとカードの後ろに強調される背景(Accent)が現れます。画像を少し回転させ、テキストと垂直に整列させて下から上に移動し、微細な動きを与えます。Propertiesパネルで整列方向(左/右)、タイトル、画像、強調背景を自由にカスタマイズできます。

スライドするビデオサムネイル

4番目の例では、マウスを置くと小さなビデオサムネイルが左からスライドして表示されます。基本状態でビデオサムネイルの不透明度を0%にしてサイズを縮小しておき、ホバー状態では表示させてサイズを大きくし、全体のコンテンツが右に移動するような効果を与えます。Propertiesパネルでビデオファイル、タイトル、年を希望の通りにカスタマイズ可能です。

長いリストの背景ビデオ

5番目の例は、複数の項目で構成された長いリストを制作しました。項目にマウスを置くと、その項目の背景にビデオが表示されます。基本状態ではステータス表示を「NO」にし、ホバー時のみ「YES」となるように設定します。Stackで構成されているため、すべてのコンポーネントがきちんと整理されています。また、ビデオにはAbsolute位置を適用してサイズと配置を自由に調整できます。Propertiesパネルでビデオ、タイトル、年、タグの表示有無を簡単にカスタマイズできます。

ぼかし背景画像付きのテキストマスク

最後の例は、ぼかし処理された画像とテキストマスクを活用した例です。ホバー時にぼかし画像を画面全体に表示し、テキストがその画像をマスクとして利用することで独特な効果を提供します。ただし、ぼかし画像のサイズはパフォーマンスに影響を与える可能性があるため、適切に調整して使用する必要があります。Framer SupplyのText Maskコンポーネントを使用すると簡単にマスクを適用でき、テキストマスク内で使用する画像のYオフセットを調整して希望の形を作ることができます。

印象に残るポートフォリオを作る

単純なリストを越えて、インタラクティブなポートフォリオインデックスは訪問者にサイトへのより深い印象を与えます。この記事で紹介した技法を取り入れることにより、皆さんの作品をより独創的で視覚的に魅力的な方法で見せることができます。皆さんならどのようなインデックス効果をポートフォリオページに最初に適用してみたいですか？プロジェクトをリミックスして皆さんだけの特別なポートフォリオページを作りましょう。

Remix →

この記事はFramer公式ブログの「Engaging portfolio index pages to showcase your work」を翻訳・脚色したコンテンツです。