Web Designing

ウェブデザイニング | Web Designing | 情報戦略でビジネスを加速させる 毎月18日発売

cover

2015年5月号 vol.166

定価1,530円

  • サンプルデータのダウンロードには、本誌の次号予告ページ(144ページ)に掲載しているIDとパスワードが必要です。
  • サンプルデータに関する詳しい注意点については、このページの下部に記載している「サンプルデータについて」をご覧ください。

特集・特別企画

特集1:スマホ時代のUI設計

準備OK? モバイルフレンドリーなサイトのための技術と実装

スマートフォンの普及が50%を越え、完全な「スマホ時代」に突入したといえるでしょう。それを背景にした新たなサービスも次々と生まれてきています。また、4月21日からは、Googleの検索アルゴリズムが、スマートフォン利用に最適化されたサイトが「モバイルでの」検索結果で優遇されやすくなる「モバイルフレンドリー」対応に変更されます。そんな時代のUI設計とは、どうあるべきなのでしょうか。本特集では、スマートフォンに最適化したさまざまなUI表現を数多く紹介しています。モバイルフレンドリーなサイト制作に役立ててください。

【Introduction】「モバイルフレンドリー」は誰のために?
Layout_3デバイス個別対応グリッドシステム
Menu_画面の狭さを解決するナビゲーションドロワー/画像を使ったナビゲーションドロワー/サイドからのメニューのスライドイン/スマホにも対応したドロップダウンメニュー/table-layoutで作るフレキシブルなグローバルナビ ほか
Button_スマホでもタップした実感のあるボタン/タップで飛び出すシェアボタン
Text_セレクトボックスでオートコンプリートを実現/フォームパーツをリスト化してスムーズに選択/テキスト要素をとレスポンシブ化/タッチデバイスにも対応したツールチップ
【Column】「スマホ時代」のアクセス解析の実際
Table_CSSだけでできるレスポンシブ対応テーブル/CSSだけでできるスワイプ可能なレスポンシブ対応テーブル/jQueryでつくるスワイプ可能なレスポンシブ対応テーブル ほか
Image_デバイスに依存しないSVG画像を使おう/「ギャップレスレスポンシブ」テクニック
Video_モバイルフレンドリーな動画コントローラー/コンテンツ配信を最適化しよう
Animation_Canvasで背景アニメーション/CSSによる背景のループアニメーション
etc._タップしたときの「押した感」インタラクション/CSSだけでできるレスポンシブ対応のページナビゲーション/視認しやすくて押しやすいチェックボックス/スマートフォンでも「触れる」スクロールバーUI

previewpreviewpreview

サンプルデータをダウンロードする

特集2:8人のニューエイジ・クリエイター

世界を驚かすインタラクティブに必要な素養とスキルがみえる

世界を驚かせたあのWebサイトやキャンペーン、アプリ、インタラクティブの裏では、いつでも若い力が活躍しています。次世代を牽引する8人の人物像から、これからの時代に求められる素養とスキルがみえてきました。

  1. 鍛治屋敷圭昭_あらゆるものをプログラムで動かしたい
  2. 衣袋宏輝_音を武器にして戦っていく
  3. 石塚美帆_“エクスペリメンタル”を探し続けて
  4. 巣籠悠輔_Gunosy第4の人物の次なる挑戦
  5. 石園智大_当たり前を当たり前に
  6. 小玉千陽_時代を経ても変わらない何かを持つデザインを
  7. 杉野裕則_テクノロジーで空間を演出する
  8. 鈴木智大_目に見えない組織の仕組みもデザインする

previewpreviewpreview

掲載サイトリンク集

Inside Story

FACT "the way down"_WebGL×スマホによる世界最長級のミュージックビデオ

バンドFACTが3月4日にリリースしたアルバム『KTHEAT』から、収録曲「the way down」の2種類のミュージックビデオ(以下MV)が公開され、話題を集めています。一つはYouTubeなどで公開されている動画、そしてもう一つはスマホ専用に用意されたWebGLによる3D表現などの多くの仕掛けがあるもので、両者が連動する場面もあります。MVをスマホ用のコンテンツとして用意すること自体が珍しいですが、なぜこのような方法をとったのか、話をうかがいました。

preview

FACT "the way down" Smartphone Music Video

肖像 -Web Craftman's Portrait-

木村匡孝(TASCO inc.)_アーティストではない、“工場長”のものづくりの原点

最近では、Webクリエイターの仕事がWebだけでなくリアルな制作物にまで広がってきています。そんなプロジェクトを成功させるために欠かせない存在といわれる人物がいます。印象深い機械作品を制作し、まざまな案件で活躍している木村匡孝さんです。自分のつくりたいものを形にしてきた彼は芸術家とも呼べそうですが、それを生活の糧にするには芸術家ではできないといいます。「ものづくりで食べていく」という彼の創作の原点に迫ります。

preview

TASKO inc.

ツクルヒト

HAROSHI(アーティスト)_使い古したスケートボードで生む「躍動する彫刻」

カラフルな縞模様のメイプル合板を巧みに組み合わせ、彫り、削りあげて生まれる多様な立体作品。実はすべて、使われなくなった古いスケートボードを素材に、アーティストのHAROSHIさんが彫刻として新たに命を吹きこんだものなのです。ジュエリーデザイナーとして出発し、紆余曲折を経て、10代から親しんできたスケート文化に着想して生まれた表現。そのスキルとスタイルを自己流で進化させながら、彼の創作はいま、より広い世界を求めて滑走しつつあります。今月号の表紙も、HAROSHIさんの作品です。

preview

HAROSHI
HHH gallery

モバイルサービス最前線

POCKET PARCO_スモールサクセスの繰り返しが、未踏の成果を創り上げる

Text:中谷健一(トリムタブジャパン

最近、メディアで頻繁に「オムニチャネル」という言葉が取り上げられます。あらゆる顧客接点と流通の情報を統合し、いつでもどこでも便利に買い物が楽しめる新たな仕組みのことです。そのためのさまざまなITサービスが開発・提供されていますが、肝になるのは、運用体制とオペレーションを行うスタッフ教育なのです。オムニチャネルの先駆けともいえる新しいスタイルの買い物体験を全店導入たパルコの事例を取材しました。

preview

POCKET PARCO

基礎講座JavaScript

コンテンツを動的に並べ替える「ソート」を学ぶ

Text:小平麻美、木村壮哉(エンタクルグラフィックス

preview

サンプル01を見る
サンプル02を見る
サンプル03を見る
サンプル04を見る
サンプル05を見る
サンプルデータをダウンロードする

応用講座Flash for HTML5

HTMLの背景をアニメーションで演出してみよう

Text:沖 良矢

preview

サンプル3を見る
サンプルデータをダウンロードする

連載企画

movement

PARTY NYの新作は犬用ウェアラブル「Disco Dog」/千房けん輔、田中良治、梅沢和木らが参加。日本のアート・ワールドを再構築する/世界のモードを席巻した山口小夜子が展覧会としてよみがえる/春は“アートな京都”へ行こう!/逗子の砂浜の巨大スクリーンで自然体感型の映画祭/BAPA第二期開校! 実力派若手クリエイター集合。入学式レポート ほか

Worldwide Creator's Archive

MediaMonks_「最高のクリエイティブ」を世界へ

MediaMonks

WD Monthly Archive

Webサイトだけではなく、アプリやサイネージなど、編集部が注目した新着デジタルコンテンツを掲載しています。

キリン メッツ スペシャルサイト/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

preview

WD Website Front

今月の掲載コンテンツのリンク集へ

one's view

最高難易の「簡単」
Text:清水幹太(パーティ
Do.

記憶を呼び起こすもの
Text:澤邊芳明(ワン・トゥー・テン・ホールディングス
playback.fm

アイデアが孵化する瞬間、開発者はどんな顔をすればいい?
Text:川田十夢
An illustrated history of Artificial Intelligence

偶然の誘惑。
Text:菅野 薫
The Tummy Translator

最果タヒの「詩句ハック」

第11回 詩ミュニケーション

shikuhack.jp

Monthly Focus

Unity5_2年ぶりのメジャーバージョンアップの中身

今回は3月にメジャーバージョンアップデートされたUnity 5を取り上げています。新バージョンからライセンス形態が「Personal Edition」(無料版)と「Professional Edition」(有料版)の2つに変更されて、変更にあわせて無料版ライセンスでできることが拡充されました。そのほか、新しい有料サービスや機能強化点などを含めて、Unity5となって変化した中身について解説しています。

preview

Unity Technologies

デザインにできることMonologue

Vol.136 再生のメディア
Text:永原康史

この仕事のカタチ

公用語って何ですのん?
Text:小泉森弥

News Crawler

アジア最大の広告祭「ADFEST 2015」開催、インタラクティブ部門金賞は「3D ON THE ROCKS」/世界最大級のイベント「SXSW」に日本のインタラクティブ作品が多数登場/電通の菅野薫氏が2014年“最も優れたクリエイター”に ほか

ハギハラ総研

携帯電話での世論調査は可能か
Text:萩原雅之

デジタルマーケティングのひみつ

「アンバサダー・マーケティング」とは?
Text:オオタケンジ

エキソニモの「ウェブにふれる」

VOL.43 連載ボーグ・シリーズ EP.23「新しい石油」

@KeigoTheBot

まんがAC部活動日誌

第四十八回 人の評価早見表

AC部

その他

全国Web制作会社リスト
モニター&プレゼント
WD Square
Back Numbers

サンプルデータについて

  • サンプルデータのダウンロードには、本誌の次号予告ページ(144ページ)に掲載しているIDとパスワードが必要です。
  • 各サンプルデータの著作権は、各データの作者に帰属します。
  • サンプルデータをご利用の際の利用条件や連絡先などについては、圧縮データに同梱しているテキスト「readme.txt」をご覧ください。
  • 各サンプルデータの内容に関しては間違いのないように十分注意しておりますが、もしこれらのデータを利用することによってトラブルや損失・損害が発生しても、各データの作者および(株)マイナビは一切責任を負いませんのでご了承ください。