【 WEB制作 】 実際に実務で役立った学習・体験　② ツール系 FirE♯ 650

独学にてWEB制作を学び、フリーランスとして少し活動し、その後、広告会社へ入社しWEB事業部へ配属となりました。

そんな私が、
勉強しておいてよかったと思うを書きます。

◼️勉強しておいてよかったこと

① 言語系
HTML
CSS
SCSS
WordPress
PHP
jQuery

② ツール系
VScode
XD
Local 

③ 環境系
Mac
Google Chrome

④ 練習系
タイピング
ググり力
アウトプット


⑤ サービス系
BASE
Shopify
エックスサーバー
ロリポップサーバー
LINE(PC版)

今回は②のツール系について書きます。

② ツール系

VScode
XD
Local

WEB制作のデザインのおいては、Photoshop、Illustratorが必須であると思いますが、私の場合、その辺りはそこそこです。

■ VScode (Visual Studio Code)

Microsoftが開発
無料で使用可能
便利なプラグインが豊富
シェアが大きく情報が多い

Microsoftが開発したコードエディターの定番です。

AdobeのDreamWeaver
GitHubのAtom
も使いましが、私はVScode派です。

Atomは昨年に開発が終了したようで、無料のコードエディターとしては、VScode一択となったのではないかと思います。

メリットは、情報量の多さです。

便利なプラグインも検索すれば情報が出てくるので、自分がコードを書きやすいように、カスタマイズできます。

また、前回の記事で紹介したSCSSに必要なコンパイルも、プラグインで簡単に実現できます。

実務においても、VScodeで書いています。

■ Adobe XD

WEBデザインに特化したツール
Illustrator、Photoshopとの連携可能
デザインファイルのURLを発行しクライアント、チームに共有可能
デザイン段階で、リンク、ヘッダーの追従等の使用感の確認可能

WEBデザインは、PhotoshopやIllustratorで行われていましたが、XDが登場し、作業効率の点から移行が進んでいます。

私の会社でもXDが使われています。

XDは完成したデザインを簡単に共有でき、デザイン案をクライアントと共有したり、リンク設定して実際のWEBサイトのようにページ遷移が簡単に設定できます。

コーディングに入る前に、実物に近いデザインを見せることができるのです。

操作性もIllustratorなどの比べて直感的です。

今後はXDがWEBサイトデザインにおいては主流となるでしょう。

とはいえ、昔からIllustrator、Photoshopでのサイトデザインをされている方は、現在もそれを続けている場合も多く、
会社によってはXDでない場合もあります。

私がフリーランスとして受けた案件では、デザインカンプがIllustratorのデータでした。
これをXDで読み込んでコーディングをした経験もあります。

XDのメリットは、コーディング時にもあります。
marginやpadding、font-size、line-height、text-colorなどの情報を瞬時に取得できるので、コーディングの効率が上がります。

■ Local

Local

ローカル環境を構築し、さらにWordPressを自動インストールし、
WordPressのローカル環境を超簡単に構築できるツールです。

前回の記事で、WordPressはPHPで構築されていると説明しました。

PHPはサーバーで動く言語です。

つまり、WordPressを動かすには、サーバーが必要です。

しかし、サーバーを借りるのは有料です。

なので、自分のPCをサーバーにして使う＝ローカルサーバーを構築してWordPressを動かして、開発をします。

そのために、便利なのが、Localです。

ローカル環境の構築は、他にも方法はあるのですが、Localが最も簡単です。

実務でも、まさに昨日使用し本番環境への移行まで完了しました。

【 まとめ 】

実務で役立ったもの、ツール系について書きました。

ツールも、とにかく使って、慣れること。

これ以外に上達の方法はありません。

行動あるのみです！