Web Designing

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

cover

2012年4月号

定価 1,470円

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

特集・特別企画

スクロール芸でサイトがもっと楽しくなる。

−JavaScript、パララックス効果の仕掛けがもたらす新鮮な驚き−

最近、サイトをスクロールしてみると「お!?」と驚く演出を見かけることが多くないですか? この特集では、スクロールに連動したデザイン的な仕掛けを「スクロール芸」と命名し、事例を中心に、さまざまなスクロール芸を解き明かします。HTMLデザインにちょっと仕掛けを盛り込みたい人、JavaScriptをはじめてみたい人、「パララックス効果」という言葉にピンと来た人、そんなWebデザイナーの心をくすぐるサイトデザインの特集です!

  • 【あのスクロール芸を種明かし!】
    • Freestyle-Night_縦1万ピクセル、数百のレイヤーでパララックス・スクロール
    • Nike Better World_背景写真の切り替えとパララックスの相乗効果
    • Smart Design Association_画像二枚のレイヤーと回転で背景に遊び心を
    • 鎌倉近視老視クリニック_スクロールに応じたメニューや見出しを表示する
    • レッドドラゴン(星海社「最前線」)_スクロール連動で背景が横スライド
    • gF - Gak Sato_スクロールで文字が動き回るタイポグラフィ
    • humming by TURNER COLOUR SPICE_Flash製コマ撮り映像をスクロールで操作 ほか
  • 【GALLERY】最新・スクロール芸ギャラリー
  • 【TOOLS】スクロール芸のためのJavaScript必携ツール
  • 【COLUMN】萩原俊矢/スクロール芸は時間操作のインタラクションである
  • 【INTERVIEW】楽天の商品ページはなぜあんなに縦長なの?

previewpreview

掲載サイトリンク集

特集2:Webフォント百花繚乱

−CSSによるWebタイポグラフィ。欧文につづき和文書体でも花開く!-

昨年から今年にかけて、「FONT+」「TypeSquare」、そしてアマナイメージズの「WEBフォント」といった日本のWebフォントサービスが続々とオープンし、主要な和文フォントのほとんどが、Webフォントとして利用できるようになりました。また、スマートフォンの浸透などで需要の増えているHTMLサイトで文字がきれいに扱えるという面でも、Webフォントの注目は高まってきています。今後、日本でもWebフォントを使用したサイトデザインは多く行われるようになってくるでしょう。そこで、国内外の事例を参考に、Webフォント使いこなしのコツを紹介します。

  • 01_タイポグラフィを主軸にしたデザインで魅せる
  • 02_大きな文字をアクセントにした大胆なデザイン
  • 03_Webフォントでここまでデザイン性の高いサイトが実現できる
  • 04_オリジナルのWebフォントを使ってブランディング
  • 05_動的なテキストにWebフォントで表現の可能性を広げる
  • 06_日本語もWebフォントで読みやすく美しく
  • 主要な日本語Webフォントサービス紹介
  • 「ウェブフォントデザインアワード2011」結果発表

previewpreview

掲載サイトリンク集

【新著者登場】one's view

  • 林智彦_「日常を共有する」先の楽しみ

    preview

  • 谷口暁彦_gifアニメの桃源郷

    preview

WF Inside Story

−10段階の拡大表示でWebならではの作品観賞価値を生む−

アートユニットNerholは、練ったアイデアを本に彫るという独自の手法で、強烈な魅力を持つ作品を生み出しています。しかし、その良さは、サイトに写真を1枚載せるだけではなかなか伝わりづらいものです。サイトでは、この課題を10段階の拡大表示という鑑賞方法でクリアし、肉眼とは別の、Webならではの体験を提供しています。長年試行錯誤を重ねたというこのサイトについて、Nerholの田中義久氏、制作を手がけた田中良治氏と萩原俊矢氏に話をうかがいました。

preview

Nerhol

肖像 -Web Craftman's Portrait-

-左居穣/デモでさえ見る者を唸らせる、「演出」のマエストロ-

東京のメインストリームで活躍しながら、ほとんどメディアに登場してこなかった左居 穣氏。ここ数年、Web Designingの新着サイトコーナーでは、毎月と言っていいほど左居氏の名前がクレジットされています。そう、彼の仕事を見たことのない本誌読者はいないのです。そんな人物の制作哲学を探ってみましょう。

preview

minsak

デザインにできることDialogue

大日本タイポ組合×永原康史「意味とかたちが出合う文字」

大日本タイポ組合の作品には、いつも文字が潜んでいます。漢字のようでカタカナとして読める文字など、いつも見るものに驚きを与えてきました。まもなく結成20年、彼らが文字と歩んできた歴史と魅力に迫ります。

preview

大日本タイポ組合

【短期集中連載】Jump into Metro!

Windows PhoneでMetro UIの世界に飛び込む
HTMLコンテンツを利用しWindows Phoneアプリを開発しよう

今回は、手持ちのHTMLコンテンツを再利用して、Windows Phoneアプリケーションを開発する方法について解説します。今回の開発用にプロジェクトテンプレートも用意しています。

preview

プロジェクトテンプレートのダウンロード

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

−負け犬書道プロジェクト、いよいよ公開!−

昨年末にスタートした、チョコバナナプロジェクト第3弾企画。ロバート・山本博さんと、PARTYのクリエイティブディレクター・中村洋基さんのコンビによる「負け犬書道」のサイトが、いよいよ公開されました。予想外の大きなプロジェクトになったこのサイトについて紹介します!

preview

負け犬書道
チョコバナナ

エキソニモの「ウェブデフォにふれる」Vol.6

今回の誌面はエキソニモによるグラフィック! しかし、グラフィック作成で使ったデザインツールはなんと「PowerPoint」!? はたしてどんな誌面になったのか、その目でお確かめください!

preview

http://exonemo.com/wf/

まんがAC部活動日誌

第十一回「暑苦しい女っ気のない忙しい部室」

今回のテーマは、女性の美です。AC部は萌えも描けるんです! 描けているはずです……たぶん。

preview

AC部

連載企画

Web Designing Lab.

CSSLab._CSSによる3D表現の基本を知ろう
Text:秋葉秀樹

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

jQueryLab._実用的な機能を備えたカルーセルUI
Text:徳田和規谷拓樹長谷川広武

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

SmartphoneLab._少ないエリアで多くを見せる「隠すレイアウト」
Text:Coding Factory

「SECTION1」のサンプルデータを見る
「SECTION2」のサンプルデータを見る
「SECTION3」のサンプルデータを見る
サンプルデータをダウンロードする

FlashLab._クロスプラットフォーム対応のビデオ配信
Text:沖 良矢

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

Server Quick Reference

サーバOSの歴史とその種類
Text:井上聡

movement

600平米の写真ギャラリーで上田義彦の屋久島の森を見る「Materia」展、“原画の力”と“圧倒的なボリューム”で見せる大友克洋原画展、「IAMAS2012」で終わりと新たな出発を見た、工芸におけるジャポニスムの広がり「KATAGAMI Style」 ほか

preview

Worldwide Creator's Archive

Neubau/新しいアンカーポイントを求めつづけて

Neubau
Neubautonomy

WD Website Front

F IVE DOT ONE、Kyoto Cafe Style、UNDERCOVER、Google Music- Tour、あたらしい自由。| au、K-SYSTEM |masayuki kurokawa、NIKE RUN/いまより前へ ほか

WD Website Front

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

【新著者登場】one's view

「ハーフタイム・イン・ジャパン」
Text:清水幹太
Pelo

「「日常を共有する」先の楽しみ」 New!
Text:林智彦(nuuo
コピミズム伝道協会日本支部

「gifアニメの桃源郷」 New!
Text:谷口暁彦
gifpumper

「ワンクリックで体験できる、仲間との戦い」
Text:浦野大輔
FINAL FANTASY BRIGADE

モノサシに目印

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

ツクルヒト

竹内泰人(コマドリスト)/一コマ、一コマ歩くように踏みしめる

preview

無重力とサクロとドクロ
kirameki inc

Hop, Step, JavaScript! ~プログラムの基礎をイチから学習~

「変数」箱にしまった鉛筆とリンゴの数はいくつかな?

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

Social Seeds

セカンドスクリーンに新しい価値を提供する動きが活発に
Text:野澤智朝(ニテンイチリュウ

ConnecTV

この仕事のカタチ

知ってガッテン 建設業界とWeb業界の類似点
Text:小泉森弥

橘塾

自社サイトのFacebook ページは必要か
Text:橘守

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

Stulio:モバイル新規事業は技術者チームが作り出す

preview

Stulio

News Crawler

アドビ、Flash Player 2012年以降のロードマップを公開
フジテレビとYouTubeのプロジェクト「Japan in a Day」 ほか

WD Reviews

Adobe Photoshop Lightroom 4

ハギハラ総研

検索がインフルエンザ流行を予測する
Text:萩原雅之

その他

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

サンプルデータについて

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