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

準備されたメニューコンポーネントをリミックスで簡単に活用する

デザイナーのIrfan Azizは、複数のトップデザイナーがFramerで制作したメニューをまとめました。これらのメニューは、さまざまなデザインスタイルと機能を持ち、プロジェクトの性格に合わせて選ぶことやリミックスしてカスタマイズが可能です。

Dial Menu — Josh Guo

Josh Guoが作ったダイヤルメニューは、円形の構造に複数のボタンが配置された形状です。直感的なインターフェースで、さまざまな機能ボタンを一目で配置し活用できます。

プレビュー → リミックス →

Mars Rejects Menu — Pepe Torrado

Pepe Torradoは、未来的なデザインとダイナミックな動きを持つ独特なメニューを制作しました。複数のボタンが含まれており、用途に応じて自由に修正し活用できます。

プレビュー → リミックス →

Smooth Dock — rafunderscore

rafunderscoreが制作したSmooth Dockメニューは、スムーズで洗練された水平構造のメニューです。アイコンにマウスを乗せるとインジケーターとカテゴリー名が表示され、複数のページに迅速に移動する必要があるウェブサイトに適しています。

プレビュー → リミックス →

Glowing Tabs — Harsh Kedia

Harsh KediaのGlowing Tabsメニューは、クリック時にタブが輝く効果が特徴です。複数のタブを使うナビゲーションが必要なウェブサイトに適しています。

プレビュー → リミックス →

Apple Dock — Mani

Maniが作成したApple Dockメニューは、AppleのDockスタイルからインスピレーションを得たシンプルでミニマルなデザインです。アイコンにマウスを乗せるとサイズが変わり、ユーザーは直感的に機能を把握できます。多様な機能に迅速にアクセスする必要があるウェブサイトに適しています。

プレビュー → リミックス →

Collapse Menu — Irfan Aziz

本記事の著者であるIrfan Azizも、Collapse Menuを自身で制作しました。垂直構造のメニューで、マウスを乗せると展開し再び閉じる方式です。OHM Studioのロゴからインスピレーションを得て作られており、スペースの有効活用とシンプルなインタラクションに適しています。

プレビュー → リミックス →

まとめ

これらすべてのメニューは、Framerで直接プレビューやリミックスが可能で、簡単にプロジェクトに適用できます。皆さんは、これらのメニューの中でどれを最初にプロジェクトに適用したいですか？単純なナビゲーションを超えて、サイトに個性と機能をプラスしたいなら、今日紹介したメニューをぜひ活用してみてください。

本記事はFramer公式ブログの「Ready-to-remix menus for your next project」を翻訳・アレンジしたコンテンツです。