2025/11/9
［ 初回公開日：
2025/11/09
］
溝口に聞いてみたい、あのWebサイトの構築方法やStudioの使い方 – 第5回アイティプラスの雑談【イベントアーカイブ】
はじめに
2025年10月29日、IT+の野口・溝口による「第5回アイティプラスの雑談」を開催しました。
今回は、初めてYouTubeで画面共有しながらライブ配信でお届けしました。
テーマは、事前にいただいた質問やライブ配信中にコメントでいただいた質問をもとに、溝口が手がけた実例を参照しつつStudioでの実装方法やアニメーション設計の考え方などを解説する実践回。
数値設定やレイヤー構造といった手元の操作感まで共有しました。
実装の解説についての詳細はYouTubeをご覧ください。
※お客様のサイトの管理画面はそのまま共有はできないため、別にプロジェクトを立ち上げて、該当部分のみコピーして共有しています。
1. 配信の流れ（チャプター）
オープニング
「旅と仕事と」青い円のアニメーション
アニメーションの“センス”はどう磨いたか
「旅と仕事と」タイトル文字のアニメーション
「ランディーズドーナツ」缶バッジ回転のモーション設計
「ランディーズドーナツ」フッターのホバー表現
「ラーメン屋しょうや」暖簾アニメーションの作り込み
「スコップ富山」テキストカルーセル
「サロンビレッジ」複雑なCMS設計の要点
「ツチと実」オープニングの演出意図
LottieとGIFの使い分け
アニメーション設計の決め方
写真調達（撮影体制と素材運用）
実装で苦労したところ
進行管理（スケジュール・ヒアリング）
レイヤー構造
テンプレート無料化の効果
デザインカンプの作り込み度合い
2. Q&A（実装編｜画面共有あり）
「旅と仕事と」
Q. 青いラフな円はどのように作成していますか？
⏱ 01:33〜
A. Lottie素材をベースに、元は黒だったものをコーポレートカラーの青へ変更。自動再生＋ループで再生し、背景レイヤーを100%に対してLottieを120%に設定してバランスを取っています。
⸻
Q. アニメーションの“センス”はどう磨きましたか？（紙→Webへの移行の学習法も）
⏱ 04:42〜
A. ギャラリーサイトに載るような評価の高いWebサイトを数多く観察し、2〜3秒の心地よい動きを自分なりの基準で学びました。サイトの目的とターゲットに応じて、それに合う形を探っています。紙のデザインと違い、Webはぱっと見た時の“おっ”を作る動きやホバーのちょっとした設計ができる。美術館・音楽・映像などの過去の体験の蓄積も糧になっています。
⸻
Q. 「旅」「仕事」のタイトル文字がカクカク動く実装は？
⏱ 12:32〜
A. Illustratorで文字の位置を微妙に動かしたアートボードをいくつも作って、それをPhotoshopでGIF画像として書き出すというアナログ手法です。Adobe After Effectsなしでもニュアンスを出せます。
「ランディーズドーナツ」
Q. 缶バッジ回転の実装と、数値設定の根拠は？
⏱ 14:39〜
A. カルーセルの再生間隔=50、送り時間=8000。モーションの設定で回転は1080°/時間は40000（40秒）。また、カルーセル内の画像の間隔は、マージン設定ではなく、パディング設定をすると、カルーセルがスムーズに動くようカクつきを抑制。
スクロール滞在中に止まらずに“ずっと回っている”ように見えるように、ライブプレビューで見ながら心地よい回転の速さと合わせて微調整しました。
⸻
Q. フッターでキャラがカラー↔白黒に変わる仕組みは？ 吹き出しの出し分けは？
⏱ 17:37〜
A. カラー版とモノクロ版の2枚のロゴ画像を重ね、ホバーで不透明度の設定をすることでシンプルに切替設定をしています。
Illustratorで吹き出し文字が表示/非表示のアートボードを作成し、PhotoshopでGIF画像として書き出しています。ちょうどいい点滅間隔は感覚で微調整していて、そのGIF画像を挿入しているアナログな実装です。
「尾道ラーメン しょうや」
Q. ファーストビューで出てくる“暖簾”の実装は？
⏱ 19:43〜
A. Illustrator→PhotoshopのGIF画像で左右それぞれの暖簾をPC&Tab/SP別に用意。初期位置を画面上部に置き、出現時のアニメーション設定で所定位置→上方へフェードアウトするように、時間＝1400、遅延＝500と設定。暖簾をくぐってお店に入っていくように表現しました。
「SCOP TOYAMA」
Q. 下から上へテキストが切り替わるスライドショーの作り方は？フェードでもカクつかないコツは？
⏱ 25:23〜
A. テキストを入れるボックスを作成し、その中にテキストのみのカルーセルを作成。テキストボックスの出現時アニメーションを不透明度＝0、時間＝1200、遅延＝800、移動Y＝20に設定。
テキスト自体の初期設定は不透明度＝0。出現時アニメーションで不透明度＝1、時間＝300、遅延＝2500に設定。
カルーセル自体の再生間隔＝2000、送り時間＝2に設定。
標準カルーセル機能のみで構成し、文字同士が被らないように時間を微調整していますが、特にカクつきは出ませんでした。
送り時間は少しだけ長めにすると比較的カクつきは少なくなるような気がします。
「サロンビレッジ」
Q. 店舗詳細ページのCMS実装・設定のポイントは？
⏱ 30:30〜
A. まず各店舗の掲載情報の中でどの情報がどの店舗も表示する固定情報なのか、店舗ごとに違う可変情報なのかを整理し、設計分離。掲載情報を全てプロパティを使って顧客側で変更が生じたときに入力ができるようにも設定。
店舗名/カバー/住所/オープン日などの基本情報に加え、職種=タグ、エリア=カテゴリでプロパティを設定。プラン数については店舗ごとに異なるため、ブール値で有無制御ができるようにしています。メタディスクリプションは各店舗の説明文として表示されるように設定しました。
「ツチと実」
Q. 開いたときのオープニングアニメーションはどう作りましたか？
⏱ 39:00〜
A. ぶどうが上から落下し余韻を残すイメージ→ロゴをイージングを使って自然停止。
次に葡萄棚の中、葉をかき分けていくイメージ→左右に分けた葡萄の樹の画像をモーションでスケール＝X、Y共に2、移動＝Xを-100、Yを-400に設定し、出現時のアニメーションでスケール＝X、Y共に1、移動＝Xを0、Yを-80、時間＝1000、遅延＝左の画像1400、右の画像1100に設定し、画像が拡大しつつ退場する。
最後に葡萄棚をかき分け日差しを浴びて視界が広がるイメージ→円をスケールX、Y共に20で設定。出現時のアニメーションで不透明度＝0、スケール＝X、Y共に1、時間＝800、遅延＝1800に設定。
3. Q&A（運用・設計編｜画面共有なしのものも含む）
Q. LottieとGIFの使い分けは？
⏱ 46:24〜
A. できればLottie優先で考えています（拡大してもきれいで動きも滑らかなので）。GIFは有料素材で表現できないオリジナルのものが必要な時にIllustrator/Photoshopで作って差し込んでいます。
⸻
Q. アニメーションはデザイン段階で決めますか？それとも実装しながら？
⏱ 47:20〜
A. 半々です。動き先行で構成するケースもあれば、BtoB系などではビジュアル/コピー先行で作成し、過不足ない動きを後付けするケースもあります。
⸻
Q. 写真は誰が撮っていますか？
⏱ 49:01〜
A. パートナーとして様々な案件で一緒に動いている、クリエイティブディレクター/カメラマンでもある杉野氏が撮影する案件が多数。ワークス掲載の7〜8割はプロ撮影で、そのうち約半分弱が杉野氏。予算に応じてクライアント提供/有料素材も併用しています。
⸻
Q. 実装で特に苦労した点は？
⏱ 53:07〜
A. 「旅と仕事と」のタグの水平スクロール（リンク付きの連続スクロール）で難航→1つの枠に全テキストを入れ、カルーセル幅で調整。
「建築旅」は左側の固定ナビをどう調整するか、レイヤーが深くなりながらも試行錯誤しながら作りました。
⸻
Q. 納品までのスケジュールと、ヒアリングの要点は？
⏱ 56:19〜
A. 納期に合わせて逆算し、提出・校正タイミングを明確化。素材遅延のバッファなどを考慮しながらガントチャートを作成しています。
ヒアリングは専用のシートは作っていませんが、後々齟齬が出ないように、最初の目的・ターゲット・トンマナの擦り合わせを重視しています。BtoB案件では業界理解/競合把握を前提知識として押さえる用にしています。
⸻
Q. レイヤーが深くなる、足りなくなることはないか？
⏱ 58:29〜
A. よくあります。レイヤー構造を見直したり、別でコンポーネント化したものを入れ込むことで階層制約を回避する裏技をエキスパート同士で共有いただいたこともあります。
⸻
Q. 有料テンプレートを無料化した効果は？
⏱ 59:08〜
A. Studio Store 2.0に合わせ戦略変更。4つ出しているテンプーレトの中から、THEテックカンパニーMini（テック）/ 創作和食居酒屋 渋三一（飲食） / 紬クリニック（医療）の3つを無料化し、年間契約の発生で回収するモデルへ。
無料にしたテンプレート3つは、元々有料の時代の合計が月に5-10件程度の購入、収益は多くても10万円程度。
10月初旬に無料に切り替え、無料テンプレートは即時に収益化されないのでまだ効果は分からないが、約20日で複数件の年間契約が発生し、ダウンロードは桁違いに増加。ただし、有料テンプレートと無料テンプレートでは収益化の時間軸が違うので一概には比較が難しい。
⸻
Q.デザインカンプはStudio制作前にどのくらい作り込でいますか？
⏱ 1:08:06〜
A. まずアナログ的に紙とペンでラフなワイヤーフレームを描き、メインビジュアル（ファーストビュー）のみをIllustratorで制作し、おおよそ7〜8割ほどの完成度に達した段階でStudioへ移行します。メインビジュアル以外はデザインカンプを作成せず、すべてStudio上で直接デザインと実装を行っています。
4. まとめ
今回もアンケートにご協力いただき、またライブ配信をご視聴くださり誠にありがとうございました。
数値・手順・判断の一次情報を、そのまま画面で共有した実践回でした。最新機能だけに寄らず、アナログ分解×Studioの素直な機能で、誰でも再現できる現場解に落とす。次の制作のヒントになれば幸いです。
なお、ライブ配信中にトラブルがあり一時的に配信が切断される場面がありました。ご視聴中の皆さまにはご迷惑をおかけし申し訳ございませんでした。YouTubeのアーカイブ動画では該当箇所を編集し、問題なくご覧いただけます。
また、事後アンケートではたくさんのご感想をお寄せいただき、誠にありがとうございました。皆さまからの温かい言葉が大きな励みとなり、今後の配信づくりの力になっています。
次回の「アイティプラスの雑談」にも、ぜひご参加ください。
今後ともどうぞよろしくお願いいたします。
この記事を書いた人
