053 色 レ イ ア ウト S E O for User Designer Coder Director ページ横幅のベストサイズは W eb ページの横幅は、サイト制 結論として、現状ではユーザー環境を 作のたびに迷う人が多いよう 意識するよりもコンテンツの内容と充実 だ。もちろんユーザー環境を考えるのは 当然だが、コンテンツの性質も意識して 決めた方がよい。 一般的に大きく分けて、760px前後 にするか900px前後にするかの2択に 度を優先して決定するのがよいだろう。 文字中心のコンテンツであれば、無理に 横幅を広げず、従来通りの760pxにと どめておくのが、ユーザーにも制作者に も優しいサイトとなる。 なる。古いPCで全体を閲覧できるよう 行長と行間を比例させて読みやすく ▲ にするには760px前後が適切だが、そ また、横幅が変わると1行の文字数に と、ユーザーサイドからすれば実際は も影響があるが、行間とのバランスもき 900px程度で問題ない場合が多い。 ちんと調整していきたい。 行長に対して、読みやすい行間はおよ そ比例関係にある。行長が長いほど、行 ユーザー環境としては事実上問題ない 間を空けた方が読みやすい。そのため、 ▲ 意外に辛い900px 900pxだが、コンテンツの内容次第で CSS で line-height を指定する際、行 横組みの文章の場合、読みやすい文字 だ。1行15文字のブロックと、1行40 数の基準は最大で40文字ほど（図1） 。 文字のブロックが同じ行間では読みづら 13px で 1 行 40 文字の場合、文字の段 くなってしまうおそれがあるので、それ 組横幅は520pxとなる。ユーザーが文 ぞれの文字組を目で確認して最適な設定 字を小さくすることも考えると、余白を を作っていくことが必要だ（図2） 。 は制作が辛くなることも多い。 長のことを考えて設定することが大切 取っ手の付いたドアがある 意識に掴んで引こうとするだろ と無意識に掴んで引こうと う。しかし、逆に押さないと開 するだろう。しかし、逆に かない場合もある。そんなドア 押さないと開かない場合も は取っ手を平板に変えてしまう ある。そんなドアは取っ手 方が間違えにくい。アフォーダ を平板に変えてしまう方が ンスとはものや環境の特徴が機 間違えにくい。アフォーダ 能に影響するという属性のこと ンスとはものや環境の特徴 1 行 14 文字の文字組 1 行 12 文字の文字組 取っ手の付いたドアがあると無意識に掴んで引こうとするだろう。しかし、逆 に押さないと開かない場合もある。そんなドアは取っ手を平板に変えてしまう 方が間違えにくい。アフォーダンスとはものや環境の特徴が機能に影響すると いう属性のことで、前述のドアについて言うと、取っ手のついたドアは引くた レイアウト れほど古い PC が少ないことを考える 取っ手の付いたドアがあると無 1 行 35 文字の文字組 取っ手の付いたドアがあると無意識に掴んで引こうとするだろう。しかし、逆に押さないと開かない場合もある。 そんなドアは取っ手を平板に変えてしまう方が間違えにくい。アフォーダンスとはものや環境の特徴が機能に影 響するという属性のことで、前述のドアについて言うと、取っ手のついたドアは引くためのアフォーダンスを持 ち、平板のついたドアは押すためのアフォーダンスを持つ、ということになる。他にも、丸いタイヤは転がるた 1 行 50 文字の文字組 図 1 読みやすい行長の目安。下限は14 〜 15 文字、上限は40 文字程度。 考えても300px以上をサイドメニュー などに使わないと間が持たないが、それ には3段組でないと厳しい。 さらに、ビジュアル要素に乏しいと、 スペースが広い分だけ逆に貧弱に見えて しまう。 100 ［ C H A P T E R 2 ］ 人 が 来 る W e b サ イト を 作 り た い 取っ手の付いたドアがあると無意 識に掴んで引こうとするだろう。 しかし、逆に押さないと開かない 場合もある。そんなドアは取っ手 を平板に変えてしまう方が間違え 取っ手の付いたドアがあると無意識に掴んで引こうとするだろう。しかし、逆に押さな いと開かない場合もある。そんなドアは取っ手を平板に変えてしまう方が間違えにくい。 アフォーダンスとはものや環境の特徴が機能に影響するという属性のことで、前述のド アについて言うと、取っ手のついたドアは引くためのアフォーダンスを持ち、平板のつ 図 2 行長と行間の関係は、比例関係にある。行長が長いほど行間を広げた方が読みやすい。 101
© Copyright 2024 ExpyDoc
