WEB DESIGN Challenge
WEB DESIGN CHALLENGE
課題にチャレンジ!

①クリッピング試験1

【試験内容】
下記課題データを用いて、背景から図形を切り抜きJpegかpng形式でご提出ください。
【課題データ】
課題データはこちらからダウンロード

【推奨技能】
・はじめてのPhotoshop講座のベース知識と基本ツール部
https://cucua.fun/courses/photoshop_biginner/ 
・クリッピング試験①をDDDで説明した動画
https://drive.google.com/file/d/1tdK9p6d8lceTH_y1INu4D71TJ_4yGYV4/view?usp=sharing


②クリッピング試験2

【試験内容】
下記課題データを用いて、背景から文字を切り抜き、背景が透過した状態のpng形式でご提出ください。
【課題データ】
課題データはこちらからダウンロード
【推奨技能】
・クリッピング試験1同等の技能
・色域指定
https://helpx.adobe.com/jp/photoshop/using/selecting-color-range-image.html
・自動選択ツール
https://helpx.adobe.com/jp/photoshop/using/making-quick-selections.html
・ペンツール を使った切り抜き
https://creators-plus.jp/photoshop-pencut/
https://psgips.blog.fc2.com/blog-entry-369.html

③クリッピング試験3

【試験内容】
下記課題データを用いて、背景から人物を切り抜き、背景に赤を入れてjpeg形式かpng形式でご提出ください。
【課題データ】
課題データはこちらからダウンロード
【推奨技能】
・クリッピング試験2同等の技能
・チャンネルを使った切り抜き
 ┗https://phlearn.com/tutorial/selections-with-channels-photoshop/
・選択とマスクを使った境界線調整をした切り抜き
 ┗ https://stand-4u.com/photoshop/mask.html

④フォトレタッチ1

【試験内容】
・下記課題データを用いて、レタッチを行ってjpegかpng形式でご提出ください
【課題データ】
課題データはこちらからダウンロード
【推奨技能】
・DDDで試験について説明した動画
https://drive.google.com/file/d/1GkYkDmt6FFqqrftCXGHIRCcb7Z8QRO1B/view?usp=sharing

⑤フォトレタッチ2

【試験内容】
・下記課題データを用いて、レタッチを行ってjpegかpng形式でご提出ください
【課題データ】
課題データはこちらからダウンロード

⑥フォトレタッチ3

【試験内容】
・下記課題データを用いて、レタッチを行ってjpegかpng形式でご提出ください
【課題データ】
課題データはこちらからダウンロード
 ※Lサイズでお願いいたします

⑦バナー制作試験

【試験概要】
バナー課題ではPhotoshopを使用して、指定のバナーを制作する課題です。
バナー制作はWebデザイナーとして活動する際に必須のスキルになりますので、是非金メダルを目指して取り組んでいただけたらと思います。

【試験内容】
テーマ、目的、コンテンツはあらかじめ運営側で用意させていただきました。
下記の2つのテーマの中からどちらかを選び制作して提出してください。

【推奨技能】
・WEBデザイン講座試験①~⑥までの技能
・WEBデザイン講座全講座
https://cucua.fun/courses/webdesign/
・WEBデザインゼミの第3~4回
http://vimeo.com/user/122747812/folder/5284759

【テーマ①】



架空脱毛クリニックバナー制作

・ターゲットは毛の処理に困っている20代-30代の女性
・サービス名は「Cucua脱毛クリニック」
・目的は「Cucua脱毛クリニック」の新規顧客の獲得。
・内容は「全5回で完了コースが月額4,900円。(40回払いtotal196,000円)」
・コピーは決まっていない。
・魅力は「痛みが少ない」「予約が取りやすい」「最新脱毛機器」

【テーマ②】


架空転職サービスバナー制作

クリエイターで転職検討中の20代後半の男女
・サービス名は「JBC転職エージェント」
・「JBC転職エージェント」のWebサービスのページを見てもらうためのバナー。
・無料相談実施。
・コピーは決まっていない。
・魅力は「提携企業数NO.1」「満足度NO.1」「転職成功実績NO.1」
・デザイナーまたはエンジニアなどの方向性は任意で設定して良い。

【提出形式】
キャンバスサイズは1080px×1080pxの正方形で制作してください。
架空サービスのロゴは下記リンクからダウンロードして使用してください。
※ロゴの色はデザインに合わせて変更して大丈夫です。
素材をダウンロード

⑧HPワイヤーフレーム課題(デスクトップ&モバイル)

【試験概要】
adobeのプロトタイプツールXDを使用して、架空のホームページのワイヤーフレームを制作する課題です。
実務の中では構成はディレクターやマーケターと呼ばれる方が構成やワイヤーだけは制作していて、ワイヤーからデザインをしていくことがありますが、本課題では必要な情報やコピーは皆さんの方で設計してください。
完全個人で活動するWebデザイナーは集客の観点で情報設計、コピーを考える場合も多々あります。
ユーザーが求める情報はどんなコンテンツなのかは他社の既存のサイトからリサーチしてもらい、自分で思考してもらって大丈夫です。

【試験内容】
「全てのクリエイターに最高の空間と最高の体験を。」をテーマにしたクリエイターが集まるカフェ「The Cucua coffee.」のホームページのワイヤーフレームを制作してください。
次回の試験はここで制作したワイヤーフレームをデザインする試験になります。
次回自分がデザインすると言うところ含めて考えてもらえたらと思います。

【推奨技能】
・WEBデザイン講座試験①~⑦までの技能
・DDDでXDの使い方について説明した動画
https://drive.google.com/file/d/1RpwdH1X1ak-HI-zoWRGVg8ZKQ914QE5G/view?usp=sharing

【テーマ】

架空カフェのホームページ制作
ノマドのクリエイターやフルリモートで活動するクリエイターが集まるカフェ。
・サービス名は「
The Cucua coffee」
・グレースケールで作成してください(白/黒/グレー)
・ワイヤーフレームの時点ではできるだけ定番フォントを使用してください。(noto sans JP,open sansなど)
・画像はダミーの長方形オブジェクトを使用してください。
・テキストは実際に入る情報を入れてください。
・実務として作成した際にプロジェクトオーナーやクライアントに伝わるように設計してください。
・デザインは一切入れないで大丈夫です。

【提出形式】
・webは横幅1366px、Mobileは769pxで提出ください。
・XDファイルでの提出をお願いいたします。

【参考】
https://www.pinterest.jp/pin/544513411203589035/

⑨HPデザイン課題(デスクトップ)

【試験概要】
adobeのプロトタイプツールXDとPhotoshopを使用して、架空のホームページ(デスクトップ)の デザインを制作する課題です。前回の課題で作成した、ワイヤーフレームを元にPC(デスクトップ)のデザインを制作してください。

【試験内容】
「全てのクリエイターに最高の空間と最高の体験を。」をテーマにしたクリエイターが集まるカフェ「The Cucua coffee.」のホームページのデザインを前回制作したワイヤーフレームを元に制作してください。

【テーマ】

架空カフェのホームページ制作
・ノマドのクリエイターやフルリモートで活動するクリエイターが集まるカフェ。
・サービス名は「The Cucua coffee」
・ページ全体はXDで作成してください。
・写真加工が必要な場合はPhotoshopを使用してください。
・写真などの素材もダミーを使わず実際に使用するもので制作してください。
・デザインの方向性は自分で決定して大丈夫です。
 
【提出形式】
・PCの横幅は1366px
・XDファイルでの提出をお願いいたします。
 
【参考】
 
【ロゴ素材】

⑩HPデザイン課題(モバイル)

【試験概要】
adobeのプロトタイプツールXDとPhotoshopを使用して、架空のホームページ(デスクトップ)の デザインを制作する課題です。前回の課題で作成した、ワイヤーフレームを元にPC(デスクトップ)のデザインを制作してください。

【試験内容】
「全てのクリエイターに最高の空間と最高の体験を。」をテーマにしたクリエイターが集まるカフェ「The Cucua coffee.」のホームページのデザインを前回制作したワイヤーフレームを元に制作してください。

【テーマ】
架空カフェのホームページ制作
・ノマドのクリエイターやフルリモートで活動するクリエイターが集まるカフェ。
・サービス名は「The Cucua coffee」
・ページ全体はXDで作成してください。
・写真加工が必要な場合はPhotoshopを使用してください。
・写真などの素材もダミーを使わず実際に使用するもので制作してください。
・デザインの方向性は自分で決定して大丈夫です。

【提出形式】
・mobileの横幅は769pxで制作お願いいたします。
・XDファイルでの提出をお願いいたします。
 
【参考】
【ロゴ素材】

⑪LPデザイン課題(ワイヤーフレーム含む)

【試験概要】
adobeのプロトタイプツールXDとPhotoshopを使用して、架空ランディングページのワイヤーフレーム及びデスクトップ/モバイルのデザインを制作する試験です。

【試験内容】
前回課題で制作した「The Cucua Coffee」のオリジナルコーヒー豆「The Coffee Beans」のランディングページを制作してください。
前回はホームページということで定期ユーザーに訴求した構成とデザインでしたが、今回はリスティング広告やinstagramなどのストーリー広告からアクセスしてきたユーザーに購買につながる情報設計とデザインを意識して制作してみてください。
CTAの先のページはオンラインショップのページに飛ぶ想定です。

【推奨技能】
・WEBデザイン講座試験①~⑩相当の技能
・LP構築設計講座全講座
https://cucua.fun/courses/lpo/

【テーマ】
架空コーヒー豆のランディングページ制作
リモートワークが日常になりお家でコーヒー体験を楽しみたい社会人男女がターゲット
・サービス名は「The Coffee Beans
・ページ全体はXDで作成してください。
・写真加工が必要な場合はPhotoshopを使用してください。
・デザインの方向性は自分で決定して大丈夫です。
・デスクトップ(pc)とモバイルの2画面の作成お願いします。

【提出形式】
・webは横幅1366px、Mobileは769pxで提出ください。
・XDファイルでの提出をお願いいたします。

⑫ポートフォリオ制作

【試験概要】
adobeのプロトタイプツールXDとPhotoshopを使用して、自分のポートフォリオを制作する試験です。
この講座や試験の中で制作したものをまとめて自分がフリーランスとしての活動や転職活動で活用できるポートフォリオを制作してください。

【試験内容】
ポートフォリオの形式はホームページでもランディングページ形式でも大丈夫です。
自身で訴求軸を決めて制作してください。

【テーマ】
自身のポートフォリオ制作
ターゲットは自身で設定してください
・ページ全体はXDで作成してください。
・写真加工が必要な場合はPhotoshopを使用してください。
・デザインの方向性は自分で決定して大丈夫です。
・デスクトップ(pc)とモバイルの2画面の作成お願いします。

【提出形式】
・webは横幅1366px、Mobileは769pxで提出ください。
xdファイルとjpegファイルで提出お願いします

Scroll to Top