Web Designing

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

cover

2013年3月号 vol.140

定価1,470円

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

特集・特別企画

特集1:レスポンシブWebデザインテンプレートレシピ

これをベースに始める、基本デザインとバリエーション

2010年に提唱された「レスポンシブWebデザイン」は、スマートフォンやタブレットデバイスの普及を背景に、昨年、一気に流行となりました。レスポンシブWebデザインはマルチデバイス対応の万能薬ではありませんが、デバイスの種類がさらに増えていくことを考えると、リーズナブルな解の一つといえるでしょう。しかし、レスポンシブWebデザインのサイトをゼロから構築しようとすると、意外と手間がかかるものです。そこで、本特集では、いくつかのパターンに分けてレスポンシブWebデザインのテンプレートを提供し、その使い方を解説していきます。これをそのまま使うもよし、パーツを流用するもよし、レスポンシブWebデザイン制作のベースとして役立ててください。

Introduction_レスポンシブWebデザインという潮流
Template 01_オーソドックスな2カラム構成のレイアウト
画面幅いっぱいのメインビジュアルをスライダにする1/画面幅いっぱいのメインビジュアルをスライダにする2/ナビゲーションを開閉式にする1/ナビゲーションを開閉式にする2/ナビゲーションを開閉式にする3/下層ページとして使いやすい3カラム構成のレイアウト/レスポンシブWebデザイン対応の表組み
Column:レスポンシブWebデザインで表を実装するためのjQueryプラグイン
Template 02_画像ギャラリー向けのグリッドレイアウト
グリッドレイアウトを縦並びのリストにする/左サイドバーにメニューを付加する/メニューをセレクトボックスにする/「Fluid Grid」「Fluid Image」を使ったレイアウト
Column:レスポンシブWebデザインで役立つサイト・ツール
Column:デバイスによってviewportを切り替える方法
Discussion_レスポンシブWebデザインのメリット・デメリットとは?
Template 03_「モバイルファースト」で考えるシングルカラムデザイン
グローバルナビをスライドイン表示にする/無限スクロールでコンテンツを読み込む
Column:CSSハックを使わないブラウザ別CSS

previewpreviewpreview

テンプレートファイルのダウンロード

特集2:「キャリアアップ」プランの描き方

なりたい自分になるために、今できること、すべきこと

皆さんは、10年後の自分をどんな自分だと想像していますか? 将来に向けたキャリアアップを考える際に、今、考えておくべきことはどんなことでしょうか。生きる道はひとそれぞれまったく異なりますから、万人に当てはまる唯一の答えなどありません。だからこそ、ゆっくりと、じっくりと考えてみる必要があります。今回の特集では、そのためのヒントを紹介します。

本誌読者は「キャリアアップ」をどう考えているのか
明日のために私がはじめていること
講義:キャリアアップの前に考える、今必要とされる「力」とは
エッジを立てろ。あなたに“プラスアルファ”の力を加える「授業」
英語学習に必要なのは発想の転換。「ツール」としての“グロービッシュ”
「海外」と「転職」。2つのキーワードが未来をつくる鍵
立ち止まって考えてみる、ほんとうに「キャリアアップ」は必要ですか?

previewpreviewpreview

掲載サイト リンク集

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

なぜWebクリエイターにデータ解析が必要なのか

この連載では、Web解析データの見方、分析方法の要点、要所について解説していきます。特に日ごろデータを見慣れていないというWebクリエイターが、意識してアプローチしておきたい必要項目について取り上げます。解析データの読み解き方を知ることで、根拠に基づいたWeb制作を実現できるようになることを目指します。

preview

リアルWeb解析

実践! BiND6特別教室 New!

前編:編集モードのカスタマイズなど、新機能の着目点にフォーカス

HTMLタグやスクリプトの記述なしにWebサイトを簡単に制作できるWebオーサリングツール「BiND for WebLiFE*」。その最新バージョン「6」(以下BiND6)が、クライアント環境にも導入しやすくなる数多くの注目機能を搭載してリリースされました。そこで、今月と来月の2回に渡って、実際にBiND6が現場でどう役立つかを検証していきます。前編では、BiND6の新機能を中心に解説します。

preview

ホームページ制作ソフト BiND for WebLiFE* 6

来来! 上海的創作現場

とある上海クリエイターの日常

これまで上海に進出した日本人を主に取り上げてきましたが、今回は中国人クリエイターの生活を紹介したいと思います。みなさんの想像している中国人像と重なるでしょうか?

preview

99种朝日超爽啤酒术
Momo Shou

肖像 -Web Craftman's Portrait-

茂出木龍太_Webアートディレクター、広がりつづける職域と可能性

今年37歳の茂出木龍太さんは、Web業界のキャリアが17年。デザインスタジオ「TWOTONE」を主宰し、Webシーンの第一線で活躍してきたアートディレクターです。「郵便年賀.jp」「星のや 京都/竹富島」など、ビッグクライアントの仕事を手がけてきた茂出木さんの「肖像」に迫りました。

preview

TWOTONE INC.

ツクルヒト

関口光太郎(現代美術家)_図工の遺伝子

「銀座」と「ガムテープ」と「新聞紙」。これほどに据わりの悪い言葉の組み合わせも珍しいが、作品を見た途端に、そんな思いは吹き飛んでしまいました。その大きさと量感がもたらす有無を言わさぬ迫力。多種多様なモチーフが組み合わせられた、スチームパンクを思わせる緻密な構造。えもいわれぬ質感を見せるガムテープ。銀座の「ELTTOB TEP ISSEY MIYAKE」で展示を行なっている現代芸術家の関口光太郎さんに話を聞きました。

preview

わしの手によるサムシング

WF Inside Story

Facebookのファン数日本一を成し遂げた「TokyoOtakuMode」の魅力

1月25日に、日本人が運営するFacebookページで前人未到の1,000万人超えをした「TokyoOtakuMode」。海外向けに日本のオタクカルチャー情報を発信し、諸外国で大きな支持を得ています。現在は独自サイトも開設しての二本柱で、活動も多様になりつつありますが、その人気はどのようにして生み出されたものなのでしょうか。同サイトを運営するTokyo Otaku Mode Inc.の安宅基氏と石神暁氏にうかがいました。

preview

TokyoOtakuMode(Facebookページ)
TokyoOtakuMode(Webサイト)

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

川島明(麒麟)×シモダテツヤ(バーグハンバーグバーグ)

今回のコラボは、川島明(麒麟)×シモダテツヤ(バーグハンバーグバーグ)です。シモダさんは、お笑いポータルサイト「オモコロ」を立ち上げ、「バーグハンバーグバーグ」という会社を主宰しながら、次々と面白いコンテンツを仕掛けている方です。二人の「芸人」は、どんな面白いコンテンツを生み出してくれるのでしょうか。

preview

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

連載企画

Web Designing Lab.

CSS Lab._displayプロパティで表示を自在に操る
Text:葛西新平(コーディングファクトリー

preview

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

jQuery Lab._要素に動きを持たせたメインビジュアル
Text:林 豊太田智彬早瀬有花

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

Flash Lab._Adobe Scoutを利用して最適化を行う
Text:池田泰延

「最適化前」のサンプルデータを見る
「最適化後」のサンプルデータを見る
サンプルデータをダウンロードする

movement

YCAM10周年記念祭&ライゾマティクス新作インスタレーション展、今年もやります。六本木アートナイト、クリエイティブユニット「mokuva」初ツアー展覧会、文楽を最新技術で再現する「人間・人形 映写展」 ほか

Worldwide Creator's Archive

Chris Milk_エゴではない、最高峰の映像表現を追求する

preview

Chris Milk

WD Website Front

Form Follows Function 、SHIFTBRAIN Inc.、ELI、au FULL CONTROL TOKYO、FELISSIMO 500色の色えんぴつ、三菱自動車デリカ:D5 クリーンディーゼル、SCANNER、Find Your Way to OZ ほか

WD Website Front

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

one's view

普通というモンスター
Text:清水幹太
LINE POP - iTunes App Store
LINE POP - Google Play

同じパッケージでどこまで創造できる?
Text:小山田幸子
Help Remedies

preview

一目惚れの方程式
Text:大庭俊介
Facebook XL'perience by Heineken

オンライン聖地の作り方
Text:林智彦(nuuo
nicest place on the internet

モノサシに目印

自然と調和しない田舎暮らし
Text & Visual:長谷川踏太(tomato)

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

ディスプレイ広告に起承転結は不要
Text:オオタケンジ

AdSafe Semiannual Review(July 2012)

この仕事のカタチ

景気がよければなんでもできる?
Text:小泉森弥

Social Seeds

スマホから買い物を頼める「オンデマンド宅配サービス」
Text:野澤智朝(ニテンイチリュウ

Postmates
TaskRabbit
EXEC

モバイルサービス最前線

Zaim_「初心者の使い勝手」にこだわった家計簿アプリ

preview

Zaim

WD Reviews

Perfect Effects 4 Free

News Crawler

FITC2013レポート、JWSDA Web Solution Design Award 2012、DeNA コーポレートロゴを一新、LINEが1億ユーザーを突破、JAGDA賞はNerhol 田中義久氏らが受賞 ほか

ハギハラ総研

ソーシャルメディア接触時間がもっとも低い国、日本
Text:萩原雅之

IPSOS

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

Vol.17 連載BOT 化計画 第5回「引用の特訓」

連載BOT化計画、今回は引用だけで文章を作ります。BOT君、賢くなってきましたよ!

http://exonemo.com/wf/

まんがAC部活動日誌

第二十二回「謎の忍者現る!の巻」

今回のテーマは、クリエイターの仕事につきものの「失敗」。AC部が「失敗の極意」を教えます。あるのか、そんなもの?

AC部

その他

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

訂正

「来来!上海的創作現場」にて、誌面で紹介した内容に誤りがありました。以下のように訂正させていただきます。

P105 「制作事例」キャプション1行目
(誤)Weibo連動キャンペーンサイトの「99朝日超爽啤酒术」。
(正)Weibo連動キャンペーンサイトの「99种朝日超爽啤酒术」。

サンプルデータについて

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