WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

WEBサイトを作る際に用意するべき端末と開発環境のおすすめ

WEBサイトを作るためにはまず環境と整える必要があります。未経験者の方は覚えることがたくさんあるのでPC1台あれば十分ですが、キチンとした仕事としてクライアントのいるフリーランスや企業だとそういうわけにもいきません。

私の経験上、最低限必要な作業端末と環境をご紹介します。これがないとWEBデザインで仕事をしていくのは辛いです。

ノートパソコン

ノートパソコンで実機検証

PCを使用してのWEBサイトの閲覧のほとんどはノートパソコンで行われます。ユーザーにとって使いやすいWEBサイトを作るためには一番多くのユーザーが使用してるデバイスでの実機確認が必要不可欠です。

2016年現在の主流なノートパソコンは1336×768のサイズであるため、これに合わせて使いやすいWEBサイトを作ることが基準となります。

PhotoshopでのデザインやコーディングなどはどのPCで行っても構いませんが、実際に閲覧するユーザーになりきって確認しましょう。より使いやすいデザインに調整していくことが良いWEBデザインをするための秘訣です。

この考えは「より使いやすいWEBサイトを作るという」UI・UXの設計にもつながります。

iPad

タブレットで実機検証

新規でウェブサイトを立ち上げる際はレスポンシブデザインか、PCとスマホでデザインを切り替えるかの2つを取ります。

タブレットでの閲覧は多くても全体の10%程度ですが、WEBデザイナーとして企業の利益を上げるならば行なうべき対応です。タブレットの多くは横幅768pxで設定されています。このサイズに会うようにWEBサイトを設計するのが基本となります。

会社に入ってデザインをするならば多くのタブレットでの実機検証を行なうことができますが、フリーランスや勉強として実機検証をするならばシェアの一番多いiPadになります。

iPhone

スマートフォンで実機検証

WEBサイトをスマートフォンに対応することは今や必須条件になっています。PVの50%以上がスマホからの流入であるウェブサイト・サービスも当然になってきています。

PCよりもスマホを優先させる「モバイルファースト」と言われるように、スマホ閲覧時のデザインを最優先して、それに合わせてPC側のデザインをする開発手法もスタンダードになりつつあります。

WEBサービス開発での実機検証はAndroidの多くのバージョンでのスマホでの実機検証は必須ですが、これも個人・フリーランスでスマホサイト開発をするならばシェアの一番多いiPhoneにするべきでしょう。

Google Chrome

google chromeの検証ツール

PC・タブレット・スマホでの表示を確認しながらデザインする場合はクロームの開発者機能を使うと便利です。ユーザーエージェントにも対応しているので、端末によって違うファイルを読み込むようなWEBサイトにも対応できます。

GoogleChromeでスマホ表示

windowsならばF12か右クリック→「検証」、Macならば右クリック→検証、を選ぶことでツールが起動します。HTMLソースコードなどが表示されている部分の左上にスマホやタブレットサイズでサイトを読み込むボタンがあります。

iPad / iPhone6s / 6 / 5 / Nexus 6P / 5X などのタブレット・スマホのサイズでの確認ができます。WEBサイトの基本はChromeの検証ツールを使用してブラウザ幅を変更しながらコーティングすると作業は捗ります。

しかし、実際の使用感はもちろん。viewport設定やスマホ独自のHTML・CSS解釈により、想定通りにスマホやタブレットでデザインが整うことはまずありませんので、ある程度のコーティングが進んだ段階で実機検証をする必要があります。

もちろんPCでの表示確認はIE / firefox / safariなど主要ブラウザすべてで行います。

スマホでの実機検証に必要なレンタルサーバー

PC画面でのデザイン確認はローカル環境でブラウザを開けば問題ありません。それこそHTMLファイルをダブルクリックするだけです。少しめんどくさいのがタブレットとスマホの実機でのレイアウト確認です。

一番楽で確実なのはレンタルサーバーにアップロードして検証機で直接URLを記入して確認することです。

静的なHTMLのみの確認でよければ格安のさくらのレンタルサーバロリポップ!といったレンタルサーバーで十分ですが、WordPressなどPHPとMySQLを使用したCMSの場合は高速表示が可能なPHP7が使えるエックスサーバークラス以上がおすすめです。

ノーパソ・タブレット・スマホの3つはWEBデザイナーには必需品

WEBデザイナーの仕事はどんどん細分化されていき、「WEBデザイナーは何をする仕事なのか」という境界線が曖昧になってきています。

しかしUI・UXに特化してもjavascriptに特化してフロントエンド開発をするにしても必ず実機での動作確認は行います。

まずはこの3つの端末で効率良くWEBサイトを作れるようになると、実際のデザイン現場でも苦戦することがなくなります。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST