再利用できるプレゼン用WEBページを作ろう 第１回 

# きっかけ

WEB エンジニアをしていて、こんな経験したことありませんか？
1. クライアントに対し、ワイヤーフレームでページの表示内容、構造を**共有、承認**される
1. 承認された内容に基づいてデザインされたページの画像を作成、提示し、**承認**される
1. 承認された内容・デザインに基づき実際に動作するページを作成、提示
1. 内容・構造・デザインすべて了承済みだったはずなのに、**いろいろ覆ってしまう**
1. 完成したはずのものに手を入れて、なんとかクライアントの要望を満たして再提示
1. **また別の要望が出てくる**、の繰り返し

**なぜこうなってしまうのか**、の原因はいろいろあります。5個や10個は考えつきそうですが、その中でもかなり大きい要因は、 1. 2. の過程で「**クライアント（非エンジニア）は、実際に動くページを見ないと、提示されている内容を正しく評価できない**」ということだと思うのです。
これは「いい・悪い」の話ではなく、**単に現実です**。

それに気づいてからは、可能な限り納品物に近い見た目・動作の HTML を組み、WEB ブラウザで提示して確認をとるようにしています。
が、これにも問題があります。**「納品物に近いモック」を作るためには、相応の工数が必要**です。
そしてこのモックは、基本的には納品物の一部にはなりえません。最終的には捨てられてしまうものです。
**そこに工数はかけたくない**。

で、やっとこのシリーズのタイトル「再利用できるプレゼン用モックHTML」につながります。
１年くらいかけて、ある程度使いまわせるものになってきましたが、必要に応じてちょっとずつ機能追加してきたので仕様書のようなものはなく、かつそこそこの規模になってきたので、ここらで整理しておこうかな、というのが発端です。

# 気を付けたこと

作り出すにあたって、漠然と頭にあったのは次のようなことです。

1. **WEB サーバ等の環境がないデザイナーさんが作業できる**
ブラウザから file:/// でアクセスし、動作する。これができないと、作業分担ができません。必須です。
1. **HTML はレイアウトを想定せず、文書として正しいと思う並び順で記述されている**
同一 HTML を複数のデザインで提示する必要があるため、特定のレイアウトを前提に HTML を組むと後悔します。
1. **ページで読み込む CSS を簡単に切り替えられる**
これができると、プレゼン中にレイアウト・色味を変えてクライアント判断を仰げます。
1. **CSS はページ上の大きさ・配置に関するものと、色味に関するものを完全に分離する**
上と同様、複数のデザインを提示するためには、それぞれが独立していて、掛け合わせでパターン変更できるのがベストです。
1. **複数ページで共通する文言等は、 HTML 内には記述せず、JavaScript で追記する**
WEB サーバ環境があれば簡単なんですが、複数ページ共通の部分に修正指示が入ると結構面倒です。
一か所の変更で済ませれば対応漏れも発生しません。

# サンプル画面

今現在用意できているページレイアウトは４種、カラーバリエーションは２種です。
また、「サイト名 > > > 」という謎の記述が各ページにありますが、パンくず用スクリプトが正しく動作していないのが原因ですorz。
各パターンは、ページ内ダブルクリックで表示されるメニューで切り替え可能です。

## 上左右パターン
#### [上] ヘッダ＋グローバルメニュー　[左] サブメニュー　[右] コンテンツ
###### 基本状態
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553328/6262c311-7356-f09b-314d-005fecc7d6d6.png" alt="3plo.png">

###### 左メニューを閉じた状態
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553328/c99b742a-22c9-c2c2-c416-6d3afabdf7c3.png" alt="3plc.png">

###### オレンジ版
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553328/703d7ee5-c21a-5033-3fdb-8a9ae788f32b.png" alt="3ploo.png">

## 上下パターン１
#### [上] ヘッダ＋グローバルメニュー＋サブメニュー固定　[下] コンテンツ
###### サブメニューは常に開いています
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553328/99fdbb7e-f05d-f23f-7541-be3f318f7bf6.png" alt="2pso.png">

## 上下パターン２
#### [上] ヘッダ＋グローバルメニュー＋サブメニュー開閉　[下] コンテンツ　
###### 基本状態
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553328/f319d885-f21f-2539-ab0c-239792b64125.png" alt="2psc.png">

###### サブメニューを展開した状態
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553328/3ae6e8f0-22b5-d5d4-3dfa-398a58092ef9.png" alt="2psco.png">

## 左右パターン
#### [左] ヘッダ＋グローバルメニュー＋サブメニュー開閉　[右] コンテンツ　
###### 基本状態
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553328/cff0ff78-9c7c-a56b-0f22-7a5f611ba869.png" alt="2ph.png">

###### サブメニューを展開した状態
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1553328/2cfa4099-43a3-0693-d984-4b795b085b90.png" alt="2pho.png">

# シリーズ構成

違う結果になるかもしれませんが、本題の JavaScript に入る前に、HTML としてどういう構造になっているのかが重要なので、まずはそこから見ていきます。

1. 全体構成 
1. HTML 概要 
1. CSS 概要
1. JavaScript 概要
1. JavaScript ページ設定
1. 以降 JavaScript 各パーツについて

みたいな感じになるのかな、と思っています。  

[再利用できるプレゼン用WEBページを作ろう 第１回](https://qiita.com/shindomasayuki/items/7ef6abfc37810e19dc75)
[再利用できるプレゼン用WEBページを作ろう 第２回](https://qiita.com/shindomasayuki/items/2708ff55d807e07cf2a1)
[再利用できるプレゼン用WEBページを作ろう 第３回](https://qiita.com/shindomasayuki/items/8713036b68658c19cd4e)