うつ病WEBデザイナーがうつ病を克服するため独学で学んだことをアウトプットして共有するためのブログ

うつWEB

WEBデザイン

WEBサイトのデザイン、どのソフトでPC・スマホ・タブレット横幅サイズどれくらいって話(2019年現在)

2019年5月20日

WEBデザインで悩ましいことのひとつに、「どれくらいの幅でデザインしたらいいの?」ってのがありますよね。

レスポンシブデザインが主流になっている現在では、ページ幅に合わせてレイアウトを調整できるようにCSSのメディアクエリを駆使してコーディングをするわけですが、そもそも最大幅はどれくらいが適切なのか?っていうので頭を悩ませている人も多いですよね。

まず、その最大幅を決めないと、いざWEBデザインするソフトに向かったときに最初にするアートボードやキャンバスサイズの設定ができないし、適当な大きさでやってから、後からサイズ変更する必要がでてきてもまた最初からやり直しになってしまうので非効率。。。

そんなお悩みに、私なりの回答をいたします。

そもそもWEBサイトのデザインする時どのソフト使ってる?

現在WEBデザイン用に使われているソフトで主流なのはやはりAdobe Photoshop と Adobe Illustratorですね。

初心者だとどちらを使えばいいかわからないって人も多いと思いますが、答えとしては「どちらも使えたほうがいい」です、当たり前ですけど。

という答えだとあまりにも不親切なので、私が個人的におすすめするなら「Adobe Illustrator」です。

私の場合は企業サイトやB2Bビジネスのランディングページのデザインや、既存テンプレートでほぼ出来上がっているHTMLに対してCSSでデザインを整えるといった案件が多いのでIllustratorを使用する頻度が高いので。

つまり、ほぼCSSだけでデザインを構築する前提のシンプルなフラットデザインならばIllustratorでの作業のほうが効率がよいと思います。

逆に、商品やサービスの販売促進・サービス申し込み・商品購入ページなど「セールス」に重点を置いたサイトやランディングページ、イメージやセンスに重点を置いた画像や写真中心のブランド訴求サイトやアート系のサイト・ページなどはPhotoshopで構築するほうが表現の幅が広がります。

余談ですが、数年前までは私はFireworks ってソフトをメインで使用していました。

WEBデザインに特化したソフトで、IllustratorとPhotoshopの、WEBデザインに使う機能だけを詰め合わせたようなソフトです。

なんですけど、Fireworksってすでに開発が終了してて新しいバージョンが出ないんですね。

なのでFireWorksの最新バージョンはCS6ということになります。

ただ、現在のAdobeソフトの購入はサブスクリプションで年間50000円くらいですべてのソフトの最新版を使用できるようになっているんですけど、Adobe CCに契約していれば、すでに開発終了しているFireWorks CS6もダウンロード使用できるんです、安心です。

がんばってFireWorksの中古探す必要はないんですね。
インストール方法はこちらで詳しく解説してくれてます、ありがたい。

http://uzurea.net/install-adobes-old-apps/

というわけで、どのソフトを使うかは基本的には自由なんですが、自分の想定される受注案件の傾向や、下請けの場合なら元請けのデザイン会社さんがメインで使っているソフトを選択基準にしたほうが良いですね。

ちなみに私の場合は、自分ひとりでデザインからHTMLコーディングまでする場合は慣れているFireWorksをよく使うんですけど、デザインデータだけ納品したりとか、他の人と共同作業を行う場合なんかは、FireWorksだと最近のデザイナーさんやコーダーさんがFireWorksの存在や使い方を知らない可能性があったりいろいろ不都合がありそうなので、そういう場合はIllustratorやPhotoshopを使用するようにしているんですよね。

わたくしの場合はMacromediaの時代から、もう十数年FireWorksを使ってデザイン作業しているので、逆にIllustratorやPhotoshopでのWebデザイン作業は慣れて無くて難しいというか、Fireworksは、ピクセル単位でデザインを微調整できるのでイラレやフォトショだとそれが面倒くさくって苦手でした(最近のバージョンではできますけど)。

といいつつ、対外的な仕事も多いので結局IllustratorやPhotoshopの作業にもなれてしまいましたけども。

WEBサイトのデザインで横幅どれくらいでデザインしてるの?って話

さて時代と共にPC環境も変わってディスプレイ解像度も上がりモニタサイズもでかくなったり、ラティーナディスプレイとかで高解像度をちっちゃいデバイスでも表示できたりと、もうえらいことになっておりますが、その時代に合わせてWEBサイトの横幅設定も適切なサイズってのが有りましたね。

15年くらい前の2000年代だとモニタ解像度1024×768ピクセルが標準的なサイズで、それにあわせてだいたい横幅最大800ピクセルとかにしたりしてましたね。

もうちょっと前ならインターネットエクスプローラーでA4サイズで印刷したときにきちんと収まるくらいの大きさ、だいたい565ピクセルくらいだったとおもうけど、そういう設定にすることも有りました。

2019年現在のPCサイトの主流は1200ピクセル

そんな過去があり今があるわけですが、2019年現在のディスプレイサイズの主流は横幅1440ピクセル~1920ピクセルくらい。

デスクトップPCなどでは1920ピクセルがほとんどですが、ノートPCやなんかでは1440ピクセルくらいが平均的な感じなのかなーって感じで。

ちょっとこまかいところまではここでは割愛するけども「じゃあ横幅何ピクセルでやってるの」っていうのがこちら。

PCサイトの横幅は1200ピクセルを基準に

イラストレーターでのデザイン画面をキャプチャしたものに落書きしたものですけど、だいたい1600ピクセル前後のアートボードを設定して、その中でガイドラインを引いてだいたい1200ピクセルでデザインします。

アートボード自体は別に1920ピクセルにしてもいいけど、実際ブラウザを画面フルサイズにして見てる人って少ない(なくはない)と思われるので、だいたい見やすいウィンドウサイズにして見てると仮定して1920のモニタで見てる人はだいたい1600くらいのブラウザサイズにしてるものだろうということです。

で、1440のモニタの人でも十分見やすい大きさで反映されて、1920のモニタでもスカスカ感があまりないギリギリのサイズがだいたい1200くらいってことですよね。

なのでわたくしはこのサイズでデザイン作業しています。

「ならアートボート(キャンバスサイズ)も1200pxでデザインすればいーじゃない?」って思う方もいるかもしれませんけど、ブラウザでの見え方を考慮して下地を大きく取るというのもありますが、アイキャッチ画像や部分的な背景色で画面の横幅いっぱいに広げて表示させるパターンって最近のWEBデザインの主流なので、それをシミュレーションできるようにアートボードサイズを大きくとる必要があります。

アイキャッチ画像や要所要所の背景色や背景画像をブラウザの横幅いっぱいにひろげることで、「スカスカ感」をあまり感じさせないようにするデザインになるんですね。

とりあえずこのデザイン段階ではクライアントにデザインイメージを伝えることが目的なので、「こんな感じになりまーす」ってのがわかるようにって感じ。
実際のコーディングのときはCSSとかで微調整しますけどね。

2019年現在のスマホサイトの主流は375ピクセル

ついでにスマホ版はどんな感じっていうとこんなん。

スマホサイトの横幅は375ピクセル

 

スマホ用のデザインは375ピクセルに設定してデザインしています。

これはiPhone6以降の普通のサイズのiPhone(PlusとかMaxじゃないやつ)の画面の横幅設定と同等(厳密に言うと解像度とかは違うけどHTMLやCSSで内部的に処理される幅)なので、このサイズでデザインして、レスポンシブデザイン用に画像書き出ししてもだいたいちょうどいい大きさになります。

レスポンシブデザインを意識してのデザインになりますので、375pxでの見え方でも少し余裕をもたせて、iPhone5くらいの小さな筐体でもきちんと見れるように最低320pxくらいの幅でも収まるような想定でデザインします。

ピクセル解像度を基準にして横幅640ピクセルで設計する場合もありますが、そのラフデザインを見せる相手によってケースバイケースで選択する感じですね。

エンジニア同士のやり取りとかであれば、640ピクセルを基準にすることも多々ありますし、小規模サイトのクライアントさんにお見せするような場合であれば375ピクセルのデザインで見せたほうが、実機の見た目の大きさが近いので説明もしやすいというのがあります。

375pxでデザインしてjpg書き出しとかして、iPhoneにその画像を送り画面で表示させると実機シミュレーションのようになってお客さんにも伝わりやすいですね。

その画面見て「もう完成してるじゃん!」って勘違いされることもたまにありますが・・・^^;

タブレットとかはどうなの?

デザインラフ提出段階でタブレット等の見え方も求められることはたまにあるので、タブレットの場合は768ピクセルでデザイン制作します。

タブレットも機種によって表示幅はまちまちですが、768ピクセルという数字は一般的にシェアが高いであろうiPadのディスプレイサイズを基準にしています。

デザイン面では基本的なレイアウトはPCサイトのデザインに準じますが、PCサイトのデザインで768ピクセルにしたときに窮屈になりそうな場合はタブレットでの見え方を予測して調整はします。

ヘッダーナビゲーションをハンバーガーメニューにしてしまうとかそういう感じですね。

まとめ

まあ画像書き出しの段階になると、書き出し画像はPC版と共用したりするのでレスポンシブ用のデザインデータはあまり意味ないと感じるかもですが、先述の通りクライアントさんにイメージを伝えるという役割がメインなので必要なものではあります。

というわけで、以上をまとめますと、

・PCサイト用のデザインは横幅1200ピクセル(プラスキャンバスサイズは大きくとる)
・スマホサイト用のデザインはiPhoneを基準にした横幅375ピクセル
・タブレット用のデザインはiPadを基準にした横幅768ピクセル

デザイナーさんによっていろいろポリシーが違ったりするかもしれませんけど、私の場合はこんな感じでお仕事させてもらってますよーってことですのであしからず。

2019年現在の情報ですので、デバイスがいろいろ進化したらそのときは随時対応していく必要はありますね。

こんな感じで実作業で身につく経験や独学で知ることができないようなことは結構あるのですが、これからWEBデザイナーを目指そうと思う人はまずはWEBデザインのスクールなどを考えると思います。

スクールも海千山千でどこがいいかわからないという心配もありますが、オンラインで自宅にいながらリモートで学習できるという環境はそういったリスクが少ないかもしれませんね。

自分のライフスタイルに合えばそういう選択もありです。

オンラインスクールのTechAcademyなどは、オンライン完結のスクールで、 「最短4週間で未経験からプロを育てる」とのポリシーで、無料体験から品質を確認することもできます。

まずは試してみて、合わなければ正式に申し込まなければ良いので、無駄な時間や出費を抑えられます。

WEBデザインコース以外にも

・Webアプリケーションコース(Ruby on Rails)
・PHP/Laravelコース
・Pythonコース ・フロントエンドコース
・WordPressコース
・iPhoneアプリコース
・Androidアプリコース
・Unityコース
・はじめてのプログラミングコース
・UI/UXデザインコース
・Webディレクションコース
・Webマーケティングコース
・Javaエンジニアコース
・ブロックチェーンコース
・Node.jsコース
・Scalaコース

など多岐にわたってWEB関係の開発の技術を学習できるので、WEBデザイナーとして成熟したあとも、WEBエンジニアとしてさらに活躍の場を広げたいという場合にもいいんじゃないでしょうか。

もし興味があれば、無料体験もできるのでまずは無料で、自分のライフスタイルや性格にフィットするか試してみてはどうでしょう?

-WEBデザイン
-,

Copyright© うつWEB , 2020 All Rights Reserved Powered by AFFINGER5.