ch

ap

te

r

26-2

Ｗｅｂページの画面構成

042

2-6-2　スマートフォンにおける画面の分割と配置

　スマートフォンは画面が小さいため，コンテンツエリアとナビゲーションエリアを同時に画面上に配置しておくことは難しい。そこで，コンテンツ閲覧中はコンテンツエリアを，ナビゲーション操作中はナビゲーションエリアを画面いっぱいに表示するようにし，それぞれの場合に合わせて両者を切り替えながら利用してもらう，といった工夫が必要となる。

［1］ドロップダウン

　画面上部に1つだけメニューボタンを設けておき，それ以外の画面すべてをコンテンツエリアとして使用する配置である（図2.18［a］）。メニューボタンをタップすると，そこからナビゲーションエリアが下方に向かって滑り込むように入ってきて表示される（図2.18［b］）。　ナビゲーション項目をタップするとナビゲーションエリアが下位のナビゲーション要素によって書き換わる，という形で階層構造をもったナビゲーションを実現することも可能である。これはドリルダウンなどと

よばれている。ナビゲーション要素が多く，階層が深い場合など規模の大きなサイトに適した手法である。　ドロップダウンは，画面のほとんどをコンテンツエリアにすることができ，またナビゲーション項目の数に応じてナビゲーションエリアの高さを変更するなど，Webサイトの情報構造に柔軟に対応できるという利点がある。ただし，以下で解説するタブに比べてコンテンツにたどり着くまでのアクション数が多いのが欠点である。

［2］スライド

　画面上部に1つだけメニューボタンを設けておき，それ以外の画面すべてをコンテンツエリアとして使用する配置である

＊24

（図2.19［a］）。メニューボタンをタップするとたとえば画面の左側からナビゲーションエリアが滑り込むように画面に入ってきて表示される（図2.19［b］）。

＊ 24　ドロワーともよばれる。

コンテンツエリア

メニュー

コンテンツエリア

ナビゲーションエリア

■図2.18───ドロップダウンの配置図

［a］画面上部にメニューを配置 ［b］ナビゲーションエリアが滑り下りる

ch

ap

te

r

26-2

Ｗｅｂページの画面構成

043

　スライドは，画面のほとんどをコンテンツエリアにすることができ，また画面の縦いっぱいにナビゲーションを表示できるため，多くの選択肢を表示できるという利点がある。しかし，画面の縦いっぱいを利用するため，ナビゲーション項目の数が少ないと，画面が間延びしてしまうという欠点がある。　ドロップダウンと似た手法であるが，階層化された情報ではなく，同格の選択肢をユーザに提示したい場合に適した手法といえる。また，ドロップダウン同様，コンテンツにたどり着くまでのアクション数が多いのも欠点である。

［3］タブ

　画面にラベルのつけられた「タブ」とよばれるナビゲーション要素を表示しておき，特定のタブをタップすると，そこに分類付けられたコンテンツやナビゲーション項目を表示する，という手法である（図2.20）。画面上部をタブ領域，それ以外をコンテンツ領域とする場合が多い。階層化された情報ではなく，同格の選択肢をユーザに提示したい場合に適した手法である。　タブは，どのような選択肢があるのか一目で把握しやすいこと，1タップで目的の画面が見られるという移動のしやすさが利点である。一方で，ナビゲーション項目数が多いと各タブが小さくなってしまい，視認性と操作性が下がってしまうのが欠点である。

コンテンツエリア

メニュー

コンテンツエリア

ナビゲーションエリア

■図2.19───スライドの配置図

［a］画面上部にメニューを配置 ［b］ナビゲーションエリアがスライドしてくる

コンテンツエリアA

タブ タブA タブB タブC

コンテンツエリアB

タブA タブB タブC

■図2.20───タブの配置図

［a］画面上部にタブを配置 ［b］タブに関連付けられたコンテンツを表示する

ch

ap

te

r

2素材の制作

053

■図2.40───明るい部分をより明るく，暗い部分をより暗くし，コントラストを高めた状態

トーンカーブ

ヒストグラム

［4］彩度

　撮影時の条件などによっては，写真の彩度＊44

が足りず，補正作業で彩度を高めなくてはならない場合がある。また，食品や花などの被写体は，彩度が高いほうが美味しそうに，あるいはみずみずしく見えるため，撮影条件にかかわらず，彩度を高める場合が多い。

■図2.41───彩度を高める前（左）と高めた後（右）

［5］レタッチ

　写真内の被写体を消したり，あるいは何かを描き加える作業をレタッ

チ＊45

という。たとえば，街中で撮影した写真から看板や車のナンバープレートの文字を消したり，モデルの肌からシミを消したり，といったことが行われる。また，料理写真の湯気やビールの泡を増やしたり，といったことも行われる。図2.42は，写真のなかに写ってしまった不要なクレーンを消している例である。

［a］元写真 ［b］クレーンを消していく ［c］クレーンを削除した

■図2.42───風景に写っているクレーンを，周囲の空の部分を重ねていくことで消す例

＊ 44　画像の鮮やかさを彩度という。

＊ 45　現在では写真を加工する作業全般をレタッチというが，本来はこのような作業のことを指す。

7-2

ch

ap

te

r

2素材の制作

054

［6］写真を補正する作業工程

　ここでは，これまでに解説した手法を用いて，素材として入手した写真を，実際にWebサイト制作で使える状態に補正するための作業工程を解説する。実際のWebサイト制作の現場でも，ほとんどの場合，写真の補正作業はこのような工程で行われている。

①元写真

　まず素材となる写真を観察する。このときのポイントは，明るすぎないか，暗すぎないか，コントラストが不足していないか，彩度が足りているか，といった点を確認することである。同時に，デザインするうえで，どの範囲が必要かを考える。この写真の場合，全体的に写りが暗く，また，やや広い範囲が写りすぎている（図2.43）。

②トリミングを行う

　写真内の必要な部分だけを使うためにトリミングを行う。今回は，下側の空間がやや広く空きすぎてしまっており，右側に隙間が空いてしまっているので，その部分を切り落とすようにトリミングしている（図2.44）。

③全体的に明るくする

　全体的な写りの暗さを解消するため，トーンカーブを使って明るくする。全体を明るくすると写真の印象が弱くなってしまうことが多いが，この段階ではそれでかまわない（図2.45）。

④コントラストを高める

　トーンカーブを用いて明るい部分をより明るく，暗い部分をより暗くすることで，コントラストを高める。これによって，前の段階で弱くなってしまった印象を，オリジナル以上に強いものにしている（図2.46）。

⑤彩度を高める

　④の状態でもけっして悪くはないが，より鮮やかな写真にするため，彩度を高める。ただし，彩度を高めすぎると不自然になるので，最小限に留めておいたほうがよい（図2.47）。

■図2.47

■図2.43

■図2.44

■図2.45

■図2.46

7-2

ch

ap

te

r

31-1

ＨＴＭＬとＣＳＳの基礎

074

3-1HTML と CSS の基礎HTMLとは，文書の構造を明確に記述するための言語であり，CSSはそれらの各構造に対する修飾を指定するための言語である。ここでは，ごく小さなHTMLとCSSを例にとり，この2つの言語の基本的な記述方法について解説する。

3-1-1　本章を読むにあたって

　本章では，いくつかのサンプルWebページを制作しながらHTMLおよびCSSの記述方法を解説していく。各サンプルのデータはすべてCG-ARTS協会のWebサイトから入手可能である。入手先は，目次（本書の3ページ）を参照いただきたい。Webブラウザによる表示確認や，テキストエディタを用いた記述内容の確認，修正などを行うことで，学習の補助に用いることができる。なお，本章を読むにあたっては，つぎの事項にも留意していただきたい。

［1］本章で対象とするHTMLについて

　chapter 1ではHTMLおよびCSSの厳密なバージョンを明確にしてこなかったが，本章ではHTML5とCSS3をベースに解説を行う。　HTML5は，Webブラウザ間での互換性の向上，各種マルチメディアデータを扱うための機能の追加，PCやスマートフォン，タブレットといった表示能力の異なる閲覧機器への対応などをはじめ，多くの拡張を行ったバージョンである。W3C

＊1

によって2014年10月28日に正式な仕様が勧告された。また，それ以前のHTML 4.01

＊2

とXHTML＊3

の記述方法を両方とも取り入れており，これら古い規格のHTMLで記述したWebページが最新のWebブラウザで表示不可能になったり，学習した内容が無駄になったりしないよう配慮されている。　区別のために本書ではこれ以降，話題を最新規格のHTML5に限定する場合は「HTML5」と表記する。また，とくに規格を限定せず一般名詞として取り上げる場合は「HTML」と表記する。

［2］ダウンロードデータについて

　各サンプルのデータは，本書を用いた学習用の資料とする場合に限り，自由に使用してかまわない。　なお，古いWebブラウザのなかにはHTML5とCSS3に対応していないものも存在する。そのため，すべてのデータおよび本章の記述内容を

＊ 1　World Wide Web Consortiumの略。WWWに関するさまざまな技術の標準化を行う標準化団体である。

＊2　ティム・バーナーズ・リーによって開発されたオリジナ ル の HTML か ら直接進化したものがHTML4 である。一時期，言語仕様が肥大化し，ブラウザ間での互換性が低下してしまったHTMLの機能を整理し直し，互換性を改めて確保するために策定されたものである。

＊ 3　HTML 4.01を XML（Extensible Markup Language）で定義し直し，言語仕様をより厳密化したものがXHTMLで あ る。 基 本 的 にXHTML は HTML 4.01 と互換性をもつように設計されているため，両者の相違は大きなものではない。電子書籍のデータフォーマットの1つであるepubも，XHTMLをベースとしている。

ch

ap

te

r

3ＨＴＭＬとＣＳＳの基礎

075

試すためにWebブラウザで表示する場合は，可能な限り最新のバージョンを用いることを推奨する。

［3］ダウンロードデータ利用時のテキストエディタについて

　ダウンロードデータおよび本章で解説しているHTML，CSSのソースコードは，文字コードにU

＊4

TF-8を，改行コード＊5

にLF（UNIX形式）を用いている。そのため，ダウンロードしたソースコードを，これらの文字コードおよび改行コードに未対応のテキストエディタで閲覧，あるいは編集したり，別の文字コードで保存したり

＊6

すると，文字化けや改行の崩れが発生する場合がある。

3-1-2　文書の構造とHTML

　Webページは基本的に，HTML（HyperText Markup Language）とCSS（Cascading Style Sheets）によって記述される。このうち，HTMLは文書の構造を，CSSは文書の装飾を，それぞれ記述するというように役割を分担している。Webブラウザは，HTMLファイルとCSSファイルを読み込み，そこに記述されている指示内容に従って表示を行っている。

　以降，HTMLで記述した文書をHTML文書，CSSで記述した文書をCSS文書とよぶことにする。また，HTML文書，CSS文書をテキストファイルとして保存したものをHTMLファイル，CSSファイルとよぶことにする。慣習的に，HTMLファイルには「html」，CSSファイルには「css」という拡張子をつける。　さきほどHTMLとは文書の構造を記述するための言語であると述べたが，では文書の構造とは何だろうか。　文書は，それを構成する部品から成り立っている。これを文書の要素とよぶ。また，これらの要素は階層構造によって組織化され，意味のつながりに応じて順序づけられている。これが文書の構造である。　たとえば本書の各ページを見ると，いくつもの段落や見出し，写真やイラスト，表などの図表がある。こうした見出しや段落，図表などが，本書をかたちづくるための要素である。　これらの要素のうち，段落や図表類がいくつか集まって「3－1－1」や「3－1－2」などの項を構成している。さらに，いくつかの項が集まって「3－1」や「3－2」などの節を構成し，いくつかの節が集まって章（chapter）を構成する，というかたちで階層構造がつくられている。同時に，各階層構造のなかで各要素が意味内容に応じた順序で並べられている。　このように各要素がきちんと順序づけられ，階層構造のなかに組織化されることによって，本書がかたちづくられているわけである。　HTMLでは，前述したような文書の構造を記述するために，要素の

1-2

＊ 4　unicode の 符号 化 方 式 の 1 つ。Windows，OS X，Linux 系 OS な ど で幅広くサポートされている。

＊5　改行コードには，CR（キャリッジリターン）と LF（ラインフィード）の 2種類，およびその組み合わせがよく用いら れ て い る。Windows の標準的な 改 行 コ ー ド はCR ＋ LF，OS XやLinux系OSではLFが用いられている。また，過去のOSではCRが用いられていた。

＊6　3-1-6［2］の記述内容に従って文字エンコーディングの指定を書き換え，それと合致した文字コードで保存すれば問題はない。

ch

ap

te

r

4

ch

ap

te

r

42-2

ソフトウェア

4-2-2　アプリケーションソフトウェア

　アプリケーションソフト＊7

は，OSなどのシステムソフトと連携しながら動作し，ユーザが文書制作，画像制作，Web制作などの目的に応じて個別に動作させることができる。ワードプロセッサや表計算ソフト，HTMLエディタ（Webページ制作ソフト），ラスタ形式やベクタ形式の画像の制作・編集などを行うためのソフトウェアは，すべてアプリケーションソフトである（図4.6）。　アプリケーションソフトは，さまざまな形態で提供されており，コンピュータやOSなどを購入したそのときから利用できるように同梱されているバンドルソフト，市販ソフトとして販売されているパッケージソフト，インターネットのFTPサイトなどからのダウンロードによって得られるオンラインソフトがある。オンラインソフトには，無償で利用できるフリーソフトや，有償のシェアウェアがある。オンラインソフトは，

利用者にとっては，すぐに手に入る，比較的安いなどのメリットがある。

135

■図4.5───Windowsのデスクトップの例（Windows®operating system，c 2016 Microsoft Corporation. All rights reserved.）

■図4.6───アプリケーションソフトの例

［a］アプリケーションソフトの例　『Adobe Photoshop』 ［b］Webページ制作ソフトの例　『Adobe Dreamweaver』

※　マイクロソフトの許諾を得て使用しています。

＊7　アプリケーションソフトは，単にアプリとよばれることがある。

ch

ap

te

rc

ha

pt

er

42-3

ソフトウェア

4-2-3　代表的な CG・Web ページ制作ソフトウェア

　ここでは，代表的な2次元CG制作ソフトとWebページ制作ソフトについて，簡単に紹介する。

［1］代表的な2次元CG制作ソフトウェア

　代表的なペイント系ソフトにAdobe Photoshop（以降Photoshop）があり，ドロー系ソフトにAdobe Illustrator（以降Illustrator）がある （図 4.7）。ともにプロユースとして最も幅 広く利 用されている。Photoshopでベクタ形式，Illustratorでラスタ形式の画像を扱うといったことも可能なため，両者の連携により，写真のレタッチ，画像としての文字制作など，2次元CGに関するほとんどの処理を行える。　ペイント系ソフトは，G

＊8

PLで配布されるGIMPなどのフリーソフトとしても提供されるほか，プリンタやディジタルカメラに付属されるバンドルソフトとしても提供されたり，Webページ制作ソフトやハガキ制作ソフトにはその機能が装備されたりもする。また，ほとんどのワードプロセッサやプレゼンテーションソフトには，ドロー系ソフトの機能が装備されている。

［2］代表的なWebページ制作ソフトウェア

　Webページ制作ソフトでは，タグの記述を意識することなく，GUI環境によって，ほとんどの作業をドラッグ＆ドロップ操作で行いながらWebページを制作できる。　代表的なものには，一般ユーザ向けのホームページ・ビルダー，プロユースなAdobe Dreamweaverなどがあり，各種スクリプトやスタイルシート（CSS）などに連携する機能を有している。また，Webページのための素材を制作するためのソフトウェアもあり，代表的なものにはアニメーション制作ソフトであるAodbe Flash Professionalなどがある（図4.8）。

136

＊ 8　GNU プ ロ ジェクトが提唱するフリーソフトウェアのライセンス。ソフトウェアとそれを使用するユーザに，使用，複製，変更，再頒布などの自由を与える。GNUとは「GNU is Not Unix」の頭文字で，GPLで配布されるUNIXと互換性のあるソフトウェアの総称。

■図4.7───ドロー系ソフトの例　『Adobe Illustrator』 ■図 4.8 ───アニメーション制作ソフトの例 『Adobe Flash Professional』