最終課題:架空サイトのデザインを作ってみよう

以下の要件を元に、架空サイトのデザインカンプを2つ作ってみましょう。

課題は「課題1-1」、「課題1-2」、「課題2」の3種類あります。

しょうこ

「課題1-1」、「課題1-2」は難易度が同じくらいなので、まずはどちらか1つお取り組みください。両方とも取り組んでいただいても構いません!

また、制作したデザインはポートフォリオに掲載することが可能ですので、ぜひ掲載を行ってくださいませ◎

目次

課題の進め方

課題は実務と同じような流れで進めていきます。

納期を設定して仮の見積もりを作っていただいた上で進めていきますので、課題は以下の手順で進めてください。

1、しょうこにDiscordの個別DMで課題に取り組みたいことをご連絡ください。

※個別DMで課題1-1、課題1- 2、課題2のどちらに取り組むかをご記入ください。

2、返信があったら、返信内容を元に進めてください。

しょうこ

課題は実務と同じように進めていきますので、「仮の見積もり」「納期」を設定していただきます!

またお客様からの要望やディレクターからの指示内容を見て疑問に思った箇所やデザインを制作するにあたって確認したい内容については、私宛にヒアリングも行ってくださいね!
ヒアリングはテキストでのやり取りでも、Discordのボイスチャットを利用してでもどちらでも構いません◎

※ヒアリングや見積もりはカテゴリー「案件対応」の以下の記事を参考に行ってください。

課題1-1(難易度:低)

ざっくりとしたワイヤーフレームと要件を元に、指定のテーマからテーマを選んだ上でデザインカンプを作る案件です。

「指定のテーマからテーマの選定」と、「ワイヤーフレームからデザインカンプの制作」の2点がデザイナーの作業内容です。

お客様からの要望

サイトの内容:ハーブティー専門店のECサイト

ショップ名:herbal tea shop

目指したい雰囲気:ナチュラル

配色:緑系統から提案してほしい。ただし、原色の利用は控えてください。

ターゲット:30代以降の女性

提供いただける素材:なし。画像は仮画像を入れておいてほしい。

参考サイトと参考とされたい理由:どのようなサイトを参考として選べば良いかわからないので、提案して欲しい。

販売する商品数:初めは10点少々

入れたい機能やアプリ:instagramの掲載は不要。レビューも不要。

実店舗:なし

お店やブランドののコンセプト:心と体に優しいティータイムを提供。

取り扱う商品の特徴 :茶葉を農薬、化学肥料不使用で育てていることが特徴です!茶葉が持つ本来の香りと味をそのままお届けします。

同業他社製品との違いや特徴 :茶葉を農薬、化学肥料不使用で育てていること、ノンカフェインの製品を多く取り扱っていることが特徴です! ちなみに同業他社製品と比較すると取り扱っている商品の種類が少ないこと、茶葉以外の関連商品がないことが弱みです。

◯公開と同時に販売する商品https://docs.google.com/spreadsheets/d/1Mq2HD9REhG_KZ8TSA0isOFWMVPW7bnQqxd6MXgKs0Lo/edit#gid=0

ディレクターからの指示

コーディングする範囲:ヘッダーとフッター以外はコーディングを行います。テーマで使用できるセクションを使用しても構いません。
ヘッダーはテーマの編集画面でできる範囲で調整を行い、ヘッダーに関してはコーディングは行いません。

禁止事項:ヘッダーとフッターに関してはコードを書くような編集はNGです。

デザインカンプを制作するページ:TOPページのみ(PC版、SP版)

アートボード幅:PC版1920px、SP版375px

使用するテーマ:Prestige、Be Yours、Pipeline、Impulse、Broadcastのいずれかから選択してください。

使用するアプリ:未定。使用する場合は納品後に設定を行います。デザインにアプリの反映は不要です。

デザイナーにお願いしたい作業:指定のテーマからテーマの選定、ワイヤーフレームからデザインカンプの制作の2点。デザインカンプはFigmaで制作を行ってください。

備考:商品画像の撮影とロゴの提供はまだ先ですので、画像は商品に似たようなものを仮で入れておいてください。ロゴ部分も無料素材で構いません。

ワイヤーフレームは以下をご確認ください。PC版のみですので、SP版はPC版を元に展開してください。(余白や文字大きさ、レイアウトはざっくりと組んでいるので、変更していただいて構いません。)https://www.figma.com/file/wAtUbYpUTPWwsoKOeB5HtH/%E3%83%8F%E3%83%BC%E3%83%96%E3%83%86%E3%82%A3%E3%83%BCEC%E3%82%B5%E3%82%A4%E3%83%88%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0?type=design&node-id=0%3A1&mode=design&t=y6FANKCenHSR4ZC4-1

公開時に販売する商品のコレクション(カテゴリー)は少ないですが、公開後に増える可能性があるためひとまずワイヤーフレーム記載の内容でデザインの制作を行なってください。

こちらの課題は見積もりと納期を提出した後、

  1. テーマを選定した段階
  2. デザインカンプPC版とSP版の制作が完了した段階(デザインの説明と仕様書もご用意ください。説明はテキストベースでも資料でもどちらでも構いません。)

で、DiscordのDMでしょうこまでご連絡くださいませ。

2の段階でデザインのフィードバックをさせていただきます!

課題1-2(難易度:低)

ざっくりとしたワイヤーフレームと要件を元に、指定のテーマからテーマを選んだ上でデザインカンプを作る案件です。

「指定のテーマからテーマの選定」と、「ワイヤーフレームからデザインカンプの制作」の2点がデザイナーの作業内容です。

サイトの内容:弦楽器専門のECサイト

ショップ名:BowString Boutique 

目指したい雰囲気:落ち着きがあり、クラシックな雰囲気。

配色:落ち着いたブラウン、深みのあるネイビー、アイボリー系の中から提案してほしい。

ターゲット:これから楽器を始める初心者の方、趣味で楽器を演奏する方。

提供いただける素材:なし。画像は仮画像を入れておいてほしい。

好きなサイトと好きな理由:

https://www.americaya.jp/ (装飾が所々入っている点が好み。)

https://virtuoso.co.jp/shop/kyoto (落ち着いた色合いが好み。)

販売する商品数:初めは20点ほど。

入れたい機能やアプリ:アプリは使用しませんが、公式LINEへ誘導をさせたい。

実店舗:あり

備考:お買い上げ金額10,000円以上で送料無料


◯公開と同時に販売する商品https://docs.google.com/spreadsheets/d/19upmzooihX4OjT3BpTd7A_kicKp6WFtJwPa2U3FFgnk/edit?gid=0#gid=0

◯カテゴリー
バイオリン、ビオラ、チェロ、コントラバス、弓、ケース、その他アクセサリー

ディレクターからの指示

コーディングする範囲:ヘッダー以外はコーディングを行います。テーマで使用できるセクションを使用しても構いません。
ヘッダーはテーマの編集画面でできる範囲で調整を行い、ヘッダーに関してはコーディングは行いません。

禁止事項:ヘッダーに関してはコードを書くような編集はNGです。

デザインカンプを制作するページ:TOPページのみ。(PC版、SP版)

アートボード幅:PC版1920px、SP版375px

使用するテーマ:Prestige、Be Yours、Pipeline、Impulse、Broadcast、Showcase、Testament、Focalのいずれかから選択してください。

使用するアプリ:アプリは使用しませんが、公式LINEへ誘導させたいです。

デザイナーにお願いしたい作業:指定のテーマからテーマの選定、ワイヤーフレームからデザインカンプの制作の2つ。デザインカンプはFigmaで制作を行ってください。

備考:商品画像の撮影とロゴの提供はまだ先ですので、画像は商品に似たようなものを仮で入れておいてください。無料素材で構いません。

ワイヤーフレームは以下をご確認ください。

PC版のみですので、SP版はPC版を元に展開してください。(余白や文字大きさ、レイアウトはざっくりと組んでいるので、変更していただいて構いません。)https://www.figma.com/design/C0bsJaMjq5JwN5H8QW7iGj/%E5%BC%A6%E6%A5%BD%E5%99%A8%E5%B0%82%E9%96%80%E3%81%AEEC%E3%82%B5%E3%82%A4%E3%83%88%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0?node-id=0-1&t=y1bbLkJYfrMrFQot-1

公開時に販売する商品のコレクション(カテゴリー)は少ないですが、公開後に増える可能性があるためひとまずワイヤーフレーム記載の内容でデザインの制作を行なってください。

こちらの課題は見積もりと納期を提出した後、

  1. テーマを選定した段階
  2. デザインカンプPC版とSP版の制作が完了した段階(デザインの説明と仕様書もご用意ください。説明はテキストベースでも資料でもどちらでも構いません。)

で、DiscordのDMでしょうこまでご連絡くださいませ。

2の段階でデザインのフィードバックをさせていただきます!

課題2(難易度:高)

「掲載するコンテンツの整理」、「テーマ選定」、「ワイヤーフレームの制作」、「デザインカンプの制作」がデザイナーに任せられる案件です。

範囲が広い分デザイナーにとって難易度は高くなりますが、Shopifyデザイナーとして活動する場合はこれらの範囲は全て対応できることが求められます。

お客様からの要件

サイトの内容:グルテンフリー製品専門店のECサイト

ショップ名:OKOMESWEETS KYO

目指したい雰囲気:ナチュラルだけどどこか高級な感じ。

配色:淡いベージュ基調。他は合う色を選定してほしい。

ターゲット:20代後半以降の女性。

参考サイト(好きなサイトと理由): https://comeru.jp/(シンプルなものの優しい雰囲気なので)、 https://glosa.organic/ (情報がわかりやすいため)

あまりお好みではないサイトと理由:https://biossajapan.thebase.in/(デザインがシンプルすぎるため)、 https://itten-sweets.com/ (PCで見た時の文字や画像が大きすぎるため)

競合サイト: https://comeru.jp/https://shop.iyoto.jp/

実店舗で売れている商品: キャロットケーキホール、米粉食パン

今後力を入れていきたい商品:米粉スイーツギフトセット 。オンラインではギフトを推していきたい。

新商品発売の頻度と商品の種類: 年に2回くらい。新商品を出す場合は、1回あたり3〜4つほど。季節限定商品が中心。

提供いただける素材:なし。画像はフリー素材サイトからダウンロードの上、仮画像を入れておいてほしい。

販売する商品数:初めは20点。

入れたい機能やアプリ:instagramの投稿を掲載したい。レビューアプリは不要。

実店舗:京都府に2店舗。

お店の紹介概要:グルテンフリーかつ白砂糖不使用のスイーツとパンをお届けする専門店です。厳選された原材料を使用し、小麦アレルギーをお持ちの方や健康志向の方々に安心してお楽しみいただけるような商品を提供しています。パンもスイーツも、自然で優しい甘さが特徴。贈り物や自分へのご褒美にも最適です。

◯公開と同時に販売する商品

https://docs.google.com/spreadsheets/d/17m2BSIfHGVS5aZfh2DUMzPQYGuY47lAkwk-e7ej7oKI/edit#gid=0

ディレクターからの指示

コーディングする範囲:コーディングは行いません。テーマの編集画面でできる範囲でノーコードで作成します。
ただし、ボタンの文言や見出しを英語から日本語に変えることと、文字入力欄(テキストボックス)の横幅を変更することは可能とします。(中途半端な位置で改行されて、見た目に違和感が生じることを防ぐため。)

禁止事項:コードを書かなければ実装ができないような見た目の作成はNGです。

デザインカンプを制作するページ:TOPページ、商品単体ページ、カートページの合計3ページ(PC版、SP版ともに必要です。)

アートボード幅:PC版1920px、SP版375px。インナー幅はテーマで変更できる幅の中で、見やすさを考慮の上決めてください。
インナー幅の変更ができないテーマを使用する場合は、使用するテーマで決められている値をFigmaに反映の上制作を行ってください。

使用するテーマ:有料テーマからデザイナーが2〜4つほど候補を挙げてください。ただし$420 USD未満のテーマとしてください。

使用するアプリ:instagramfeedのみ。デザインカンプに反映を行ってください。

デザイナーにお願いしたい作業:TOPページに掲載するコンテンツの選定、テーマの選定、ワイヤーフレームの制作、デザインカンプの制作。ワイヤーフレームとデザインカンプはFigmaで制作を行ってください。

備考:商品画像の撮影とロゴの提供はまだ先ですので、画像は商品に似たようなものを仮で入れておいてください。ロゴ部分も無料素材で構いません。

※構成を決めて使用するテーマの候補が決まったら一度ご連絡ください。また、デザインカンプの制作が終わったらご連絡ください。

こちらの課題は見積もりと納期を提出した後、

  1. TOPページに掲載するコンテンツが決まった段階
  2. 使用するテーマの候補が決まった段階
  3. デザインカンプPC版、SP版の制作が完了した段階(デザインの説明と仕様書もご用意ください。説明はテキストベースでも資料でもどちらでも構いません。)

のそれぞれの段階でDiscordのDMでしょうこまでご連絡くださいませ。

各段階でフィードバックをさせていただきます。

※ワイヤーフレームを共有していただく必要はございませんので、ワイヤーフレーム制作後はデザインカンプの制作に進んでください。
※使用するテーマの候補が決まったら、以下のページの「テーマの提案シート」を参考に候補を提案してください!

目次