全ページに表示されることになるメニューです。
一番初めにWebサイトの導線となる重要な項目でもあります。
ヘッダーメニューを指すこともあります。

※ちなみにナビゲーションは大体メニューだと思っていれば大丈夫です。

ほとんどの場合がどのページでも表示されており、スクロールしてもついてくるような形になることが多いかと思います。

そのため、グローバルナビゲーションのメニュー項目が多いと、本来の導線としての役割を損なってしまったり、ユーザーの視界を遮ってしまうことにも繋がりかねませんので、ページ量が多いサイトであれば、グローバルメニューに表記するメニューの数は絞ったほうがいいでしょう！
（どうしてもの際には後述のサイドナビやドロップダウンを活用しても良いですね！）

ページ（もしくはページ内のコンテンツ）の右や左に配置されるメニュー一覧になります。

そのコンテンツの補足情報が載ったり、記事であれば関連記事を載せたり、グローバルナビゲーションには載せきれなかったページへのメニュー、またはそのコンテンツと繋がりが深いページへのリンクが載ることもあります。

活用方法は様々ですので、ユーザビリティ（ここではユーザーが欲しい情報へ行き着きやすくするサイトの使いやすさとします。）の向上のためにも、ページやコンテンツに合わせ、上手に使いましょう！

主にスマホ時のメニューとして使われている3本線のメニューボタンです。（2本線もあります。）
視界を遮りやすいグローバルメニューは、元々の視界が狭いスマホでは邪魔であるため、代わりとしてよく用いられるようになりました。

MATEREATEではPC表示時にも採用しております。

例えば、メニューの項目にマウスを置いた際に、追加の項目や詳細、サブメニュー等がびよーんと下に出てくる機能です。
垂れ幕のような感じをイメージすれば大丈夫でしょう。
「メニュー項目多くなっちゃうから、そこはドロップダウンにしよう」とか言った感じで使うと良いかと思われます。

特にメニューに絞る必要はなく、別の項目へも使用できます。（コンテンツ内の要素に補足の情報を追加する等）

項目をクリックで、子項目が「展開」または「折りたたみ」ができる機能です。
ドロップダウンは主にマウスを置いた時に出てくるイメージですが、アコーディオンは主にクリック（スマホなら項目をタッチ）でユーザーが開閉することを指すことが多いです。

項目が多くなってしまった際、ページが煩雑になってしまったり、デザイン性が損なわれてしまったりを避けるために使用したりすると良いかと思います。

またナビゲーションのみならず、記事の内容やコンテンツの詳細を折りたたんでおき、「read more」として展開するといった使い方もできます。

ポップアップ

正に「ポッと出てくるやつ」そのものです。

ライトボックスとモーダルウインドウ、どちらもポップアップです。

ライトボックス

機能としては、小さく表示されている画像を大きく表示してくれる機能です。

特に拡大表示時に背景が暗くなるものを指します。

暗くならない場合は特に名称はありません。

モーダルウインドウ

ライトボックスのように、それがページの上に被さるように表示された際、その表示されているものにしかアクションできないものを指します。

モーダルでのライトボックスが表示されている際は、その表示されているものを消さない限り、別のアクションは行なえません。

表示されていても後ろのコンテンツにアクションを起こせるのであれば「非モーダル」です。

上記のような感じとなります。

上記は一時期のトレンドではありましたが、ユーザーへストレスを与える原因にもなってしまいやすい機能となります。
ある人の調査では普段の生活でWebサイトを徘徊していたりして、1週間で25回ものポップアップへ遭遇したという結果が出たそうです。

そう言った反面、活用の仕方によっては便利な機能でもあるかと思います。

例えば、イラストや写真のギャラリーにおいてのライトボックスは非常に有効かと思います。
広告としてのポップアップの表示は、タイミングによってはユーザーの次に取ろうとしていたアクションの妨げになる可能性が大いに有り得ます。
しかしながら、会員制のようなある程度訪れるユーザーが能動的に訪れているサイトなどで、キャンペーンやセール情報・クーポンの配布など、ユーザーがお得に感じる情報を告知するような使い方はありなのではないでしょうか。

モーダルであれば、完全に行動を制限することにもなりますが、例えばお問い合わせ等にて大切な情報を入力してもらったあとの確認用としての使用などは自然ではないでしょうか。

如何にユーザーにストレスを与えることなく活用するのかが鍵となりそうです。

この3つだけを詳しく取り上げた記事も今後投稿しようと思っておりますので、お楽しみに！

画像やコンテンツが横に流れるような機能です。
主にメインビジュアルや、TOPページ内の記事一覧コンテンツ部分、ギャラリー部分などで使用されます。

カルーセルとはメリーゴーランドの意味で、スライドの動きがメリーゴーランドのように回転しているように見えることから、カルーセルと呼ばれているようです。

その名の通り、押したらページ内のトップへ戻ることが出来るボタンです。
次のページに行くためや、お問い合わせをするために、わざわざ1番上までスクロールしなければならないような煩わしさを回避するために、多くのサイトで導入されるようになりました。

是非実装したい機能です。

何かしらの要素を、スクロールと同時について来させる機能です。
各ナビゲーションや「お問い合わせボタン」を常に表示させておきたい場合に使用されるかと思います。

他にもスクロールアニメーションとしての活用で、何かしらのコンテンツをページのある部分から出現させ、ある部分まで行くと消えるような機能として使用できます。

上手く活用すればコンバージョン率を上げることにも繋げられる可能性があるかもしれませんので、便利だと思われる反面、邪魔だと感じるユーザーも中にはいるので、活用に関しては吟味を重ねたい機能かと思います。

主に記事（ブログ）のアーカイブページや、検索結果一覧、カテゴリ一覧などに使用されます。

記事のアーカイブページの場合、全ての記事を表示する際に、記事の数が多ければ多いほど、縦長なページとなってしまいます。
検索結果一覧、カテゴリ一覧も同様に情報量の多いページとなります。

それらのページを適度な長さに区切って、複数ページに分割する機能となります。

また一覧ページのみならず、通常の記事ページの長い文章を分割して、ユーザーの操作に応じて切り替えられる機能としてもページネーションが使われます。

ですがこの場合は、あまりにも分割しすぎると煩わしく感じてしまい、離脱が増えるなど、ユーザーの行動が悪くなる可能性もあります。

主にボタンまたはメニュー項目などに、マウスを置く（マウスカーソルを持っていく）際に動きが出るアニメーションです。

ボタンの色が変化したり、項目名が変化したりなど、多くのホームページで見る機会があると思います。

以下で紹介するアニメーションと比べると、ちょっと地味に思えるかもしれませんが、実はホームページにおいては比較的重要な役割を秘めていたりします。

例えばですが、サイトデザインが多様化する現在では、今までのようなひと目見ただけでボタンと分かるようなものに加え、単におしゃれなテキストと線のみでリンクボタンを表しているものも増えてきました。
今まで「四角いもの＝ボタン」であると認識していたとしたら、パッと見て押すことができるものだと分からない場合も多いでしょう。

そんな時に、マウスをホバーするとテキストと線が動きを見せてくれると、「これはリンクボタンだ！」という証にもなりますね。

他にも、従来の四角いボタンでも、ホバーした際に色が変わったり、動きを見せてくれると「押してみようかな」と意欲をそそる効果もあります。

上手に起用したい機能の一つです。

サイトに訪れた際に、例えば会社ロゴがじわっと表示されるようなやつです。
訪れる度に表示されるのも少し煩わしいように思えるので、再来訪者にはしばらく表示させないようにするなどの工夫も必要かもしれません。

何かコンテンツを読み込んでいる間やダウンロード等している間に、ぐるぐる表示されているようなアニメーションです。

待っているユーザーを退屈させないためだったり、現在本当にローディングされているという証拠のような働きもありますが、こちらの記事
知っているようで知らない？SEOとWebデザイン（ページデザイン）の関係性について
でも紹介していますが、表示の仕方によってはCLS（Cumulative Layout Shiftの略で、「累積レイアウト変更」の意味）に関する問題性を起こしてしまう可能性もあります。（ローディングアニメーションのせいで各要素が思わぬズレを生じてしまったりした場合など）

ただ適切に表示すれば問題はないかと思うので、何かのダウンロードが多いサイトなどでは実装を検討しても良いのではないでしょうか。

スクロールする度に要素が次々に現れる機能です。
サイトを一気におしゃれに見せることもできるので、古くから人気の機能の一つです。

ですが、こちらもローディングアニメーション同様に、表示の仕方によってはCLS（Cumulative Layout Shiftの略で、「累積レイアウト変更」の意味）に関する問題性を起こしてしまう可能性もあります。

当サイトでも使用しておりますが、当初はずっと怒られていました(´；ω；｀)
工夫を凝らして無事解決することができましたが、当初はフェードインアニメーションが原因とはわからず、様々なことに時間を費やしてしまった記憶がございます。

Webサイトパフォーマンスのスコアが全てではないですが、よりクオリティーの高いホームページ制作を目指すためのいい勉強にもなりました。

以上、簡単にではありますが、サイトの見た目に拘る機能を紹介させていただきました！
少し実装に際して注意・吟味しなければならない機能も中にはありますが、これだけ知っていれば見た目のイメージを整えていくことも出来るのではないでしょうか。