2025/12/19(金)21:00 〜 23:00

Webディレクター1年生に送る「コーディングの外注」で失敗しないための基礎知識

オンライン

CSS, HTML, Meetup

イベント内容

本イベントは終了しています。「アーカイブ動画を見たい方」「スライドをダウンロードしたい方」はSTORESからお求めください。

本日現在（12月19日[金]）、151本のアーカイブが見放題になる定額制（サブスク）も用意しています。

動画だけでなく、スライドや補足なども含まれます。

Webディレクターが「コーディングの外注」を行う上での基礎知識について、女屋貴幸さんに解説いただきます。

「リアルタイム視聴は無料」スタイルで開催しますが、アーカイブチケット購入やサブスク登録でサポートくださいますと助かります！

Webディレクター1年生に送る「コーディングの外注」で失敗しないための基礎知識

デザインや進行管理は何となくわかっていても、「コーディング」──しかも“外注”となると戸惑うことはありませんか？

「どんな指示を出せばいいのか」「修正依頼はどう伝えたらいいのか」「何をチェックすればいいのか」──。
こうした迷いは、誰もが通る“Webディレクション1年目の壁”です。

本セミナーでは、Webディレクターが外部パートナーと円滑に連携しながらコーディング指示を出すために必要な基礎知識を、実際の現場事例を交えてわかりやすく解説します。

扱う内容

コーディングを「外注」するための基礎知識：自分でコードを書くための技術（HTML/CSS/JSの書き方）ではなく、Webディレクターとして制作パートナーに指示を出し、品質を管理するために必要な「構造の理解」と「準備」に焦点を当てます。
Webサイトが表示される仕組みの理解：Webサイトが役割の異なる複数のファイル（HTML, CSS, JS, 画像など）で構成されていることや、ブラウザがそれらを読み込んでページを表示する流れを学びます。
「パス（Path）」と「ディレクトリ構造」の完全理解：表示崩れやリンク切れの主な原因となる「パス」の概念（相対パス、ルート相対パス、絶対URL）を徹底解説します。また、運用しやすいディレクトリ構造や、ファイル名・フォルダ構成（assets設計）のルールについても学びます。
URLとドメインの正しい知識：プロトコル（https）、ドメイン、サブドメイン、ディレクトリの違いなど、URLを構成する要素を分解して解説します。また、SEOやシステム連携で重要となる「URLの正規化（リダイレクトやcanonical）」の考え方についても触れます。
外注時のトラブル回避策：パスの指定ミスやHTTPS化の不備など、制作現場でよくある事故のパターンを知り、ディレクターとして事前に回避するためのポイントを習得します。

扱わない内容

具体的なコーディング手法（コードの記述方法）
特定のCMSやツールの操作方法
制作費用に関する話

こんな方におすすめです

Webディレクター1年生の方
コードは書けないが、エンジニアとスムーズに会話できるようになりたい方
制作進行における「構造上のトラブル」を未然に防ぎたい方

女屋貴幸おなや・たかゆき

株式会社マインズ

株式会社マインズ執行役員。デジタルマーケティング・ストラテジスト／ディレクター／デザイナー。

大学在学中にWebデザインを独学で身につけ、卒業と同時にフリーランスで活動を開始。その後すぐにECコンサルティング会社に所属し、複数のECサイトの構築・運用に携わる。2011年にWebプロモーション会社へ転職。音楽アーティストの公式サイト、ファンクラブサイト、キャンペーンサイトなど数多くのプロジェクトを手掛ける。

2014年、株式会社マインズに入社。現在はマーケティングコミュニケーション戦略の策定をはじめ、プロモーション企画・構成、UXデザイン、DX支援、ディレクション、システム設計、Web解析・運用コンサルティングなど幅広い業務に従事している。

趣味は美味しいお酒とそれに合う肴を探すこと。夏はビール、冬は日本酒、ときどきウイスキー。日々、ベストペアリングを追い求めています。

聞き手、MC（進行）

鷹野雅弘（CeeBeeDee/CSS Nite/DTP Transit）が“聞き手”を担当し、リアルタイムでチャットでの質問などを拾っていきます。

鷹野雅弘（たかの・まさひろ）

株式会社スイッチ

グラフィックデザイン、エディトリアルデザイン、ウェブ制作の分野で、デザイン、オペレーション、設計・ディレクションなど、25年以上、第一線で手を動かし続けている。そのノウハウをテクニカルライティングや講演に落とし込み、「制作→執筆→講演」のサイクルを回す。

2015年から大阪芸術大学客員教授。2017年からAdobe Community Evangelist。CSS NiteやDTP Transitのオンラインセミナーのオーガナイザーとして企画・制作・配信なども担当。

著書に『10倍ラクするIllustrator仕事術』（改訂第3版）ほか多数

Twitter：@swwwitch

イベント概要

YouTube Liveでライブ配信します。

開催日：2025年12月19日（金） 21:00 - 23:00
形式：オンライン（YouTube Live）
MC：鷹野雅弘（スイッチ）
主催：CeeBeeDee
共催：CSS Nite、DTP Transit
協賛（制作会社）：ウェブライダー、LINICA、エンタミナ、コンセント、サービシンク、ビットエー、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLAT、ONiWA ほか
協賛：文賢（ブンケン）、デジ革（一般社団法人デジタル経営革新協会）

お申し込みと参加費

リアルタイムの視聴は無料です。
参加にはお申し込みが必要です。受け付けは終演時刻まで。

フォローアップ（アーカイブ）

有料チケットには次が含まれます。これを「フォローアップ」と呼んでいます。

アーカイブ動画
スライド
リンク集や補足
サンプルファイルなど（プログラムにより）

フォローアップ（アーカイブ）は、アーカイブ購入／サブスクの方限定のコンテンツです。

アーカイブ動画の視聴期限はありません。ずっと見られます。
法人およびフリーランスで事業決済される方は「法人向け」をお求めください。

フォローアップ（アーカイブ）の購入

次の3つの方法があります。いずれかを選択なさってください。

終演時刻まで：Doorkeeper
終演時刻以降：STORES
サブスクを登録する

Doorkeeperの場合、終演時刻にメールをお送りしています。メールの送信元は、info@doorkeeper.jp です。メールに依存しないSTORESやサブスクであれば、メール関連のトラブルから開放されます。

購入方法	種別	フォローアップの受け取り	備考
個人	個人、フリーランス	法人
Doorkeeper （単品）	2,200円（終演時刻まで）	5,500円	11,000円	終演時刻にメールを送信（info@doorkeeper.jpから送信されます）	「当日の視聴のみ」のチケットを申し込まれた方は、いったん、キャンセルして「アーカイブ視聴付き」のチケットを申し込んでください。
STORES （単品）	3,300円	5,500円	11,000円	購入するとダウンロードできるテキストファイルに、アーカイブ動画や特典を掲載予定のページへのリンクがあります（アーカイブ動画や特典の掲載はイベント終了後）	ユーザー登録してから申し込むと、［マイページ］の［購入履歴］から、後からダウンロードできます。
サブスク	3ヶ月：35ドル		［メンバー限定］セクションの［フォローアップ（アーカイブ）］から本イベントのNotionにアクセスしてください。	法人は別途（詳細）
年パス：130ドル

領収書

個人向けのチケットは領収書発行していません。
インボイス対応の領収書は、次のチケットのみ対応します。

個人／フリーランス（スライド、アーカイブ視聴付き） ※経費として
法人（スライド、アーカイブ視聴付き）

NotionからPDFをダウンロードしてご利用ください。

購入方法	区分	参加費	領収書	入手方法
Doorkeeper （単品）	個人	2,200円	発行（インボイス非対応）	Doorkeeper
個人／フリーランス	5,500円	インボイス対応の領収書を発行	Notion
法人	11,000円
STORES （単品）	個人	3,300円	非対応	-
個人／フリーランス	5,500円	インボイス対応の領収書を発行	Notion
法人	11,000円

「法人（スライド、アーカイブ視聴付き）」のチケットを購入いただいている場合のみ、記名入りの領収書に対応いたします。フォームからご連絡ください。

配信に関してのあれこれ

各URLは、YouTubeの概要欄にも掲載しています。

チャットやスタンプ、ツイートなど「参加型」でお楽しみください！
「音声のバランスが悪い」など、何かお困りの場合、コメントなどで教えてください！

配信URL

YouTube Liveで配信します。

https://youtube.com/live/vYtfSJnu6eQ?feature=share

X（Twitter）にて同時配信も行っていますが、YouTube Liveにてコメントも含めてお楽しみください。

配信トラブルでURLが変更になることがあります。その場合、次のようにお知らせします。

Twitter（現「X」）
配信が停止したYouTubeプログラムのコメント欄

YouTube関連

YouTubeチャットを活用ください！　スパム回避のため、YouTubeチャンネル登録者のみがコメント可能にしていますので、事前にチャンネル登録をお願いします。
スーパーチャット（スパチャ＝投げ銭）を利用できます。少額でも大歓迎です！　いただいた全額を講演者にお渡しします。
質問がある場合、YouTubeチャットで冒頭に★または【質問】を付けてコメントください。すべては拾いきれません。「〜は〜という意味です」「自分の現場ではこうやっている」など、視聴される方からのサポート的なコメントを歓迎します！　一緒に場を作ってくださいますと嬉しいです!!

リアクションや質問

スクショ付きのツイート歓迎です。ぜひ、ハッシュタグ（#コーディング基礎知識）を付けてください。ただし、事例の部分などでNGマークがついている箇所、講演者からNGの指示のある箇所はご遠慮ください。
終了後、ぜひアンケートにお答えください！　「フィードバックはギフト」。話してくださった方の成長の材料になり、また、イベントの改善につながります。

その他

120分のプログラムでは、60分前後のキリのいいタイミングで休憩（5-10分）をはさみます。
サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかなど、チェックなさってください。
スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。同時配信しているX（Twitter）の方が安定してることがあります。
分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
若干の延長など、ぴったり進行しないことがあります。

配信準備は念入りに行っていますが、本番になると予期せぬトラブルが生じるのがライブ配信です。それも含めて楽しんでください。