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

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

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

フェードイン／アウト

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

あやふやな通称

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

検索キーワード

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

ハンバーガーメニュー（バーガーメニュー）

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

あやふやな通称

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

検索キーワード

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

パララックス（視差効果）

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

あやふやな通称

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

検索キーワード

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

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

出典: フリー百科事典『ウィキペディア（Wikipedia）』

ヒーローヘッダー

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

あやふやな通称

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

検索キーワード

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

おわりに

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

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