おすすめサービス

【Web制作で必須】MacでWindows環境の構築はConoHa for Windows Serverがおすすめ!

【Web制作で必須】MacでWindows環境の構築はConoHa for Windows Serverがおすすめ!

こんにちは、現在フリーランスのWeb制作者として3年ほど活動していますしょーごと申します。

今回は「Web制作でのMacでのWindows環境の構築」について、理想のサービスを発見しましたので、それの解説をしていきます。

実は以前も「【IE,Edge対応】MacでWindows環境を構築する方法【Amazon WorkSpaces】」という記事を書いていたのですが、

今回紹介するConoHa for Windows Serverの方が日本製サービスでわかりやすく、一ヶ月あたりの料金が安くなるのとデータ通信量での従量課金がないので、

個人的にはWindows環境構築なら今回のConoHa for Windows Server をおすすめしたいと思います。

Web制作ではWindows環境が必須である

この記事をご覧の方はすでにご存知かもしれませんが、Web制作ではWindows環境は必須です。

その理由として、MacとWindowsの2つの差異があります。

  1. MacとWindowsではデバイスフォントが異なる
  2. WindowsはIE,Edge、MacではSafariなど、そのOSでしか確認できないブラウザが存在する

それぞれどうWeb制作に影響してくるのかを解説します。

❶MacとWindowsではシステムフォントが異なる

例えば以下を御覧ください。

Windows Mac 游ゴシック 違い
Windows Mac 游ゴシック 違い

さて、微妙に文字の太さが違うのがおわかりでしょうか?

ちなみに上がMac,下がWindowsです。

こちらは游ゴシックというフォントを使用しており、日本語では数少ない、Windows,Macともに最初から表示できる神フォントです。

このサイトでは游ゴシックレギュラーを指定してるのですが、MacにはRegularが存在しないため、

そのひとつ上のMediumが適用され、Windowsよりも少し太めに表示されているのです。

2020年に最適なfont-familyの書き方

https://ics.media/entry/200317/

このようにWindowsとMacではデバイスフォントの再現性に差があるため、フォント検証のためにWindowsが必要ということです。

❷WindowsはIE,Edge、MacではSafariなど、そのOSでしか確認できないブラウザが存在する

Web制作では基本的に以下の5つのブラウザでの表示確認が必要です。

  1. Chrome
  2. Firefox
  3. Safari(Macのみ)
  4. Edge(Windowsだが、2020年からMacでも可)
  5. IE11(WIndowsのみ)

国内ブラウザ割合

現実として国内ではEdge,IEの割合が無視できない数います。

国内ブラウザ割合
出典:https://webrage.jp/techblog/pc_browser_share/

そしてEdge,IEのユーザーはほとんどがWindows環境からの利用になります。

つまり、Macで制作する際はWindowsのEdge,IE環境をテストする必要があるということです。

同様にWindowsで制作する場合はSafariを検証しなくてはなりません

Edgeについて

実はEdgeは2020年からMacにも入れることができるようになりました。

ただOSはMacなので、WindowsのEdgeと同じ表示になるとは限りません。

IEについて

IEは仕様によっては対応する必要がなかったりしますが、0とは言い切れないので、

自分のPCでいつでも検証できるようにしておくのが制作者としてのマナーだと思います。

ConoHa for Windows Serverとは

ConoHa for Windows Server

簡単にいうと、Windows環境をリモートで利用できるようになるサービスです。

WIndowsをリモートで利用する

WindowsをMacに入れようとすると、2万円ぐらいしてかつ2GBほどの容量があって中々手が出ないと思うのですが、

今回紹介する方法はクラウド上にWindows環境を構築するのでご自身のPCの容量を圧迫しないのが特徴です。

料金体系

ConoHa for Windows Server

Web制作での表示確認、動作検証の場合は

WIN1GB(1000円以内

となります。

ConoHa for Windows Server利用手順

ここから一緒に手順見ながら進めていきましょう!

❶会員登録

まずはトップページ から会員登録します。

ConoHa for Windows Server
ConoHa for Windows Server

❷契約情報の入力

管理画面から「サーバー追加」を選択

web制作を続けていくなら長期で契約したほうが安くなります。画像は「3ヶ月」でとりあえず契約してみるパターンです。

リモートデスクトップを利用します
全体表示

❸IPアドレスを確認する

サーバーを契約したら、この後使うIPアドレスを確認します。

❹リモートデスクトップ

実際にMacでWindowsにアクセスするには

「Microsoft Remote Desktop」というアプリケーションを利用して接続することができます。

アプリケーションをインストールするため、「App Store」を開きます。

ConoHa for Windows Server Mac

Microsoft Remote Desktopを検索して探してください。

Microsoft Remote Desktop

アプリケーションを開いたら、以下のような画面になります。

Yesをクリック
Add Desktopをクリック
「PC Name」に先ほど確認したIPアドレスを入力
「User Account」の Ask me every timeをクリックして「Add User Account」をクリック
User Nameに「Administrator」を入力し、Passwordに「サーバー追加時にお決めいただいたAdministratorパスワード」を入力し「Save」をクリック
デスクトップが追加されたのでデスクトップアイコンをクリック
証明書エラーが表示されますが「Continue」をクリック
ConoHa for Windows Server
デスクトップ画面が表示されれば接続完了です。次回以降はリモートデスクトップからの手順で接続することができます。

Web制作でWindows環境を利用するタイミング

ここまででConoHa for Windows Serverの利用方法について解説してきました。

Windows環境を使用するタイミングは基本的には「フォントの検証」が必要な時と「クライアントやディレクターに初稿提出する前」になります。

しょーご
しょーご
特にディレクターやクライアントはWindowsを使ってる率高いから、Macだけだと高確率で差し戻しくらいますね
しょーご
しょーご
そうならないため、初稿提出前に自分でWindows環境で確認しておくのが最低限のマナーだよ!

Web制作で食べていくMac民の方は、今回を期にWindows環境を構築しておきましょう。

Web制作の流れ

具体的な「Web制作の流れ」については以下の記事で紹介しています。

\\\コーディング教材公開中///

HTML初心者からWordPress実案件レベルまでのコーディング教材noteで公開しています。

コーディング教材
  1. XDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

マガジンでまとめて購入していただくとお得になります。

書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

あなたに是非読んでほしい記事です!