Web Designing

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

cover

2013年7月号 vol.144

定価1,470円

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

特集・特別企画

特集1:タッチデバイスサイトの事例研究

実例から学ぶ、スマホ・タブレットへの最適化

すでにPCだけに向けたサイトを制作する時代は過ぎ去りました。
スマートフォンやタブレットといったタッチデバイスが普及し、そういったデバイスでブラウジングするユーザーが増えるなか、Webサイトのデザインはどのように変化しているのでしょうか。
本特集では、スマートフォンやタブレットなどのタッチデバイスで閲覧することを前提として制作されたサイトを、デザインや演出という視点から制作者自身が解説します。
レスポンシブWebデザイン、タッチデバイス専用サイトなど、たくさんの実例をもとにタッチデバイスサイトのデザインについて紹介します。

  1. スマート版Yahoo! JAPAN_コンテンツを重視したタブレット専用サイト
  2. 東京メトロ_ユーザーニーズに合わせたスマートフォンサイト設計
  3. 資生堂 PICK UP TECHNOLOGY_情報量に差を付けないデバイスへの展開と工夫
  4. A PAPER - SUPER A MARKET_デバイスを横断したレイアウトや印象の統一
  5. 肌研(ハダラボ) | ロート製薬株式会社_カード型グリッドで魅せるレスポンシブWebデザイン
  6. Kajimai - Yomitanson Gallery_スクロールとタッチで共通の「体験」を実現
  7. Mutations Studio_PCサイトの演出を効果的にスマートフォンサイトへ
  8. United Pixelworkers_デバイス依存のないグリッドレイアウト構成
  9. FUTURE OF DESIGN 2013_大胆なレスポンシブWebデザインで操作感を演出
  10. SKINNY TIES_デバイスごとに探しやすいUIを実現するECサイト
Column_タッチデバイスサイトに使える特選ライブラリ!
jQueryライクの総合的なタッチデバイス用ライブラリ_App Framework(旧jqMobi)
まさにオールインワンといえるモバイルアプリ向けライブラリ_Sencha Touch
依存ライブラリのない高機能タップ&ジェスチャー_Hammer.js
タップと擬似的なhoverを実現する軽量のjQueryプラグイン_Touchable jQuery Plugin
iOSライクなフリックをPCやAndroidでも実現_jQuery.flickable
ジェスチャでスクロール・ズームができるグラフ_dygraphs
ネットへの接続がなくなったことを知らせてくれる_Heyoffline.js

previewpreviewpreview

特集2:Web制作会社のセルフブランディング

自社サイトからはじめる“らしさ”の発信

Webサイトの制作を通して、さまざまなクライアントのブランディングを担うWeb制作会社ですが、自分たちのブランディングはというと、業務に追われてあとまわしになっていることも多いのではないでしょうか?
そこで本特集では、Web制作会社の特長ある自社サイトや、独自の取り組みによってブランドづくりを行っている企業を紹介しています。数ある制作会社のなかから「選んでもらう」ためのセルフブランディングについて、あらためて考えてみましょう。

会社の“見せ方”
  1. ユニークなポートフォリオ_(株)ワンパク(株)メタ・マニエラ(株)イメージソース ほか
  2. 制作理念を映した表現_(株)ノイ(株)トリニティワークスAISHA
  3. キャラクターを使ったデザイン_(株)ワン・トゥー・テン・デザイン(同)CGFMglück
  4. 洗練されたサービス紹介_(株)アールイーデザインMulberDen(株)フードコネクション
  5. スタッフの顔が見えるサイトづくり_(株)スマートデザインアソシエーション(株)アグイジェ(株)バーグハンバーグバーグ)
ロゴ&名刺ギャラリー
会社の“動かし方”
  1. 特定のジャンルで勝負する_(株)シータス&ゼネラルプレス
  2. 会社のカタチを変える_(株)ラナデザインアソシエイツ
  3. 取り組みを広めるコミュニティづくり_村式(株)

previewpreviewpreview

山口情報芸術センター[YCAM]10年間の軌跡

YCAM10年史で見えてくるWeb Designingとの意外なつながり

山口情報芸術センター、通称YCAM(ワイカム)をご存じでしょうか?
地方のアート施設と侮ることなかれ、ここから誕生した作品が世界中で続々と展示・公演されているのです。7月から始まる「YCAM10周年記念祭」直前の今、ここで誕生した作品を振り返りながら、YCAMの功績を見ていきましょう。

preview

YCAM10周年記念祭

よしもと×Web Designing「チョコバナナ」企画会議

チョコバナナフェス開催決定!

いよいよ「チョコバナナフェス」の開催が決定しました。
けれどもいったい何をやるのでしょうか‥‥。「ルミネtheよしもと」ならばネタを披露する? それとも誌面的なトークイベント? 編集部とよしもと佐藤さん、放送作家の林田晋一さんにも加わってもらった会議の結果、とんでもないイベントになる予感が‥‥!!!

preview

チョコバナナ・プロジェクトサイト
チョコバナナ密着blog

肖像 -Web Craftman's Portrait-

鎌田貴史(spfdesign Inc.)/「グッとくるWebサイト」を生み出す源泉

ユニクロや本田技研工業など、さまざまな企業Web サイトを手がけるアートディレクター/デザイナー/プログラマーの鎌田貴史。「UNIQLO CALENDAR」やファッションブランド「シアタープロダクツ」のサイトなど、彼の作品が記憶に残っている読者も多いことでしょう。そんな鎌田が志すのは「ユーザーがグッとくるWeb サイト」。ただの広告サイトにとどまらない洗練された世界観と「気持ちいい」ユーザビリティを生み出す源泉はどこにあるのでしょうか。

preview

spfdesign Inc.

ツクルヒト

宮永愛子(美術家)/変わりつづけるという“強さ”

昨年の国立国際美術館(大阪)での個展が話題を呼んだ、美術家の宮永愛子さん。ナフタリンや塩などの素材を使った、常に変化しつづけるその作品を知る人も多いかもしれません。宮永さんは、どんな視点でそういった独特な作品をつくりだすのでしょうか。開催中のの個展「house」の会場であるミヅマアートギャラリーに宮永さんを訪ねて、お話を聞きました。

preview

MIYANAGA Aiko

WF Inside Story

PCサイトとスマートフォンでキャッチボールを実現

PR会社の(株)キャッチボールが、自社サイトを公開しました。縦長のサイトにこれまでの仕事歴や受賞歴などがまとめられ、河川敷をイメージしたというイラストにアニメーションが多用されています。なかでも特徴的なのが、スマートフォンと連携して、社名のとおりキャッチボールを実現したコンテンツ「レッツ!キャッチボール」。なぜこのようなものを用意したのか、話をうかがいました。

preview

株式会社キャッチボール

来来!上海的制作現場

中国生まれのWeb制作会社

これまで、この連載では日系や外資系の会社を中心に取り上げてきました。それは、中国人自身が立ち上げ、経営している制作会社に出会う機会がなかったからなのです。取材を重ねるうちにようやく中国で誕生したWeb制作会社に出会うことができ、インタビューすることができました。

preview

DamnDigital

Webfonts meet BiND6.5 New!

前編:自由自在にWebフォントを使える、新BiNDの「魅力」

コードを書かずにHTML5ベースのWebオーサリングを可能にするソフトウェア「BiND for WebLiFE*」の最新バージョン「6.5」(以下BiND6.5)がリリースされました。最大の特徴は、日本語Webフォントを搭載し、最大で150書体のなかから最適なフォントを活かしたサイト制作が可能になったことです。そこで、2回にわたって、Webフォントを搭載した新BiNDについて解説します。

preview

BiND for WebLiFE* 6.5

【Focus On】制作環境のあり方を変えるAdobe Creative Cloudのこれから

CSからCCへ。メリットは? 課金体系は? アドビの最新クリエイティブ環境について解説

アドビ システムズ社は、クリエイティブカンファレンス「Adobe MAX」を5月6~8日に開催しました。そこで、最新のクリエイティブツールブランドを、Creative Cloudの頭文字をとった「CC」に変更すると発表しました。多くのWebクリエイターの制作環境に関係するCCについて、7つの注目点を中心にまとめました。

preview

Adobe Creative Cloud

連載企画

Web Designing Lab.

CSS Lab._モバイル全盛時代に求められる地図
Text:葛西新平(コーディングファクトリー

「IDEA1」のサンプルデータを見る
「IDEA2」のサンプルデータを見る
「IDEA3」のサンプルデータを見る
サンプルデータをダウンロードする

jQuery Lab._タッチ操作を意識したフレキシブルなグリッドレイアウト
Text:林 豊邉春貴保

TouchSliderを使った基本サンプルデータを見る
PhotoSwipeSliderを使った基本サンプルデータを見る
TouchSliderを使ったカスタマイズサンプルデータを見る
PhotoSwipeSliderを使ったカスタマイズサンプルデータを見る
サンプルデータをダウンロードする

Flash Lab._モバイルAIRアプリのパフォーマンス最適化
Text:沖 良矢

preview

movement

SHIFT マガジン主催のデジタルフィルムフェスティバル「DOTMOV2013」作品募集中!、奇才・横山裕一の新刊「世界地図の間」と個展、2013年の“深海”ブームを決定づける特別展 ほか

Worldwide Creator's Archive

キム・ジョンミン(Jongmin Kim)_いつも“インタラクティブ”のことで無我夢中

キム・ジョンミン(Jongmin Kim)氏は、米ニューヨーク在住の韓国人クリエイター。現在は、世界有数のエージェンシーであるFirstbornでシニアデベロッパーを務めています。プライベートワークにも積極的で、ポートフォリオサイト「Form Follows Funciton」は、中村勇吾氏の初期作品「yugop.com」と彷彿とさせます。今回は根っからのインタラクティブ好きを自認するキム氏にインタビューを行いました。

preview

Jongmin Kim

WD Website Front

Coloured Lines、Takeshi Watamura、第80回日本ダービー記念特設サイト、AMPERGRAM、Kamome Park:手芸家 上村 幸、瀬戸内芸術祭 小豆島特設サイト ほか

WD Website Front

今月の掲載サイトリンク集へ

one's view

主役は遅れて戻ってくる
Text:清水幹太
Google Street View Hyperlapse

「インタラクティブ・フィルム」の可能性
Text:西村真里子(バスキュール
The Build

果報は寝ずに8,000人待て
Text:大庭俊介
PUSH for Ultrabook

UIをオーソドックスかつミニマルに表現!
Text:中川直樹(アンティー・ファクトリー
HERE IS TODAY

ツール・ド・グラフィーク -CD1枚分の挑戦!-

第4回:「石」を使った誌上ライブコラージュ
Text&collage:河村康輔

ローカルクリエイティブのススメ

「過疎地・島根」デジタル企業を誘致する県庁の試み
Text:須賀大介((株)スマートデザインアソシエーション

島根県

この仕事のカタチ

「PCサイトの制作経験はありますか」‥‥!?
Text:小泉森弥

クリエイターのためのWeb解析入門

ヒートマップツールや行動解析系ツールを有効に活用する
Text:小川 卓(リアルアクセス解析

Social Seeds

身体の動きをデータ化・視覚化するモニタデバイス「UP」
Text:野澤智朝(ニテンイチリュウ

UP
Nike FuelBand
Moves
Fitbit Flex

モバイルサービス最前線

kazoc_こどもにまつわる出来事をコンテンツに変える「母子手帳アプリ」

preview

kazoc(カゾック)

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

ティザーサイトの功と罪
Text:オオタケンジ

ハギハラ総研

スマホアプリの利用トップは、やはりLINE
Text:萩原雅之

ニールセン(株)ニュースリリース(2013年5月20日、および28日)

News Crawler

Flickrが全面リニューアル、タブレットユーザーが読みやすいと感じるフォントサイズは? ほか

WD Reviews

CrazyTalk 7 Pro

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

Vol.21 連載ボーグ・シリーズ EP.1

preview

@KeigoTheBot
http://exonemo.com/wf/

まんがAC部活動日誌

第二十六回 狙った「ゆるさ」はゆるされない

AC部

その他

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

訂正

特集1「タッチデバイスサイトの事例研究」にて記事に誤りがありました。
以下に訂正いたします。

P073 「トップページのグリッドデザイン」解説文
(誤)1.25cm×フォントサイズ16px=20px
(正)1.25em×フォントサイズ16px=20px

サンプルデータについて

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