もくじ
Webサイト制作のワークショップを各所で行いたいと思います
都内某所でWebサイト制作のワークショップをやっています。他にも各所で開催していきたいと思うので、ご興味のある方はよろしくお願いします。何かしらの方法でご連絡ください。さまざまなニーズにあわせて内容を組み替えますが、およそ以下のような方のお役に立てるかと思います。
- これからWebまわりを強化していきたいグラフィックデザイナー/アートディレクターの方
- スキルのアップデートや情報交換をしたいと考えているWebディレクターの方
- Webのことがいまいちよくわからないので色々教えて欲しい、企業やブランドのWeb担当者の方
- いっそのことMacの使い方から全部教えて欲しいという方
- まったくWeb制作の知識がないので、とにかく基本的なことから教えて欲しい方
ワークショップの規模としては、10人以下を想定しています。参加してもらったすべての人に、一定のクオリティを上回るくらいに出来るようになって欲しいので、そのような内容を組み立てています。
- 1人｜お互いのスケジュールを合わせやすいので、短期間集中して進行できます。
- 2〜4人｜参加者全員がノートパソコンを持ち寄って、実際に手を動かして進めていける人数です。
- 5〜10人｜テレビやプロジェクターに映し出した内容を元に進めます。すべての人の手元を確認することはできませんが、ノートパソコンを持っている人は実際に手を動かし、無い人は脳内作業で進行します。
ワークショップの環境については、Wi-Fi環境にあることが好ましいです。それ以外は何も条件はありません。
- 会議室やセミナールームで
- コワーキングスペースの一角で
- カフェでノートパソコンを並べて
- 軽くビール飲みながら
など、出来るようになってもらうことが目的ですので、場所や形式はまったく問いません。大人数で場所の確保が難しい場合は、都内だとおしゃれなレンタルスペース/貸し会議室も多いので、こちらから何かご提案させていただければと思います。
ワークショップを行う期間としては、3ヶ月間をひとつの目安としていますが、もっと長期間や短期間での内容も組めますので、柔軟に対応させてください。
- 初回〜3ヶ月｜基礎を習得してもらう
- 3〜6ヶ月｜簡単な実務を行いながら進行する
- 6ヶ月以降｜実務を行う中でサポートを行う
など、進行具合にあわせて調整いたします。
ワークショップの料金は、内容によって都度お見積いたします。以下はおよその価格感です。
- 基本的な内容のみ｜￥3,000〜10,000/1回2時間程度
- Web制作全般｜￥10,000〜30,000/1回2時間程度
このワークショップが気になったら、何かの縁ですのでまずは打ち合わせしましょう。お互いの業界同士、何か情報交換できればそれはそれで楽しいので。
――仕事に笑顔を。enjoy!
以下にリストアップした内容は、ワークショップの一例です。
概論
【理解】Webサイトに関する全体的な雰囲気を理解する。
【内容】Webに関する概論をお話します。
コーディング 1
【理解】HTML/CSS/JavaScript の基本的な役割をザックリと理解する。
【内容】まずは一緒にサンプルページをコーディングしてみる。
- HTML/CSS/JavaScript
- 特殊なテキストエディタを使う理由
- Emmet の使い方
- ファイルを開くアプリを設定する
- html の基本構造
- html 基本タグ
- id と class
- CSS でのスタイリング
- reset.css でリセットしているもの
- 擬似クラス
- SmoothScroll の使い方
- コメントアウト
コーディング 2
【理解】スマホの特性と、レスポンシブWebデザインの基本的な仕組みを理解する。
【内容】コーディング 1 のおさらいと、サンプルページのスマホ対応を行う。
- スマホのスクリーン
- Phone6/7 Plus のスケーラーについて
- レスポンシブWebデザインのブレークポイント
- 画像形式
- ファイル名
- 相対パスと絶対パス
- URL とディレクトリ
- http と https
- スマホサイトの自動リンク
- チェッカーツール
Photoshop で Webデザイン
【理解】Photoshop で Webデザインをする際に抑えておくポイントを理解する。
【内容】まずは Photoshop で簡単なワイヤーフレームを作り、次にデザインカンプへと作り込んでいく。ショートカットや Tips など。
- 単位はピクセル
- グリッドデザイン
- 制作フロー
- ワイヤーフレームでモックアップをつくる
- モジュール/コンポーネント化
- どんなUIがあるか
- Device Preview
- Photoshop の Tips
Webサイト制作
【理解】Webサイト制作に必要なスキルを理解する。
【内容】Webサイト制作でのタスク/スケジュール管理の基本など。
- Webディレクター
- プロジェクトマネジメント（PM）について
- WBS（Work Breakdown Structure）
- Webの職種
- スキルのアップデート
- 純度の高いものに触れる
- 間違いの多い用語
- これはWebページです
Webマーケティング
【理解】Webマーケティングの具体的な方法を理解する。
【内容】Google Analytics で取得できるデータをみる。ネット広告や分析方法など、それぞれの手法をみてみる。
- Google Analytics
- コンバージョン
- Webと紙の相乗効果
- ネット広告
- LP（ランディングページ）
- キャンペーンサイト
- オウンドメディア
- ペルソナの設定
- SWOT分析
- RFM分析
- ABC分析
マルチデバイスへの対応とモバイルファースト
【理解】さまざまなデバイスへの対応方法を理解する。
【内容】スマホの特性や、数年前とは大きく変わってきたWeb制作の流れをみる。
- ブレークポイントで可変するサイト
- 画像のピクセルパーフェクト
- 高解像度スクリーンに対応するための1x、2x
- モバイルファースト
- スマホ特有の機能
- Google の検索エンジン
- スマホ専用サイト
- タブレットへの対応
- スマホアプリ
- アプリ内ブラウザへの対応
Webサイトの構造
【理解】Webサイトのコンテンツ設計について理解する。
【内容】どのようにコンテンツ設計をするべきか、その理由など。
- 主な構造5種類
- コンテンツ設計
- より個人へとシフトしていく
- スマホが使われる場所と状況
- ファーストビュー
- アフォーダンス
ブラウザ
【理解】ブラウザによって表示の差異があることを理解する。
【内容】ブラウザの種類を知り、OS とブラウザの対応など。
- ブラウザの種類
- 対応するべきブラウザとバージョン
- Windows と対応ブラウザのバージョン
- reset.css
- シミュレーター/エミュレーター
- Safari の開発メニュー
- スマホのデフォルトブラウザ
- ブラウザの歴史
フラットデザイン
【理解】フラットデザインとは何かを理解する。
【内容】UI デザインの意味など。
- Webデザインの流れ
- そしてフラットデザインへ
- スマホの操作を理解する
- フィードバックとモーダルウインドウ
- ガイドライン
- UI – ハンバーガーの位置は右か左か
フォント
【理解】Webサイトで指定できるフォントや調整できる箇所を理解する。
【内容】フォントの調整方法など。
- macOS と iOS のデバイスフォント
- Webフォント
- すべてのデバイスで使えるバリアブルフォント
- FontAwesome
- フォントサイズと行間
- フォントのウエイト
- font-smoothing
- 改行について
カラー
【理解】カラー指定の方法や、色の意味を理解する。
【内容】Webにおけるカラーについて。
- 配色
- Webセーフカラー
- Adobe Color CC（旧 Adobe Kuler）
- 魔法の文字色
- テキスト色や装飾の意味
アニメーション
【理解】Webサイトで表現できることを理解する。
【内容】アニメーションの種類と扱い方の違いなど。
- Flash から HTML5 へ
- 動画の埋め込み
- スマホでのインタラクティブ表現
Webサイトの公開
【理解】Webサイトの公開方法を理解する。
【内容】サーバーの特性やファイル名について。
- ドメイン
- FTP でサーバに接続する
- ファイル名
- Google Analytics と Search Console
- ファビコン
SNSとの連携
【理解】WebサイトとSNSの連携方法について理解する。SNSボタンを設置するだけでなく、マーケティングに使用するための仕組みづくりを理解する。
【内容】Webサイトに埋め込めるボタンや、仕組みづくりなど。
- OGP（Open Graph Protocol）
- 仕組みの連携
- SNSの使い方
ライブラリとフレームワーク
【理解】ライブラリやサブプラグインの種類を理解する。
【内容】各ライブラリでできること。
- jQuery
- Node.js
- Bootstrap
- Foundation
- CSSのライブラリ
- CSSメタ言語
- html5shiv
- よく使われるUIのライブラリ
- Font Awesome
CMS（コンテンツ・マネジメント・システム）
【理解】CMSでできることを理解する。
【内容】実際の管理画面をみてみる。
- WordPress
- EC-CUBE
WordPress
【理解】WordPress の機能やプラグインを理解する。
【内容】ローカル環境の設定方法や、テーマの作成方法など。
- MAMP
- テーマ
- プラグイン
ネットショップ
【理解】ネットショップの種類や法律を理解する。
【内容】実店舗とネットショップの運営は、同じエネルギーを注ぎ込む必要があることなど。
- 独自ドメインでのサイト運営
- メール/メルマガ
- メール作法
- 特定電子メール法
- 決済方法
電子書籍
【理解】電子書籍の仕組みを理解する。
【内容】必要書類の申請方法など。
- epubとは
- EINの取得
- Amazon への申請
- Apple への申請
セキュリティについて
【理解】セキュリティについて理解する。
【内容】8桁の大小英数字および記号を含むパスワードも、数十日で破られること。その対策など。
- 1Password
- 総当たり攻撃（ブルートフォースアタック Brute-force attack）
- ソーシャルエンジニアリング
ページの読み込みスピード
【理解】Webサイトのチューニングの必要性を理解する。
【内容】具体的なチューニング方法など。
- Google のチェックツール
- ページの表示は5秒以内
- チューニング
ルーター
【理解】ルーターの基本的な設定を理解する。
【内容】実際のルーターの設定画面など。
- SSIDを変更する
- パスワードを変更する
- ステルスとは
- MACアドレスフィルタリング
- ルーターのユーザ名/パスワード
おすすめWebサービス/アプリ
【理解】おすすめのWebサービスやアプリなど
【内容】目的にあわせた便利なWebサービス/アプリなど。
Macやその他アプリのTips
【理解】Finder やアプリのTipsなど。
【内容】効率的に仕事を行うためのTipsなど。
