おすすめサービス

【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 をおすすめしたいと思います。

\MacでWindows環境を手軽に構築!!/

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

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環境をリモートで利用できるようになるサービスです。

\MacでWindows環境を手軽に構築!!/

WIndowsをリモートで利用する

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

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

料金体系

Web制作での表示確認、動作検証の場合は下層デスクトップも必要になるので、

WIN1GB 1200円
リモートデスクトップ700円
月額1900円程度

となります(セール状況による)

しょーご
しょーご
私はWindows OS含め3万ぐらいかけたので、これは安くて羨ましいです…OSは数ギガ容量もっていきますし…

ConoHa for Windows Server利用手順

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

\MacでWindows環境を手軽に構築!!/

❶会員登録

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

ConoHa for Windows Server
ConoHa for Windows Server

❷契約情報の入力

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

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

リモートデスクトップを利用します

Microsoft Office SALはいらないです!

全体表示

❸IPアドレスを確認する

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

\MacでWindows環境を手軽に構築!!/

❹リモートデスクトップ

実際に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環境を構築しておきましょう。

\MacでWindows環境を手軽に構築!!/

Web制作の流れ

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

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

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

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

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

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

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