【WD EXPRESS 2014/02/18】2014年3月号発売！ パララックスを究める＆「ぐっとくる」Web的コピーライティング
===【WD EXPRESS 2014/02/18】============================================
Web Designing 2014.02.18
Information EXPRESS http://book.mynavi.jp/wd/
========================================================================
おはようございます、「WD EXPRESS」です。2週続けての週末の全国的な大雪、
みなさんの周りではいかがでしたか？ 連日、スマートフォンを使ってSNSなど
の情報を収集していましたが、ニュースメディアで見聞きするよりもリアルな
情景が小さな画面から届けられるのでした。大きな被害を受けた地域・みなさ
まには、早く元の生活に戻られますようお祈りしています。
さて、本日発売のWeb Designing 3月号では、すっかりおなじみのキーワード
となった「パララックス（視差）効果」と「Webメディアにおけるコピーライ
ティング術」についての特集を掲載しています。一見、方向性の異なるテーマ
のようですが、どちらも目指すは“目的に合わせて表現方法を選ぶ”というこ
と。Webに限ったことではありませんが、単に目新しい、奇抜な表現を採用す
ればいいというフェーズは過ぎ、本質的なコンテンツづくりが求められている
ように感じます。
ちなみに、第2特集「『ぐっとくる』Web的コピーライティング」を読んだあと
は、メールのタイトルもちょっと工夫したくなるかもしれませんよ（笑）。
■ E D I T O R' S R O O M ■
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▼本日発売『Web Designing』2014年3月号の特集記事について、編集担当者の声
をお届けします。
2011年ころに登場したパララックス効果を使ったサイトは、見た目にも派手で
平面に奥行きを感じられることから、多くのサイトで採用されてきました。最
近ではすでに、一般的な表現になったといえます。また、ちょっとした工夫を
行って一味違った趣きを演出したり、ほかの技術と組み合わせて超絶なパララ
ックスサイトに仕上げたりと、新しい表現も生まれています。
そこで、第1特集「パララックスを究める！」ではまず、「パララックスの仕
組み」について、プラグインなどを使わずにjQueryベースで実装した、非常に
シンプルなサンプルを使って解説しています。パララックスサイトを制作した
ことがない人はもちろんのこと、プラグインを使ったサイトを実装したことが
ある人も、ここで改めて「パララックスの基礎」を確認しておくとよいでしょ
う。「究める」ためには、基本が大事です。
そして、6つのパララックスサイトのテンプレートを提供して、その仕組みや
カスタマイズのポイントなどを解説しています。オーソドックスな縦長のパラ
ラックス、一部だけがパララックスになっているもの、横スクロールのパララ
ックスなど、それぞれ特徴のあるテンプレートです。サンプルの動きやソース
コードを見て、パララックスを「究めて」いただければと思います。商用利用
もOKなので、カスタマイズのベースとして使っていただいてもかまいません。
また、どのテンプレートも単なるパララックスではなく、CSS3のエフェクトや
Webフォントのアイコン、フォームとの連携などなど、さまざまなテクニック
が使われています。こちらも非常に参考になると思うので、「究める」ための
教材としていただければと思います。 （西田）
■ C U R R E N T I S S U E ■
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▼『Web Designing』2014年3月号のご案内です。
【特集1】パララックスを究める！
—仕組みの基本解説から商用可能なテンプレートの提供まで—
2011年ころから目にするようになった、パララックス（視差）効果を取り入れ
たWebデザインは、すでに基本的なテクニックともいえる存在です。最近では、
パララックスの表現をベースにした新しい表現や演出なども生まれてきていま
す。本特集では、まずは基本的なサンプルを使ってパララックス表現の基礎を
解説しています。そもそもの「パララックスの基礎」を、ここで再確認してく
ださい。そして、パララックスを広義にとらえ、視差効果のほかにも、スクロ
ール駆動の演出なども含めたパララックスサイトのテンプレートを提供してい
ます。商用利用もOKなので、特集記事を参考に、カスタマイズのベースとして
利用してください。
【Introduction】
Basic＿パララックス再入門
Learn More＿パララックスサイト制作のヒント
【Template】
01＿遠近感とストーリー性を持たせたシンプルなパララックスサイト
02＿シンプルなパララックスのフォトギャラリーサイト
03＿レスポンシブにも対応、CSS3の表現も採り入れたパララックスサイト
04＿fullPage.jsをカスタイズして作るパララックスサイト
05＿パララックスを用いたランディングページ＋アンケート
06＿多機能な「skrollr」を使った横スクロールパララックス
【Column】
世界の「最先端」事例に学ぶパララックスサイトの進化形
【特集2】「ぐっとくる」Web的コピーライティング
—心を惹きつける言葉が生まれるメカニズム—
人に注目してもらう、商品を手に取ってもらう、どこかへ足を運んでもらうた
めに重要な役割を果たす「キャッチコピー」。それは商品やサービスのために
日々生み出されており、Webの世界はもちろん、映画、雑誌、CMなど、さまざ
まな媒体で多様な表現がなされています。アピールすべき対象で考える方向は
変わってはきますが、人の心に「ぐっとくる」キャッチコピーには共通のポイ
ントがあります。本特集では、Webも含めた各分野のプロフェッショナルにキ
ャッチコピーを生み出す技を伝授いただきました。きっとWeb制作でも役に立
つヒントがあるはずです。
Webメディアでのコピーライティングとは？
【映画】映画館に足を運びたくなる宣伝コピーの生み出し方
【雑誌】読者の感情を揺さぶれ！手にとってもらう表紙・中吊りコピー
【書籍】本の内容を知りたくなる「帯」のコピーは人生の縮図
【SNS】TwitterやFacebookでみるみる拡散するコピーの秘訣
【Webニュースサイト】月間4,000万PVサイトの「クリックしたくなる」見出し術
【アプリ】アプリストアでDLしたくなるアプリ名＆紹介文9つの法則
【Special】まだ間に合う！今年はクラウドでラクラク確定申告
—注目のクラウド会計サービスで青色申告にチャレンジ—
今年もフリーランスのWebクリエイターにとって気の重い季節がやってきまし
た。そう、確定申告です。でも、いま注目のクラウド会計サービスを使えば、
面倒な経理作業がぐっと楽になるんです。クラウド会計で、青色申告にレッツ・
トライ！
【Special】Windows Azure Webサイト活用術
—WordPressの移行・運用を通してクラウドサービスを理解する—
クラウドサービスを利用してWebサイトを制作すると聞くと、ハードルが高い
印象を受けるかもしれません。でも最近は、専門的な知識や技術がなくても、
手軽に利用できるようなインターフェイスが用意されているサービスもありま
す。その中でも、マイクロソフトの運営する「Windows Azure」に用意された
「Webサイト」は、Webクリエイターにとって価値の高いクラウドサービスです。
実際にレンタルサーバからWindows AzureへWordPressのサイトを移行・運用す
る話を追いながら、「Webサイト」の活用方法を紹介します。
【one's view】
日本人への新しい宿題
Text：清水幹太（PARTY）
My Disney Experience - Walt Disney World
http://disneyworld.disney.go.com/plan/my-disney-experience/mobile-apps/
憧れの原点
Text：大八木翼（SIX）
The Sound of Taste http://vimeo.com/83514724
旅先のイメージを膨らます“お手伝い”サービス
Text：阿部淳也（1PAC）
My Dream Catcher http://klmdreamcatcher.com/
釘づけにさせる秘訣
Text：轟 啓介（ADC Plus）
Geox - Amphibiox http://amphibiox.geox.com/amphibiox2013/
【Web Designing Lab.】
CSS Lab.＿春までに覚えたいCSSスマートコーディング
jQuery Lab.＿pjax.jsでシームレスなページ遷移を実現する
Flash Lab.＿［HTML5オーサリング編］コンテンツ制作における注意点
【WD Website Front】
Carre Noir、東京ガス：ガスの仮面 SWAN LAKE、KIRIN DREAM RACE、
Menicon ？ Miru、MANUEL RUEDA、NIKE FEEL LONDON、
sweetsatelier TOKYOの畑から、2014 Winter | UQiYO ほか
※今月掲載しているサイトへのリンク集はこちら
http://book.mynavi.jp/wd/wdwebsitefront/
◆この他にも、特別ページや人気連載などが盛りだくさん。
詳細は、こちらをご覧ください！
http://book.mynavi.jp/wd/currentissue/
◆◆ Editor's Recommendation ◆◆
────────────────────────────────────
▼今月号の連載、特別企画について、各編集担当者がこぼれ話を紹介します。
気になった方は、ぜひ本誌をチェックしてください！
【クリエイターのためのWeb解析入門】
テレビCMや屋外広告、雑誌など、他媒体（オフライン）とWeb（オンライン）
とを連携した施策について、解析の観点から取りあげています。オフラインを
きっかけにWebにどれほどユーザーが流入するかというデータを、直接的に取
得できる方法はありません。だからこそ、間接的にデータを取得する方法の精
度を高める必要があります。ここではWeb制作サイドが知っておきたい「流入
増加」「売上貢献」「ブランド認知」という3要素について、解説しています。
【Flash Lab. HTML5オーサリング編】
Flash Pro CC13.1では、HTML5のCanvasをネイティブサポートするなど、HTML5
オーサリングツールとしての機能も充実しました。そこで、今回からしばらく
「HTML5オーサリング編」として、Flash ProでHTML5コンテンツを作成する方
法を取り上げていきます。初回は、HTML5コンテンツを作成する際の注意点に
ついて解説します。
【JavaScript Lab.】
AjaxとHTML5 History APIを組み合わせ、独立したURLを持ちながら、シームレ
スなページ遷移を実現した「Pjax」を取りあげています。まずは仕組みを紹介
した上で、PHPを使った動的なフォトギャラリーサイトをサンプルとして、実
装の方法について解説しています。
【Webフォントデザイン・ケーススタディ】
日本語Webフォントの実際の導入事例をもとに、活用のポイントやアイデアを
学ぶ短期連載の第2回は、Karappo Inc.さんが作成した「Dramatic Yotsukaido」。
千葉県四街道市の日常から溢れ出す色とりどりの魅力を発信する本サイトでは、
オリジナルのJavaScriptでカーニングを施しています。文章を美しく見せる文
字詰めについて考えてみましょう。
【来来！上海的創作現場】
今回は上海で働くクリエイター、阿部達也さんに密着！ 住環境から恋愛事情
まで、詳しくお話を聞きました。ニュースじゃわからない上海の本当のところ、
ぜひご一読ください。
【モバイルサービス最前線】
今回は、毎回の食事を写真で記録するライフログアプリ「FoodLog」を取材し
ました。単なる食事写真のアーカイブとするのではなく、そのカロリーを推定
して「見える化」できるのです。カロリー推定の機能は、大学の研究室との産
学連携で実現しているといいます。
【ハギハラ総研】
世界に比べて、日本はインターネットが使いやすいのでしょうか？
65カ国を対象に、インターネットの使いやすさを分野別に比較した調査を発表
した、ボストンコンサルティンググループのデータを取り上げています。日本
の順位を確認すると‥‥少なくともこのデータでは、けっして使いやすいとは
言えないようです。他国の状況を含めて、確認してみてください。
========================================================================
サイト構築のためのトータルデザイン誌「Web Designing」
1,470円／毎月18日発売
バックナンバー揃ってます -> http://book.mynavi.jp/wd/backnumber/
配信中止、アドレス変更 http://book.mynavi.jp/wd/mm/
メールマガジンへのご意見・お問い合わせ wd_exp@mynavi.jp
配信設定に関するお問い合わせ mailpub@mynavi.jp
Copyright(C) 株式会社マイナビ 2014 禁無断転載
========================================================================
