chapter
2
6-2 Ｗ ｅ ｂ ペ ー ジ の 画 面 構 成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］ナビゲーションエリアが滑り下りるchapter
2
6-2 Ｗ ｅ ｂ ペ ー ジ の 画 面 構 成 スライドは，画面のほとんどをコンテンツエリアにすることができ， また画面の縦いっぱいにナビゲーションを表示できるため，多くの選択 肢を表示できるという利点がある。しかし，画面の縦いっぱいを利用す るため，ナビゲーション項目の数が少ないと，画面が間延びしてしまう という欠点がある。 ドロップダウンと似た手法であるが，階層化された情報ではなく，同 格の選択肢をユーザに提示したい場合に適した手法といえる。また，ド ロップダウン同様，コンテンツにたどり着くまでのアクション数が多い のも欠点である。 ［3］タブ 画面にラベルのつけられた「タブ」とよばれるナビゲーション要素を表 示しておき，特定のタブをタップすると，そこに分類付けられたコンテ ンツやナビゲーション項目を表示する，という手法である（図2.20）。画 面上部をタブ領域，それ以外をコンテンツ領域とする場合が多い。階層 化された情報ではなく，同格の選択肢をユーザに提示したい場合に適し た手法である。 タブは，どのような選択肢があるのか一目で把握しやすいこと，1 タ ップで目的の画面が見られるという移動のしやすさが利点である。一方 で，ナビゲーション項目数が多いと各タブが小さくなってしまい，視認 性と操作性が下がってしまうのが欠点である。 コンテンツエリア メニュー コンテンツ エリア ナビゲーション エリア ■図2.19───スライドの配置図 ［a］画面上部にメニューを配置 ［b］ナビゲーションエリアがスライドしてくる コンテンツエリアA タブ タブA タブB タブC コンテンツエリアB タブA タブB タブC ■図2.20───タブの配置図 ［a］画面上部にタブを配置 ［b］タブに関連付けられたコンテンツを表示するchapter
2
素 材 の 制 作 ■図2.40───明るい部分をより明るく，暗い部分をより暗くし，コントラストを高めた状態 トーンカーブ ヒストグラム ［4］彩度 撮影時の条件などによっては，写真の彩度＊44が足りず，補正作業で彩度 を高めなくてはならない場合がある。また，食品や花などの被写体は， 彩度が高いほうが美味しそうに，あるいはみずみずしく見えるため，撮 影条件にかかわらず，彩度を高める場合が多い。 ■図2.41───彩度を高める前（左）と高めた後（右） ［5］レタッチ 写真内の被写体を消したり，あるいは何かを描き加える作業をレタッ チ ＊45 という。たとえば，街中で撮影した写真から看板や車のナンバープレ ートの文字を消したり，モデルの肌からシミを消したり，といったこと が行われる。また，料理写真の湯気やビールの泡を増やしたり，といっ たことも行われる。図2.42は，写真のなかに写ってしまった不要なクレ ーンを消している例である。 ［a］元写真 ［b］クレーンを消していく ［c］クレーンを削除した ■図2.42───風景に写っているクレーンを，周囲の空の部分を重ねていくことで消す例 ＊ 44 画 像 の 鮮 や かさを彩度という。 ＊ 45 現 在 で は 写 真を加工する作業全 般をレタッチという が，本来はこのよう な 作 業 の こ と を 指 す。 7-2chapter
2
素 材 の 制 作 ［6］写真を補正する作業工程 ここでは，これまでに解説した手法を用いて，素材として入手した写 真を，実際に Web サイト制作で使える状態に補正するための作業工程 を解説する。実際の Web サイト制作の現場でも，ほとんどの場合，写 真の補正作業はこのような工程で行われている。 ①元写真 まず素材となる写真を観察する。このときのポイントは，明るすぎな いか，暗すぎないか，コントラストが不足していないか，彩度が足りて いるか，といった点を確認することである。同時に，デザインするうえ で，どの範囲が必要かを考える。この写真の場合，全体的に写りが暗く， また，やや広い範囲が写りすぎている（図2.43）。 ②トリミングを行う 写真内の必要な部分だけを使うためにトリミングを行う。今回は，下 側の空間がやや広く空きすぎてしまっており，右側に隙間が空いてしま っているので，その部分を切り落とすようにトリミングしている（図 2.44）。 ③全体的に明るくする 全体的な写りの暗さを解消するため，トーンカ ーブを使って明るくする。全体を明るくすると写 真の印象が弱くなってしまうことが多いが，この 段階ではそれでかまわない（図2.45）。 ④コントラストを高める トーンカーブを用いて明るい部分をより明るく， 暗い部分をより暗くすることで，コントラストを 高める。これによって，前の段階で弱くなってし まった印象を，オリジナル以上に強いものにして いる（図2.46）。 ⑤彩度を高める ④の状態でもけっして悪くはないが，より鮮やかな写真にするため， 彩度を高める。ただし，彩度を高めすぎると不自然になるので，最小限 に留めておいたほうがよい（図2.47）。 ■図2.47 ■図2.43 ■図2.44 ■図2.45 ■図2.46 7-2chapter
3
1-1 Ｈ Ｔ Ｍ Ｌ と Ｃ Ｓ Ｓ の 基 礎3-1
H T M L と C S S の 基 礎
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 をベースと している。chapter
3
Ｈ Ｔ Ｍ Ｌ と Ｃ Ｓ Ｓ の 基 礎 試すために Web ブラウザで表示する場合は，可能な限り最新のバージ ョンを用いることを推奨する。 ［3］ダウンロードデータ利用時のテキストエディタについて ダウンロードデータおよび本章で解説している HTML，CSS のソー スコードは，文字コードにUTF-8を，改行コード＊4 ＊5にLF（UNIX形式）を 用いている。そのため，ダウンロードしたソースコードを，これらの文 字コードおよび改行コードに未対応のテキストエディタで閲覧，あるい は編集したり，別の文字コードで保存したり＊6すると，文字化けや改行の 崩れが発生する場合がある。3-1-
2
文書の構造と HTMLWebページは基本的に，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］の記 述内容に従って文字 エンコーディングの 指定を書き換え，そ れと合致した文字コ ードで保存すれば問 題はない。
chapter
4
chapter4
2-2 ソ フ ト ウ ェ ア4-2-
2
アプリケーションソフトウェア アプリケーションソフト＊7は，OS などのシステムソフトと連携しなが ら動作し，ユーザが文書制作，画像制作，Web 制作などの目的に応じ て個別に動作させることができる。ワードプロセッサや表計算ソフト， HTML エディタ（Web ページ制作ソフト），ラスタ形式やベクタ形式の 画像の制作・編集などを行うためのソフトウェアは，すべてアプリケー ションソフトである（図4.6）。 アプリケーションソフトは，さまざまな形態で提供されており，コン ピュータやOSなどを購入したそのときから利用できるように同梱され ているバンドルソフト，市販ソフトとして販売されているパッケージソ フト，インターネットのFTPサイトなどからのダウンロードによって得 られるオンラインソフトがある。オンラインソフトには，無償で利用で きるフリーソフトや，有償のシェアウェアがある。オンラインソフトは， 利用者にとっては，すぐに手に入る，比較的安いなどのメリットがある。■図4.5─── Windows のデスクトップの例（Windows®operating system，c 2016 Microsoft Corporation. All rights reserved.）
■図4.6───アプリケーションソフトの例
［a］アプリケーションソフトの例 『Adobe Photoshop』 ［b］Web ページ制作ソフトの例 『Adobe Dreamweaver』
※ マイクロソフト の許諾を得て使用し ています。 ＊ 7 アプリケーシ ョンソフトは，単に アプリとよばれるこ とがある。
chapterchapter
4
2-3 ソ フ ト ウ ェ ア4-2-
3
代表的な CG・Web ページ制作ソフトウェア ここでは，代表的な 2次元CG制作ソフトとWebページ制作ソフトに ついて，簡単に紹介する。 ［1］代表的な 2 次元 CG 制作ソフトウェア代表的なペイント系ソフトに Adobe Photoshop（以降 Photoshop） があり，ドロー系ソフトにAdobe Illustrator（以降Illustrator）がある （図 4.7）。 と も に プ ロ ユ ー ス と し て 最 も 幅 広 く 利 用 さ れ て い る。 Photoshopでベクタ形式，Illustratorでラスタ形式の画像を扱うといっ たことも可能なため，両者の連携により，写真のレタッチ，画像として の文字制作など，2次元CGに関するほとんどの処理を行える。 ペイント系ソフトは，GPLで配布されるGIMPなどのフリーソフトと＊8 しても提供されるほか，プリンタやディジタルカメラに付属されるバン ドルソフトとしても提供されたり，Web ページ制作ソフトやハガキ制 作ソフトにはその機能が装備されたりもする。また，ほとんどのワード プロセッサやプレゼンテーションソフトには，ドロー系ソフトの機能が 装備されている。 ［2］代表的な Web ページ制作ソフトウェア Webページ制作ソフトでは，タグの記述を意識することなく，GUI環 境によって，ほとんどの作業をドラッグ＆ドロップ操作で行いながら Webページを制作できる。 代表的なものには，一般ユーザ向けのホームページ・ビルダー，プロ ユースなAdobe Dreamweaverなどがあり，各種スクリプトやスタイル シート（CSS）などに連携する機能を有している。また，Webページのた めの素材を制作するためのソフトウェアもあり，代表的なものにはアニ メーション制作ソフトであるAodbe Flash Professionalなどがある（図 4.8）。 ＊ 8 GNU プ ロ ジ ェクトが提唱するフ リーソフトウェアの ライセンス。ソフト ウェアとそれを使用 するユーザに，使用， 複製，変更，再頒布 な ど の 自 由 を 与 え る。GNU とは「GNU is Not Unix」の頭文 字で，GPL で配布さ れる UNIX と互換性 のあるソフトウェア の総称。
■図4.7───ドロー系ソフトの例 『Adobe Illustrator』 ■図4.8───アニメーション制作ソフトの例 『Adobe Flash Professional』
