Web Designing Library 001

インスピレーションを刺激する！シングルページ、背景動画、マテリアルデザイン‥‥。「WD Archive」2015年上半期。電 子 版 特 別 編 集 シ リ ー ズ

Webデザインアーカイブス 2015上半期今のトレンドを俯瞰する！『Web Designing』厳選のベストサイト

Web Designing編集部 編

Web SiteDesign Archives 2015 First half

本誌で用いるクレジットの略称一覧Pl：プランナー／P：プロデューサー／Ｄ：ディレクター／AD：アートディレクター／CD：クリエイティブディレクター／TD：テクニカルディレクター／De：デザイナー／PM：プロジェクトマネージャー／HTML：HTMLコーダー／Fl：Flash

デベロッパー／PG：プログラマー／ME：マークアップエンジニア／So：サウンド・音響制作／Vi：映像・ビデオ制作／Ph：撮影／DP：撮影監督／ Il：イラストレーター／E：エディター／W：ライター／CW：コピーライター／EP：エグゼクティブプロデューサー／AE：営業／AP：アカウントプランナー

note

Web Designing Library 003

2015年1月号OK Go｜ I Won't Let You Down

HONDA The Other side

Francfranc 100 GIFTS Christmas Story

JOVA Construction

LUCKIIS - Photo Production Company. Est.2014

Philip K. Dick

Christmas Journey 2014

SOS Mobiles

巨人モンタージュナルト ファイナルカウントダウン！REVALCY

「ネスカフェ ドルチェ グスト」ブランドサイトLionel Durimel － Digital Designer

10 SOUNDS OF LIFE SCIENCE

2015年2月号FIVE MINUTES － Interactive Short

目に見えないものをデザインした空気清浄機。Honda. Beautiful Engines.

#クリスマスボックスPRIUSαNTA プリウサンタ － すごいプレゼント交換会Friday Cover Shoot

郊外住宅地の見えない空き家御嶽山「噴火の証言」EXIT FILM

THE STABLES ステーブルズAKIYOSHI ISHIGAMI

Giacomorelli

MARATHONERS' messenger

JAL CLUB EST

KAYOKOYUKI×Craft×DONGURI｜Spotlight

BUZZHOOK Inc.

Index 006

014

004 Web Designing Library

2015年3月号homunculus Inc.

米津玄師 Official Site「REISSUE RECORDS」SUPER-LOOPER

株式会社ワーズバーグ コーポレートサイトDOOR Shibuya

dot by dot inc.

SHISEIDO「キレイロ」ワールドトリガー キャッチコピー大賞花椿ウェブサイト北陸のおでかけWEBマガジン マイ・フェイバリット北陸ボタニカル飲料 爽健美茶 ブランドサイトBunkai-Kei records Hizmi “dendel voile” Release site

NHKスペシャル「NEXT WORLD 私たちの未来」cheero Power Plus 3 13400mAh

江戸東京博物館 特設サイトBeoPlay H2

家谷植景研究所まるごと無料試し読み│『海月姫』『東京タラレバ娘』新春スペシャルサイトHonda Design 「ROAD TO VEZEL」People ∞ Windows みんなが主役

2015年4月号Cubi

Joha

DRAWING AND MANUAL Official HP

Trippeo

TOYOTA NEXT ONE

マジョリカ　マジョルカ　ブランドサイトスペシャルコンテンツ「マジカルドレッサー」Airbnbにつながる世界【S5-Style】Hello world.

WEARABLE INFOBAR PATTERN GENERATOR

LA-VIE PHOTOGRAPHY HAWAII [キャンペーンサイト ]

Rally Interactive

Art Project OE20

劇団ままごと『わが星』オフィシャル・サイト株式会社ダブルカンパニーみんなでお祝い！北陸新幹線PYRAMIDFILM QUADRA OFFICIAL SITE

Index 024

036

Web Designing Library 005

2015年5月号キリン メッツ スペシャルサイトOleg Chulakov Studio

自家製粉石臼挽きうどん 青空 blue

Karrimor Japan｜カリマー ジャパン新生活に。NHK

水道橋重工 | Suidobashi Heavy Industry.

NM4 WORLD NOTION IN TOKYO

しゃべるコミックスアプリ「殺せんせーの抜き打ちテスト」株式会社ホットファクトリーこれがホントの、顔採用good loops magazine（gloops 採用マガジン）NURO光 for マンション　みんなの応募状況Pace Sync

BIRDMAN

the virtual BMW at the Geneva motorshow

COCORO旅ロマンシング佐賀2

ブリヂストンの電動アシスト自転車LEXUS AMAZING VISION

2015年6月号MUJI To Relax

Cinderella Past Midnight

株式会社 闇Good Morning Sunshine

星のや軽井沢鎌倉今昔写真カゴメ　つくろう！My野菜生活　スムージーレシピサイトUNIBA INC.

463 photographs by Chris Niedenthal

『スーパーマリオブラザーズ30周年』公式サイト武蔵野美術大学　造形ファイルSeiko Prospex "The Evolution of Diver's Watches"

絢香 | Album「レインボーロード」Special Site

Blossomtype

個紋株式会社金太郎飴本店　オリジナル飴 特設サイトAIAIAI TMA-2 MODULAR

Index 046

056

・本書は、月刊『Web Designing』の連載「Monthly Archive」（2015年1月号～2015年6月号）を収録しております。・記載されている内容は連載当時のものであり、紹介しているURLなどは現在ではアクセスできない可能性があります。・『Web Designing』の公式サイトには、本書に掲載されたサイトのリンク集があります。あわせてご覧ください。http://book.mynavi.jp/wd/wdlib/archives 2015_1sthalf.html

006 Web Designing Library

WD Monthly Archive [2015.01]

注 目 の 新 着 サ イ ト ・

デ ジ タ ル コ ン テ ン ツWD Monthly ArchiveEditor's Selection as Leading Digital Contents

01～03 Webサイトトップページ　MVのほか、メンバーのインタビューやメイキングが収められているムービー、今回使用した「UNI-CUB」の紹介ページもメニューに用意されている04～11 MV　メンバーと女子高生が絶妙なタイミングでダンスパフォーマンスを繰りひろげる様子をドローンで撮影した (しかもワンカット !)壮大なスケールが話題になったMV

□クライアント：OK Go　□代理店：（株）もり、（株）電通　□制作：カイブツ、BIRDMAN、切札CD：原野守弘／【Web】D、P：木谷友亮／D：築地ROY良／De：石井正信／キャラクターアニメーター：荒川潤一／Backend Engineer：元吉恒晴／Frontend Engineer：有方伸晃、中島賢志郎／【MV】P：山森充／AD：西田淳／D：関和亮、ダミアン・クラッシュ／振り付け：振付稼業air:man

OK Go｜ I Won't Let You Downhttp://iwontletyoudown.com/

アイデアあふれるMVで高い評価を得ているアメリカのロックバンド「OK Go」が日

本人クリエイターとともに作りあげた新曲「I Won't Let You Down」のWebサイト。

MVで話題になった、メンバーが約2,400人の女子高生と踊る絶妙なダンスパフォー

マンスのフォーメーションや動きをシミュレーションすることができるコンテンツ

が公開されている。Hondaが開発した重心を変えることで動きや方向を変えられる

「UNI-CUB」をMVで採用し、Webサイトでも紹介。企業とコラボレーションするこ

とでも有名なOK Goだが、広告のニュアンスを一切感じさせないプロモーションの

形にも注目したい。

クリエイティブディレクター原野守弘（Mori Inc.）

comment

見所は‥‥「すべて」です！ ワンカットという熾烈なしばりの中、地上ゼロメートルから700

メートルまで自在に動くドローンカメラ、重心移動だけで前後左右に動く不思議な乗り物「UNI-CUB」、一度もNGを出さなかった女子のダンス軍団などなど、すべてが惑星直列のごとくそろったことで、OK Go史上最速バイラルというホームランになりました。個人的には、最後の無音部分が自慢です。

01 03

02

04 05 06 07

08 09 10 11

（2015年1月号掲載）

「Web

クリエイティブ・マーケティング」

2017

3.1

1 2仕事できちんとWebを扱えるようになりたい人のための新・定番書そもそもWebサイトって何? というあなたでも、インターネットの基礎からHTMLとCSSの基本や使いこなしを学び、総まとめとしてシンプルなコーポレートサイトを制作できます。環境構築もていねいに説明しました。Web関連の企業に内定が決まった学生や、Web関係の部署に異動になった社会人など、必要に迫られて一通りきちんと学びたい人のための新・定番書です。ダウンロードできるサンプルデータで実際に作りながら学べます。

HTML5&CSS3マスターブック

マイナビ出版デジカル/HONTENTS（著） 248 ページ価格：2,138 円（PDF）

HTML/CSS

ここで学ぶことは何なのか、どのような用途があるのかをイメージしよう

デザイン性・機能性に優れたWebサイトが作れるようになる!人気のWordPress入門書 第2版です。前回の書籍と同様、セミナー経験の豊富な著者陣が、実践的なノウハウを織り交ぜつつ丁寧に解説しています。WordPressの最新バージョンに対応した手順をすべて画面付きで解説しているので、Webサイトをはじめて作る人でも安心して読み進められます。HTML、CSS、PHPなどの知識がなくても、パソコン・スマートフォン両方の表示に対応した本格的なWebサイトを作れることでしょう。

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第 2 版 WordPress 4.x 対応

インプレス石川栄和・大串肇・星野邦敏（著者）256 ページ価格：1,663 円（PDF）

CMS

操作の手順は、大きな画面で

ひとつひとつのステップを

丁寧に解説!

実際のセミナーや講義を元にしたやりとりによって、理解を深められる

コードや実際のWebページを

参照しながら学習できる!

4コママンガを交えてWebサイト制作を解説!Web

デザイン

UIデザインの原則と心理学上の根拠がわかる

Webデザイン

問題は設計にあり!?UX視点のデザインプロセス

Webデザイン

写真で顧客の心をつかむ!Instagramの宣伝ノウハウ

ソーシャルメディア

絶対に挫折しないコンテンツマーケティングWeb

マーケティング

WordPress4で迷わずWebサイトができあがる!Web

デザイン

わかばちゃんと学ぶWebサイト制作の基本

4コママンガを交えて、ユーモアたっぷりにWebサイト製作の基本を初心者向けにわかりやすく解説しています。企画の段階から、HTMLやCSSの基本、JavaScriptやPHPの概要、Webサイトの公開・運営に触れています。

シーアンドアール研究所湊川あい（著者）

価格：2,138 円（PDF・EPUB）

UIデザインの心理学わかりやすさ・使いやすさの法則

UIデザインコンサルタントによるデザイン原則の科学。「物事を認識するときにどのようなバイアスがかかるか」「物事をどのように見分けてとらえるか」など、UIデザイン原則と心理学上の根拠がわかります。

インプレスJeffJohnson（著者）、武舎広幸・武舎るみ（翻訳）

288 ページ　価格：3,456 円（PDF）

デザイニングWebアクセシビリティ

この書籍に書かれている内容は、良質なユーザー体験を生むためのノウハウです。普通に戦略・要件策定→情報設計→ビジュアルデザイン→実装・コーディングを行えば、達成基準を満たせることが理解できるでしょう。

ボーンデジタル太田良典・伊原力也（著者）

296 ページ　価格：2,700 円（PDF・EPUB）

できる100 の新法則 Instagramマーケティング

1枚の写真で顧客の心を引き寄せる手法を現役ソーシャルメディアマーケターが解説。企業がInstagramでマーケティング、ブランディングを行い、成果を出すために必要なすべてのノウハウを収録しています。

インプレス　株式会社オプト・山田智恵・小川由衣・石井リナ（著者）、できるシリーズ編集部（編集）　240 ページ　価格：1,944 円（PDF）

いちばんやさしいコンテンツマーケティングの教本

人気講師が教える宣伝せずに売れる仕組み作り業界の第一人者が「絶対に挫折しない」をコンセプトにコンテンツマーケティングを詳しく解説。商品の売り込みに限界を感じている人、マーケティングの概念だけでなく実践に本気で取り組みたい人などにオススメです。

インプレス　宗像淳・亀山將（著者）200 ページ　価格：1,814 円（PDF）

はじめの一歩！ サクサクわかるWordPress 4.x 対応WordPress4.x（2016年10月最新版）を使って、ホームページの作り方をていねいに教える本。これまでWordPressを使ったことがない方、HTMLやCSSの知識がない方にとっても分かりやすいよう、図解中心で解説します。

マイナビ出版　茂木葉子・天野裕子・遠藤岳史（著者）256 ページ　価格：1,814 円（PDF）

2017

3.1Webクリエイティブ・マーケティング

& &

&&

3 4 5

6 7 8

マンガと解説のセットでWebマーケティングを理解

Webマーケティング

種類の多いWeb広告を上手に運用するための本

ビジネス視点からUXの価値を探る!

Webマーケティング

すぐに役立つ実践的なグロースハックの手法!Web

マーケティング

Webマーケティングをビジネスに取り入れよう!Web

マーケティング

タグを効率よく管理してWebマーケの労力を最小化

Webマーケティング

マンガでわかるWebマーケティング 改訂版 Webマーケッター瞳の挑戦!

マンガとストーリーに沿った丁寧な説明で、Webマーケティングの本質をわかりやすく解説しています。この改訂版では最新のデジタルマーケティングに対応し、現場で役立つノウハウをさらに盛り込みました。

インプレス　村上佳代（著者）、ソウ（イラスト）、星井博文（原作者・原案）　296 ページ　価格：1,944 円（PDF）

基礎から学ぶWeb広告の成功法則

本書はWeb広告の上手な使い方を解説する本です。特にユーザーをどのようにして動かすのか、という視点を持つことで、Web広告の種類の多さや、新しい技術に惑わされず、長く使える広告運用のスキルが身に着きます。

マイナビ出版　本間和城（著者）232ページ　価格：2,462 円（PDF）

UX × Biz Book顧客志向のビジネス・アプローチとしてのUXデザイン

ビジネスの場面で「顧客とのエンゲージメント」の重要性が増している中、UXアプローチは不可欠です。本書はさまざまな現場で活躍する執筆陣が、複合的な視点で UXおよびUXDのビジネス価値を分かりやすく解説します。

マイナビ出版　明海 司・井登 友一・奥谷 孝司・川田 学・坂本 貴史・橘 守・田平 博嗣・塚本 洋・萩谷 衞厚・原 裕（著者）

240 ページ　価格：3,024 円（PDF）

いちばんやさしいグロースハックの教本人気講師が教える

急成長マーケティング戦略注目の成長戦略「グロースハック」の実践が学べます。業界の第一人者が自社製品を育てた経験をもとに、すぐに役立つ手法やフレームワークを解説。製品やサービスを最短で収益化して成長に導くノウハウが満載です。

インプレス　金山裕樹・梶谷健人（著者）176 ページ　価格：1,728 円（EPUB）

いまさら聞けないWebマーケティング

初歩から学べる集客のセオリー近ごろはさまざまなマーケティング手法が登場しています。本書はそうしたトレンドを押さえつつ「マーケティング戦略を基本から学びたい」「Webマーケティングを実践に活かしたい」と考えている方に向けた一冊です。

マイナビ出版　佐藤和明（著者）272ページ　価格：2,138 円（PDF）

デジタルマーケターとWeb担当者のためのGoogle＆Yahoo!タグマネージャー

の教科書「Googleタグマネージャー」と「Yahoo!タグマネージャー」について、設定や運用の実際、さらに効果測定や運用のTipsまでを詳しく解説。本書を読んでタグによる効果を最大化し、そのための労力を最小化しましょう。

マイナビ出版　海老澤澄夫（著者）、ウェブ解析士協会（監修）304 ページ　価格：2,894 円（PDF）

2017

3.1Webクリエイティブ・マーケティング

& &

&&

9 10 11

12 13 14

Webマーケティング