はじめに
まず、私は友人に誘われるがまま今年の春からWebデザインを勉強し始めた者ですが、最初はHTML&CSSの意味も知らない本当に全くの知識0からのスタートでした。
今回は、この半年の中で自分が使ってきたツールとデザインするうえで参考にしてきたサイトを紹介していきたいと思います。ある程度やってきた方々にとっては「当たり前やろ！」と思うような記事ですが、自分の様に右も左もわからない、Web制作はじめたての方々のお役に立てればいいなと思います。
1.Visual Studio Code (VS Code)
言うまでもないですが、まず何よりVSCodeです。HTML/CSS/JavaScriptなどを使ったWeb制作、Webコーティングができるツール。大体の人が使ってるイメージ。
実を言うと私は未だに使いこなせていなくて、慣れるまで画像は挿入できないし、CSSは反映されないしめちゃくちゃ難しいと思いましたが、慣れると拡張機能がたくさん公開されていて作業効率がめちゃくちゃ上がる（らしい）です。
2.Figma
デザインの簡単な図面設計ができるルーツです。ブラウザ上で簡単に使用でき、アプリをダウンロードする必要もなし。リアルタイムで共有できるので、共同作業も楽にできたりします。そして何より無料なので手が出しやすく、Photoshopやillustratorを購入することなく、すぐにデザインを始められます。デザインやりはじめにうってつけです。
このようにWebデザインはもちろん、アプリのUIデザインもできます。
最初にデスクトップやiPhoneなどのフレームを作って、あとはレイヤーで図形を重ねていくだけなので、とても簡単に図面がつくれます。
これも慣れるまで多少難しかったですが、慣れてからはめちゃくちゃ楽に使えます。自分の思い通りのデザインが短時間でできるのでとても楽しいです。欠点としては、Figmaの日本語版が出ていないのではじめは少し使いづらいのですが、Googleの拡張機能を使えば日本語化できるので問題なしです。
https://www.figma.com/?fuid=
3.CLIP STUDIO PAINT (クリスタ）
これはあまりWebデザインには使われないのですが、私がデザインを始める前からよく使っていたイラスト製作ソフトです。基本有料で、人によっては高価なので手を出しやすくはないので番外的に紹介します。
クリスタはWebデザイン専用のツールではなく、イラストや漫画を作るのに特化したソフトなのですが、有料な分、ペンや図形、グリッドなどたくさんの機能と素材が充実しています。自分の場合、頭の中のデザインをいったんクリスタで描き起こしてまとめたうえで、Figmaで図面を作ったりしていました。また自作のキャラクターを描いたり、アイコンを作るときにも便利です。クリスタもFigmaも基本はレイヤー作業なので、片方に慣れていればすぐ片方もとても楽に使えます。
4.Canva Color palettes
もともとCanvaというフリーのデザイン作成ツールで、私はCanvaのカラーパレットをみて、配色を決めていました。
このように色んな配色が一気に見れて、自分の好みの配色も検索できたりするのでめちゃくちゃ便利です。パレットになんかいい感じの名前がついてるのも気に入ってます。
https://www.canva.com/colors/color-palettes/page/2/
5.ICOON MONO
ICOON MONOは無料でアイコンをダウンロードできる素材サイトです。シンプルで、使い勝手がよく、何よりめちゃくちゃ種類が多いです。同じアイコンでも違うパターンのものが何種類もあります。
アイコンの色も、ダウンロード前に色やサイズも変えることが出来るので便利です。
https://icooon-mono.com/
おわりに
本当に一部しか紹介できていませんが、便利で優良なツール・サイトは他にも山ほどあります。デザイン初心者の方のお役に立てたら幸いです。