UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見てもらえればいいです。(ぺこり)さて今回は初心者にありがちなUIを考える時に絶対的に考えなければならない「幅」に関してです。

今日(こんにち)のWebの幅について整理してみよう

smartphoneIMGL0018_TP_V

そもそもWebデザイン、UIデザインを考える時に避けては通れない幅問題。今日に至るまでこの幅に関しては当時のトレンドもあり時代に応じて変化を遂げてきたのである。過去の振り返りはいいとして、現在どのように幅が決まっているかというと、基本的にWebは閲覧しているデバイスサイズである。これが基本的な概念となります。当たり前ですよね(笑)この辺りは現在画面解像度が1920×1080とフルサイズが当たり前になり幅も広がり、中にはリキッドで作るサイトも数多くなってきました。しかし、リキッドよりも当然固定幅が使いやすい傾向にあり、その中でも最大幅と最小幅を設定しています。

具体的に幅サイズはどのように決めればいいのか?

上記の通り、幅に関しては画面サイズに応じて決めますが実際の所
・右サイドのメニューの幅は?
・コンテンツ領域の幅は?
と出てきます。この考え方として自由に決めるデザイナーもいますが、基本的な考え方として
広告のサイズで決めるのがベストな選択です。
図を見てみましょう。

basic_width_think

このように広告サイズで検討すると最終的な広告を入れるなど起きた時に修正しない為に必要です。
ですのでこのように広告サイズに応じてコンテンツ幅を決めるとよりわかりやすくなります。

広告サイズじゃなくても良い考え方

ただ、広告サイズじゃなくても基本的には問題ありません。例えば絶対広告を入れないなど、会社サイトや一般的な
サイトじゃない場合は特に気にする必要はありません。しかし、バナーを使わないサイトなどかなり少ないと思いますので国際基準にあるバナーサイズで作るのが一般的です。

結局の所バナーをクリックしてもら為に幅を考える

サイトを運用していくと顧客は必ずと言っていいほど広告を出したいと言ってきます、その時に幅の問題にぶち当たると思います。その結果幅を修正するというのがよくありますので、基本的に修正しやすいように組んでおくと良いです。また、今度は広告を出すとクリックされないと顧客が漏らしてきます。これは配置に関して見直す必要がありますので、結局の所幅に原因があったりします。ですので結局の所幅のサイズはバナーサイズを基準として考える事に戻ってしまいます。

以上UIデザインの幅に関しての基本的な考え方と理論でした。気に入ってくれたらシェアしてね!

2018/09/23 | Webデザイナー

関連記事

skitched-20180814-223313

今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テ...

記事を読む

domain_cms

今年こそWebデザイナーになりたい!現役Webデザイナーに必要なサーバー・ドメイン・CMS 基本知識について

今回で第5回を迎えました。なんとか頑張って続けていきます!Webデザイ...

記事を読む

cssjshtml_img15

今年こそWebデザイナーになりたい!Webデザイナーに必要なコーディングスキル編(html/css/js)

今回はコーディングスキル編として、Webデザイナーとして就職するために...

記事を読む

thmb_03_218

今年こそWebデザイナーになりたい!結局何を覚えればいいの?ソフトスキル編

今年こそWebデザイナーになりたい!結局何を覚えればいいの?ソフトスキ...

記事を読む

新着記事

PASONAZ160306470I9A2122_TP_V

ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイ...

記事を読む

skitched-20180814-223313

今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テ...

記事を読む

6935b31778bafbaa90cbd4cc223ae54e_m

見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから...

記事を読む

document_img01

15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 ま...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

smartphoneIMGL0018_TP_V
UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て

PASONAZ160306470I9A2122_TP_V
ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイト

skitched-20180814-223313
今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テク

6935b31778bafbaa90cbd4cc223ae54e_m
見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから

document_img01
15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 まず

→もっと見る

  • -売る技術-

    ウエブデザイン暦15年目。犬をこよなく愛するデザイナー。今はディレクションとデザイン を中心に制作全般をしてます。主にマーケティングを軸にデザインを組み立て商品が売れるサイトを構築しています。 デザインとマーケティングについて研究の日々。現在はオランダでWebデザイナーとして働いています。

    ツイッターやってます。
  • Amazonアソシエイト・プログラム規約による記載

    売る技術はamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

PAGE TOP ↑