HTML5パブリッシングマガジン開発日誌 Vol.25／電子出版と販促（プロモーションページ作成）のためのワークフロー

2014年7月15日：電子出版と販促（プロモーションページ作成）のためのワークフロー

HTML5 Publishing Magazine Development Diary 25 :
毎回、断片的な情報になってしまいますが、試行錯誤しながら進めていますので（すぐ内容が変わってしまうため）、ご了承ください…。

今日は、ワークフローについて。
プロモーションページ作成の期間限定サービスを開始しましたが、破格の「2万円」が可能な理由を記してみたいと思います。

サービスの内容：

あなたの作品・商品の魅力を伝える
プロモーションのための専用ページをつくります
是非、ご利用ください
http://design-zero.tv/college/production/

ビジュアルデザイン主体のプロモーションページ
シングルページ仕様
スマートフォンにも対応
HiDPI対応（Retinaディスプレイ対応）
2万円で提供（期間限定）

実際は、2万円では仕事になりませんので、あくまでトライアル期間限定のイベントという形になりますが、それでも無理なく進めるには、効率化を実現するための仕組みが必要です。

9月以降、発行する電子出版物すべてを対象に、プロモーションページやランディングページ、メールマガジンなどのツールを適用していく予定ですが、マーケティング費用は当面確保できませんので、どういう方法がよいのか模索していました。

まず、現在のワークフローですが、下図のようになっています。
とても、シンプルですが、アプリケーション間のつなぎ（データの受け渡し）がとても重要でした。可能な限り、素材を共有できるように、データの経路を明確化しました。

例えば、Adobe Museで画像を配置する場合、PSDファイルを開き、対象となるレイヤーの画像を選択する等、アセット管理機能を積極的に活用しています。
※素材データのリンク構造が複雑になるため、データのポータビリティはやや低下します。

頻繁にアップデートを繰り返してきたMuse

Adobe Museは、ご存知のとおり、ウェブページを作成するツールですが、Adobeのウェブ製品カテゴリにはありません。InDesignやIllustratorなどのデザイン製品カテゴリのツールという位置づけです。
つまり、対象はウェブデザイナーではなく、DTPデザイナーやグラフィックデザイナーということになります。

過去にも、「HTMLやCSSの知識はいらない」コーディングを必要としないウェブツールがありましたが、生成されるHTMLの品質に問題があり、Museに対しても同様の危惧を持っていました。

ただ、Museの場合は、必要最小限の製品としてリリースし、ユーザーのフィードバックを得ながら、かなり頻繁にアップデートを繰り返してきました。もう、バージョン7を超えています。

生成されるコードも何度か改善され、許容範囲といえるレベルにきています（もちろん、自動ツールですから管理用のタグが付き、どうしても煩雑なコードになってしまいます）。

階層構造を持つウェブサイトの構築には厳しいと思いますが、シングルページの販促ツール（ランディングページなど）には、Museの機能が最大限に活かされます。
視差効果（パララックス）などは、Museの代表的な機能だといえます。
※個人的には、ユーザビリティを低下させる可能性のある表現は控えたいと思っていますが、ワンページでインパクトを演出する場合などは有効です。

HTMLモジュール（ライブラリ）の活用

ワークフローの効率化で、注目すべき機能は「ライブラリ」です。
現在、汎用性の高いページの構成要素は、ライブラリとして登録し、ファイルを書き出し、蓄積しています。レイアウトパターンやカラースキームなども含まれます。

シングルページの場合、長いページをセクションで切っていくように、全体を構成し、各セクションにブロックを配置していく流れになりますが、ライブラリをベースにして組み立てることで、作業が飛躍的に効率化されます。

ランディングページなどは、フリーレイアウトに近いものが多いのですが、一からデザインしなくても、デザインパターンの組み合わせで十分、独創的な見栄えを演出できます。
1枚絵になっているような、ほぼビジュアルデザインで占められるシングルページなどは無理ですが、ライブラリの構築は決して無駄にはならないと思います。

レスポンシブ・ウェブデザインとMuse

Museは、デスクトップ、スマートデバイス（スマートフォンとタブレット）それぞれのページをデザインして、自動的に表示を切り替える仕組みになっており、1つのHTMLでさまざまな閲覧環境に適応可能なレスポンシブ・ウェブデザインは採用できません。

Adobeは、直感的にレスポンシブ・ウェブデザインのページを作成できる「Adobe Edge Reflow CC」を提供していますが、まだプレビュー版ということで、様子見している人が多いのではないでしょうか。

過去、何度かワークショップをやっていますが、Museと同様にコーディング必要なしといっても、難易度は高いです。ページの構造を把握した上で、レイアウトを再構築していく必要がありますので、どう考えても、HTMLとCSSの概念の理解は必要です。
たんに、複数の見栄えをつくっていく作業ではないので、Museのようにはいかない感じです。

Edge Reflow CCで、ウェブマガジンのトップページを作成したときの記録です。