PCのディスプレーが持つ縦横比は複数ある。 携帯電話の場合、端末の種類により表示解像度は多種多様で統一的な規格はない。 ウェブページのレイアウトを設計する際考慮するファーストビューのプロポーションはユーザーの環境によらず4対3を想定する場合が一…

色に頼った表現で強調する部分を作る方法は、グラフィックデザイン全般でポピュラーな手段。 しかし限られた領域に様々な情報を詰め込むウェブデザインではこの手段が思ったように機能しないことがある。 そこで、ポイントとなる部分を確実に強調するために…

画面全体にきっちり情報が詰まっているウェブページで余白は特徴的に見える。 重要度の高い情報に対して使えるテクニック。 同じ考え方でイメージの周囲に余白をもうけるか、あるいは余白を感じる表現を用いて強調する方法や、文字要素に対して他の部分より…

ユーザーに一番見てもらいたい情報や、ユーザーに人気のある情報は目に付きやすい場所に置きたいもの。 目立つ場所はディスプレーの大きさに関わらずブラウザ全体の中央付近といわれている。 異なるディスプレーサイズで安定した目線の誘導を行うには、レイ…

ウェブページの画面設計は、ユーザーの表示環境を想定することから始まる。 一般的な表示解像度は1024X768ピクセル。 この表示領域に収まるレイアウトを「ファーストビュー」と呼ぶ。 ユーザーがアクセスした瞬間に表示されるウェブページの範囲のこと。 ま…

ウェブページに含まれるセクションには特定の用途がある ヘッダーセクション ウェブページの上部にあたる。その部分に含まれる主なレイアウトは要素はロゴ、プライマリーナビゲーション、グローバルナビゲーションの３つ。 ロゴはサイト全体の看板に当たる部…

リンクリストに対するブラウザのデフォルトスタイルは、青の文字色に下線がつく設定。 リンステキストのスタイルと意味。 内部ドメインの情報を参照するリンク 任意のテキスト色に下線を与える。リンクを強調するために背景色でマーキングする場合もある。 …

箇条書きはかいつまんだ要点を羅列したり、トピックを列挙する際に利用する。 先頭にプライオリティや時系列といった順序を示す数字が入っていることもある。 ウェブページで適切なリストのレイアウトを作る場合。 箇条書きを代表としたリスト形式の場合、リ…

引用(コーテーション)は主に英語圏でさかんな文章の書き方。 通常本文よりも２文字程度先頭位置を下げて表現するスタイル。 さらに引用元の著書名や作者名などを斜体で表記してこの部分が引用であることを強調する方法もある。 まとまった量の文章を引用する…

斜体 横組みの文字に対して行う強調。 本来は欧文向けの強調方法で母国語で書かれたドキュメントのなかの外国語で書かれたドキュメントの中の外国語の部分を示す目的で使われるスタイル。 単に斜体表現を使うならcssで外観を整える。またem要素は視覚的にも…

ウェブページで文字サイズを指定する方法は２つある。 １つはピクセル寸法を指定する方法、もう１つはemで指定する方法。 1emは標準的なブラウザのデフォルト文字サイズである16ピクセル相当の大きさになる。

可変レイアウトは、コンテンツの表示幅をユーザー側が決められるスタイル。 コンテンツの表示切れが起こらないように配慮するためのデザイン手法。 使用の際は文章構成と文字組みの最適化が必要。 見出しでアウトラインを示す 可変レイアウトを採用する場合…

アウトラインを伝える ウェブページでうまく機能する見出しを作る場合、大項目、小項目といったアウトラインを示す見出しどうしのつながりを視覚的に表現する必要がある。例えば、文章構成のつながりに合わせて文字サイズを大から小と段階的に変化させる、同…

文字の読みやすさに影響を及ぼすデザイン技法は複数あるが、基本は文字のサイズに合わせて行間を調整すること。 小さい文字でも行間をしっかり確保することで読みやすくすることが可能。 比較的大きな文字の場合でも、適度な行間の確保は欠かせない。 もう一…

フォントは用途に合わせて縦横のプロポーションに工夫する。 日本語フォントには、縦に組まれることを考慮してデザインしたフォントと、横組をターゲットとしたフォントの２種類がある。 横組みをターゲットとしたフォントの代表例は「MSゴシック」「MS明朝…

サンセリフ体は本文向けのセリフと異なり、元々キャプションや見出しなどに向けてそのスタイルが確立した。 サンセリフは「読めるフォント」としてデジタルメディアのデザインでは汎用的に使われている。 欧文のサンセリフ体は大きく分けて４つの種類に分か…

セリフは伝統的に本文の文字組みとして使われてきた。 その理由は「読みたくなる」スタイルであるから。 日本語フォントの場合、明朝体がこのスタイルになる。 欧文のセリフ体は大きく分けて３つの種類に分かれる。 オールドスタイル パラティノ(Palatino)、…

タイポグラフィとは本来の「活版印刷」という意味から派生して、字形の表現に対する工夫や、文字の並べ方をアレンジする技法をさす言葉。 日本語では「文字組み」。 文字サイズ、行の高さ(Line Hight)、段落の文字間(Line Spacing)、文字と文字の間の空き(Ke…

人間の目には足りないものを補おうとする力がある。それが想像力、イマジネーション。 見た人に想像力を働かせてもらうためには、わざと情報を削って見せる、引き算の計算が必要になる。 頭を働かせることにより、見た人はその作品の参加者となり、イマジネ…

何かに似せてデザインすることでそのものの機能を端的に表現することが可能。 例えばコンピューターのGUI(アイコン)など。 擬態には人の心を開きやすくするという要素もある。 人はなじみのあるものを見た時は親しみを、まったく始めてのものを見た時は警戒…

パターン(柄)をグラフィックに加えると紙面全体をより華やかに演出することができる。 見る人を楽しい気持ちにさせたり、地味でシンプルなグラフィックに変化を付けるのがパターンの力。 パターンには規則性のあるもの、ランダムなもの、和風、ヨーロピアン…

「テクスチャ」とは物体の表面の質感のこと。 テクスチャは通常のインキで作る色とは違い色の中に微妙な濃淡が加わる。 そのためテクスチャをグラフィックに利用すると通常のインキ色で塗っただけのものより高い密度感が感じられ見る人の目を楽しませること…

「デフォルメ」とはものをわざと変形させてみせる表現方法のこと。 そのものの特徴的な部分を誇張し、それ以外の部分はシンプルにまとめることで、よりそのものの存在を強く感じさせることができる。 よくデフォルメされるのが人物のプロポーション。 イラス…

人に強い印象を与える要素の一つに「ボリューム」がある。 ボリュームを出すには、まったく同じ画像、あるいは同じようなものの画像をたくさん並べることがポイント。しかしボリュームを感じさせるための数は多いほどよいわけではない。 数を多くすれば一点…

グラフィックの中では実際にはありえない情景でも作り出すことができる。 日常見られない光景はインパクトが強く人目を引き付ける効果が得られる。 そのインパクトの中でも、最も効果的なのがすけーるの面白さ。 例えば同じ画像を使っても、使用するサイズや…

グラフィック上でリズム感を感じさせるためには、同じ形の要素を数多く、さまざまな角度で配置すればよい。 さらに複雑なリズム感を表現するには、複数の形を組み合わせて考える。 尖がった形を組み合わせると、打楽器のような短いリズムを感じさせ、柔らか…

ポスターなどを見るときにそこに顔や顔のような配置物があるとつい視線を留める。 顔を使うと紙面全体を強調することができる。 もちろんどのような顔の表情なのか、男性か女性化、無名か有名かで伝わる印象はかわる。 特定の人物を使うときはどのような印象…

レイアウトする要素は角版で写真を見せたり、直線や四角形といった水平・垂直のラインを意識して要素を見せます。 このような見せ方は明快だが、硬い印象を与える。紙面を柔らかい印象にしたい場合は丸や曲線を使ったり、四角形ではなく角を丸くする。 写真…