コニファ・マメ知識：webデザインに関する用語まとめ
ハンバーガーメニュー（Hamburger menu）
ハンバーガーメニュー、あるいは漢数字の「三」によく似た3本線で構成されたアイコン文字を使っているので、単にハンバーガーアイコンと呼ぶこともあります。スマートフォンのアプリやPCブラウザ（Firefox、Googlchromeなど）、webサイトの設定やその他のメニューのアイコンとして、数年前から目にするようになり、現在も多用されているようです（2018年1月現在）。
このアイコンをタップあるいはクリックしてメニュー画面など表示すると、アイコンは「閉じる」を意味する「×」アイコンなどに変化するのが普通です。また、三点リーダーやそれを縦にしたものなどもハンバーガーアイコンと同じ意味あいで使われています。しかし、いずれもW3Cなど正式に策定されたわけではなく、一種の流行として広まっているものです。
最近は、ハンバーガーメニューの使用に対して疑問の声も増えてきました。スマホのアプリやPCブラウザなどを使う機会の少ない人にとって、一目見ただけでは何のマークか分からないという意見を多く見かけます。それを考慮したのか、ハンバーガーアイコンの下に小さく「MENU」などと記載するものも出てきました。ならば最初からアイコン無しで文字だけにすれば大きく見やすくなるとの声もあります。
また、ハンバーガーアイコンを使うと、目的のものにたどり着くために一手間多くなります。スマートフォンによるブラウジングの高速化を進めている大手IT企業が、アプリやブラウザにハンバーガーメニューを好んで使っているのが気になるところです。
プレースフォルダ（placeholder）
プレースフォルダ（placeholder）とは、フォームの入力欄において、その入力欄が何を入力するものなのか予め情報を示すものです。HTML5からplaceholder属性として導入されています。入力欄にフォーカスしたり、何か入力すると、消えます。
プレースフォルダ以外にその入力欄に関して情報が表示されていない場合、プレースフォルダが消えると何を入力するものだったのか迷うことを考慮して、フォーカスしたり、何か入力してもプレースフォルダを消さずに小さくしたり、位置を変えたりして残す工夫が増えています。
プレースフォルダの関連ページ：フリップアニメーション（flip animation）
パネルをホバー、またはクリックすると、表と裏が、左右または上下にくるっと回転するように切り替わるアニメーション効果やその仕組みを指します。
また、パネルではなく、本のページをシミュレートして、ページをめくるような動作を加えたものをフリップブック（flip book）ということがあります。少しずつ変化を加えた複数の絵を冊子状に束ね、それを素早くめくってアニメーション効果を生み出す「ぱらぱらマンガ」もフリップブックと呼ぶようです。
フリップアニメーションの関連ページ：フォールバック（fallback）
フォールバック（fallback）とは、システムなどに障害がおきたとき、それまでの性能や機能を制限したり、代替のハード、ソフトに切り替えたり、可動範囲を狭めたりするなどして、限定的ではあるものの稼働を続行すること、またはそのための仕組みを指します。
通信回線の場合では、高速の回線の状態が悪く、接続が途切れがちになってしまうとき、速度を犠牲にしてでも安定している低速回線に切り替え、接続の維持を優先することができるサービスなどを指します。
webデザインの分野では、新しい機能に対応できない古めのブラウザを考慮して、代替の仕組みを設置しておくことをフォールバックと呼びます。一例としては、ベクター画像であるSVGを利用する際、SVG未対応やSVG表示方法一部未対応のブラウザ用に、代替のpng画像などを設置しておくことなどがあります。次のソースのimgタグ部分がフォールバック画像になります。
<object data="012.svg" type="image/svg+xml" width="90" height="60"> <img src="012.png" width="90" height="60" /> </object>
インクリメンタルサーチ（incremental search）
検索方法のひとつで、検索したいキーワードテキストをすべて入力してから検索を開始するのではなく、入力途中であっても、逐語（入力の度毎）的に、それまでの文字列の内容でただちにそれに見合った候補を表示させるもの。
インクリメンタルサーチの関連ページ：CDN（Contents Delivery Network）・コンテンツデリバリネットワーク
各種コンテンツをweb経由で配信するために最適化されたネットワークを指します。アクセスが集中して、コンテンツ配信サーバーがダウンする事態を想定し、同じコンテンツをミラーサイトなどに置いて、アクセスを分散させ安定した配信を確保するための手段の一つです。
また、決められたサイズ内におさまりきれない数多くのコンテンツを切り替えて表示する際にもCDNが利用されます。
CDNと呼ぶ場合、主に大規模な商用のものを指しますが、学術研究用のCDNで非商用のものもあります。また、近年は、javascriptライブラリーやweb fontなどを配信するものもCDNと呼び、無償で利用できます。Google CDNやMicrosoft Ajax CDNなどが有名です。
無償のCDNを利用したhtmlの例
htmlの <head>に
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>などと記述することで、javascriptライブラリーのjQueryをhtml作成者側のサーバーに置くことなく、CDN経由で利用することができます。
カルーセル（carousel）・カルーセルパネル・カルーセル表示
英語のカルーセル（carousel）とは、開店木馬とか回転ラックを意味する言葉です。同様に画像やテキストなどのコンテンツをwebページ上で横方向にスライドさせて、回転（ループを伴い）するように見せる表現方式全体をカルーセルと呼びます。決められたサイズ内におさまりきれない数多くのコンテンツを切り替えて表示する際に使われる手法のひとつです。javascriptとcssで表現するのが普通です。
カルーセルのサンプルページ：スライダー（slider）・コンテンツスライダー
スライド映写機でフィルムを1枚ずつ映し出していくような見せ方をスライドショーといいますが、同様の動きで、デジタルカメラの画像やプレゼンテーション資料などのコンテンツを順番に表示する機能をwebで再現したものをスライダーと呼びます。jQueryが登場してからフェードイン、フェードアウト、モーフィングなどの効果を取り入れたスライダーが増えてきました。
格調高い雰囲気を持たせたスライダーをギャラリーなどと呼ぶこともあります。また、横や縦にスライドさせるスライダーボタン、スイッチも単にスライダーと呼ぶことがあります。
スライダーのサンプルページ：ツールチップ（tool tip）
ツールチップ（tool tip）とは、マウスのポインターを字句や画像などに重ねたときに、補足情報を表示するものです。一般的には、コミックのフキダシ状にするものが多いようです。似た機能としては、Mac OSのバルーンヘルプ、MS Officeのポップヒントなどがあります。主に要素のtitle 属性などを表示しますが、alt属性や別に用意した字句を表示するものもあります。
ツールチップのサンプルページ：ページネーション（pagination）、ページング
ページネーションとは、主に編集・レイアウトの分野で使われる用語で、前後のページに興味を持たせるように演出するなどの工夫全般を指します。
webデザインにおいては、1ページでは収まらないコンテンツをページ分割（ページング・Paging）し、複数ページを作成した際に、ページ送りして、すべてのページにアクセスしやすくする役割を持たせたものです。検索エンジンの検索結果に表示されるページナンバーを並べたものが、これにあたります
ページネーションのサンプルページ：ティッカー（ticker）・ニュースティッカー
ティッカーとは、限られた領域に多くの文字などの情報を表示するために、ゆっくり流して表示するもの。屋内、屋外に設置された電光掲示板や相場表示機などもティッカーの一部です。
webでも同様に、多くの文字などの情報をゆっくり流して表示する場合、ティッカーあるいはニュースティッカーと呼ばれます。以前はhtmlのmarqueeタグを使ったものが多くありましたが、marqueeタグは推奨されていないため、携帯用ページ以外ではあまり見かけなくなりました。また、Flashを使ったものもありますが、扱いや内容の変更が容易なjavascriptを利用したものが増えています。
ティッカーのサンプルページ：スピンボタン（spin button）
フォームのテキストフィールドの横などに配置して、数値入力のわずかな増減を補助的に入力できるボタンを指します。
スピンボタンのサンプル：アコーディオン、アコーディオンメニュー
webページにおいて、表示しきれない大量のコンテンツを非表示で並べ、メニュー部分をクリックするなどして、必要な部分を表示、他を非表示させるような仕組みを指します。伸びたり縮んだりするように見えることから「アコーディオン」と呼ばれます。
アコーディオンのサンプル：パンくずリスト（Bread Crumb）、パンくずナビ、トピックパス、フットパス
webサイト内で現在のページの位置（パス）をツリー構造を持ったハイパーリンクの一覧として、主に小さく表示するナビゲーションを指します。「パンくずリスト」という名前は、童話「ヘンゼルとグレーテル」の中で、森で道に迷わず戻れるようにと、道々パンくずを置いていった、という話しに由来しています
パンくずリストのサンプル：フリッパー、ページフリッパー（page flipper）
電子書籍のアプリによくあるユーザーインターフェースとして、本のページをめくって次のページに移る動作を再現したものを指します。
ページフリッパーのサンプル：シンタックスハイライト（Syntax Highlight）
PCのテキストエディタの機能として、主にプログラム言語やマークアップ言語のコードなどを記述する際に、コードの特定の種類を色分けしたり、フォントを替えたりして表示し、構造や構文上のエラーを視覚的にわかりやすくする仕組みを指します
webページにおいては、プログラム言語やマークアップ言語のコードをコンテンツとして表示する際、同様にわかりやすく表示することを主な目的にして、その部分がコードであることを示す意味もあるようです。
シンタックスハイライトのサンプル：ティーザー ページ（Teaser Page）、ティーザー サイト
ティーザーとは、新製品を発売する際、製品の断片的な情報を事前に公開して、消費者の興味を引くことを目的にしたプローモーション手法。ティーザー広告手法
このティーザーのための広告webページをティーザーページと呼ぶ。また、webサイト全体を使って、一つの新製品に関してプローモーションをおこなう場合、ティーザーサイトと呼ぶこともあります。一見すると広告のためのwebページとは思えないものもあり、紛らわしいとの指摘もあります。
モーダルウィンドウ（Modal window）
モーダルウィンドウは、アプリケーションなどを起動中に、何らかの起因によって開くアラートなどを表示するサブウィンドウ全般を指します。ユーザーがそれに対して適切に応答（OKボタンやCloseボタンを押したり、何かを入力するなど）しないと、制御が元に戻らない、という特徴があります。webでも同様の動きをするものをモーダルウィンドウと呼びます。
モーダルウィンドウのサンプル：レスポンシブwebデザイン（Responsive Web Design）
レスポンシブ webデザインは、PCやスマートフォン、タブレットなど、どのデバイスで閲覧しても、それぞれに最適化されるwebページを、ひとつのHTMLだけで作成するwebデザインの手法です。アクセスしてきたデバイスのブラウザー・スクリーンサイズを判別し、CSSでレイアウトを調整し最適化したwebページを提供するものです。
レスポンシブwebデザインサンプル
