モバイルコンテンツの制作の流れをLINE MOOKを例にして考える

LINE MOOKとは

雑誌のような記事を読む媒体はウェブサイトやアプリなど多く出回っています。
その中でもLINEの公式ページを利用してスマホで手軽に読ませるメディアとしてLINE MOOKがあります。
モバイルコンテンツの構築を考えるにあたって、このLINE MOOKをメディアとして捉えて考えてみます。

LINE MOOKはLINEアプリ内、ニュースのメニューボタン > ムック一覧から登録できます。

出版社と組んで発行しているMOOKもあれば、オリジナルで発行しているMOOKもあり、それぞれにターゲット層が異なることがわかります。

モバイルコンテンツとしてのデザインの特徴

紙面上で構成する雑誌と違い、限られた空間の中でのレイアウトと、縦スクロールという動きを基本にしているのがモバイルコンテンツの大きな特徴です。

ファーストビュー（ディスプレイを開いた時に見える範囲）に全て収まらないことは、NGではなく、むしろコンテンツが下に続くことを想起させるので、デメリットばかりではありません。

上記のデザインをサンプルにどう制作されていくか、検討してみましょう。

使用する素材はこちらを参考にしてください。

テキスト素材

雑誌タイトルは「既存のタイトル MOOK」とする
おうち時間においしいおやつをおとりよせ（カナ、漢字表記は自由）
おやつのプロが本気で大絶賛！
噂のチーズケーキここが違う
コピーのアレンジは自由

全体像を検討する

メインイメージは写真を使うのか、イラストで構成するのか、またはデザイン要素のみで構成するのか、検討します。
ターゲットユーザーに響く表現とはどのようなものかを考えてみましょう。

過去のバックナンバーや傾向の似たデザインを参考にするとどのようなテクニックを使っているのかがわかります。
ただ、参考にするべきなのはデザインの傾向やテクニックであって、デザインそのものを真似することにならないように注意してください。（もちろん、デザイン技術の習得を目的としたデザインのトレース作業自体は否定しません。）

素材選定

使用する素材を検討します。
人物モデル、商品写真、風景写真、などの写真なのか、イラストなのか、自由に考えてください。
ここでは自分で撮影できる/できない、イラストが描ける/描けないを考える必要はありません。実現が可能かどうかだけで考えず、まずはアイデアを出してみましょう。
もちろん、ターゲットユーザーとなる読者に伝わるものかどうかを忘れずに。

モデル撮影
商品写真を使用する
イラストで構成する

ここではレイアウトラフを完成させるために下記のような手法を取ります

ロイヤリティフリー素材（写真・イラスト）などを仮素材として使用
身の回りの素材を使って、イメージに近いダミー撮影をする
動画の場合はダミー撮影またはイメージショットとしてのスチール画像

ラフレイアウト

おおまかな配置を考えるレイアウトのラフスケッチを描画します。
ノートに手描き、もしくはAdobe Compなどのアプリを使うと便利です。
テキストと写真やイラストなど図版の位置関係、バランスをとることが目的なので、まずは素材は載せなくても構いません。

縦スクロールの視線誘導（上から下の流れ）を意識して配置しましょう。区切り線や大きすぎる余白などの空間が空いてしまうと、そこでコンテンツが終了している、と誤認されページ離脱することにも繋がりかねません。

ここでは細かな部分までこだわってしまうと時間が足りなくなってしまいますので、図版の位置を示す長方形や円形などまでにとどめておきましょう。

素材の配置

仮素材をレイアウトラフの中に組み込んでいきます。

ラフスケッチをAdobe Compで行い、デスクトップで仕上げ作業をする場合は、Adobe Compから書き出し > Adobe Illustratorに送信することができます。（要Adobe ID）

カットを切り抜きで使用するため写真の背景が不要な場合などはPhotoshopやPhotoshop Mixなどで処理しておきます。

使用する色の組み合わせ、書体、レイアウトなどはターゲットユーザー層への訴求を考慮しながら、構築してください。