話題のWebサイトの制作現場に伺って、そのサイトのできるまでをお伝えする連載「Inside Story」。
6月号で取材したのは、宮崎あおいさん主演の映画『ペタル ダンス』（現在公開中）の公式サイト。なんと、監督の石川寛さんにもお話を伺うことができました。

映画『ペタル ダンス』は、6年ぶりに会う大学時代の友人を訪ねるために北の果てにある風の町へ向かう女の子たちのロードムービー。派手な出来事が起きるわけではないものの、日常感のある会話や空、雲、風といった風景が印象に残る美しい映画です。Webサイトも派手な演出は行わず、そうした映画の雰囲気が実に巧みに表現されています。どのようにして作品のムードを醸し出すことに成功したのでしょうか。監督の石川寛氏、映画のプロデュースを手がけた石塚正悟氏、宣伝を手がけた大島美樹氏、Web制作を手がけた佐藤正人氏、阿部真宏氏、長尾栄伸氏に話をうかがいました。

ペタル ダンス
http://www.petaldance.jp/

詳細はWeb Designingの公式Webサイトをご覧ください。

Facebookページも更新中！
https://www.facebook.com/wdmag

【特集2】図画工作でデザインしよう
―アナログな手法を取り入れ、ロゴ、ビジュアル、テクスチャを作る―

デザインといえば、いまやPCでの作業が当たり前になっています。しかし、イチからジュウまですべてPCで行わずに、アナログな素材や手段を取り入れれば、コンピュータでは作り得ないナチュラルな質感や自由度の高い表現を生み出すことができます。Webブラウザ越しに見る場合は特に、そうしたアナログな要素がポイントとなり、サイトをグッと引き立ててくれるでしょう。本特集では、デザインの現場でそのような手法を取り入れているデザイナー陣による図画工作的なデザインアイデアを紹介していきます。役に立つのはもちろんのこと、あなたのデザイナー心をワクワクさせること請け合いです。

＿文字
01：既存のフォントと手書きの筆文字を合成
02：トレーシングペーパーを使って空気感のある文字を作る
03：板に打ち込んだネジに糸を絡ませて文字を作る
04：紙に色を塗って、切り抜いてタイポグラフィを作る
05：木工用ボンドを着色してツヤのある文字を書く
06：身近にある草花を使ったアルファベット
07：ペンライトの軌跡で光の文字を描く
08：お菓子でかわいらしいメニューとキービジュアルを
09：重ね塗りしたクレヨンから削りだしたカラフルな文字

＿アイコン・パーツ
10：ティッシュとペンを使って“ゆるふわ”アイコン
11：製菓用チョコペンシルでサイトのパーツを描く
12：水滴を使ってアイコンや文字を描く
13：フォトコーナーで画像を装飾する
14：ミシンを使ってジグザグのフレームを作る
15：フラッグガーランドをアイキャッチと罫線に

＿背景・グラフィック
16：ニットの編み目を活かして模様を作成
17：クレヨンと画用紙で作ったテクスチャを使ったビジュアル
18：折り紙を使った切り絵で色と形を大胆に
19：破いた紙の素材をサイト全体のデザインに活かす
20：コーヒーの染みを使ってグラフィックを作る
21：水彩画を背景や画像枠に利用する
22：水彩絵の具を使った淡色のパターン表現
23：手描き感のあるイラストをメニューボタンに
24：フロッタージュでグラフィックを作る
25：消しゴムハンコでぬくもりのある素材作り

＿テクスチャ
26：万華鏡を用いた印象的なテクスチャ作成
27：紙ヤスリで削り、ハンコのようなテクスチャを付ける
28：プリンタと油性マジックでスタンプ風のかすれたテクスチャに
29：2つの方法でザラザラとしたテクスチャを加える
30：ティッシュを使って自然な風合いをつける

＿マスク
31：破った紙をマスクに使ったタイポグラフィ
32：筆の塗りをクリッピングマスクに使う
33：筆の飛沫をクリッピングマスクに使う

詳細はWeb Designingの公式Webサイトをご覧ください。
 

※Facebookページも更新中！
https://www.facebook.com/wdmag

【特集1】jQueryプラグイン百花繚乱
―簡単に実装できる！ サイトのクオリティが上がる！―

デファクトスタンダードの域を越えて、すでにWeb開発の基盤ともいえるjQueryは、4月には2.0がリリースされるなど、さらに進化を続けています。
そして、それに歩調を合わせるように、新たなプラグインが日々世界中で生み出されています。本特集では、時代の最先端を走るjQueryを、さらに便利に、さらに豊かに彩る40以上ものプラグインをサンプルとともに取り上げました。さまざまな分野で多彩なプラグインがリリースされているなかで、なるべく新しいもの、「ちょっとした機能だけど、あると便利！」といったものなど、各カテゴリーごとに数多くのプラグインを紹介しています。

01＿User Interface
Navi.js：豊富なアニメーションとAjaxでサクサクとページ切り替え
SLY：スライダーからパララックスまで多彩なスクロールコンテンツを実装
Freetile：Pinterest 風のグリッドレイアウトを簡単に実現
Quicksand：パネル式のデザインで、スムーズに要素をフィルタリング
Zoomooz：さまざまな効果を付加して、任意の要素を拡大表示
Animated Table Sorter：ソートにアニメーションを付加したテーブル
jQuery Burn：燃え上がれ、テキスト！
jRumble：ガクガクブルブル、要素を激しく震わせる
DyLay：ソートやフィルタリング可能なグリッドレイアウト

02＿Menu
MagicNav.js：コンテンツに合わせて、ページ内メニューを自動作成
Query-menu-aim：Amazon風ドロップダウンメニュー
MeanMenu：メディアクエリを使わない簡単レスポンシブメニュー
Sidr：スマホアプリのようにクリックでスライド表示するメニュー
scrollNav：ページ内のタイトルを取得してメニューを自動作成

03＿Image
Nested：ギャラリーサイトに最適な可変グリッドレイアウト
FlexSlider 2：スワイプ操作にも対応したレスポンシブスライダー
Swipebox：タッチデバイスのスワイプ操作にも対応したLightbox
Hover Captions：マウスオーバーで画像にパネルをアニメーション表示
elevateZoom：マウスオーバーでさまざまに画像を拡大表示

04＿SNS
jquery.popn-socialbutton：簡単設置のポップなソーシャルボタン
minimal-sharer：ありそうでなかった超シンプルなソーシャルボタン
Slingpic：画像にマウスオーバーすると現れるソーシャルボタン
Facio 2.0：Facebookページウィジェットを簡単作成！
Hovercard：Facebookページの情報をカード状にポップアップ表示
gpHatebuCounter：はてブの登録件数を一発表示

05＿Multi Device
Hook.js：アプリ感覚で使える！画面を下に引っ張ってページを更新
jGestures：Webサイトをタッチジェスチャーで操作
stacktable.js：テーブルを簡単にレスポンシブ対応させる
mobileGmaps：Googleマップのiframeを画像に置換

06＿Form
Select2：select要素を手軽に多機能に拡張
iCheck：チェックボックスとラジオボタンを自在にカスタマイズ
Parsley.js：シンプルでパワフルなフォームのバリデーション
typeahead.js：Twitterが開発した高速で多機能なオートコンプリート

07＿etc.
textillate.js：CSS3アニメーションでモーションタイポグラフィ
chardin.js：HTML要素のオーバーレイ表示を簡単に実装
jquery.transit：CSS3のエフェクトを駆使して、さまざまな効果を実現
MoveArrowJS：手間のかかるマウスオーバーエフェクトを簡単実装
jQuery Scroll Depth：ページ内のどこまでスクロールされているかを解析！
BigVideo.js：ページの背景全体に動画を表示
Responsive Image Maps：レスポンシブ対応のクリッカブルマップ
jQuery.phantascope：スプライトアニメーションを簡単に作成

Column
＿フロントエンド開発を、より便利に、より効率的に！
＿JavaScript高速化の新たなアプローチ「asm.js」

詳細はWeb Designingの公式Webサイトをご覧ください。
 

※Facebookページも更新中！
https://www.facebook.com/wdmag

【Web Designing 6月号より】

人気クリエイターの本質に迫る連載「肖像 ーWeb Craftman’s Portraitー」。

6月号で取材させていただいたのは、面白法人カヤック 意匠部所属のデザイナー、 林真由美さん。

現在発売中の、Web Designing 2013年6月号のご紹介です。

【特集1】jQueryプラグイン百花繚乱

―簡単に実装できる！ サイトのクオリティが上がる！―

デファクトスタンダードの域を越えて、すでにWeb開発の基盤ともいえるjQueryは、4月には2.0がリリースされるなど、さらに進化を続けています。そして、それに歩調を合わせるように、新たなプラグインが日々世界中で生み出されて　います。本特集では、時代の最先端を走るjQueryを、さらに便利に、さらに豊かに彩る40以上ものプラグインをサンプルとともに取り上げました。さまざまな分野で多彩なプラグインがリリースされているなかで、なるべく新しいもの、　「ちょっとした機能だけど、あると便利！」といったものなど、各カテゴリーごとに数多くのプラグインを紹介しています。

【特集2】図画工作でデザインしよう

―アナログな手法を取り入れ、ロゴ、ビジュアル、テクスチャを作る―

デザインといえば、いまやPCでの作業が当たり前になっています。しかし、イチからジュウまですべてPCで行わずに、アナログな素材や手段を取り入れれば、コンピュータでは作り得ないナチュラルな質感や自由度の高い表現を生み出す　ことができます。Webブラウザ越しに見る場合は特に、そうしたアナログな要素がポイントとなり、サイトをグッと引き立ててくれるでしょう。本特集では、デザインの現場でそのような手法を取り入れているデザイナー陣による図画工　作的なデザインアイデアを紹介していきます。役に立つのはもちろんのこと、あなたのデザイナー心をワクワクさせること請け合いです。

【Special】ニーハオ！上海!! TapApp Awards最優秀賞受賞者と行く

―上海クリエイティブオフィスツアーレポート―

スマートフォン向けアプリコンテスト「TapAppアワード2013」で最優秀賞に輝いた「いろぴこ」を制作したSTARRYWORKSの木村幸司さんと頓花聖太郎さんが、2泊3日の上海ツアーに向かいました。ツアーに同行した模様をお届けします。上海に集まるクリエイターとのコミュニケーションを通じて、単なる観光とはひと味もふた味も違う「上海の風」を感じたようです。
【Focus On】Yahoo! JAPANが目指す新たな広告像とWebクリエイターの可能性

―バナー広告づくりが楽しくなる？ Yahoo! JAPANのキーマンに迫る―
2013年1月、Yahoo! JAPANが新たなWeb広告のソリューションをスタートさせました。日本随一の集客力を誇るポータルサイトでの刷新は、今後のWeb広告全　体の方向性に影響を与える可能性も秘めています。今回、Yahoo! JAPANの広告　改革に関わっているマーケティングイノベーション室の室長、友澤大輔氏にお話しを聞きました。

【one’s view】
今日も歴史が動いている　Text：清水幹太
Autodesk 123 catch

セレンディピティを堪能する“どこでもドア”　Text：西村真里子
The Secret Door

運ぶか運ばれるかの人生ゲーム　Text：大庭俊介
（株）リクサス

「ドキュメンタリーWeb番組」のようなコンテンツ　Text：中川直樹
INTO THE ARCTIC

【Web Designing Lab.】

CSS Lab.＿リンク表現を自由自在に操る
jQuery Lab.＿タッチ操作を意識したフレキシブルなグリッドレイアウト
Flash Lab.＿モバイルAIRアプリのパフォーマンス最適化

【WD Website Front】
FLASH VS HTML、E STANDARD、TYO|UT 2013、POP-UP！ PI’S EPIC JOURNEY、
エバラ お口の中の遊園地、CGPWEB　ほか

※今月掲載しているサイトへのリンク集はこちら
http://book.mynavi.jp/wd/wdwebsitefront/

◆この他にも、特別ページや人気連載などが盛りだくさん。
詳細は、こちらをご覧ください！
http://book.mynavi.jp/wd/currentissue/

Web Designing編集部の公式Facebookページ

https://www.facebook.com/wdmag