Webデザイン

Webデザインをに必要なソフトとは無料版やコーディング不要のものも

この授業は次のような方に受けていただくことをおすすめします。

・Webデザインに必要なソフトについて知りたい

・デザインソフトは高くて手を出せないので、無料で使えるデザインソフトを知りたい

この授業を受けていただくと、上記の疑問を解決することができます。

また、デザインソフトだけでなく、Webデザインの仕事をする上で必要なツールについても解説しています。

どうぞ最後までご覧になってください。

Webデザインに必須な2つのAdobeソフト

先生
先生
Webデザインと言ったらやっぱりAdobeのソフトがよく使われているんだ。

次の2つのソフトはAdobeが提供していて、Webデザインをするのに欠かせません。

・Adobe Photoshop

・Adobe Illustrator

Web業界の会社のWebデザイナーは、Photoshopをメインで使っている人が100%だと言われています。

Illustratorの方は、過去にグラフィックデザイナーだったデザイナーが使っていることがあります。

PhotoshopとIllustratorはどう使い分けるの?

Pixabayによる写真: https://www.pexels.com/ja-jp/photo/356079/

 

デザイニャー
デザイニャー
PhotoshopとIllustratorってどう違ってどう使い分けるのかニャン?

先生
先生
大まかに次のように使い分けているよ。

・Photoshop・・・Webサイト全体のデザイン、画像加工、バナーの作成

・Illustrator・・・アイコン、インフォグラフィックの作成

PhotoshopでWebサイト全体のデザインを作りながら、アイコン素材を作ったりアレンジする場合にはIllustratorを使うというふうに使い分けます。

先生
先生
しかしながら、現場のWebデザイナーは、Photoshopだけで完結するようにデザインをすることが多いんだ。

デザイニャー
デザイニャー
どうしてPhotoshopだけでデザインを完結させたいのかニャン?

先生
先生
それには次の3つの理由があるんだ。

・PhotoshopとIllustratorを同時に開いているとパソコンが重くなる

・互換性はあるが、違うソフトを行き来しながらはデザインがしにくくストレスになる

・アイコンやイラストは、すでに用意されている素材をそのまま使う場合が多い

先生
先生
これらの理由で、WebデザインでIllustratorを使うことはあまりないんだ。

一つのWebサイトを作っていく上で、PhotoshopとIllustratorの使用頻度の割合は、9:1くらいです。

先生
先生
次からは、PhotoshopとIllustratorについて詳しくお話ししていくよ。

Adobe Photoshop

Luca Sammarcoによる写真: https://www.pexels.com/ja-jp/photo/6155010/

 

まずはAdobe Photoshop。

先生
先生
略して「フォトショ」とも呼ばれているんだ。

Photoshopという名前からすると、写真加工のためのソフトという感じがしますが、Photoshopは機能性が高く、あらゆるWebデザインをすることができます。

先生
先生
WebデザインにおいてPhotoshopでは次のような作業をするよ。

・画像加工

・マスク

デザイニャー
デザイニャー
なんか、画像加工とかマスクとかって、難しそうな感じがするニャン。

先生
先生
そう感じるかもしれないけれど、最近のPhotoshopはオート機能も充実しているので、初心者でも簡単に使うことができるよ。

Webデザインを作るためにはPhotoshopであらゆる機能を使いこなせる知識やスキルが必要です。

デザイニャー
デザイニャー
WebデザインをするのであればPhotoshopは最も重要なソフトなんだニャン。

先生
先生
Photoshopのプランと料金は次の通りだよ。

・年間プラン(月払い)・・・2728円/月(税込)

・年間プラン(一括払い)・・・28776円/年(税込)

・月々プラン・・・3828円/月

 

Adobe Illustrator

そして、Adobe Illustrator。

先生
先生
Illustratorのことを略して「イラレ」とも呼ぶよ。

Illustratorという名前で想像がつくようにイラストの作成をするときに使われるソフトです。

Webデザインでは

・ロゴの作成

・アイコンの作成

・イラストパーツの作成

などに使われています。

デザイニャー
デザイニャー
イラストを作成するソフトということだけれど、Webデザインでイラストを書く必要があるのかニャン?

先生
先生
確かにWebデザインにおいてイラスト作成は基本的にはイラストレーターの仕事で、イラストも作成できるWebデザイナーは重宝がられますが、やらなくても問題はないよ。

Illustratorのプランと料金は次の通りです。

・年間プラン(月々払い)・・・2728円/月(税込)

・年間プラン(一括払い)・・・28776円/年(税込)

・月々プラン・・・3828円/月

 

 

クリエイティブ作成に使える無料の3つのデザインソフト

ここからは、無料で使うことができるWebデザインソフトについてお話ししていきます。

先生
先生
クリエイティブ作成に使える無料のデザインソフトは次の3つだよ。

・GIMP

・Inkscape

・Krita

GIMP

先生
先生
GIMPは、1996年から使われている無料のペイント・画像加工ソフトだよ。

・レイヤー機能

・切り抜き

・サイズ変更

・画像の加工

など、色々な機能が使える優れたソフトです。

先生
先生
GIMPは、Photoshopの代わりとして使うことができるんだ。

プラグインや機能拡張を豊富なので、初心者から上級者のデザイナーから広く支持されています。

GIMPが使えるOSについては次の通りだよ。

・使えるOS・・・Windows、Mac

Inkscape

先生
先生
Inkscapeイラスト作成ソフトで無料で使うことができるよ。

使い心地はIllustratorによく似ています。

オリジナル画像の作成やロゴの作成に向いていて、

・レイヤー機能

・図形の操作・編集

・作成した図形のパスの操作

まで自由自在に扱える高機能なところが魅力です。

先生
先生
Inkscapeが使えるOSについては次の通りだよ。

・対応OS・・・Windows、Mac、Linux

Krita

Krita無料で使える高機能ペイントソフトです。

先生
先生
KritaPhotoshopとIllustratorを合わせた感じの機能を持っているソフトだよ。

直感的に使うことができ、高機能で動作がとても軽く、PSDファイルというPhotoshopのファイルでも開くことができるところが便利です。

先生
先生
Kritaが使えるOSについては次の通りだよ。

・対応OS・・・Windows、Mac、Linux

今注目されているUIデザインソフト

Lisa Fotiosによる写真: https://www.pexels.com/ja-jp/photo/1092644/

 

先生
先生
最近では、UIデザインソフトが注目されているんだ。

UIデザインソフトとは、Webサイトやアプリのユーザーインターフェース(UI)を作るのに特化したデザインソフトです。

WebデザインとUIデザインってどう違うの?仕事内容についても解説この授業は次のような方におすすめです。 ・UIデザインってWebデザインとどう違うのか知りたい ・UIデザインについての...

先生
先生
UIデザインソフトの特徴は次の通りだよ。

・プロトタイプの作成ができる

・複数人の間で同時編集ができる

・ブラウザ上での共有が簡単にできる

プロトタイプとは、

・Webサイトの画面遷移

・スライダーやボタンの動き

などの操作感を表現できるもののことを指します。

先生
先生
つまり、デザインも作れれば、デザインに関する作業も効率的にできる便利なソフトということなんだ。

デザイニャー
デザイニャー
それだけ便利なんだったらUIデザインソフトで全部できちゃうんじゃないの?

先生
先生
そうだね。プロトタイプや共有の機能の面では充実しているんだけれど、デザインとしての機能は、やっぱりPhotoshopやIllustratorの方が優れているんだ。

デザイニャー
デザイニャー
じゃあどうしてUIデザインのソフトが注目されているのかニャン?

先生
先生
それには次のようなことが挙げられるよ。

・導線設計が複雑であるアプリの開発

・デザインの機能が充実している

・今はシンプルがデザインが流行していているので、Photoshopほど機能が多くなくても制作することが可能

他にも要因はあるのですが、こういうわけで、UIデザインソフトの重要性や利便性が高まってきたのではないのかと言われています。

先生
先生
そんな便利なデザインソフトとして注目されているUIデザインツールは次の3つだよ。

・Adobe XD

・Sketch

・Figma

Adobe XD

Adobe XDはAdobe社が提供しているUIデザインツールで、Adobe IDを持っているのであれば、無料で使うことができます

Adobe CCのコンプリートプランを契約していれば、XDもプランの中にあるので使うことができます。

 

Adobe XDは、

・アプリ画面

・アニメーション

・ボタンなどのパーツ

などを作ることができる優れたソフトです。

Webディレクターがワイヤーフレームを制作するときにこのAdobe XDはよく使われます。

【おすすめ】Webデザインの新ツールAdobe XDの使い方や機能この授業は次のような方におすすめです。 ・最近Webデザインの仕事でAdobe XDを使うことになったけれどまだよくわからない...

Sketch

Sketchは、オランダのBohemian Coding社が開発して販売しているUIデザインソフトです。

Figma

Figmaは無料で使えるので、インストールしてみて損はしないと思います。

MacとWindowsでは使うデザインソフトが違う

先生
先生
ここまで紹介してきたデザインソフトやプロトタイピングツールはほとんどがMacとWindowsのどちらでも使うことができるよ。

異なってくるのは、使うことができるフォントやショートカットキーなどのOSのデフォルトの設定なので、ソフトの機能に違いはありません。

先生
先生
ただ「Sketch」だけはMacだけでしか使えないんだ。

今後デザインのスキルアップをしてUIデザインソフトやプロトタイピングツールを使っていきたいのであれば、Macを購入しておくことをおすすめします。

Webデザインに必須な7つのソフト

先生
先生
ここからは、Webデザインに必要な次の7つのソフトについて紹介していくね。

①FTPソフト

②XAMPP

③テキストエディタ

④フォント

⑤Webブラウザ

⑥Microsoft Office

⑦クラウドソフト

①FTPソフト

先生
先生
FTPソフトというのは、サーバー間でファイルの送受信を行うためのソフトなんだ。

FTPソフトを使うことで、

・サーバーにファイルをアップロードする

・サーバーからファイルをダウンロードする

といった作業ができるようになります。

デザイニャー
デザイニャー
サーバーとかFTPってなんなんだニャン?

そんな場合は、とりあえず

・Webサイトをインターネット常に公開するために、サーバーにデータを置くことが必要になる

・サーバーにデータを置くためにはFTPソフトが必要

ということだけを覚えておけば良いでしょう。

先生
先生
FTPソフトにも色々あるけれど、機能的にはどれもほとんど変わらないよ。

例えば次のようなものがあります。

・FileZilla

・Cyberduck

・FFFTP(Windowsのみ)

・Transmit(Macのみ)

・Fetch(Macのみ)

自分が使いやすいものを選びましょう。

②XAMPP

先生
先生
XAMPP(ザンプ)というのは、自分のパソコン内(ローカル環境)にサーバーを構築することができるソフトだよ。

ローカルサーバーがあれば、コーディングデータの表示をすぐに確認したり検証したりすることができます

外部のサーバーに接続してアップロードする手間がなくて、便利なソフトです。

WordPressで作ったサイトの場合、PHPやMySQLなどで作られているので、通常のブラウザではプレビューを表示して検証することはできませんが、XAMPPではPHPやMySQLにも対応しているので、WordPressのサイトもブラウザ上での確認や検証することが可能です。

先生
先生
なので、Webサイトの開発をするときには、まずパソコン内にXAMPPをインストールしておこう。

③テキストエディタ

luis gomesによる写真: https://www.pexels.com/ja-jp/photo/546819/

 

先生
先生
テキストエディタというのは、Webデザインのコーディングをするソフトのことだよ。

コードを各画面のことで、パソコンに入っているメモ帳などでもコーディングはできなくはありませんが、Webデザインに特化したテキストエディタを使うことで、効率的にコーディングをすることができます

先生
先生
主なテキストエディタは次の通りだよ。

・Adobe Dreamweaver

・Sublime Text

・Atom

・Brackets

・Visual Studio code

・GitHub

Adobe Dreamweaver

先生
先生
Adobe Dreamweaverというのは、Adobe社が提供しているコーディングのソフトだよ。

Dreamweaverのおすすめポイントは次の2つです。

・フォルダをまたいで一括で置き換えができる

・独自のテンプレートファイルでコーディングが効率的にできる

色々な編集機能やレイアウト表示、ファイル管理といった機能がひとまとめになっていて、効率的に高品質なページを作成することができます。

しかし、Dreamweaverには欠点も多く、

・動作がかなり重い

・独自のテンプレートを使うとDreamweaver以外のエディタで作業をしにくい

などが挙げられます。

さらに、Dreamweaver独自のデザインプレビューの機能は、実際の仕事では、ほとんど全くといっていいほど使われません。

Dreamweaverを単体で購入するには、1年で28776円(税込)ですが、Adobe CCにもDreamweaverは入っています。

 

Sublime Text

先生
先生
Sublime Text安価で動作が軽く機能的なソフトウェアだよ。

英語版のソフトですが、日本語化することもできます。

ライセンス版として購入するのが必要ではありますが、試用版として無料で使い続けることができるため、無料ユーザーが多いです。

「購入してね」というメッセージがよく現れますが、無視してOKです。

・エラーチェック

・HTML5の構文チェック

・スニペット集

・自動保管機能

などが追加できるプラグインを自由に追加して、自分が好きなようにカスタマイズすることができます。

Windows、Macのどちらにも対応しています。

Atom

先生
先生
Atomは完全無料で使うことができるソフトウェアだよ。

無料でありながら便利なプラグインを追加することができ、インターフェースも見やすくて、機能的なテキストエディタです。

Atomは始めから日本語対応なので、初心者に向いています。

Brackets

先生
先生
BracketsAdobeが提供している無料で使えるテキストエディタだよ。

構築しながらどのように構築されているかをリアルタイムで画面上で確認できるところが最大の特徴です。

使いやすさや各種機能、そして日本語にも始めから対応されているので、愛用者が多いエディタです。

Visual Studio code

先生
先生
Visual Studio codeは、Microsoft社がリリースした無料のHTMLエディタだよ。

・動作が軽い

・自動保管機能が優秀

・スタイリッシュなビジュアル

・便利なプラグインが充実している

という特徴があり、Web制作では導入することが必須と言われている定番のテキストエディタになっています。

実際にWeb制作スキルが学習できる数多くの教本やオンラインスクールでも、このVisual Studio Codeを前提にされているということからも、Web制作を学びたい方にはぜひ購入してほしいテキストエディタです。

GitHub

GitHubは、自分が書いたHTMLやCSS、JavaScriptなどのコードを管理するためのソフトです。

GitHubを使うことで、バージョン管理ソフト「Git」を使ってポジトリの作成や管理が、簡単にWebブラウザから行うことができます。

作ったWebサイトを公開するソフト

企画からデザインを行い、コーディングまでできたら、あとは公開のみです。

公開するときには、次の無料ソフトを使ってサイトを公開しましょう。

・Windows・・・ffftp

・Macなら・・・FileZilla

④フォント

先生
先生
Webデザインで欠かせない要素の一つがフォントだよ。

Webデザインで使える高品質なフォントをたくさん提供しているサービスがありますので、それを利用しましょう。

Webデザインでは、あらゆるタイプのデザインが求められるので、デザインに合うフォントを用意することが必要です。

フォントには次の2つのサービスがあります。

・Adobe Fonts

・Google Fonts

Adobe Fonts

Adobe Fontsは、Adobeソフトのいずれかを購入していると使うことができます

和文と欧文ともにたくさんのフォントが揃っています。

Google Fonts

Google Fontsは、Googleが提供しているフォントで、Webデザインでもよく使われています。

先生
先生
Webサイトで気になるフォントを見つけたときには、「WhatFont」というGoogle Chromeの拡張機能を使うと調べることができるよ。

Webデザインをするためにも、高品質なフォントをたくさん集めておきましょう。

⑤Webブラウザ

cottonbroによる写真: https://www.pexels.com/ja-jp/photo/macbook-pro-5077048/

 

先生
先生
Webブラウザは、Webページを表示するソフトだよ。

WebページはWebブラウザによって表示の仕方が異なることがあリますので、主要なWebブラウザで確認することが必要です。

2022年現在では主要になっているブラウザは次のようなものです。

・Google Chrome

・Firefox

・Safari(Macのみ)

・Microsoft Edge(Windowsのみ)

・Internet Explorer(Windowsのみ)

OSによって使うことができるWebブラウザが変わってくるので注意が必要です。

ウェブブラウザにはデベロッパーツールがついていて、Webページを修正したり、検証に使うこともあるので、使い方を理解しておきましょう。

⑥Microsoft Office

先生
先生
Microsoft Officeは、初期段階でWebデザインの全体のイメージを共有したいと秋に必要なソフトだよ。

Webデザインをするときには、次のような作業でMicrosoft Officeのソフトを使います。

・Word(文書作成)

・Excel(表計算)

・PowerPoint(プレゼンテーション)

将来、フリーランスになりたい方は、自分で構成案やサイトマップを作ることになりますので、今のうちから慣れておいた方がいいでしょう。

⑦クラウドソフト

先生
先生
クラウドソフトはオンライン上でいつでもどこでも誰でも共有できる便利なソフトです。

Web業界でよく使われているクラウドソフトは次のようなものです。

・Google系ソフト

・Dropbox

・コミュニケーションツール

Google系ソフト

先生
先生
Google系ソフトも、Microsoft Officeと同じように、Webデザインの初期の時点で全体イメージを共有するときに使うソフトだよ。

無料で使えて、クラウド上で共有できるところが、Google系ソフトの便利な点です。

最近では、Google系ソフトを利用するデザイナーが増えてきていますが、主に使用されているのは次の2つです。

・Googleドキュメント(文書ベースでまとめるときに使う)

・Googleスライド(サイトマップやワイヤーフレームを作成するときに使う)

クライアントがMicrosoft Officeを使用していない場合もありますので、 Microsoft OfficeもGoogle系ソフトもどちらとも使えるようにしておきましょう。

Dropbox

先生
先生
Dropboxは、インターネット上でデータが保管できるスペースだよ。

原稿や画像素材のやり取りをする際に、Dropboxに素材の保管場所を作ることで、クライアントと製作者の双方で常にやり取りをすることができるので、抜け漏れすることなく管理もしやすい便利なサービスです。

Googleドライブでも教諭できますが、クライアントがGoogleアカウントを持っていないと支えない時もあるので、そんなときにDropboxを使います。

コミュニケーションツール

Webデザイナーは次のコミュニケーションツールをよく使います。

Slack

Chatwork

会社によってどちらを使うのかは違いますが、どちらもインストールしておきましょう。

ちなみにどちらも無料で使えます。

Webサイト制作ツール

先生

先生
先生
Web制作をする際に使う、WordPress関連のツールやソフトについて次のことに触れるね。

・WordPressとは

・ローカル開発環境

・WordPressを作成するために必要なスキル

WordPressとは

先生
先生
WordPressとは、Webサイトやブログを作ったりするときに無料で使えるソフトウェアだよ。

今ではブログだけでなく、一般的な企業のサイトや公共機関のサイトでもよく使われています。

アメブロやエキサイトブログは、会員登録するとそのままブログを書くことができますが、WordPressの場合は、自分でレンタルサーバーを用意してインストールして使います。

HTML、CSS、PHPのスキルがあれば、自由に使うことができ、今では世界の26.5%のサイトはWordPressで作られています。

ローカル開発環境

WordPressを使ってWebサイトをする際には、ローカル開発環境は欠かせないよ。

ローカル開発環境というのは。自分のパソコンに用意したソフトウェアの実行環境、または作業環境のことです。

自分のパソコンだけで利用できる環境は、「ローカル」という言葉で表現されますが、インターネット上に公開されたWebサイトのことは「本番環境」とも呼ばれます。

WordPressはWebサーバーという環境があって初めて動作するソフトウェアなので、自分のパソコン上で動かすのであれば、まずは、WordPress専用のローカル開発間曲を導入する小音が必要です。

ローカル環境は、Web制作をするときに次のような目的のために利用します。

・WordPressを使ってオリジナルのWebサイトを開発する

・WordPressの「テーマ」や「プラグイン」の動作確認や検証

・本番のWebサイトに影響を与えずに安全に作業を進める

これらのことからも、ローカル開発環境はWordPressを使ってWeb制作をするときにかkせない存在であることがわかります。

WordPressのローカル環境を構築する際には次のツールを使います。

・XAMPP(ザンプ)

・MAMP(マンプ)

・LOCAL(ローカル)

 WordPressを作成するために必要なスキル

先生
先生
WordPressでゼロからWebサイトを作るには、次のようなスキルが必要なんだ。

・HTML、CSS、JavaScriptなどのコーディング

・PHPの基礎知識やコーディング

・WordPressの「テーマ」の作成やカスタマイズ

これらのスキルは本やブログ、またはオンラインスクールで習得することができます。

Web制作に使うサーバー&ドメイン

先生
先生
Webサイトを作るときに使う、サーバーやドメイン関連のツールを紹介していくね。

作ったWebサイトをネット上に公開させるためには、フィルやデータなどの置き場所になる「サーバー」とサーバーにアクセスするための情報になるドメインが必要です。

先生
先生
ここでは次の2つのことについて説明するよ。

・レンタルサーバー

・FTPソフト

レンタルサーバー

Webサイトを公開させるために必要なサーバーやドメインは、レンタルサーバーに契約することが必要です。

レンタルサーバーには次のようなサービスがあります。

ConoHa WING(コノハウィング)



★☆★ <国内最速No.1>高性能レンタルサーバー【ConoHa WING】 ★☆★

【ConoHa WING】は、登録アカウント数30万件を突破した「ConoHa」が提供している、
国内最速の高性能レンタルサーバーサービスです。高速・高機能・高安定性に優れたレンタルサーバーで、
初期費用無料、最低利用期間無し、月額880円〜利用できます。

XSERVER(エックスサーバー)



格安ドメイン名取得サービス『Xserverドメイン』

ロリポップ



ロリポップ!レンタルサーバー!はあなたの「やってみたい!」を応援します!
ロリポップ!なら、ホームページ、ブログ、ネットショップ…
これらが今すぐ、そして簡単にできちゃう!
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。
これだけついてるのに月額110円〜ととってもお得。
もちろん無料のお試し期間も10日間あるので安心ですね。

▼ロリポップ!レンタルサーバーはこちら

FTPソフト

Webサイトを設置するサーバーに対して、ファイルをアップロードしたりダウンロードするためにはFTPソフトを使います。

FTPソフトというのは、FTPという通信を使ってパソコンとサーバーの間でのファイルの送受信(アップロード・ダウンロード)するのに使うソフトのことです。

FTPソフトには次のようなものがあります。

・WinSCP(Windowsのみ)

・FileZilla

・Cyberduck

Webデザインがコーディングなしでできる3つのソフト

Webデザインを作りたいんだけれど、コーディングができないという方もいるかもしれません。

そんな方のために、コーディングをしなくてもWebデザインを作成できるソフトが出ていています。

先生
先生
そんな便利なソフトには次の3つがあるよ。

・STUDIO

・Wix

・ジンドゥー

STUDIO

先生
先生
STUDIOは、Webサイト制作が簡単にできるソフトだよ。

コーディングなどの知識がなくてもWebサイトのデザインをして公開までできます。

コーディングが必要ないWebサイトの制作ツールの中でも自由度が高く、自分のイメージに合わせて、洗練されたWebサイトを作成することができます。

基本的に無料で使うことができますが、独自ドメインの取得したり、広告を削除したい場合は有料になります。

Wix

先生
先生
Wixは、無料で簡単にWebサイトの作成ができる世界的にも利用者が多いサービスです。

マウスによるドラッグ&ドロップだけでWebサイト制作が可能です。

テンプレートがたくさん用意されているので綺麗なWebサイトがすぐに作れます。

そして、Wixエディタを使用すれば、作成したクリエイティブやUIデザインを利用して簡単にWebサイトができます

全ての機能が基本的に無料ですが、有料のプレミアムプランを契約することで、独自ドメインを取得できたり広告の削除などをすることができます。

ジンドゥー

ジンドゥーでもWixと同様で無料でWebサイトが作ることができます

Wixと比べて、よりシンプルで使いやすいのが特徴です。

通販サイトやオンラインショップにも対応していて、簡単に作ることができます。

基本的に無料で使えますが、広告を削除したい場合や高度なカスタマイズをしたい場合は、有料プランの契約をすることが必要です。

Webデザインをする際に3つの知っておきたいこと

先生
先生
ここではWebデザインをする際に知っておいてもらいたいことを3つ紹介するね。

・優れたWebデザインが揃っているギャラリーサイトを観る

・Webデザインをスキルアップできる方法を知る

・Webデザインを仕事にする方法を知る

優れたWebデザインが揃っているギャラリーサイトを観る

良いWebサイトを作るには、優れたWebデザインのセンスを磨くことが必要です。

センスを磨いて引き出しを増やすためには、優れたWebサイトを見ることが効果的です。

デザインに行き詰まった際にも参考になるサイトがあるとヒントになってとても便利です。

ここで、優れたWebサイトをまとめているサイトをご紹介します。

Webデザインをスキルアップできる方法を知る

Webデザインは、流行の移り変わりが激しので、常に流行のデザインがどんななのかをチェックしたり、Webデザインツールの使い方を勉強したりする必要があります。

また、基礎的なスキルが身についているかどうかでその後の学習効率に大きな差が出ますので、基礎をしっかりと固めておくことが大切です。

【厳選20冊】初心者がWebデザインをわかりやすく学べるおすすめ本この記事は次のような方に向けて書いています。 ・Webデザインを物にしたいのだけれど、何から手をつけたらいいのか迷ってしまう ...

Webデザインを仕事にする方法を知る

いくら勉強してさまざまなデザインが作れるようになったり、流行をしっかりチェックしていたとしても、仕事をしてお金が稼げないと意味がありません。

Webデザインの仕事を得るのは難しく思えるかもしれませんが、未経験でも仕事を獲得することはできます。

それにはまずは知り合いから仕事を受注したり、クラウドソーシングにチャレンジして力をつけていくことから始めるのも一つの手です。



日本最大級のクラウドソーシング「クラウドワークス」

Webデザイン初心者がクラウドソーシングで報酬をもらえる方法を解説この授業は次のような方におすすめです。 ・クラウドソーシングのことについて詳しく知りたい ・クラウドソーシングで報酬をも...

まとめ

先生
先生
この授業では次の48個のことについてお話ししてきたよ。

・Webデザインに必須な2つのAdobeソフト

・PhotoshopとIllustratorはどう使い分けるの?

・Adobe Photoshop

・Adobe Illustrator

・クリエイティブ作成に使える無料の3つのデザインソフト

・GIMP

・Inkscape

・Krita

・今注目されているUIデザインソフト

・Adobe XD

・Sketch

・Figma

・Webデザインに必須な7つのソフト

①FTPソフト

②XAMPP

③テキストエディタ

・Adobe Dreamweaver

・Sublime Text

・Atom

・Brackets

・Visual Studio code

・GitHub

④フォント

・Adobe Fonts

・Google Fonts

⑤Webブラウザ

⑥Microsoft Office

⑦クラウドソフト

・Google系ソフト

・Dropbox

・コミュニケーションツール

Webサイト制作ツール

・WordPressとは

・ローカル開発環境

・WordPressを作成するために必要なスキル

・ WordPressを作成するために必要なスキル

・レンタルサーバー

・FTPソフト

・WinSCP(Windowsのみ)

・FileZilla

・CYerduck

・STUDIO

・Wix

・ジンドゥー

・Webデザインをする際に3つの知っておきたいこと

・優れたWebデザインが揃っているギャラリーサイトを観る

・Webデザインをスキルアップできる方法を知る

・Webデザインを仕事にする方法を知る

Webデザインに使うソフトについて一口に言っても、いろんなソフトがあることがわかりましたね。

デザイニャー
デザイニャー
Webデザインを制作するときには、こんなにたくさんのソフトを使うスキルが必要だということがわかったニャン。

必要なソフトはたくさんあるけれど、焦らずにまずはPhotoshopや Illustratorなどのデザインソフトを使えるようになることから始めましょう。

私たちは頑張るあなたを応援しています。