写真を縦に並べていくと、下のほうは見てもらえません。スクロールが長くなるほど途中で離脱されるからです。めくりスライダーは、写真をトランプのように重ねて置き、押すたびに1枚ずつ前へ送ります。抜けた1枚は時計回りに30度ほど回りながら消えるので、めくった手ごたえが指に残ります。

効果は3つあります。ひとつは、ページが短くなること。10枚の写真が、写真1枚ぶんの高さに収まります。ふたつめは、押す動機が生まれること。次に何が出てくるか分からない形にしておくと、見る人は自分から手を動かします。みっつめは、写真の質を上げなくても印象が上がること。同じ写真でも、重ねて角度をつけるだけで雑誌の見開きのような見え方になります。

向いているのは、枚数が増えがちな場所です。スタッフ紹介、施術の前後、店内の様子、当日の仕上がり。「載せたいけれど、並べると長い」と感じている写真ほど効きます。

押すと写真がめくれます（これが実物です）

会社概要やコンセプトのページで写真をきれいに整列させると、説明資料のような硬さが出ます。コラージュスライダーは、5枚までの写真を少しずつ角度を変えて散らして重ね、押すたびに全員が1つ隣の位置へ移ります。背面には大きな英字を透かして重ねられます。文字は写真の明るさに応じて見え隠れするので、印刷物のような奥行きが出ます。

効果は、まず第一印象です。トップページや会社概要の冒頭に置くと、この1画面だけで「きちんと作られたサイト」という印象になります。次に、写真の点数が少なくても成立すること。5枚あれば形になるので、素材が揃っていない開店直後のお店でも使えます。そして、店名やコンセプトの英字を重ねられるので、ロゴを作り込む前でもブランドらしさを出せます。

lilias.net の会社概要ページで実際に動いているものと同じ部品です。あちらは黒地に金の文字、こちらは同じ仕組みで別の写真と文字を入れています。

SALON

押すと写真が入れ替わります（これが実物です）

上下が波の形に切り抜かれた帯の中で、大小の写真を敷き詰めたコラージュが右から左へ流れ続けます。帯の輪郭そのものもゆっくりうねります。四角く切った写真を並べるのと比べて、輪郭が有機的なぶん、やわらかい印象になります。

この演出がいちばん効くのは、トップページの上のほうです。訪れた人が最初の数秒で見るのは文章ではなく動きなので、そこに手の込んだものが置いてあると、そのあとの文章も読んでもらえます。写真を20枚まで登録でき、大小の配置は自動で組まれるので、写真の縦横比を揃える手間もいりません。

技術的な話をひとつ。この波の動きは、JavaScript ではなくSVGそのものの機能で動かしています。端末側の設定や通信状況に左右されにくく、途中で止まりません。この作りに行き着くまでに4回作り直しました。

帯の向きと並べ方も選べます。横に流すだけでなく、縦長の帯にして上から下へ流すこともでき、写真の並べ方も「大小混在のモザイク」と「同じ大きさが流れるフィルムストリップ風の一列」から選べます。細長い余白や、サイドの縦長スペースにも収まります。

下に出ているものは見本ではありません。このページに実物を貼っています。トップページで動いているものと同じプラグイン、同じ設定です。

マウスの少し後ろを、丸い印がついてきます。リンクやボタンに乗るとふくらみ、中に「見る」「予約」といった文字や、小さな画像を出せます。矢印だけの画面と比べて、押せる場所がはっきりします。

効果は2つです。ひとつは、押せる場所が分かること。装飾を削ぎ落とした静かなデザインほど、どこが押せるのか迷わせがちですが、この印があると迷いません。もうひとつは、サイト全体の格が上がること。細部が作り込まれているという印象は、店の丁寧さの印象にそのまま重なります。

指で触る端末では出しません。マウスが無い端末に出しても意味がないからです。端末側で「動きを減らす」を選んでいる方にも出しません。

リンクを押してから次のページが出るまでのあいだ、画面は一度白くなります。写真の多いサイトほどこの空白は長く、せっかくの世界観がそこで途切れます。このプラグインは、押した瞬間に色の板を画面へ走らせ、その裏でページを読み込みます。読み込みが終わると板が抜けていきます。

効果は、体感の速さです。実際の読み込み時間は変わりませんが、待たされている感じが薄くなります。加えて、ページからページへ移っても同じ空気が続くので、サイト全体がひとつの作品のように見えます。黒基調やコンセプト重視のサロンサイトほど差が出ます。

外部リンク、電話番号、ファイルのダウンロード、別のタブで開くリンクでは動きません。押した先がサイトの外に出るときに板が出ると、戻ってきたときに不自然になるためです。

記事や固定ページに貼った写真が、スクロールで画面に入った瞬間にマスクが開くように現れ、そのあとゆっくり引いて落ち着きます。写真が「置いてある」状態から「見せている」状態に変わります。

いちばんの利点は、既存の記事にそのまま効くことです。ブロックを置き換える必要も、記事を書き直す必要もありません。本文のデータには一切手を触れず、表示するときだけ演出を足す作りなので、あとでやめても記事は元のままです。ブログを何百本も抱えているサイトほど、この差は大きくなります。

開く速さ、写真が続くときのずらし方、動き出す位置は数値で調整できます。強くすると華やかに、弱くすると上品になります。スマートフォンで演出するかどうかも別に決められます。

写真には「alt（代替テキスト）」という、写真の中身を文字で説明する欄があります。目の見えない方が使う読み上げソフトはここを読み、検索エンジンも写真の中身を理解する手がかりにします。ところが実務では、忙しさのなかで空欄のまま溜まっていきます。

このプラグインは、空になっているものだけを自動で補います。順番は、写真のキャプション、メディアのタイトル、記事のタイトル＋連番。この優先順位があるので、全部の写真が同じ文言になりません。すでに入力されているaltには触れません。

大事なのは、データベースを書き換えないことです。表示するときにだけ補うので、何万枚の写真があるサイトでも一括処理の事故が起きません。投稿1万件を超える規模のサイトでも使っています。