無料個別相談
Capstone project

総合制作で、CSS Design Awardsに挑戦する。

総合制作では、一つのプロジェクトを0から完成させ、世界のWebデザインアワードへの応募を目指します。0→1には卒業がありません。完成や応募を節目に、改善点を見つけて学びを続けます。

無料個別相談を予約総合制作のサンプルを見る
  • 38工程
  • 1つのプロジェクト
  • 0→1自分の手で完成
  • 世界Webデザインアワードに応募
Goals in order

まず完成させる。その先に、外部の評価。

  1. 実務を想定したサイトを完成

    依頼の目的と要件に沿って、企画から実装・テストまで進めます。

  2. 品質を高め、成果物を公開

    レビューをもとに改善し、制作の意図と工程を説明できる状態にします。

  3. 表現を磨き、アワードへ応募

    CSS Design Awardsへの応募に取り組み、得られた評価を次の改善や制作に生かします。応募や受賞が学習・サポートの終了になることはありません。

応募費用は受講料に含まれます。受賞を保証するものではありません。制作後も続くサポートの条件

Why awards

なぜ、総合制作でアワードに応募するのか。

Know the highest standard

上を知らなければ、上を目指せない。

「初めてつくれた」ことと「実務で納品できる」こと、さらに「世界の優れた表現と比較できる」ことは、異なる到達点です。まず依頼者の目的を満たす品質を身につけ、そのうえで世界の優れた作品を分析します。

  1. 受賞作品を見る
  2. 優れている理由を分析する
  3. 設計と実装で試す
  4. レビューを受けて直す
  5. 応募して外部評価を学ぶ

受賞を約束するものではありません。審査で評価されなくても、その理由を考えて改善につなげる経験に意味があります。また、華やかな表現と実務上の使いやすさは同じではありません。アクセシビリティ、保守性、成果につながる設計を土台に挑戦します。

01

世界の基準で、いまの実力がわかる

審査するのは、世界中のデザイナーやクリエイティブディレクターです。身内の評価ではなく、世界の基準で自分の現在地を知ることができます。

02

「作品」ではなく「プロジェクト」として完成させる

見た目だけでなく、使いやすさや新しさまで審査されます。だからこそ、企画から公開・運用まで、本物のプロジェクトとして完成させます。

03

そのままポートフォリオになる

応募した作品と、そこに至るまでの38工程の記録は、そのままあなたのポートフォリオになります。

Mock project

模擬案件の進め方

スクールなので、実在のお客さんとやりとりすることはありません。そのかわり、講師がクライアント役になり、依頼の届き方からヒアリング、提案、修正のやりとり、納品まで、実際の仕事と同じ形で進めます。

  1. 1クライアント役

    依頼が届く

    問い合わせフォームから、クライアント役の依頼文が届きます。実際の現場と同じく、「ホームページを新しくしたい」くらいの、ふわっとした依頼です。

    届く依頼の例若いお客さんにも来てほしいのと、朝の電話予約が大変で……。予算はあまり多くはありません。
  2. 2あなた

    最初の返信

    お礼と、ヒアリングの日程調整のメールを返します。ビジネスメールの書き方も、講師が見ます。

  3. 3クライアント役

    模擬ヒアリング

    オンライン会議で、講師がクライアント役を演じます。用意したヒアリングシートをもとに、悩みと目的を聞き出し、議事録にまとめます。

    予算が決まっていない話が途中で変わる専門用語が通じない
  4. 4講師

    ふりかえり

    ヒアリングのあと、講師が「講師」に戻って、質問の仕方や聞き漏らしをフィードバックします。

  5. 5クライアント役

    提案、そして制作へ

    要件定義書・提案書・見積書をまとめて提案します。制作中の確認や修正依頼、納品も、すべてクライアント役とのやりとりで進みます。

模擬案件のサンプルを見る

クライアント役から届く依頼文、ヒアリングの様子、講師のふりかえりまで、成果物のかたちで見られます。

38 steps

38工程の流れ

講師がクライアント役を務める模擬案件で、実際のWebプロジェクトと同じ流れを、すべて経験します。専門用語がわからなくても大丈夫。それぞれの工程で何をするのかを、ひとことで添えています。

Phase 101–08

受注・要件定義

クライアント役の講師から依頼を受け、ヒアリングと調査をもとに要件を定義します。

  1. 01営業クライアント役から届いた依頼に、最初の返信をする
  2. 02ヒアリング模擬ヒアリングで、課題と目的を聞き出す
  3. 03RFP依頼の内容と条件を文書で整理する
  4. 04リサーチ市場や業界のいまを調べる
  5. 05競合分析ライバルのサイトを比べて学ぶ
  6. 06ユーザー分析誰が、なぜ使うのかを知る
  7. 07戦略何で成果を出すのかを決める
  8. 08コンセプトサイトの軸になる考えを言葉にする

Phase 209–15

設計・デザイン

サイトマップとワイヤーフレームで構成を設計し、UIデザインを作成します。

  1. 09UX使う人の体験を設計する
  2. 10IA情報を整理し、構造をつくる
  3. 11サイトマップページ全体の地図を描く
  4. 12ワイヤーフレーム各ページの骨組みをつくる
  5. 13UIボタンやメニューを設計する
  6. 14Visual Design色・文字・写真で表現する
  7. 15Prototype動く試作で確かめる

Phase 316–23

実装

HTML・CSS・JavaScriptで実装し、CMSで更新できるようにします。

  1. 16HTML文書の骨組みを正しく書く
  2. 17CSS見た目とレイアウトを組む
  3. 18JavaScript動きと機能を加える
  4. 19FrontendReactなどで本格的に組み上げる
  5. 20CMS / Backend更新できる仕組みとデータを用意する
  6. 21Accessibility誰もが使えるかを確かめる
  7. 22Responsiveどんな画面でも崩れないようにする
  8. 23Edge-to-Edgeスマホの画面端でも内容が隠れないようにする

Phase 424–32

テスト・公開

表示速度・セキュリティ・アクセシビリティを検証し、本番環境に公開します。

  1. 24Performance表示を速くする
  2. 25Security攻撃や情報漏えいから守る
  3. 26QAテストで品質を保証する
  4. 27Device Test実際の端末で動きを確かめる
  5. 28Git変更の履歴を管理する
  6. 29CI/CDテストと公開を自動化する
  7. 30Infrastructureサーバーと公開の環境を整える
  8. 31DNSドメインとサーバーをつなぐ
  9. 32Production Release本番環境に公開する

Phase 533–37

納品・運用

クライアント役に納品し、公開後はアクセス解析をもとに運用・改善します。

  1. 33Analyticsアクセスのデータを読む
  2. 34SEO検索で見つけてもらえるようにする
  3. 35Client Deliveryクライアント役に納品する
  4. 36Operation公開後も運用を続ける
  5. 37Improvementデータをもとに改善する

Milestone38

CSS Design Awardsに応募する

0から完成させたプロジェクトを、世界のWebデザインアワードに応募します。世界中の制作会社やデザイナーの作品と同じ土俵で、評価を受けます。応募後も、作品の改善と次の制作へ学びをつなげます。

模擬案件のサンプルで、38工程の成果物を見る
Judging

CSS Design Awardsの審査基準

CSS Design Awardsでは、世界各国の審査員が、次の3つの観点から作品を見ます。38の工程は、そのすべてにつながっています。

  • UI

    UI：見た目と表現

    色・文字・余白、そして動き。画面のデザインそのものの完成度が見られます。

    関連する工程：Phase 2・3

  • UX

    UX：使いやすさと機能

    迷わず使えるか。速く、正しく動くか。訪れた人の体験が見られます。

    関連する工程：Phase 2・4

  • Innovation

    Innovation：新しい技術とアイデア

    これまでにない表現や、新しい技術の使い方。挑戦の深さが見られます。

    関連する工程：Phase 3

審査員のスコアが高い作品は、「Website of the Day」や「Special Kudos」に選ばれます。

Outcome

総合制作で作成する成果物

練習用の課題ではありません。どれも、プロが実際の仕事でつくっているものと同じ成果物です。

Proposal提案書調査とコンセプトをもとに、提案書を作成します。
Estimate見積書工数と原価から、根拠のある見積を出せるようになります。
Design systemデザインシステム色・文字・コンポーネントを、チームで再現できる仕組みにします。
RepositoryGitリポジトリ変更履歴とレビューを残しながら、チームと同じやり方で開発します。
Live website公開中のWebサイトドメインを取り、サーバーに載せ、世界中から見られる状態にします。
Award entryCSS Design Awards 応募作品0から完成させたプロジェクトで、CSS Design Awardsに応募します。
Support

制作は自分で。レビューは講師が継続して行います。

総合制作は、あなた自身の手で完成させます。そのうえで、毎月2名限定のため、一人ひとりの制作物を継続してレビューできます。

  • 毎月2名限定一人あたりのレビュー時間を確保するためです。
  • 受講期限なし応募に必要な完成度を目指し、納得がいくまで作品を修正できます。
  • 38工程すべてを、自分の手で誰かの作品の一部ではなく、あなたのプロジェクトとして完成させます。
FAQ

総合制作についての、
よくあるご質問

未経験から始めても、アワードに応募できるレベルになれますか？

受講期限はありません。制作後も質問できます。Stage 1の「まずは、つくってみる」から順番に学び、応募に必要な完成度を目指し、納得がいくまで作品を修正できます。

受賞できなかった場合は、どうなりますか？

総合制作の目的は、受賞そのものではなく「世界の基準で評価を受けること」です。審査の結果から、自分の強みと、次に伸ばすべき点がわかります。

総合制作のテーマは、自分で決められますか？

総合制作で選べるジャンルは、「作れるもの」ページに掲載しています。希望するテーマや制作内容については、無料個別相談でご相談ください。

応募にかかる費用は、受講料に含まれますか？

はい。カリキュラム作品のCSS Design Awardsへの応募費用は、受講料に含まれます。