Web Designing

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

cover

2011年2月号

特別定価 1,470円

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

特集・特別企画

特集1:CSSサイトをクールにするためのナビゲーション20

−技術やアイデアを駆使して一歩先の表現力を実現する−

Webサイトの構築において、ナビゲーションは重要な要素の一つです。情報設計やサイトの使い勝手という観点ではもちろんのこと、どのページにも表示されるものであるため、デザイン面にも大きく影響してきます。現在のCSSは、CSS3の浸透やJavaScript、HTML5と組み合わせることなどで、格段に表現力を広げてきました。そういった技術やアイデアを駆使することで、日頃の案件ですぐに取り入れられそうな応用力のあるものから、サイトに新鮮さや遊び心を大きく付与するクリエイティビティや実験性にあふれたものまで、さまざまなタイプのナビゲーションを紹介していきます。

  • ロールオーバーで背景がアニメーションするナビゲーション
  • ボタン内でHTML5 videoが流れるナビゲーション
  • マウスオーバー時にふわっと色が変わるメニューボタン
  • ロールオーバーでモノクロからカラーに変わるナビゲーション
  • 選択したメニュー以外のメニューをぼかす演出
  • Web Fontsでテキストのナビゲーションを引き立たせる
  • ネオンサイン風メニューにWeb Fontsのアイコンを組み合わせる
  • 複合的なテクニックの組み合わせでFlashのようなナビゲーション
  • ドロップダウンとアニメーションによる動きのあるナビゲーション
  • マルチレベル対応のドロップダウンメニュー
  • スライドアニメーションで表示・非表示を切り替えるメニュー
  • CSS3でアニメーション効果をつけたナビゲーションいろいろ
  • マウスオーバー時にツールチップの吹き出しを表示するメニュー
  • サブキャッチが出現する、画像を使わない付箋メニュー
  • 切り替え時にフェードインするタブメニュー
  • CSS3のみで作る、キービジュアルにも使えるスライドショー
  • アニメーションで表現するポップなナビゲーション
  • アニメーションするリングメニュー
  • JavaScript でランダムに設定する、遷移図などに使えるナビゲーション
  • スマートフォン用に最適化したナビゲーション

preview

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

特集2:みんなの見積もり大研究!

−Webサイト提案と見積もりに対する現状、徹底調査−

仕事にいくらの対価を付けるのか。「見積もり」の立て方に頭を悩ませている人も多いのではないでしょうか。高いか、安いかをどう判断するのか。正解はあってないようなもの。今回の特集では、見積もりをテーマに、講義あり、アンケートの分析あり、読者のインタビューありと、さまざまな角度から考えてみたいと思います。見積もりの「正解」を求めるというよりは、見積もりの「考え方」に触れてほしいと思います。

_見積もりはどうつくられるのか、いっしょに考えてみよう。
アンティー・ファクトリーの中川直樹さんの見積もりをテーマにした講義を実況中継!
_「この条件ならいくらで作りますか?」
Webデザイナー白書のアンケートの結果から「見積もり」の現況を探ります!
_見積もりの際によく使われるキーワードとは?
「ページ数」「相手」「ざっくり」などなど、頻出ワードで見積もりの現状が見えてくる!
_その金額の理由は何ですか?
Web制作者の見積もりの仕方はどうなっているのか。読者へのインタビューで、その実態に迫ります!
_橘さん、見積もり書ってどう書けばいいですか?
Web Designingのご意見番、「橘塾」の橘守さんが見積もりに喝!

preview

【OnClick】これがクリエイターの「年賀状」!

期間限定の見逃せないコンテンツが勢ぞろい

毎年、制作会社やクリエイターの方から届く年賀サイト・年賀状は、クライアントワークでは発揮できないような実験的なアイデアや、自由なクリエイティビティが詰め込まれた、ステキなものばかり。ですが、ほとんどが期間限定、そして大々的に制作実績として紹介されることもあまりありません。そこで、編集部に届いた年賀状の数々、話題のあの会社の年賀コンテンツなどなど、新年のご挨拶代わりに大公開!

preview

紹介事例リンク集

コラボプロジェクト「チョコバナナ」

Web Designingと吉本がまさかのコラボ、第1回イベント企画会議!

このたびWeb Designingで実現したのは、一流のWeb クリエイターとお笑い芸人が一緒にイベントを開催するというまさかのコラボレーション。名付けて「チョコバナナ」プロジェクト。記念すべき第一回イベント「千原ジュニア(千原兄弟)×川田十夢(AR三兄弟)」の企画会議の様子を、余すところなく誌面でお伝えします。

preview

チョコバナナプロジェクト by 吉D×WEB DESIGNING

デザインにできることDialogue

スプツニ子!×永原康史「ラディカルの枠を壊すファンタジー」

今回は、東京都現代美術館で開催中の展覧会「東京アートミーティング トランスフォーメーション」に作品を出展中のスプツニ子!さんをゲストに迎える。対談中は、アートの話はほぼないまま、永原康史氏とデザインの話が繰り広げられ、作曲も数学もプログラムもこなす彼女のデザイナーとしての一面に迫ることができたようだ。

preview

Sptniko!

言葉のデザイン 2010 パブリッシング プロジェクト

岡部務(日本放送協会)×中村勇吾(tha)「運動する文字、反応する文字」

preview

WD Website Front_In-Depth Report

ブラウザを通して参加・体験できる新型ミュージックビデオ「映し鏡」

preview

SOUR / MIRROR

連載企画

Web Designing Lab.

CSSLab._リンク要素に+α情報を上手に追加する
Text:高橋のり(Webデザインレシピ

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

FlashLab._コンテキストメニューのカスタマイズ
Text:沖良矢(世路庵

サンプルデータ「section2」を見る
サンプルデータ「section3」を見る
サンプルデータをダウンロードする

GraphicLab._数学的なパーツを使ったデザイン
Text:長谷川アンナ

preview

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

サーバクイックリファレンス

CMSツール導入を前提としたサーバ選びのポイント
Text:井上聡

movement

IS Paradeが大賞に!文化庁メディア芸術祭、新しいアートフェア
「TOKYO FRONTLINE」、新たな表現を求める「立体視」がテーマの展覧会 ほか
今月のアーティスト/RYOONO

エキソニモのView-Source

江渡浩一郎と2010年
Text & Visual:エキソニモ

preview

Worldwide Creator's Archive

ATTIK/屋根裏部屋から世界へ、25年の歩み

ATTIK

WD Website Front

The New York Times、2014年千原ジュニア40歳、マーブル、UNIQLO LUCKY LINE In China、ハイブリッド刑事 ほか

WD Website Front

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

one's view

「動体検知と、Webという土俵と」
Text:長井健一(ワン・トゥー・テン・デザイン
Swedish Armed Forces

「ミュージックビデオ& iPhone アプリで流通」
Text:川村真司
CASSIUS - I <3 U SO
Cassius - I Love U So (Official Video)

「人を動かす仕事」
Text:高田優子
ミューぽん

「コミュニケーションの原則は変わらない」
Text:杉政英樹(カヤック
My Starbucks Idea

モノサシに目印


Text & Visual:長谷川踏太(tomato)

ツクルヒト

児玉幸子(メディアアーティスト)_命を探るパラレルな視線

児玉幸子 Online Portfolio
Sachiko Kodama

モバイルコンテンツ最前線

「まちのお米屋さん」の絆作りのためのモバイルサイト
Text:中谷健一(トリムタブジャパン

石川商店(PCサイト)
石川商店モバイルサイト

preview

ハギハラ総研

本当は面白い検索ランキング
Text:萩原雅之

この仕事のカタチ

見積もりに積もる「差」

Web Standards Plus

フォームの装飾を可能にするappearance プロパティ
Text:矢倉眞隆(ミツエーリンクス

Customizing web forms with CSS3 and WebKit
サンプルデータをダウンロードする

my first IA

UXフローを考えるのはクライアントかデザイン会社か
Text:長谷川敦士(コンセント

橘塾

Web制作会社に必要なスキルセット
Text:橘守

Flash Dance with iPhone

最新事例から定番事例まで、PFI製アプリを一挙紹介
Text:川崎有亮

preview

DanboPush
Multi Timer
スペアロイドLite
kulock
モアイまわし

Social Seeds

「キュレーション」機能を備えたファッションサイトへの新たなニーズ
Text:野澤智朝(ニテンイチリュウ

BOUTIQUES.com
ModCloth
POLYVORE

WD Reviews

Coda 1.7

News Crawler

IPA、「サービス妨害攻撃の対策等調査」報告書を公開
「Amazon Appstore」発表、開発者登録を受付中 ほか

その他

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

お詫びと訂正

2011年2月号「【OnClick】これがクリエイターの「年賀状」!」にて、誌面で紹介した内容に誤りがありました。お詫びするとともに、以下の通りに訂正させていただきます。

「マトリョーシカ×コラール = マトリョラール」紹介記事内
(誤)AID-DCC Inc. / katamari Inc.
(正)AID-DCC Inc. / Katamari Inc.

面白法人カヤック「お年賀プロジェクト2011」紹介記事内の画像が現在リリースされているものと異なります。
(iPhoneアプリ自体はバージョンアップ時に改編されています)
(誤)ダイアモンド富士
(正)ダイヤモンド富士

2010年11月号(Vol.112)から2011年2月号(Vol.115)にかけて、「ホスティングサービスインデックス」に掲載したKDDIウェブコミュニケーションズ(CPI)の「マネージドプラン」において月額費用に誤りがございました。正しい金額は、以下の表のようになります。ご迷惑をおかけしましたことを深くお詫び申し上げます。

/wd/2011/02-12

サンプルデータについて

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