学習を開始するにあたって

講座にご参加いただき誠にありがとうございます！

このページでは、当講座の使い方や利用に関する注意事項等の説明を行なっています。

はじめにご一読の上、学習にお進みくださいませ。

使用するツールの準備

講座を受講いただくために、以下のツールを事前にお手元のパソコンで使えるようにしていただく必要があります。

以下の手順に従って準備を進めてください。（すでに以下のツールが使えるようになっている方は、スキップしてください！）

1. Google Chrome – ウェブブラウザ
2. Figma – デザインツール

Google Chromeの準備

Google Chromeはデザイン制作に必要な拡張機能を追加することのできるブラウザです。

本講座ではGoogle Chromeを使用します。

※ブラウザとは、インターネットを閲覧するためのツールのことです。

インストール手順

Windowsをお使いの方

1. Google Chromeの公式サイトにアクセスします
   • URL: https://www.google.com/chrome/
2. 「Chromeをダウンロード」ボタンをクリックします
3. ダウンロードされた「ChromeSetup.exe」ファイルをダブルクリックして実行します
4. インストーラーの指示に従ってインストールを完了させます

Macをお使いの方

1. Google Chromeの公式サイトにアクセスします
   • URL: https://www.google.com/chrome/
2. 「Chromeをダウンロード」ボタンをクリックします
3. ダウンロードされた「googlechrome.dmg」ファイルを開きます
4. 表示されたウィンドウで、Chromeアイコンを「Applications」フォルダにドラッグ&ドロップします
5. Launchpadまたは「アプリケーション」フォルダからChromeを起動します

Figmaの準備

Figmaはプロトタイピングツールと呼ばれるツールで、デザインの制作に使用します。

デザイナーとして活動するにあたり必ず必要となりますので、アカウントを制作しておいてください。

Figmaはブラウザ版とアプリ版がありブラウザでも使用できますが、アプリ版（デスクトップアプリ）をインストールすることでより快適に作業することができます。

Figmaアカウントの制作の仕方

1. Figmaの公式サイトにアクセスします
   • URL: https://www.figma.com/
2. 右上の「Sign up」をクリックします
3. 以下のいずれかの方法でアカウントを作成します
   • Googleアカウントで登録
   • メールアドレスとパスワードで登録
4. メールアドレスで登録した場合、確認メールが届くので、メール内のリンクをクリックして認証を完了させます

デスクトップアプリのインストール

Windowsをお使いの方

1. Figmaにログインした状態で、以下のURLにアクセスします
   • URL: https://www.figma.com/downloads/
2. 「Download for Windows」ボタンをクリックします
3. ダウンロードされた「FigmaSetup.exe」ファイルをダブルクリックして実行します
4. インストールが完了すると、Figmaアプリが自動的に起動します
5. アカウント情報でログインします

Macをお使いの方

1. Figmaにログインした状態で、以下のURLにアクセスします
   • URL: https://www.figma.com/downloads/
2. 「Download for macOS」ボタンをクリックします
3. ダウンロードされた「Figma.dmg」ファイルを開きます
4. Figmaアイコンを「Applications」フォルダにドラッグ&ドロップします
5. Launchpadまたは「アプリケーション」フォルダからFigmaを起動します
6. アカウント情報でログインします

学習サイトの使い方

こちらの学習サイトは、特に利用期限はありません。

Discordのチャンネルからアクセスすることができますが、ブックマークしておくとスムーズにアクセスができるのでブックマークがおすすめです！

Shopifyデザイン制作の学び方

Shopifyデザイン制作に関するカリキュラムは、以下のカリキュラムとなります。

まずはSTEP1から学習を行い、STEP1での学習が終わったらSTEP2へと番号の順番に学習を行ってください。

STEP1では、ECサイト制作・Shopifyデザインに携わる際に押さえておきたい基礎知識について学ぶことができるようになっています。

STEP2ではShopifyのデモストアを制作し、デザイン制作に必要な設定作業やカスタマイズを行います。

STEP2が終わったらSTEP3へと進み、デザインを作る手順を学習してください。

STEP1とSTEP2の最後には、「理解度テスト」があります。

各理解度テストをクリアすると次のSTEPを閲覧するために必要なパスワードをDiscordから確認できるようになり、次のSTEPに進むことができるようになります。

そして全てのコンテンツでの学習が終わったら、「実務試験」のカテゴリーから「架空サイトのデザインを作ってみよう」のコンテンツへと進んでください。

「架空サイトのデザインを作ってみよう」のコンテンツには「課題1-1」、「課題1-2」、「課題2」の3つの制作課題があります。

「課題1-1」と「課題1-2」は同じくらいの難易度ですので、どちらか一つお取り組みください。その後、「課題2」にお取り組みください。

課題は、インプットした内容をデザインにアウトプットできる場です。

正しくデザインカンプにアウトプットができているか、添削を受けて答え合わせをするようなお気持ちでお取り組みくださいませ。

また課題は実務と同じように進めていきますので、仮の納期や見積もりも設定をしていただきます。（詳細は「架空サイトのデザインを作ってみよう」のコンテンツをご確認ください。）

もちろん課題で制作した内容は、ポートフォリオに掲載をしていただいて構いません。

ぜひお取り組みの上、案件対応に臨んでください＾＾

どちらの難易度の課題も実務でよくある形式ですので、ぜひ両方ともお取り組みの上実務にお役立てください✨全ての課題に取り組んでいただいても構いません！

パスワードのかかっているSTEP2とSTEP3の閲覧方法

STEP2とSTEP3にはパスワードがかかっています。

それぞれのパスワードは「STEP1：Shopify基礎知識編」と「STEP2：Shopify構造理解編」の理解度テストに回答してしょうこ宛にDMするとDiscordのDMで送られてきますが、Discordの「step1完走」と「step2完走」のチャンネルからも確認することができるようになっています。

（掲載場所）

こちらのチャンネルは、それぞれ「STEP1：Shopify基礎知識編」と「STEP2：Shopify構造理解編」を学習した後に出題される「理解度テスト」に回答してクリアすることで閲覧できるようになります。

「理解度テスト」は各STEPの一番最後の章に掲載されています。

ちなみに、「STEP1：Shopify基礎知識編」と「STEP2：Shopify構造理解編」以外はパスワードがかかっていない為、先に諸々の資料を見ていただいても全く問題はございません！

もしすでに実務に取り組まれている場合は、資料もぜひご活用くださいね＾＾

カテゴリー：案件対応

カテゴリー「案件対応」には、Shopifyで作られたサイトの探し方や実務にお役立ていただける情報を掲載しております。

各情報はスプレッドシートに掲載しており、当サイトに掲載しているスプレッドシートは全て原本となっております。

ご利用の際は、「ファイル＞コピーを作成」から複製の上ご活用ください。

当サイト内の情報や動画などは、外部に流出しないようお願いいたします。

Discordの利用に関して

ボイスチャンネルについて

打ち合わせ部屋、作業部屋、ポモ部屋などのチャンネルがあります。

ボイスチャンネルは予約の必要はなくどなたでもご自由にお使いいただけますので、ぜひご活用の上他の受講生の方々と交流を行ってください！

質問可能範囲、及び禁止行為について

• 質問を投稿する前に、まずは自力で解決できないかを調べてみましょう。
• 質問は、Discordのチャンネル「#講座に関する質問」に投稿をお願いいたします。直接しょうこまでDMでご質問を行っていただいても問題ございません！
• 実案件に関する質問については守秘義務に抵触する可能性がございますので、実案件に関する質問を質問チャンネルで投稿をしていただくことはお控えください。
• 当講座はShopifyデザインに関する講座です。質問は当講座で取り扱っている範囲内とさせていただき、コードの編集に関する質問や当講座とは無関係の質問はご遠慮いただきますようお願いいたします。
• ポートフォリオ資料のフィードバックは可能です。ご希望の方は、直接しょうこまでDMにてご連絡ください！

質問フォーマット

ご質問については、以下のフォーマットをご活用ください。

必要に応じて、スクリーンショットの添付も行ってください。

また、よくご質問いただく内容については講座内の「案件対応」＞「よくある質問」にまとめているので、そちらも併せてご参考にしてください！

ポモドーロ中に話題になった質問も掲載しております。
ちょっと聞きにくい…と思うような内容も、解決するかもしれません✨

あわせて読みたい

よくある質問集（デザイン制作・ツール以外） これまでに受講生の方々からいただいた質問をこちらにまとめておりますので、ぜひご参考にしていただければと思います！ ランキングや人気商品を紹介するセクションに掲...

あわせて読みたい

デザイン制作・ツールに関する質問集 背景や図形に繰り返しの模様を入れたい場合、どのように編集すれば良いでしょうか？ 図形や背景に何かイラストやドットのような繰り返しの模様を入れたい場合は、以下の...

ディレクションに関する質問について

デザインではなくディレクションに関するご質問については、「Shopifyディレクターに関する質問」チャンネルにある質問フォームから質問を送信してください。

学習にあたっての心がまえ

Shopifyはとにかくアップデートが多く、その数は年間約200ほどと言われております！

アップデートの中には利用者にとって使い勝手の良くなる良いアップデートもあれば、何かのバグかと思ってしまうようなアップデートもあります。

テーマ（テンプレートのこと）も新たに追加されたりこれまで使えていたものが選択できなくなったり、使用するセクションやブロックと呼ばれるパーツも増えたりなくなったりします。

その為、アップデートが起こるごとに臨機応変に対応していかなければなりません。

また案件で選べるテーマの数は200近くあり、テーマによってセクションとブロック（パーツのようなもの）の形も異なります。

アップデートが多く使用するテーマも案件によって異なる為、学習をする際には全部覚えようとはせずに考え方や操作感を学んで柔軟に対応できるように学んでいきましょう！

Shopifyデザインを学んでいることを投稿しましょう！

Xでぜひ学習したことや課題で作った作品を投稿してみてください！

Shopifyのデザイン制作ができることを周知できる上、X上でShopifyのデザイン制作を行うことができる人を探している制作会社やディレクターの方からお仕事のご相談をいただくことができるきっかけになる可能性もあります！