【初心者向け】WEBで見かけるけど名前を知らない機能まとめ!何て検索すればいいか分からない“あしらい”集めました。

SKILL UP
スポンサーリンク

こんにちは!デザイナーのmico(@micos_design)です。
WEBデザインをしている時、こんなことで困った経験はありませんか?

ハチ
ハチ

いろんなサイトで見かけるアレ、ぼくのサイトにも取り入れたいけど名前がわからないよ〜!何て検索したらいいんだろう?

mico
mico

そもそも名前がわからないと、検索するのは難しいですよね

今回は、そんなよく見かけるけどそういえば名前を知らないWEBの“あしらい”をまとめてみました。サイト制作のお供として、索引がわりに利用してもらえたら嬉しいです!

スポンサーリンク

アコーディオンメニュー

See the Pen CSS + HTML only Accordion Element by Alex Bergin (@abergin) on CodePen.

あやふやな通称

  • クリックすると開くやつ
  • 最初は閉じて折り畳まれてるやつ

検索キーワード

その名の通り、楽器のアコーディオンが由来ですね。折り畳まれているさまをジャバラの部分にたとえているようです。

日本語の場合

アコーディオンメニュー、折りたたみメニュー

英語の場合

accordion menu

モーダル/ポップアップ

See the Pen Bootstrap 4 Modal Demos by SitePoint (@SitePoint) on CodePen.

あやふやな通称

  • クリックするとふわっと出てくるやつ
  • お知らせとか注意でよく使われてるやつ

検索キーワード

通知や確認のために使用されることが多い機能ですね。

日本語の場合

モーダルウィンドウ、モーダルダイアログ、ポップアップウィンドウ

英語の場合

modal、popup

フェードイン/アウト

See the Pen Element Fade In on Scroll by Anna Larson (@annalarson) on CodePen.

あやふやな通称

  • ふわっと出てくるやつ
  • ページを開くとスッと上がってくるやつ
  • 浮かび上がって表示されるやつ

検索キーワード

これ!という正式名称があるわけではないので、以下のような組み合わせて検索してみるとよさそうです。

日本語の場合

ふわっと、出現、フェードイン、フェードアウト

英語の場合

Fade in、Fade out、Scroll、Animation

ハンバーガーメニュー(バーガーメニュー)

See the Pen Perfect Full Screen Humberger Menu(jQuery) by GlitchWorker (@glitchworker) on CodePen.

あやふやな通称

  • スマホ版のナビゲーション
  • 上の方にある三本線のやつ
  • 押すとメニューが出てくるやつ

検索キーワード

その名の通り、形がハンバーガーに似ているためこう呼ばれています。

日本語の場合

ハンバーガーメニュー、バーガーメニュー

英語の場合

humberger menu

パララックス(視差効果)

See the Pen Pure CSS Parallax Scrolling by Keith Clark (@keithclark) on CodePen.

あやふやな通称

  • スクロールに合わせて動くやつ
  • 時間差で動くやつ
  • 違う速さでスクロールするやつ

検索キーワード

ブロックがレイヤー分けされていて、それぞれ違う速さで移動するような効果のことを言います。日本語で言う「視差」の意味は以下の通り。

視差(しさ)は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差。パララックス (英:parallax)ともいう。

出典: フリー百科事典『ウィキペディア(Wikipedia)』
日本語の場合

パララックス、視差効果

英語の場合

parallax

フローティング〇〇

See the Pen Popolzuha (React + DOM) by rmx (@rmx) on CodePen.

あやふやな通称

  • スクロールに合わせて付いてくるやつ
  • ずっと表示されているメニュー

検索キーワード

メニューなら「フローティングメニュー」、バナー広告なら「フローティングバナー」など、部位によって呼び方は変わりますので組み合わせて検索してみてください。

日本語の場合

フローティング、追従、追尾

英語の場合

floating、fixed、scroll

ヒーローヘッダー

See the Pen Hero module with Flexbox and the ‘vh’ unit by Wouter van der Zee (@woutervanderzee) on CodePen.

あやふやな通称

  • 画面いっぱいに写真が表示されるやつ
  • サイトを開いたときに全画面(ファーストビュー)が写真になるやつ

検索キーワード

なぜヒーロなのか?由来がよくわかりませんでした…。

日本語の場合

ヒーローヘッダー

英語の場合

hero header

おわりに

よく見かけるけれどそういえば名前を知らない機能を集めてみました。「〇〇(機能名)、やり方」などで検索すれば、様々な方法が見つかると思うのでぜひお試しくださいね。

ちなみに、機能のサンプルはCODEPENというサイトを利用して表示させています。世界中のユーザーがコードのサンプルを投稿しているサイトなのですが、とっても勉強になるのでWEBデザインに興味がある方にオススメです!

mico
mico

コーダーさんに「こんな動きをつけたいんです〜」と依頼する際よく利用しているサイトです。口で説明するより伝わりやすいので便利ですよ〜!

タイトルとURLをコピーしました