2013年7月号 vol.144
定価1,470円
- サンプルデータのダウンロードには、本誌の次号予告ページ(155ページ)に掲載しているIDとパスワードが必要です。
- サンプルデータに関する詳しい注意点については、このページの下部に記載している「サンプルデータについて」をご覧ください。
特集・特別企画
特集1:タッチデバイスサイトの事例研究
実例から学ぶ、スマホ・タブレットへの最適化
すでにPCだけに向けたサイトを制作する時代は過ぎ去りました。
スマートフォンやタブレットといったタッチデバイスが普及し、そういったデバイスでブラウジングするユーザーが増えるなか、Webサイトのデザインはどのように変化しているのでしょうか。
本特集では、スマートフォンやタブレットなどのタッチデバイスで閲覧することを前提として制作されたサイトを、デザインや演出という視点から制作者自身が解説します。
レスポンシブWebデザイン、タッチデバイス専用サイトなど、たくさんの実例をもとにタッチデバイスサイトのデザインについて紹介します。
-
- スマート版Yahoo! JAPAN_コンテンツを重視したタブレット専用サイト
- 東京メトロ_ユーザーニーズに合わせたスマートフォンサイト設計
- 資生堂 PICK UP TECHNOLOGY_情報量に差を付けないデバイスへの展開と工夫
- A PAPER - SUPER A MARKET_デバイスを横断したレイアウトや印象の統一
- 肌研(ハダラボ) | ロート製薬株式会社_カード型グリッドで魅せるレスポンシブWebデザイン
- Kajimai - Yomitanson Gallery_スクロールとタッチで共通の「体験」を実現
- Mutations Studio_PCサイトの演出を効果的にスマートフォンサイトへ
- United Pixelworkers_デバイス依存のないグリッドレイアウト構成
- FUTURE OF DESIGN 2013_大胆なレスポンシブWebデザインで操作感を演出
- 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
特集2:Web制作会社のセルフブランディング
自社サイトからはじめる“らしさ”の発信
Webサイトの制作を通して、さまざまなクライアントのブランディングを担うWeb制作会社ですが、自分たちのブランディングはというと、業務に追われてあとまわしになっていることも多いのではないでしょうか?
そこで本特集では、Web制作会社の特長ある自社サイトや、独自の取り組みによってブランドづくりを行っている企業を紹介しています。数ある制作会社のなかから「選んでもらう」ためのセルフブランディングについて、あらためて考えてみましょう。
- 会社の“見せ方”
-
- ユニークなポートフォリオ_(株)ワンパク、(株)メタ・マニエラ、(株)イメージソース ほか
- 制作理念を映した表現_(株)ノイ、(株)トリニティワークス、AISHA
- キャラクターを使ったデザイン_(株)ワン・トゥー・テン・デザイン、(同)CGFM、glück
- 洗練されたサービス紹介_(株)アールイーデザイン、MulberDen、(株)フードコネクション
- スタッフの顔が見えるサイトづくり_(株)スマートデザインアソシエーション、(株)アグイジェ、(株)バーグハンバーグバーグ)
- ロゴ&名刺ギャラリー
- 会社の“動かし方”
-
- 特定のジャンルで勝負する_(株)シータス&ゼネラルプレス
- 会社のカタチを変える_(株)ラナデザインアソシエイツ
- 取り組みを広めるコミュニティづくり_村式(株)
山口情報芸術センター[YCAM]10年間の軌跡
YCAM10年史で見えてくるWeb Designingとの意外なつながり
山口情報芸術センター、通称YCAM(ワイカム)をご存じでしょうか?
地方のアート施設と侮ることなかれ、ここから誕生した作品が世界中で続々と展示・公演されているのです。7月から始まる「YCAM10周年記念祭」直前の今、ここで誕生した作品を振り返りながら、YCAMの功績を見ていきましょう。
よしもと×Web Designing「チョコバナナ」企画会議
チョコバナナフェス開催決定!
いよいよ「チョコバナナフェス」の開催が決定しました。
けれどもいったい何をやるのでしょうか‥‥。「ルミネtheよしもと」ならばネタを披露する? それとも誌面的なトークイベント? 編集部とよしもと佐藤さん、放送作家の林田晋一さんにも加わってもらった会議の結果、とんでもないイベントになる予感が‥‥!!!
肖像 -Web Craftman's Portrait-
鎌田貴史(spfdesign Inc.)/「グッとくるWebサイト」を生み出す源泉
ユニクロや本田技研工業など、さまざまな企業Web サイトを手がけるアートディレクター/デザイナー/プログラマーの鎌田貴史。「UNIQLO CALENDAR」やファッションブランド「シアタープロダクツ」のサイトなど、彼の作品が記憶に残っている読者も多いことでしょう。そんな鎌田が志すのは「ユーザーがグッとくるWeb サイト」。ただの広告サイトにとどまらない洗練された世界観と「気持ちいい」ユーザビリティを生み出す源泉はどこにあるのでしょうか。
ツクルヒト
宮永愛子(美術家)/変わりつづけるという“強さ”
昨年の国立国際美術館(大阪)での個展が話題を呼んだ、美術家の宮永愛子さん。ナフタリンや塩などの素材を使った、常に変化しつづけるその作品を知る人も多いかもしれません。宮永さんは、どんな視点でそういった独特な作品をつくりだすのでしょうか。開催中のの個展「house」の会場であるミヅマアートギャラリーに宮永さんを訪ねて、お話を聞きました。
WF Inside Story
PCサイトとスマートフォンでキャッチボールを実現
PR会社の(株)キャッチボールが、自社サイトを公開しました。縦長のサイトにこれまでの仕事歴や受賞歴などがまとめられ、河川敷をイメージしたというイラストにアニメーションが多用されています。なかでも特徴的なのが、スマートフォンと連携して、社名のとおりキャッチボールを実現したコンテンツ「レッツ!キャッチボール」。なぜこのようなものを用意したのか、話をうかがいました。
来来!上海的制作現場
中国生まれのWeb制作会社
これまで、この連載では日系や外資系の会社を中心に取り上げてきました。それは、中国人自身が立ち上げ、経営している制作会社に出会う機会がなかったからなのです。取材を重ねるうちにようやく中国で誕生したWeb制作会社に出会うことができ、インタビューすることができました。
Webfonts meet BiND6.5 New!
前編:自由自在にWebフォントを使える、新BiNDの「魅力」
コードを書かずにHTML5ベースのWebオーサリングを可能にするソフトウェア「BiND for WebLiFE*」の最新バージョン「6.5」(以下BiND6.5)がリリースされました。最大の特徴は、日本語Webフォントを搭載し、最大で150書体のなかから最適なフォントを活かしたサイト制作が可能になったことです。そこで、2回にわたって、Webフォントを搭載した新BiNDについて解説します。
【Focus On】制作環境のあり方を変えるAdobe Creative Cloudのこれから
CSからCCへ。メリットは? 課金体系は? アドビの最新クリエイティブ環境について解説
アドビ システムズ社は、クリエイティブカンファレンス「Adobe MAX」を5月6~8日に開催しました。そこで、最新のクリエイティブツールブランドを、Creative Cloudの頭文字をとった「CC」に変更すると発表しました。多くのWebクリエイターの制作環境に関係するCCについて、7つの注目点を中心にまとめました。
連載企画
Web Designing Lab.
CSS Lab._モバイル全盛時代に求められる地図
Text:葛西新平(コーディングファクトリー)
「IDEA1」のサンプルデータを見る
「IDEA2」のサンプルデータを見る
「IDEA3」のサンプルデータを見る
サンプルデータをダウンロードする
jQuery Lab._タッチ操作を意識したフレキシブルなグリッドレイアウト
Text:林 豊、邉春貴保
TouchSliderを使った基本サンプルデータを見る
PhotoSwipeSliderを使った基本サンプルデータを見る
TouchSliderを使ったカスタマイズサンプルデータを見る
PhotoSwipeSliderを使ったカスタマイズサンプルデータを見る
サンプルデータをダウンロードする
Flash Lab._モバイルAIRアプリのパフォーマンス最適化
Text:沖 良矢
movement
SHIFT マガジン主催のデジタルフィルムフェスティバル「DOTMOV2013」作品募集中!、奇才・横山裕一の新刊「世界地図の間」と個展、2013年の“深海”ブームを決定づける特別展 ほか
Worldwide Creator's Archive
キム・ジョンミン(Jongmin Kim)_いつも“インタラクティブ”のことで無我夢中
キム・ジョンミン(Jongmin Kim)氏は、米ニューヨーク在住の韓国人クリエイター。現在は、世界有数のエージェンシーであるFirstbornでシニアデベロッパーを務めています。プライベートワークにも積極的で、ポートフォリオサイト「Form Follows Funciton」は、中村勇吾氏の初期作品「yugop.com」と彷彿とさせます。今回は根っからのインタラクティブ好きを自認するキム氏にインタビューを行いました。
WD Website Front
Coloured Lines、Takeshi Watamura、第80回日本ダービー記念特設サイト、AMPERGRAM、Kamome Park:手芸家 上村 幸、瀬戸内芸術祭 小豆島特設サイト ほか
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:野澤智朝(ニテンイチリュウ)
モバイルサービス最前線
kazoc_こどもにまつわる出来事をコンテンツに変える「母子手帳アプリ」
デジタルマーケティングのひみつ
ティザーサイトの功と罪
Text:オオタケンジ
ハギハラ総研
スマホアプリの利用トップは、やはりLINE
Text:萩原雅之
News Crawler
Flickrが全面リニューアル、タブレットユーザーが読みやすいと感じるフォントサイズは? ほか
WD Reviews
CrazyTalk 7 Pro
エキソニモの「ウェブにふれる」
Vol.21 連載ボーグ・シリーズ EP.1
まんがAC部活動日誌
第二十六回 狙った「ゆるさ」はゆるされない
その他
全国Web制作会社リスト
モニター&プレゼント
WD Square
Back Numbers
訂正
特集1「タッチデバイスサイトの事例研究」にて記事に誤りがありました。
以下に訂正いたします。
P073 「トップページのグリッドデザイン」解説文
(誤)1.25cm×フォントサイズ16px=20px
(正)1.25em×フォントサイズ16px=20px
サンプルデータについて
- サンプルデータのダウンロードには、本誌の次号予告ページ(155ページ)に掲載しているIDとパスワードが必要です。
- 各サンプルデータの著作権は、各データの作者に帰属します。
- サンプルデータをご利用の際の利用条件や連絡先などについては、圧縮データに同梱しているテキスト「readme.txt」をご覧ください。
- 各サンプルデータの内容に関しては間違いのないように十分注意しておりますが、もしこれらのデータを利用することによってトラブルや損失・損害が発生しても、各データの作者および(株)マイナビは一切責任を負いませんのでご了承ください。