はじめに:使用するブラウザとツールの準備

はじめに

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

以下の手順に従って、準備を進めてください。
(すでに以下のツールが使えるようになっている方は、こちらの章は飛ばしてください!)

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

Figmaはスマートフォン版のアプリもあります。
講座内でスマートフォンのアプリを使用する機会はありませんが、実務で役立つのでぜひインストールをして活用してみてください。

また以下のデザインツールは講座の中で紹介をさせていただきます。

以下のツールは現時点で使えるように準備をしていただく必要はありませんが、使えるようになると仕事の幅を広げることが可能ですのでぜひ学習を行ってみてください。

  1. Canva – デザインツール
  2. Adobe Photoshop – デザインツール

Canvaは無料でも使えますが有料にすると使用できるフォントや素材の幅が広がります。

また、Adobeのツールは有料です。(時期により7日間無料で使用できることがあります。)

Adobeのツールは講座の中で課金をしていただく必要はありませんが、仕事で使用する際には課金を行ってください。

目次

Google Chromeの準備

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

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

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

インストール手順

Windowsをお使いの方

  1. Google Chromeの公式サイトにアクセスします
  2. 「Chromeをダウンロード」ボタンをクリックします
  3. ダウンロードされた「ChromeSetup.exe」ファイルをダブルクリックして実行します
  4. インストーラーの指示に従ってインストールを完了させます
  5. インストール完了後、Chromeが自動的に起動します

Macをお使いの方

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

Figmaの準備

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

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

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

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

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

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

Windowsをお使いの方

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

Macをお使いの方

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