ドロワーとは何かをスマホとWebの両面から徹底解説

折原 慧ウェブデザインデイ 編集ライター

「ドロワー」という言葉を、スマホの設定画面やWebデザインの解説記事で目にして、意味がよくわからないまま読み進めていた方も多いのではないでしょうか。

実は「ドロワー」は、英語で「引き出し」を意味する言葉です。この「引き出し」というイメージさえ押さえておけば、Androidスマホの用語も、Webサイトのメニューも、すべて同じ考え方で理解できるようになります。

これまでWebサイト制作やUI設計に携わってきた中で感じているのは、「ドロワー」という一つの言葉が、使われる場面によって少しずつ意味を変えていくため、初めての方が混乱しやすいということです。この記事では、基本的な意味から始めて、スマホ・Web・家具・レジ機器まで、それぞれの文脈を整理してお伝えします。

ドロワーの基本的な意味と語源

ドロワー（drawer）は、英語で「引き出し」を意味する一般名詞です。タンスや机に付いている、あの引き出しのことを指します。

語源をたどると、動詞の「draw（引く）」に「〜するもの」を表す「-er」が付いた形です。つまり「引くもの」＝「引き出し」というわけですね。

家具の文脈では、引き出し付きのタンスや机、収納家具全般を指すことがあります。特に、小さな引き出しがたくさん付いた整理用の家具を「ドロワー」「チェストドロワー」と呼ぶケースが多く見られます。

ちなみに英語の「drawer」には、「製図する人」「絵を描く人」「手形の振出人」といった別の意味もあります。ただ、IT・UIの分野で使われる「ドロワー」は、あくまで「引き出し」に由来する比喩的な使い方が中心です。

この「必要なときだけ引き出して、使い終わったらしまう」という引き出しのイメージこそ、すべてのドロワーに共通する考え方です。

Androidスマホにおけるドロワーの意味

スマートフォン、特にAndroid端末で「ドロワー」という言葉が出てきたら、それはアプリドロワーを指していることがほとんどです。

アプリドロワーとは何か

アプリドロワーとは、インストールされているすべてのアプリのアイコンが一覧で並ぶ画面のことです。

普段使っているホーム画面とは別に用意された、いわば「引き出し」のような領域だと考えてください。ホーム画面には載せきれない多数のアプリを、この中にすべて収納しておけるのです。

この仕組みのおかげで、ホーム画面はよく使うアプリだけでスッキリと保ちながら、それ以外のアプリも必要なときにきちんと呼び出せます。まさに引き出しの発想そのものですね。

ドロワーの開き方と操作方法

端末やホームアプリの種類によっては、ドロワーを持たず、すべてのアプリをホーム画面に並べる「全てホーム画面」タイプのUIもあります。iPhoneが以前このタイプでした。

アプリの起動やアンインストール、アプリ情報の確認など、Android操作のさまざまな起点になるため、ドロワーの使い方はAndroid操作の基礎とされています。

WebやUIデザインにおけるドロワー

ここからが、Webデザインやアプリ開発に関わる方が特に知りたい部分でしょう。

UIコンポーネントとしてのドロワーの定義

UIの世界でのドロワーとは、画面の端からスライドして現れるパネル型のメニューのことです。

普段は画面に隠れていて、小さなアイコンなどをきっかけに、スッと横や下から展開してきます。ここにナビゲーションのリンクや、設定項目、フィルター条件などを格納しておくわけです。

政府系のデザインシステムでは、ドロワーを「ブラウザ画面の四辺から展開し、モバイルメニューなどのコンポーネントを格納可能なコンテナ」と定義しています。「サイドシート」「フライアウト」「サイドバー」とほぼ同じ意味で扱われることもありますが、特に左右からスライドインする形を「ドロワー」と呼ぶケースが多い印象です。

ドロワーの主な用途

実際の制作現場でドロワーが使われるのは、主に次のような場面です。

ドロワーは画面全体を覆うこともできますし、元のコンテンツを一部残したまま重ねて表示することもできます。常時表示するのには向きませんが、補助的な情報や選択肢を「必要なときだけ見せたい」場面にぴったりのUIです。

ドロワーメニューとハンバーガーメニューの違い

ここで、多くの方がつまずくポイントを整理しておきましょう。

「ドロワーメニュー」と「ハンバーガーメニュー」は、混同されがちですが、役割がまったく違います。

3本線のアイコン、いわゆるハンバーガーメニューをタップすると、画面の左右からメニューがスライドして現れます。このとき、スライドして出てくるパネルの部分がドロワーです。

つまり、片方が「引き金」で、もう片方が「中身の箱」。両者はセットで働いているわけですね。似た概念に「スライドメニュー」「サイドメニュー」などがありますが、これらもほぼ同じ仕組みを指しています。

ドロワーメニューのメリットとデメリット

採用を検討する際には、良い面と注意すべき面の両方を知っておくことが大切です。

特に注意したいのが「見落とし」問題です。メニューを引き出しにしまうということは、裏を返せばユーザーがその存在に気づかない可能性があるということです。

また、閉じるボタンをわかりやすく配置したり、スワイプで閉じられるようにしたりと、開けたあとにきちんと戻れる設計を用意しておくことも欠かせません。動きの実装にはCSSアニメーションの知識が役立ちます。折りたたみUIという点ではアコーディオンメニューとも考え方が共通しています。

その他の分野で使われるドロワー

ドロワーという言葉は、IT以外の場面でも登場します。

家具の分野では、先ほど触れたとおり、引き出し付きのタンスや収納家具を指します。「チェストドロワー」といった呼び方も一般的です。

レジやPOSの世界では、キャッシュドロワーという言葉があります。これは、お札や硬貨を収める、あの現金の引き出しのことです。会計時に自動で開く仕組みになっているお店も多いですね。

アパレルなどでも収納什器を指してドロワーと呼ぶことがありますが、根っこにあるのはやはり「引き出し」という共通のイメージです。分野が変わっても本質は変わりません。

よくある質問

ドロワーとハンバーガーメニューはどちらが正しい呼び方ですか

どちらも正しく、指している対象が違います。スライドして出てくるメニューのパネル本体がドロワー、それを開く3本線のアイコンがハンバーガーメニューです。セットで使われるものと考えてください。

iPhoneにもアプリドロワーはありますか

従来のiPhoneはすべてのアプリをホーム画面に並べる方式でしたが、現在は「Appライブラリ」という、アプリを自動分類して一覧できる機能が用意されています。役割としてはAndroidのドロワーに近いものです。

ドロワーメニューはSEOに悪影響がありますか

メニュー内のリンクがHTMLとしてきちんと記述されていれば、隠れていても検索エンジンは読み取れます。ただし、ユーザーが気づきにくい導線設計は、間接的に使いやすさを損なう点に注意が必要です。

ドロワーは画面のどの方向から出すのが良いですか

ナビゲーションなら左右から、補助操作なら下からといった使い分けが一般的です。ユーザーの利き手や、片手操作のしやすさも考慮すると、右側から出す設計が好まれる場面も増えています。

実装は難しいですか

基本的な開閉だけならCSSとわずかなJavaScriptで実現できます。多くのUIフレームワークにドロワー用の部品が用意されているため、ゼロから作らずとも導入しやすいUIパターンです。

まとめ

ドロワーは、突き詰めれば英語の「引き出し」という一語に行き着きます。この共通イメージさえ持っておけば、Androidのアプリ一覧も、Webのスライドメニューも、レジの現金トレイも、すべて同じ発想で理解できます。

特にWeb制作に関わる方は、「隠すことのメリットと、気づかれにくいというデメリット」を天秤にかけながら設計することが大切です。まずは身近なスマホやサイトでドロワーの動きを観察してみると、理解がぐっと深まるはずです。