こんにちは。
ウサギ塾 講師の綾瀬です。
Webデザインと聞いてもどんなアプリケーションの使い方を勉強すれば良いのか分からない。
そんな方は多いと思います。
本記事では、Webデザイナーを目指す上で確実に使えた方が良いアプリを紹介します。
結論
使用するツールは勤める会社や依頼人の要望等によって変えていく必要がありますが、とりあえず下記の類のツールは使えた方が良いです。
- コミュニケーションツール（SlackやChatWork）
- 原稿作成ツール（Microsoft WordやGoogleドキュメントなど）
- ワイヤーフレーム作成ツール（Microsoft ExcelやGoogleスプレッドシート、Cacoo、prottなど）
- デザイン制作ツール（PhotoshopやIllustrator、XD、Sketchなど）
- コーディングツール（Visual Sutudio CodeやSublime Text、Dreamweaverなど）
- ネット公開ツール（FileZilla、FFFTPなど）
大量にツールが羅列されていていますが、あまりビビらないでください。
そこまで難しいものでもありません。
それでは以降は上記のカテゴリー一つ一つについて解説していきます。
コミュニケーションツール
コミュニケーションツールとは読んで字の如く「コミュニケーションを取るためのツール」です。
簡単に言えば普段皆さんが使っている「LINE」と同じです。
ビジネスで良く使われているツールを挙げるとしたら以下の二つです。
- Slack
- ChatWork
これらツールはメールとほぼ同じことができて、かつ、メールとは違うチャットツールなので、メールよりも圧倒的に手軽にコミュニケーションが取りやすいという利点からよく使われるようになりました。
制作に無関係な会社でも導入している会社は多いように思うので、この記事を読んでいる人も「ああ知ってるよ」という方は多いのでは無いでしょうか。
上記の通りただのコミュニケーションツールですので、LINE同様すぐに使うことができるはずです。
ビビらなくて大丈夫です。
原稿作成ツール
原稿作成ツールとは、これも読んで字の如く「Web制作物に掲載する文言を作成、記録するためのツール」です。
Web制作物とはバナーやLP、Webサイトなどのことです。
掲載する文言を作成、記録しておく以外にも、その文言になった背景や、制作物の目的、KPI（目標）などをメモしておく場合もあります。
後述するワイヤーフレーム作成作業と同時に済ませてしまうことも多いですね。
ビジネスで良く使われているツールを挙げるとしたら以下の二つです。
- Googleドキュメント
- Microsoft Word
原稿を書ければ良いので、ぶっちゃ書けてしまえば文字さえかければ何でもOKです。
その中でも、使用者が多い・文字毎にデザインを変更できる・オンラインで共同編集できる、といった機能を持っていることが理由で、上記二つが特に利用されているように感じます。
これも良く使われているツールですし、文字が書ければOKですのでビビらなくて大丈夫です。
ワイヤーフレーム作成ツール
ワイヤーフレーム作成ツールとは「ワイヤーフレームを作詞する為のツール」です。
そしてワイヤーフレームとは「Web制作物の設計図」です。
どのようなコンテンツを、どのようなレイアウトで配置するのか、といったことが分かるような資料だと思っておいてください。
ビジネスで良く使われているツールを挙げるとしたら以下の五つです。
- Microsoft Excel
- Googleスプレッドシート
- Adobe XD
- Cacoo
- prott
- Figma
ワイヤーフレーム作成ツールも、ぶっちゃけきちんと分かるようになっていれば紙でも問題ありません。
が、使用者が多い・オンラインで共同編集できる・制作の曖昧な部分を可視化できる、といった理由から、紙ではなく上記ツールが利用されている割合が多いように感じます。
自分1人で制作するだけであれば、自分だけが分かっていれば良いので紙で問題ありません。
デザイン制作ツール
デザイン制作ツールとは「デザインを制作する為のツール」です。
まんまですね。
前述したワイヤーフレームを清書する作業がこれです。
ビジネスで良く使われているツールを挙げるとしたら以下の三つです。
- Adobe Photoshop
- Adobe Illustraor
- Adobe XD
- Sketch
特に使われているのはやはりPhtoshopですね。
Illustraorも使えるべきではあるのですが、最優先で覚えるべきは確実にPhotoshopです。
Webの現場でなぜIllustratorよりもPhotoshopの方が優遇されるのかは別記事にて紹介しておりますので、よろしければご一読ください。
【Webデザイン】Photoshop vs Illustratorどちらを使うべき？
ちなみにワイヤーフレーム作成ツールの項目でも紹介したXDでは、他のワイヤーフレーム作成ツールと比較してデザインを整える機能が充実しているため、デザイン作成ツールとしても使用可能です。
また、Sketchも優秀なデザイン作成ツールですので、機会があれば学んでおいて損は無いと思います。
海外出身の方はSketchを使える人の割合が若干多い気がします。
コーディングツール
コーディングツールとは「コードを書く為のツール」です。
コードとはHTMLやCSS、JavaScript、PHPといったWebを形作っている文字列のことです。
ビジネスで良く使われているツールは以下の五つです。
- Visual Sutudio Code
- Sublime Text
- Dreamweaver
- Atom
- サクラエディタ
これは無料のものを使うのが良いでしょう。
大きなこだわりがなければぶっちゃけた話どれでも良いと思います。
Sublime Textのみ希望者のみ有料化できるという仕組みだったかと思います（払っても払わなくても同じ機能を使えます）。
なお、Microsoft Wordはコードエディターとしては使用できないので注意しましょう。
ちなみに私はVisual Sutudio Codeを使用しております。
Microsoft製のエディターで、コードを書く為に必要な機能は一通り揃います。
ネット公開ツール
ネット公開ツールとは「インターネット上に作成したWebサイトを公開する為のツール」です。
Webサイトは、Webサーバーと呼ばれるインターネットに接続されたサーバーに格納することで、初めてネット上から見ることができるようになります。
このツールを使うことで自分のPCをWebサーバーに接続し、作成したWebサイトを格納します。
ビジネスで良く使われているツールは以下の二つです。
- FileZilla
- FFFTP
これは正直どちらを使っても良いと思います。
Windowsの方はFFFTP、Macの方はFileZillaを使用している割合が高いように感じます（MacはFFFTPは使用できなかったかも）。
前述したWebサーバーに接続して、ファイルを格納さえできればどのようなツールを使っていても問題ありません。
まとめ
いかがでしたでしょうか？
最後にもう一度まとめると、Webデザイナーをしていく為には下記アプリケーションが使えるようになっている必要があります。
- コミュニケーションツール（SlackやChatWork）
- 原稿作成ツール（Microsoft WordやGoogleドキュメントなど）
- ワイヤーフレーム作成ツール（Microsoft ExcelやGoogleスプレッドシート、Cacoo、prottなど）
- デザイン制作ツール（PhotoshopやIllustrator、XD、Sketchなど）
- コーディングツール（Visual Sutudio CodeやSublime Text、Dreamweaverなど）
- ネット公開ツール（FileZilla、FFFTPなど）
導入・学習する際の注意としては、ツールはあくまでツールでしか無いので、ツールを使いこなすことに躍起になって、ツールを使う本来の目的意識が薄くなるようなことはないようにしましょう。
別にPhotoshopを華麗に使いこなせたからといって、良いデザインが作れるわけではないのです。
デザインができるからPhotoshopで綺麗なデザインが作れるのです。
弘法筆を選ばずという言葉を胸に学習を進めていただければと思います。
