受講生向け演習 内容紹介

使用学習書籍リスト
これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本出版社：翔泳社
スラスラ読める JavaScriptふりがなプログラミング 増補改訂版出版社：インプレス

1. HTMLとCSS：演習内容
   書籍の制作例に加えた内容があれば、その内容も記載しています。
   • SNSリンク集本通り
   • 2カラムレイアウトのサイト 本通り
   • 1カラムレイアウト 本通り　＋　独自に追加した機能
     • レスポンシブ / + 承認パネル設置
   • 複数ページのサイト
     • 本通り / レスポンシブ
2. JavaScript：演習内容
   • テキスト置換マシンを作る本通り
   • 要素の追加演習本通り
   • 書籍検索サービス本通り

Web活用コード演習：ライブラリー利用、カスタムデータ利用 | HTML, CSS, Javascript組み合わせ

1. フォーム送信用演習 送信フォーム作成演習
2. レスポンシブ対応の既存サイトデータにスライド設置 jQueryプラグイン「bxSlider」利用して設置した例
3. カスタムデータ属性利用 data属性からスクリプトを使ってサムネイルから画像を選択
4. レスポンシブサイトコード作成 figmaのデザイン案をもとに作成する
5. svgを活用した動きを作れるもの
6. GSAP利用した。動的な処理で見せるサイト

Web API活用コード演習：ライブラリー利用、カスタムデータ利用 | HTML, CSS, Javascriptなどを組み合わせた演習

• indexedDBをつかったToDoリスト
• 郵便番号APIを使った住所検索フォーム例
• 天気表示：地理情報に基づいた情報利用
  openweather API
• 天気表示：ローディング付と地理情報に基づいた天気表示
• 特定した地域と地理情報に基づいた天気表示
• カウントダウンタイマーAI(claude, Google, ChatGpt)にプロンプト指定をして作成。一部表示関係のみ自分で修正/ノーコードって言っていいんじゃないのかな的な経験
• シンプルモーダル
• 手を加えたモーダル
• メディア表示練習用

Design's

課題用制作例

• いからし坂キャンピングビレッジデザイン案
  1. figmaデザインを見る　
  2. PC版プロトタイプへのリンク
  3. モバイル版プロトタイプへのリンク
• 近藤クリーンサービス株式会社デザイン案
  1. figmaデザインを見る　

講師プロフィール

名前

やまだ

すきなこと

ぼーっとすること

好きな食べ物

スイーツ

Skill's

Webデザイン・開発（HTML, CSS, PHP, JavaScript）

グラフィックデザイン（PhotoShop, Illustrator, ADOBE XD, figma）

データベース管理（MySQL, MariaDB, SQLite）

CMS開発・カスタマイズ（WordPress, baserCMS, Moodle）

IT教育・トレーニング（Microsoft Office, Web開発）
MOTトレーナー & MCTトレーナー2011 / CompTIA CTT+ Classroom trainar

略歴

幼少の頃から絵を描き、同人誌活動を経てデザイン専門学校へ。なぜか、アニメージュに掲載されていた会社に応募したら採用され東京でアニメーターになる。数年後、ゲーム会社のグラフィックデザイナーとして一般社会人デビュー。
ゲームが好きでもないのにゲームボーイ、SFC、PSなどの画面に出てくるパーツのグラフィック制作。背景や、イベント画面、フィールドキャラクターなど作成。途中、ご縁があって1年だけ寄り道しておもちゃ会社に転職（ゲーム開発で転職したが企画がないため親会社に出向となったため）。おもちゃのカンプデザイン業務を経て、再びゲーム会社に本当に転職。その後結婚、子育てを経て地元に戻る。
コンピューターの知識を活かして、講師の業務を開始。
現在は、講師の仕事と並行し、Webデザイン、ディレクション、コーディング、CMSカスタマイズ、運用サポートなど対応できます。

WORKS：サイト制作事例

新潟 黄昏の古民家 田村 様

有限会社　保険パートナーズ様

新潟市就労継続支援B型事業施設　フェイバリット 様

産直にいがた 様

株式会社 磯部ハイテック様

As hobby

Youtube