![見出し画像](https://assets.st-note.com/production/uploads/images/96134624/rectangle_large_type_2_161e4b0481c119f91e86a85002ad8f46.jpeg?width=800)
【 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
ローカル環境を構築し、さらにWordPressを自動インストールし、
WordPressのローカル環境を超簡単に構築できるツールです。
前回の記事で、WordPressはPHPで構築されていると説明しました。
PHPはサーバーで動く言語です。
つまり、WordPressを動かすには、サーバーが必要です。
しかし、サーバーを借りるのは有料です。
なので、自分のPCをサーバーにして使う=ローカルサーバーを構築してWordPressを動かして、開発をします。
そのために、便利なのが、Localです。
ローカル環境の構築は、他にも方法はあるのですが、Localが最も簡単です。
実務でも、まさに昨日使用し本番環境への移行まで完了しました。
【 まとめ 】
実務で役立ったもの、ツール系について書きました。
ツールも、とにかく使って、慣れること。
これ以外に上達の方法はありません。
行動あるのみです!
この記事が気に入ったらサポートをしてみませんか?