実際Webデザイナー・コーダーってどういう環境でデザイン＆コーディングしてるの？といった実際を知りたい方もいるかと思います。
今回は画面キャプチャをしつつ紹介していきたいと思います。
iMac 5Kを使用しているが、MacじゃなくてもOKです
まずWebデザイナー・コーダーである私が使用しているPCについてですが、iMac 5K 2017を使用しています。
Macそのものも使いやすいというのもあるのですが、ソフト・ツールが機能性においてもUIにおいても優秀なものが多いので、デザイナー視点としてもMacを使っていて満足度が高いです。
ですが、Macでないとデザイン・コーディング作業ができないというわけではなく、もちろんWindowsでも同等のツールはありますし、むしろWindowsの方がソフトの種類が多いのは説明がいらないくらいですね。
ただ、今はスマホしか無くてパソコン持っていない･･･だとか、家のパソコンが古すぎて･･･という方は、資金に余裕があれば使ってて楽しいMacを購入するとモチベーションも上がるでしょう。
とは言え、ぶっちゃけどっちでも問題ありません。ものすごくスペック不足とかでなければ。
なんならLinuxでもできます。ソフトウェアさえ揃えれば。
ただ唯一考えたほうがいいことは、高解像度の液晶ディスプレイを選んだほうが良い、ということです。
すでにPCやスマホのデバイスの高解像度化がかなり進んでいるので、その解像度に合わせたデザインを行なう場面もどんどん増えてくるはずです。
ノートPCや液晶ディスプレイを買う場合は、解像度(dpi)が高いもの(最低でも1920px × 1080px、できればそれ以上)を選ぶと良いでしょう。
MacであればRetinaディスプレイ対応のものです(最新機種はほぼ全て対応しています)。
Web用途で十分かつ解像度の高いオススメのMacBook Airを下に貼っておきますね。
デスクトップ画面はこんな感じ！
シンプルな感じだと思います。
Webにあまり関係ない部分の説明をしておくと、メニューバー右上にあるのはiStat MenusというCPUやメモリの使用率など、各種PC情報を常時表示しておけるユーティリティです。
また、右上のデスクトップアイコン「AirPods Pro切り替え.app」とはなんぞや？というところですが、ダブルクリックするだけで手持ちのAirPods Pro(ProじゃなくてもOK)をiMacに接続するという手軽で便利なスクリプトです。
詳しい作り方はうぉずさんの「便利すぎて失神しそう！１クリックでAirPodsをMacへ切り替える設定を完全解説」をご覧になってみて下さい。
AirPods ProのアイコンはAppleのサイトから引っ張り出してPhotoshopで背景を取り除く加工をしました。
そして、左側に表示されているDockですね。
あえて左側に置いているのは、ディスプレイを縦に長く使えることと、iPad OSのSidecar機能をつかってiMacの下にiPadを置いてマルチディスプレイ化しているため、カーソルを移動する際に下に配置しているDockが邪魔になるからです･･･(この説明で伝わるだろうか)
さて、これから説明していきます。
Webサイトの動作を確認する各ブラウザー
これはもう当然といえば当然なのですが、作ったWebページを様々なブラウザでチェックする必要がありますよね。
私が実務でもチェックしているブラウザが、Safari、Firefox、Google Chromeです。(IEやEdgeでも確認するのですがそれは後述します。)
やはりブラウザーによって表示が若干違ったりしてコーディングを煩雑化させますよね。
意外とSafariが曲者で、フォントが正しく表示されなかったり、グラデーションの処理がうまくいかなかったり…
でもSafariって結構重要で、iPhoneからのアクセスの多くがiOS Safariだったりするので、表示は気にしたいところです。
まさに現代のIE状態…(IEよりはずっとマシですが)
Illustrator、Photoshop - Webデザインのメインツール
あえてイラレとフォトショの両方を表示していますが、実質ほぼIllustratorをメインに使っています。
Webデザインはもちろん、バナー作成やSNS投稿向けのサムネイル作成など、テキストを入れる系のデザインをする時は大体イラレを使用しています。
Photoshopは写真編集に特化しているため、Webデザインで使用する現場も多いと思いますが私はイラレ、もしくはAdobe XDを使用しています。
Adobe税、高いですよね… でもたのまななどのオンラインスクールを利用すると、格安のアカデミック価格で購入することができるので、そちらがとてもオススメです。
Final Cut Pro X - 動画編集ツール
Webデザイン関係ないのでは… と言われそうですが、たしかに直接は関係ないのかもしれません。
ただ、本業で動画編集業務をするにあたって使用しているのが第一の理由なのですが、今後のWebマーケティングの舞台はYouTubeになる！(もしくはすでになっている)と言われているこの状況で、動画編集スキルも少しは付けたほうが今後Web界隈でも必要とされてくるはずだと、界隈の間では話題になっています。
Webページ上にも動画を載せているところが増えてきているように感じますし、Final Cut Pro Xに限らずAdobe税を払っているならPremiere Pro、比較的安価で買い切りのFilmoraなどの編集ソフトに慣れておくだけでも今後安心かもしれません。
Brackets - コーディング用のテキストエディター
コーディングする際のエディターはなんでもいいのですが、個人的に使いやすいのが「Brackets」です。
Mac、Windows、Linuxに対応しています。
まず”Emmet”に対応していること。
HTMLやCSSの入力を省力化できて非常に役立ちます。
他のエディタにもEmmetが入っているものがあるのですが、あとはプラグインを導入できる拡張性。
例えば、カラーコードを入力した列にその色が表示されたり、汚くなったコードを綺麗に整えてくれたり、特定のブロックだけを選択するなど… 有志が作成した多くのプラグインを導入することによってカスタマイズできるので、極限まで快適な環境を作ることができるのが大きなメリットです。
Transmit - FTP転送ツール
FinderライクなUIでとても使いやすいです。
FTPだけでなく、Google DriveやDropbox、OneDriveなど有名どころのストレージサービスとも接続でき、FTP接続時と同じ感覚でファイル操作・転送できるところが気に入っています。
ただし有償ソフト(2019/12現在 5,400円)なのでご注意を。
◆詳細＆購入先 → https://panic.com/jp/transmit/
また、無償の場合はFileZillaを使用する手もあります。
こちらはMacとWindows両対応です。
Parallels Desktop - Webページ検証用のIEを仮想化ソフトで用意する
これはMac上で別のOSを起動させる仮想化ソフトです。
ブラウザー上のチェックをするためだけにWindows PCを別途用意するのも大変ですし(他に明確な用途があれば良いのですが)、このParallels Desktopを使ってMac上でWindowsを動かしちゃいましょう。
もともとWindows機で開発するなら不要ですね。
ただし、これも有償ソフトです。(2019/12現在 8,345円)
ですが、たまにセールをやっていることもあるのでそれを狙うのもアリですし、体験版もあるのでそれでまず試してみるのも良いでしょう。
もし無償が良い！というのであればVirtualboxを検討してみましょう。
こちらはMac、Windows両対応です。
ただ…ですが、パフォーマンスはParallels Desktopに比べだいぶ落ちますので、多少の重さは我慢する必要があります。
あと、別のPCに入れるのと同等の扱いになるので別途Windowsを購入する必要があります。
購入する場合は、Windows 10 Home 64bit版で良いでしょう。他に理由がない限りWeb検証用途なら十分です。
まとめ
え、これだけ？と思われるかもしれませんが、実際ツールとしてはこれだけで十分Webデザイン・コーディングはやっていけます。
というより実際やってます。
実務を行う場合は、会社のやり方によってこのツールもあのツールも使ってます！というところはあるとは思いますが、それはその時に覚えればいいだけですしね。
ただ、私もWebデザイナー・コーダー歴は浅いので、もっとこれを使えば便利だよ！といったツールが他にあれば教えて下さい(笑)
あとは…Web上で分からないことを検索できる能力が最大のツールかもしれません。何があってもそれで大体何とかなります(笑)
ちなみに、デザインするにおいてフリー素材が必要になればその紹介記事も用意していますのでこちらも是非チェックを！
→ 無料でシンプル！商用利用OKなアイコン素材サイトを入手方法も含めて紹介！Webデザインやチラシ・スライド資料作成などに
→ 無料でおしゃれ！クオリティの高い写真素材サイトを入手方法も含めて紹介！Webデザインやブログに役立つ！
それでは今回はここまで。
