エンジニアの岡村です。
今日は下記のサイトで使った点線箇所の部分についてです。
https://think-local.dmdepart.jp/
コーディングで点線を引くって、実は結構大変です。というのもcssだけでは、点線の間隔を自由に決められないからです。
また演出を入れる際も入れづらく、小回りが効きづらいです。
mdn web docs border-style
そこで、今回は、svgのstrokeで上記サイトの点線部分を作りました。
svgにすることのメリットは、

• 点線の間隔を自由に決められる
• 演出もある程度小回りがきく
• domの形によらない自由な線を書くことができる

ためです。

準備1

svgは以下の特徴を持っています。

• svgのviewBoxはpathのdの数値のときの数値になります。
• svgのwidth,heightは実際に描画する時の大きさです。

今回は、わかりやすくbody全体の大きさをviewBox,width,height共に設定します。

<svg class=“dot-svg”></svg>

const svg = document.querySelector(‘.dot-svg’);
svg.setAttribute(“width”, document.body.clientWidth);
svg.setAttribute(“height”,document.body.clientHeight);
svg.setAttribute(“viewBox”,`0 0 ${document.body.clientWidth} ${document.body.clientHeight}`);

重要なのは、widthとheightとviewBoxの値を揃えることです。ここがズレた値だと、計算が面倒になります。。。

pathを書いていこう！

svgのタグは色々あるのですが、ここではpathタグを使って自由な線を書いていきます。

<svg class=“dot-svg”>
　<path class=“dot-svg-path”/>
</svg>

pathはdという普段聞きなれないアトリビュートを持っています。
dには、次のように書いていきます。

<path d=“M0 0L100 0”/>

上記は、0 0の位置から、100 0の位置に直線を引いたことになります。
下記にwebで使えるpathのコマンドが書いてあります。
mdn web docs paths
慣れれば、普段のcanvas2dと同じような感覚で色々書けると思います。
https://think-local.dmdepart.jp/
では、各必要な座標をgetBoundingBoxで取得し、それぞれコマンドを入れて行ってます。
実際に出力されたコード

<path class=“dot-line” d=“M0,846.9921875L692.9140625,846.9921875M992.078125,846.9921875
L1382.5,846.9921875
a40,40,90,0,1,40,40
L1422.5,2021.375
a40,40,90,0,1,-40,40L1040.8515625,2061.375M644.140625,2061.375
L302.5,2061.375
a40,40,90,0,0,-40,40
L262.5,3605.359375
a40,40,90,0,0,40,40L662.09375,3645.359375M1022.90625,3645.359375
L1382.5,3645.359375
a40,40,90,0,1,40,40
L1422.5,4454.953125
a40,40,90,0,1,-40,40L1058.703125,4494.953125M626.2890625,4494.953125
L302.5,4494.953125
a40,40,90,0,0,-40,40
L262.5,5204.21875
a40,40,90,0,0,40,40
L591.4453125,5244.21875M1093.5546875,5244.21875
L1382.5,5244.21875
a40,40,90,0,1,40,40
L1422.5,6019.1484375
”></path>

点線にしてみよう！

ここまできてようやくcssの登場です。
点線にするには、下記のcssを当てるだけです

.dot-svg-path{
    stroke: #221613; //線の色
    stroke-dasharray: 0 0 0 6;　//点線の間隔
    stroke-linecap: round;　//点線の形
    stroke-width: 2px; // 線の幅
    fill: none;　//塗りつぶしの色、noneだと塗りつぶさない
}

線が描かれるアニメーションを書いてみよう！

svgのstrokeは描かれたようなアニメーションを付けることができます。
下記は有料プランですが、gsapでのdrawsvgプラグインを使ってアニメーションしています。（この案件でも使っています。）
gsap draw svg
このライブラリがしていることは実際には、stroke-dasharrayとstroke-dashoffsetの値をアニメーションさせて線が描かれているようなアニメーションを実現しています。
ただし、点線では、stroke-dasharrayはすでに点線部分で使っているので別アプローチが必要になります。

maskを利用しよう！

svgのmaskは、色が黒だと何も表示されず、色が白だとmask側の白い部分にmaskされたものが表示されます。
書き方は下記です。

<svg class=“dot-svg”>
　<mask id=“dot-svg-mask”>
   <path />
  </mask>
　<path class=“dot-svg-path” mask=“url(#dot-svg-mask)“/>
</svg>

最終的にはこのタグの中身のpathをstroke-dasharrayとstroke-dashoffsetを使ってアニメーションさせることで、マスクされた点線が描かれるようなアニメーションが実装できます。

モーションの制作事例

株式会社アカツキ

アカツキの投資ファンド「AET FUND」のコーポレートサイトをリニューアルしました。かっちりした印象のサイトに寄せるのではなく、UXのよいモダンなサイトを目指しました。

フィードバック感のあるインタラクションやシームレスな画面遷移、モーショングラフィクスを取り入れたメインビジュアルを実装し、閲覧体験を通じて先進性が伝わる設計にしています。

さらに、UIアニメーションやモーショングラフィクス、3D表現・WebGL開発を活用することで、単なる情報整理にとどまらない表現を取り入れました。投資ファンドとしての信頼感を意識しながら、新しさも感じられる構成としています。

事例の詳細についてはこちらからご確認ください。

株式会社ニューバランス ジャパン

ニューバランス ジャパンの115周年記念キャンペーンサイトを制作しました。115周年の特設サイトとして、ブランドの世界観を伝える表現力と、更新のしやすさの両立が求められていました。

サイトでは、115名分の高画質ポートレートを用いながらも表示速度の低下を抑える工夫を施し、モーションデザインではリズム感やイージングを細かく調整することで、心地よいアニメーション表現を実装しています。

さらに、Googleスプレッドシートに入力した内容を反映できる簡易CMS機能も実装し、大量画像への対応、ブランド表現、公開後の運用性まで考慮したサイトに仕上げています。

事例の詳細についてはこちらからご確認ください。

株式会社スクウェア・エニックス

「FINAL FANTASY XV ROYAL EDITION」の発売に合わせて公開された特設サイトの制作を担当しました。作品の魅力や世界観を伝えるため、印象的なシーンとコピーで構成したバナー画像を約30点デジタルメディアに出稿し、その表現の中にクリスタルの破片が舞う演出を取り入れています。

UIアニメーションや3D表現、独自UIを実装し、静的な商品紹介ではなく、作品への没入感を高めるリッチな体験設計としました。こうした表現設計により、海外のWebメディア掲載やアワード受賞にもつながっています。ビジュアル表現と世界観訴求の両面が印象に残る事例です。

事例の詳細についてはこちらからご確認ください。

株式会社weroll

東京のマーケティングエージェンシー「株式会社weroll」のコーポレートサイトを制作しました。コーポレートサイトは長期運用が前提になるため、印象に残るデザインと、公開後に自社で更新しやすい運用性の両立が求められやすいです。

そのため、CMSとモーショングラフィックスを組み合わせた制作を提案し、今回はWordPressで構築しました。ロゴをはじめ、サイト内のさまざまな箇所に有機的に回転する動きを取り入れることで、社名に含まれる「roll」を印象づける演出に仕上げています。

見た目だけでなく、運用面にも配慮した使いやすいサイトです。

事例の詳細についてはこちらからご確認ください。

エフコープ生活協同組合

エフコープ生活協同組合のサステナブルな取り組みを紹介するブランドサイトを制作しました。社会的活動を文章だけで紹介すると単調になりやすいため、訪問者が能動的に体験できるしかけを盛り込み、取り組みへの理解を深めやすい構成にしています。

具体的には、エフコープの多様な活動を一つの街にぎゅっと詰め込んで表現しました。シンボルであるりんごマークをモチーフに、親しみやすく可愛らしい動きを多数実装しています。

特にスマートフォンでは、地図アプリから街を覗くような感覚で閲覧できるよう工夫し、街を巡るように楽しく見られる快適な回遊設計としました。

事例の詳細についてはこちらからご確認ください。

株式会社NTTドコモ

NTTドコモの診断キャンペーンサイト「声から選ぶスマホ店」を制作しました。Androidユーザーのリアルな声から共感できる意見を選ぶと、自分に合うスマホが提案される体験を設計し、3D空間上でのリッチな診断コンテンツとして実装しました。

ゲーミフィケーションやSNS連携、独自UIの実装なども取り入れ、診断体験を中心とした構成にしています。LPではバーチャルストアへの導線やAndroid機能の紹介も盛り込み、期待以上のROIを達成しました。

冬と夏に実施されたキャンペーンで評価を得たことから、追加キャンペーンの実施にもつながっています。

事例の詳細についてはこちらからご確認ください。

OCEAN PICTURES

映像制作会社OCEAN PICTURESのコーポレートサイトにおける、デザイン・開発・CMS構築を担当しました。7年ぶりのリニューアルで、デザイン刷新と更新しやすさの両立が求められていました。

そのため、ポップなイラストや遊び心のあるオープニングアニメーションを取り入れ、チームの雰囲気が伝わるサイトに仕上げています。ワークフロー紹介ページでは、打ち合わせから制作・納品までの流れを整理し、わかりやすい導線を設計しました。

さらに、CMS運用を見据えた管理画面のカスタマイズも行い、印象面だけでなく、実績やメンバーの増加にも対応しやすい構成にしています。

事例の詳細についてはこちらからご確認ください。

株式会社イエローハット

イエローハットの交通安全キャンペーンサイトにおけるPRゲームコンテンツを制作しました。「かもしれない運転」をテーマに、車を操作しながら障害物を避けるシンプルなゲームを実装し、体験を通じて交通安全の大切さを伝える設計としています。

さらに、親しみやすい公式キャラクターを使ったグラフィックと、Xでのフォロー＆リポスト施策を実施しました。その結果、SNSキャンペーンでは1,000万を超えるインプレッションを獲得しています。ゲーム体験を通してテーマへの理解を促しながら、SNS施策にも展開し、認知拡大にもつなげた事例です。

事例の詳細についてはこちらからご確認ください。

最後に

下記から簡単な動作例とコードを確認できます。(typesctiptです）。mocではgsapの有料プランを使わない方法で実装しているので、参考までにどうぞ

動作例

コード

ViteでWordPressの構築環境を作る方法や【JavaScript】スロットの作り方についてはこちらの記事で解説しています。ぜひこちらもご確認ください。

あわせて読みたい

2023.10.06

ViteでWordPressの構築環境を作ってみた

デザイン・技術

CMS機能

あわせて読みたい

2023.03.31

【JavaScript】スロットの作り方

デザイン・技術

Javascript

アニメーション