■今回取り上げるHP/URL
パイの実（LOTTE）
https://www.lotte.co.jp/products/brand/painomi/
■パイの実とは
株式会社ロッテより1979年に誕生した焼き菓子です。モチーフは焼くとパンのような風味のする熱帯植物の「パンノキ」で、デザイナーが「次々とパンができる夢のような木」をイメージして「パイの実」が誕生しました。パッケージにもパイが木になっている様子とかわいらしいリスがあしらわれ、まるで自然から生まれたお菓子のような印象を受けます。
余談ですが、千葉ロッテマリーンズの新人選手が入団時にパイの実の美味しさの秘訣である「64層のパイ生地」を作る過程の工場見学をして研修を受けることが毎年の伝統となっています。球団スタッフから「千葉ロッテマリーンズをパイの実のように層の厚いチームにしていってください」と言われて新人選手が「パイの実のように〇〇を積み重ねていきたいと思います。」と返答するのもまた伝統となっています。
■見出し
パイの実のロッテ公式ホームページです。1979年誕生以来、サクサクパイとチョコのバランスよいおいしさが楽しめる、長年愛されているロングセラー商品です。
■特徴①：統一された丸いフォント
「パイの実」のHPでは端から端まですべての文字がサンセリフ体（セリフのない書体）の文字で統一されています。サンセリフ体とは文字の角や線の端に“うろこ”や“ひげ”と呼ばれる装飾がついていない文字のことを指します。
「パイの実」のHPで顕著なのが線の端や角などがタイトルロゴのように丸みを帯びていて柔らかく子どもにも馴染みやすい雰囲気になっています。
■特徴②：動的な飾り画像
トップページの周辺部に楕円形に配置されている「パイの実」と「リス」などは結合した一枚の画像ではなくそれぞれが独立しています。この1枚1枚にアニメーションが施されることによって、湧き上がるように登場し、泡沫のように消えていきます。
■特徴③：紙芝居のようなスクロール
一番の特徴といっても過言でないのが“特徴的なスクロール”です。一般的なHPは引き摺るように滑らかに下にスクロールされるのに対し、「パイの実」のHPでは紙芝居のように画面全体が遷移します。
マウスホイールを動かすことで11個ある記事の一つ一つにつけられているhide-up/hide-downが作用し、画面全体を動かしていることが分かります。 HP全体のデザインも相まっておとぎ話のような世界観を演出しているように感じます。
■さいごに
「パイの実」のお菓子だけでなく、HPも“多層”を成していることがお分かりいただけたでしょうか。「パイの実」の多層はお菓子とHPの両方を合わせると五感で楽しめるようになっていると感じました。私も「パイの実」のようにまだ2記事しかないこのサイトにたくさんの記事を積み重ねていきたいと思います。
（最終参照日：2020/12/11）