BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

BASIC CODING

週間で学べる

コーディング基礎講座

# What is a Basic Coding Course?

コードでクリエイティブが
になる2週間

これからの時代、コーディングの知識を持つデザイナーやディレクターは確実に重宝されます。

コーディングの基礎知識があると

  • コミュニケーションのすれ違いが減って、無駄な確認や手戻りがグッと減る

  • コーディングを意識したカンプが作れるようになって、AIでのコード化も正確になる

  • ちょっとした修正なら自分でサッと対応できるから、外注のやり取りがいらなくなる

  • そして何より…コーダーにめちゃくちゃ喜ばれます(ほんとに)

等々、たくさんのメリットがあります。

でもきっと、「いや、それはわかるけど…本業が忙しくて、勉強の時間なんて取れないよ」って人、多いと思うんです。

だからこそ今回は、1日1時間・2週間で完結するコーディング入門を作りました。

内容は必要なとこだけ、ギュッと凝縮。
しかも、“現場で使える”ことにこだわったカリキュラムです。

そして今回、プロのデザイナーであるおもかさんと一緒に作っております。私自身、何度もおもかさんと協業をしたことがありまして、デザインももちろん素敵なんですが、コーダーとして惚れました。笑

楽しみながら、本業の邪魔をせずにステップアップできる2週間。

この機会に、あなたの“できること”をもう一段引き上げてみませんか?

── りょー

講座の特徴

本業と両立しながら、
着実にスキルアップできる教材

1日1時間を2週間、または1日30分を1ヶ月。
忙しい方でも続けやすいよう、生活にフィットする学習時間でカリキュラムを設計しています。
無理せず、でも確実に力がつく“続けられる学び”を提供します。

プロのデザイナー監修。
コーダーもAIも迷わないデザイン設計を

現場で使える「伝わるカンプ」の作り方や、的確な指示書の書き方を、プロの視点から学べます。コーダーやAIにとっても理解しやすく、実装の手戻りや確認の手間を大幅に削減。
コミュニケーションコストを抑え、効率的でスムーズな制作進行が叶います。

つい手を動かしたくなる
旅気分で楽しく取り組める課題

課題は「世界旅行」をテーマに、実務で通用するクオリティと楽しくワクワクする学びを意識したイケてるデザインカンプをご用意。また、フリーランスとしてのマインドや案件対応のポイントなど、現場に役立つ話題も随所に盛り込み、学びと実践をバランス良く習得できる内容です。

# Learn more

もっと詳しく

2週間で
できるようになること

Learn to

2週間で
できるようになること

  • Webサイト制作に必要なHTML/CSSの基礎が理解できる

  • コーディングの一連の流れ(設計→記述→ブラウザ表示)を体験できる

  • コーダーとのやり取りで的確な指示・相談ができるようになる

  • コーディングの“しくみ”がわかることで修正依頼も的確に出せる

  • 将来「自分でサイトを作ってみたい!」を現実にする一歩目になる

  • 「思ったように仕上がらない問題」を減らしストレスの少ない制作進行ができる

  • AIと協力してデザイン+コーディングを自分で完結できる

  • 自分にコーダーとしての適性があるかも見えてくる

  • フリーランスや副業に向けたマインドのヒントも学べる

カリキュラム

Curriculum

カリキュラム

1時間目(講義中心)

  • 事前準備とコードについて理解しよう

    • Google Chrome, VS Codeのインストール

    • HTML、CSS、JavaScriptの基礎知識

    • Hallo Worldの出力や簡単な動きを体験してみる

2時間目(講義+演習)

  • デザインカンプからのコーディングをやってみよう

    • とりあえず作ってみよう!

    • クラス名の付け方や簡単なプロパティについて

    • 横並びレイアウトにチャレンジ!

3時間目(講義中心)

  • コーディングをしながら様々なCSSプロパティを学ぼう

    • [前編] 中央寄せ・コンポーネント・擬似要素

    • [後編] positionプロパティ・z-index

4時間目(講義+演習)

  • レスポンシブについて学ぼう

    • メディアクエリの使い方

    • レンスポンシブ対応の練習をしよう!

5時間目(講義+演習)

  • ホバーアニメーションを実装しよう

    • ホバーアニメーションの基本事項

    • ホバーアニメーションを実装しよう

    • おまけ(やや複雑なホバーアニメーションの実装)

6 - 13時間目(実際にLPを作ろう!)

  • 環境構築と基本設定の流れ

    • Sassの使い方を学ぼう

    • よく使うものをスニペットとして登録しておこう

    • コーダーが事前に確認すること

    • コンポーネントの作成

    • デザイン指示書について徹底解説

  • ヘッダーとハンバーガーメニューの実装

    • ヘッダーの作成

    • ハンバーガーメニューの作成

    • スクロールしたら色が変わるヘッダーの実装

  • ファーストビューの実装

    • ファーストビューのコーディング

    • スライダーアニメーションの実装

  • 各セクションのコーディング

    • 各種プロパティを使用してセクションコーディング解説

    • アコーディオンやお問い合わせの実装方法と指示書、カンプの作成方法

  • アニメーションの実装

    • ホバーアニメーションの実装

    • 出現アニメーションの実装

    • アンカーリンクの実装

14時間目(講義中心)

  • コーディングしやすいデザインカンプについて学ぼう

    • 活躍されている現役デザイナーがデザインカンプを作成する様子を徹底解説!

注意事項

Notice

注意事項

  • 本教材は、コーダーの方の基礎力の強化はもちろん、デザイナー、ディレクター、マーケターなど、WEB制作に携わるすべての方に知っておいていただきたい知識を凝縮した内容となっています。
    この講座を学んだだけでコーダーとして活動できるというものではございませんので、コーダーを目指している方はこちらの教材とは別にスクールなどで学習することをお勧めします。

  • 本講座では、Figmaの開発モードを使用します。そのため、開発モード使用料金が別途かかります。詳しくはFigmaの料金プランをご確認ください。
    (1ヶ月で解約する場合は2,000〜3,000円程度となります。)
    https://www.figma.com/ja-jp/pricing/

  • サーバー関連やWordPress、Shopifyに関する実装方法については解説しておりません。(時代の変化によって追加コンテンツの導入は積極的に行っていく予定です。)

  • ご購入いただいた方へは専用公式Discordからチャットサポートも承ります。教材のことで不明な箇所があればいつでも相談いただけます。(教材の内容とは関係のない実務の内容に関しての質問はお受けできません。)

コーディングを知ってるだけで
周りと差がつく。
だから今、学んでおこう。