The Future of Design Digital Publishing Team


2014年5月15日のウェブキャスト復習ページ

課題内容：レスポンシブデザインでHTML5マガジンのページを作成する［初心者向け］

再生時間：1分41秒


高画質ビデオになっています。低画質の場合は再生バーの「HD」をクリックしてください


素材データ：

ウェブキャストで使用したAdobe Edge Reflow CC のプロジェクトファイル（レスポンシブデザインのマガジンページ）です。
当日の大まかな流れは、Twitterでも流しています。Edge Reflowが生成したHTMLのURLも記載していますので、参考にしてください。

  • Edge Reflow CC のプロジェクトファイル［Layout_s04.zip］
    ページの仮組み
  • Edge Reflow CC のプロジェクトファイル［Layout_s24.zip］
    マガジンページのプロトタイプ

Edge Reflow の参考リスト：

























カリキュラムの内容


2014年5月15日の記録：

ウェブマガジンとウェブアプリ版マガジン、どちらにも対応したレスポンシブデザインのプロトタイプを作成します。
昨年は、コーディング（Bootstrap 3）による作業だったので、難易度高めでしたが、今回は、Adobe Edge Reflow CCを使用します。初心者向けの内容です。2時間程度で作成することができると思います。

最初にページの設計をします。ここでは、Adobe Illustratorを使っていますが、作図ツールであれば何でもかまいません。ページ設計が完了したら、Edge Reflowで仮組みをしていきます。ピクセル値で指定する固定レイアウトになります。
レイアウトが出来たら、テキストや図版（写真）を配置し、見出しには、Webフォントを適用します。すべての構成要素が配置できたら、ブレイクポイントを決めながら、値を「%」に変更、要素の幅を調整していきます。

Adobe Edge Animateでは、レスポンシブ対応のアニメーションや動的なインフォグラフィックなどを作成できますので、Edge Reflowが生成したHTMLに組み込み、活用することが可能です。

それでは、高度なマガジンスタイルのプロトタイプを作成していきましょう。

Adobe Edge Reflow CCは、現在プレビュー版のため、誰でも無償で使用することができます。

ページの設計


仮組み


レイアウト（固定）


構成要素の配置


レイアウト（レスポンシブデザイン）


ページのデザイン調整


最後にスマートフォン、タブレットで実機検証


本日（金曜日）、昨日のウェブキャストの復習を兼ねて、デモします（Twitterで流します／夕方頃から）



ウェブ表現の可能性を追求する



その他のプロダクト

デザインの未来 デジタルパブリッシュチームは、「オープンエデュケーション」の基盤をつくるために、制作するコンテンツに「無料公開」のための販売期間を設定しています。具体的には「6ヵ月間」で販売終了し、YouTubeやVimeoで「一般公開」、年内には20時間分のコンテンツを蓄積できるように進めています。これは、継続的にある程度のクオリティを保ったコンテンツを提供していくために、2011年頃から試行錯誤してきた結果です。

この仕組みを確立していくには、必要とされるコンテンツをつくり、利益を出せるビジネスモデルにしていく必要がありますので、さまざまな方から「意見」を聞くための場として訪問ワークショップなどもすでに進めています。

現在、「6時間で学ぶ Adobe Muse CC 完全習得［基礎編］」と「4時間で学ぶ Adobe Edge Animate CC 基礎編」販売中です。「3時間で学ぶ Kindleストアで販売する電子書籍の作り方」は、オープンエデュケーションサイト「電子出版の学校」で公開されていますので、ご興味のある方はご覧になってください。

10時間で学ぶ Adobe Muse CC／Adobe Edge Animate CC

トップページに戻る