はじめに
  • 自己紹介と講座の目的
思考編
  • はじめに
  • Webサイト作成で実現したいゴールを考える
  • ターゲットを考える
  • Webサイトのイメージを想像する
  • どんなコンテンツが必要か考える
  • ワイヤーフレームを書こう
Webデザイン編(Photoshopが必要)
  • 環境準備
  • Photoshopの使い方
  • 作成したワイヤーフレームからデザインする(PC編)
  • 作成したワイヤーフレームからデザインする(SP編)
コーディング編
  • 環境構築
  • HTMLについて
  • CSSについて
  • Sassを使ってコーディングをより簡単に
  • デザインからコーディング(HTML編)
  • デザインからコーディング PC向け(Sass編)
  • デザインからコーディング SP向け(Sass編)
実践編(Adobe XDが必要)
  • 環境準備
  • Adobe XDの使い方
  • 要件定義
  • ワイヤーフレーム(トップページ)
  • ワイヤーフレーム(記事一覧)
  • ワイヤーフレーム(記事詳細)
  • デザイン(トップページ)
  • デザイン(記事一覧)
  • デザイン(記事詳細)
  • プロトタイプを作成
  • Adobe XDを用いたフィードバックのもらい方
  • コーディング(HTML編・トップページ)
  • コーディング(HTML編・記事一覧)
  • コーディング(HTML編・記事詳細)
  • コーディング(Sass編・トップページ)
  • コーディング(Sass編・記事一覧)
  • コーディング(Sass編・記事詳細)
  • コーディング(動きをつけてみる編)
まとめ
  • 講義を終えてのごあいさつ