Webデザイナーに必要なスキルって?Adobeってなに?

スポンサーリンク
Webデザイナー

Webデザイナーにはいくつか必須のツールがあります。

  • Adobe Photoshop
  • Adobe Illustorator

などがありますが、未経験の方だとどのアプリケーションがどんな役割を持っていて、ほかに何があるのかわからないですよね。

今回の記事ではWebデザイナーとして必要なスキルごとに、どんなアプリケーションがあってどんな役割を担うのかということをご紹介していきます。

画像加工

Adobe Photoshop


PhotoshopはAdobeが提供する画像加工アプリケーションです。

特にWebデザイナーとかに興味がない方でも名前くらいは聞いたことがあるんじゃないかってくらい有名なソフトです。

画像加工に関しては本当なんでもできるので、Webデザイナーに限らずイラストレーターやその他画像加工に関わる職業の人達のデファクトスタンダードとなっています。
求人情報などをみてもPhotoshopが使えることが要件にある、といった具合です。

利用者が多いのでなにか使っていてわからないことがあっても検索すれば解決策が出やすいのがいい点です。

最近(といってもそこまで最近ではないけど)はCC(Creative Cloud)というサブスクリプション展開がされて利用が手軽になりました。

GIMP

オープンソースのアプリケーションです。(ギンプと読みます。 )

画像加工について必要な機能が一通り揃っており、フリーソフトでありながら非常にクオリティの高いアプリケーションです。

フリーソフトなので「未経験の方がとりあえず画像加工をしたい」、っていう場合にはこちらをお勧めします。

GIMPも利用者が多いので何かわからないことがあっても解決方法を探すことが比較的簡単というのがいい点です。

大学の授業で使った経験がある方もいるではないでしょうか。

FireAlpaca

ファイアアルパカです。アルパカの顔のアイコンが個人的に好き。

株式会社ピージーエヌが開発するツールです。ペイントツールとしての役割が強いですが、画像加工もある程度できます。

PSD形式にも対応しているのでPhotoshopとの連携も可能です。
こちらもGIMPと同じく無料であり、TIPsも充実しているので作業で困ってもやり方を調べるのも簡単です。

ただ、上の画像にあるような漫画系のイラスト関連のTIPsが多めな印象です。

ロゴ、イラスト作成

Adobe Illustrator

Adobe IllustratorはAdobeが提供するロゴ制作、イラスト作成のためのアプリケーションです。

提供がAdobeということでPhotoshopと同じなので、Webデザイナーとして活動するためにセットで勉強すると言う方も多いかと思います。

細かいことは割愛しますが、ベクターイメージという細かい図をはっきり表示させる方法を使って画像を編集できます。 そのため、ロゴやイラスト作成に適したアプリケーションです。

Photoshopとの違いとしては、photoshopが画像の色調などを変えることが得意な一方、Illustratorはくっきりとした線画を描くことが得意です。

Ink scape

Ink scapeはオープンソースで開発されているベクターイメージ加工のソフトウェアです。 Illustratorの代わりとして使うことができるくらいしっかりしたアプリケーションです。

クロスプラットフォームなのでWindows、macOSのどちらでも使うことができます。

オープンソースながら現在も開発は活発に行われているため、安心して使うことができます。

Procreate

こちらはちょっと毛色が変わってiPad用のアプリケーションです。

ベクター形式での描画はできないですが、出力はベクター形式で行うことができます。 基本的に必要な機能はそろっているうえ、ペイント用の筆のデータも有料無料たくさんネット上にあるのでかなり拡張性が高いです。

Apple pencilと合わせて使うとなんでもできます。僕はほとんどお絵かきというようなレベルにしか使っていませんが、がっつり本気で描くこともできるポテンシャルあり。

Webサイト制作

Adobe Dreamweaver

Adobe3つ目。Dreamweaverはコーディングを手伝ってくれるエディタです。

コーディングはやろうと思えばメモ帳でもできることですが、自分の用途に合ったエディタを使うことでコーディングを快適に行うことができます。

Dreamweaverのいいところは、実際に作っているページができていく様子を確認しながらコーディングできるところです。これにより作業のミスなどにすぐ気づくことができたり、細かな修正をすぐ行うことができます。
他にはコードヒントというかたちで、途中まで入力した時に構文の提案をしてくれます。

JSの動作確認

JSFiddle

JSとはJavaScriptの略です。

Webページに動的な内容を実装することができます。 以下のサイトは実装したらすぐ結果をみることができるという利点があります。

そのため、どちらかと言うと勉強の時に使いやすいと言う感じです。 実装した内容をすぐ実行して動作を確認することができる上に、オンライン上に保存してシェアも簡単にすることができます。

Javascript以外にもHTMLやCSSを実装できるのも魅力です。
上の画面はJSFiddleにアクセスすると最初に出てくる画面です。

上の方に「Start with a boilerplate:」と項目がありますが、ここから選んでテンプレートを呼び出すことができます。

サイトの埋め込みにも対応しているので、ブログを作ってコードを公開したいと言う時にもいちいちプログラムのページに飛ばさなくても良いという利点があります。

PlayCode

JSFiddleにも言えますが、動作環境を構築せずにオンラインでコードの実行結果をみることができます。

こちらも書いたコードをシェアが簡単にできるのが良いです。シェアして他の方に自分の実装についてヒントをもらったりすることができるのも良い点です。

使ってみる感じ、JSFiddleのほうが使いやすい印象です。

まとめ

今回はWebデザイナーとして活動するための必須のツールについて説明しました。

今回挙げているツールは無料で使えるものもあるので、まずはダウンロードしてうごかしてみるところから初めて見るのはいかがでしょうか?

タイトルとURLをコピーしました