Web Designing

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

cover

2014年7月号 vol.156

定価1,530円

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

特集・特別企画

特集1:海外サイトのパーツ図鑑

HTML5時代のマップからスクロールナビまで!

熟考されたUI 、あっと言わせるような演出、最新技術を用いた表現など、Webデザインの“ 見せどころ”はいろいろありますが、忘れてはならないのは、ほんの些細なアイデアや工夫がサイト全体の印象を左右するということ。「このメニューを使ってみたい! 」「こんなファビコンもあるのか‥‥」など、ちょっとしたデザインに心を動かされることも多いはず。この特集では、サイトのデザインを彩る細やかな表現を海外サイトからパーツごとに厳選しました。デザインが浮かばない、なにかもの足りない‥‥などと頭を抱えているあなた。まずはパラパラとページをめくってみてください。頭の中でなにかがひらめく瞬間が訪れるはずです。

ナビゲーション_サイトの目次は全体の印象を決める。スマートフォン版と合わせて
ローディング画面_“楽しく”あるいは“有効”に過ごしてもらうための見せどころ
サムネイル_ただ並べるだけではつまらない。一歩先行く見せ方へ
ヘッダ_拡大・縮小、フィクス型・フロー型。“いま”がわかるさまざまなデザイン
フッタ_飽きさせないための遊び心で“らしさ”を表現
Googleマップ_カスタマイズが印象づける、サイト全体のクオリティ
表・グラフ_デザインの幅はアイデア次第。データや数をより豊かに伝える
タイポグラフィ_手描き、Webフォントなどでインパクトやアクセントを
スクロールナビゲーション_アイコン、数字、イラストなどでスクロールを楽しく
スクロールアイコン_少ないモチーフをバリエーションのあるデザインで
ムービー_演出からカスタマイズまで、ムービーまわりの創意工夫
ショッピングカート_カートとアイコンこそがオリジナリティを演出する
ファビコン_タイポ、イラスト、アニメーション。多くのアイデアはファビコンにあり
Visual Story 01_Canvas
Visual Story 02_SVG

previewpreviewpreviewpreview

掲載サイトリンク集

特集2:資格のカシコイ使い方

スキル向上やキャリアアップに、社員研修や勉強会に

Web制作にまつわる資格は、実は驚くほどたくさんの数があるのです。Webデザイナー向け、ディレクター向け、プロデューサー向け、はたまた初心者に向けたものにベテラン向け、技術よりの検定からビジネス色の強いもの、さらにはWebの技能を認定する国家資格もあります。ここまで幅が広いと、あなたに必要となりそうなものはもちろん、仕事上の相棒に合いそうなものから、この業界に入ったばかりの新人さんに受けさせたいものまで、ありとあらゆるターゲットに向けた資格があるといえます。キャリアアップに、個性の確立に、社員研修に。それぞれの目的に合った資格を活用してみませんか?

「資格なんて」と思ったあなたへ。
あなたに合った資格はどれだ?! Web制作者向け資格一覧
要注目。Webデザインの「国家資格」の中身とは?
Web制作者の新常識「HTML5」を資格で学ぶ
実践的? 気になる「ディレクション」検定の中身
「Webデザイン系」資格でWeb制作者としての下地作りを
これからの注目株「 マーケティング系」検定試験
こんな資格にも注目!
総合力を高める資格いろいろ

previewpreviewpreview

【Focus On】クライアントに信頼されるクリエイティブディレクターになるには

artlessの川上俊氏が明かす5つのブランディングメソッド

5月11日、プロのデザイナーやコンテンツクリエイターを育成する「東京デザインプレックス研究所」で、artlessの川上俊氏による講義&ワークショップが開催されました。そこで語られたのは、多くの企業のブランディングを手がける川上氏が行っている5つのメソッド。トップクリエイターは、普段どのような手順でアイデアを出し、結実させているのでしょうか。その貴重なレポートをお届けします。

preview

artless
東京デザインプレックス研究所
SHOJI UCHIDA
Open Reel EnsembleCD特設サイト

チョコバナナ企画会議

番外編 よしもと佐藤の「シリコンバレー探訪記!」

ベンチャーとよしもと芸人のコラボ企画としてはじまったチョコバナナの第2弾。今回のコラボは‥‥とお伝えしたいところですが、いきなり番外編からスタートです。よしもと佐藤が急遽米国サンフランシスコのシリコンバレーを訪問したので、そのレポートをお伝えします。それにしてもなぜ、イラストなのか‥‥。

preview

チョコバナナ

WF Inside Story

博報堂アイ・スタジオ新卒採用サイト_就活生の心を惹きつけたGIFアニメ多用の予測不能の表現

デジタルクリエイティブ制作会社の博報堂アイ・スタジオが公開した2015年度の新卒採用サイトは、GIFアニメを多用した、およそ企業の採用サイトとは思えないデザインになっています。「未来、予測不能。」をテーマに、実用性やユーザビリティよりもコンセプトや遊び心に重き置いて制作されました。その結果、前年よりもエントリー数、応募数ともに増加したといいます。就活生の心を捉えたサイトの魅力に迫るべく、制作チームに話をうかがうことにしました。

preview

未来、予測不能。 HAKUHODO I-STUDIO RECRUIT 2015

肖像 -Web Craftman's Portrait-

阿部洋介(tha ltd.)_Web、映像、雑誌‥‥三面六臂なクリエイティブの軸

今回取り上げる阿部洋介は、Webデザイナー、映像作家、そして紙媒体のアートディレクターと、多方面の顔を持っています。しかし、それは、彼が求める表現のひとつの手段でしかないのです。阿部氏の制作物の中心にあるものは、いつも変わりません。では、その表現の核となるものとは、いったいなんなのでしょうか。

preview

tha ltd.

最果タヒの「詩句ハック」 New!

第1回「わた詩」

詩人である最果タヒが、四苦八苦しながら、Webのテクノロジーを使って詩を「ハック」していく連載が始まります。

preview

shikuhack.jp

工作のじかん New!

Galileoでパノラマ写真を撮ろう

世界で注目され、これからのトレンドになるであろうガジェットやアプリを取りげ、それを使ってオリジナルコンテンツやアプリが作ってみようという新連載です。第1回目は、スマートフォンを上下左右360°傾けて写真が映像を撮影できる"自動雲台"「Galileo(ガリレオ)」を使って、パノラマ写真の自動作成してみましょう。

preview

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

ツクルヒト&ツール・ド・グラフィーク

河村康輔(コラージュアーティスト)_「切った貼った」の美学に潜む無意識の創造力

今回の「ツクルヒト」は、本誌連載「ツール・ド・グラフィーク」でおなじみの河村康輔をフィーチャーする特別版! まったくの独学からコラージュ表現の密林に分け入り、我が道をゆきながら、田名網敬一や大友克洋らともコラボを重ねる、異才に迫ります。誰もがコンピュータに慣れ親しんだ現代において、カット&ペーストという行為はどこかお気軽&便利で、ともすれば軽薄な印象(たとえば「コピペ文化」)さえ漂っています。けれども、この行為の奥底に棲む創造性を呼び覚ませるクリエイターもいることを、彼の作品は教えてくれるのです。

preview

Kosuke Kawamura

連載企画

Web Designing Lab.

JavaScript Lab._ローテーションバナーを作成してみよう
Text:小平麻美、木村壮哉(エンタクルグラフィックス

サンプル01を見る
サンプル02を見る
サンプル03を見る
サンプル04を見る
サンプル05を見る
サンプルデータをダウンロードする

Flash Lab._[HTML5オーサリング編]アニメーションと連動する時計を作ろう
Text:沖 良矢

preview

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

movement

ICC恒例!最新メディアアートの代表作を無料公開、巨大な「地球ディスプレイ」に投影するコンテンツを募集中!、日本初公開の「キネティック・アート(動く芸術)」展、風景の中に点在する光が不思議な世界を創出する佐藤時啓の写真表現 ほか

Worldwide Creator's Archive

BETC_一人ひとりの「あなた」に届ける

BETC

WD Website Front

Lunar Dream Messenger、Active Theory、Ora2すていんばとるん、saito kenji、Letters Inc.、株式会社ココノヱ、ARCHETYPE、宇宙兄弟展 ほか

WD Website Front

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

one's view

「何となく」の結晶体
Text:清水幹太(パーティ
Conductar: Moogfest

時代に即したデザイン
Text:北村 健
DesignCouncil

Windowsのエラー画面から、アイテムを着想する。
Text:川田十夢
chloma 2014-15 A/W collection“ Virtual Showroom”

毒はどこにあるのか。
Text:菅野 薫
Stop Webcam Child Sex Tourism!

Monthly Focus

テキストエディタ「Sublime Text」[後編]

preview

Sublime Text

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

モノづくりDNA×ITで生み出す、起業家創発基地
Text:須賀大介

この仕事のカタチ

時代がかわれば野心も変わる!?
Text:小泉森弥

News Crawler

世界のクリエイターを唸らせた!「Sound of Honda/Ayrton Senna 1989」に国内外から賞賛の声/「One Show」で日本作品が33本受賞、インタラクティブ部門では3作品がゴールドを獲得 ほか

モバイルサービス最前線

bento.jp_ブルーオーシャン戦略を支えるスマホアプリによる価値創造
Text:中谷健一(トリムタブジャパン

bento.jp

トリセツWeb化計画

第2回 Webトリセツの課題をさぐる

preview

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

ほにゃららマーケティング!?
Text:オオタケンジ

ハギハラ総研

テレビ番組も録画からストリーミングへ
Text:萩原雅之

IPSOS(2014年4月22日のリリースより)

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

Vol.33 連載ボーグ・シリーズ EP.13「自動運転」

@KeigoTheBot

まんがAC部活動日誌

第三十八回 「お金の話」

AC部

その他

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

サンプルデータについて

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