この記事は1分で読めます

【XD】ハンバーガーメニューの作り方

  • 投稿日
  • 更新日

あとで読む

【XD】ハンバーガーメニューの作り方

今回はAdobe XDを使ったハンバーガーメニューの作り方を解説します。
ハンバーガーメニューのアニメーションは意外と簡単にできるので、ぜひ試してみてください!

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

ハンバーガーメニューとは?

3本線のナビゲーションメニューのことで、クリックすることでメニュー画面が表示されます。ハンバーガーメニューは、主にスマートフォンサイトに用いられています。

実際にハンバーガーメニューを作ってみよう!

STEP
TOP画面とメニュー画面を用意する
XDで2つのアートボードを用意し、TOP画面とメニュー画面を作成しましょう。
STEP
プロトタイプモードでTOP画面とメニュー画面をつなぐ
画面左上の「プロトタイプ」をクリックして、プロトタイプモードに切り替えます。
TOP画面のハンバーガーメニューを選択し、矢印のハンドルをメニュー画面のアートボードにつなぎます。
メニュー画面のアートボードにつなぐと、TOP画面のアートボードに緑色の領域が表示されます。この領域がメニュー画面が表示される範囲になります。任意の場所に動かすことが可能です。
STEP
アニメーションの詳細を設定する
右側のパネルの詳細を設定します。
トリガーを「タップ」、アクションの種類を「オーバーレイ」に、アニメーションを「左にスライド」、イージングを「イーズイン」、デュレーションを「0.2秒」に設定します。
これで完成です!デスクトッププレビューで確認してみましょう!

まとめ

いかがだったでしょうか。思っていたよりも簡単に感じた人は多いのではないでしょうか。
ハンバーガーメニューはスマートフォンサイトには必ずと言っていいほどあるコンテンツですので、是非試してみてください!

この記事で使用したデータの
ダウンロードはこちら

利用規約 ※必ずお読みください

この記事を書いた人

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須