今月からWEB制作の勉強を始めたのですが平日3時間、休日8時間くらいのペースで勉強できています。
それ以外の時間はブログを書いたりWordPressをいじったりしているので、家にいるときはほぼ一日中ＰＣを触っています笑
デザインカンプ
WEBデザイナーさんのブログで学習方法を読んでみると、「デザインカンプから画像を書き出してコーディング」という表現をよく見かけます。
僕はデザインカンプについてあまり知りませんでした。デザインカンプとは簡単に言うと、WEBページを作成する際に画像やテキストの配置を考えたりすることです。
以前はWEB制作を上達させるにはWEBサイトの模写が主流だったそうですが、最近ではそうでもないみたいですね。
実際の案件を受ける際にはデザイナーさんからデザインカンプを受けとって、それに従ってコーディングしていくからです。
デザインからコーディングまでできるようになったら転職に有利と思ったのでデザインカンプも勉強してみました。
デザインカンプで使えるツール
デザインカンプで使えるツールは以下のようなものがあります。
- Photoshop
- Illustrator
- XD
- Figma
この中で無料なのはXDとFigma。
XDの名前はよく聞くし無料の練習用デザインカンプがネットに出回っているので、ダウンロードしようとAdobe公式サイトに行くも、ダウンロードサイトが見つかりません。
実は無料版XDはすでに終了してしまったようです。
というわけでFigma。
実は最近のFigmaは、PhotoshopやIllustratorよりも使いやすくXDよりも機能が充実しているとのこと。早速Youtubeで使い方を学んでみました。
Figma
Figmaの特徴として
- ブラウザ上で使える
- 動きが軽快
- オンラインでチームやクライアントと相談しながら制作できる
実際に使ってみたところ、動きがサクサクで直感的に操作ができてとても楽しい。
要素の移動、拡大・縮小はドラッグアンドドロップで、要素の色を変えるのはパレットから色を選んだり、スポイトを使って他の要素から色を抽出できちゃいます。
基本的な使い方は半日もあればマスターできると思います。とてもおすすめです。
今後の学習方針
せっかくFigmaの使い方を学んだので、今後は実際のWEBサイトをデザインカンプから模写していこうと考えています。
ポートフォリオの制作はもう少し後になりそうです…。
コメント