コンテンツ幅ってどう決める？Google Chromeの機能を活用しよう！

などなど、Webデザインをするときのサイズ感がよくわからない人って多いですよね。

今回は、Webデザイナーを目指しているあなたのために、「コンテンツ幅」を徹底調査して、悩みを解消していきましょう！

コンテンツ幅って何？

Webサイトのコンテンツ幅は、「Webサイトの中身（コンテンツ）が配置される横幅のこと」になります。

コンテンツ幅と同時に使われるのが、「アートボード幅」というもので、アートボード幅が外枠、コンテンツ幅が内枠のイメージです。

Webデザインのコンテンツ幅の決め方

Webデザインのコンテンツ幅は、「人気のWebサイトのコンテンツ幅を確認」して決めるのがおすすめになります。

コンテンツ幅の確認方法に関しては、後ほどご紹介しますね。

今回は、私が調査したPCとスマホのコンテンツ幅をご紹介していきます。

PCの場合

PCの場合のコンテンツ幅は、「1000〜1500」pxがおすすめです。

また、2024年時点で、PCでシェア率が高いデバイスサイズは「1920×1080」pxでした。

スマホの場合

スマートフォンの場合のコンテンツ幅は、「370〜375」pxがおすすめです。

また、2024年時点で、スマホでシェア率が高いデバイスサイズは「390×844」pxでした。

Webサイトのコンテンツ幅確認方法

Webサイトのコンテンツ幅確認方法には、いくつか方法がありますが、今回はGoogle Chromeでの確認方法２つをご紹介してきます。

順番に説明していきますね！

デベロッパーツール

Webサイトのコンテンツ幅確認方法１つ目は、「デベロッパーツール」です。

まず始めに、「Google Chrome ウェブブラウザ」をインストールしていない場合は、インストールするようにしてください。

インストールした後は、以下の順番でコンテンツ幅が確認できます。

Designer Tools

Webサイトのコンテンツ幅確認方法２つ目は、「Designer Tools」です。

Designer Toolsをダウンロードすると、Google Chrome右上の拡張機能（ジグゾーパズルの見た目）にアイコンが追加されます。

ここをクリックすると、「Designer Tools」があるので、ピンを青の状態にするだけでコンテンツ幅が確認できるようになりますよ！

コンテンツ幅以外でもWebデザインで悩んでいるあなたがするべきこと

あなたには、コンテンツ幅以外でもWebデザインで悩んでいるはありませんか？

例えば、以下のような内容です。

こういった悩みがある場合は、迷わずスクールを頼ってしまうのがおすすめです。

というのも、調べるのには、膨大な時間がかかりますが、人に教えてもらえば一瞬で解決するからですね。

ちなみに、私が圧倒的におすすめしているWebデザインスクールは、「シーライクス（SHElikes）」になります。

Webサイト作成までに必要な情報は揃っていますし、わからないことをその場で質問できるオンライン勉強会などのサポート制度が整っているからです。

ここではご紹介できないほど、多くの魅了があるスクールなので、気になったあなたは、シーライクスの記事も読んでみてください 

まとめ

Webサイトの「コンテンツ幅」について、ご紹介していきました。

コンテンツ幅に関してもトレンドがあるので、Webデザイナーを目指すあなたは、PCやスマホで現在のトレンドをチェックする癖をつけておくと良いですね。

また、コンテンツ幅も含め、調べてもわからないことは、誰かに質問するのがおすすめです。

ちなみに、今回ご紹介した「シーライクス（SHElikes）」では、無料体験レッスンを行なっています。

無料で、シーライクスの体験をすることができますし、カウンセリングの時間もあるので、あなたの悩みを質問することができます。

「Webデザイン作成でわからないところがある」、「Webデザイナーになるために必要な勉強がわからない」などあなたの悩みを解消するためにも、ぜひ、この機会を活用してみてくださいね！

シーライクスの無料体験レッスンに関する記事はこちら