Web Designing

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

cover

2014年9月号 vol.158

定価1,530円

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

特集・特別企画

特集1:コピペで使えるCSS/JavaScriptによるUI表現

今スグ使える超実践的ショートコードサンプルコレクション

制作を進めていると、何度も同じような表現やパーツを作っていないでしょうか。本特集では、CSS/JavaScriptによる短いコードで実装した「最近よく使われている」「パーツとして導入可能な」UI 表現を集めました。そのままコピペすれば実装できますが、カスタマイズのポイントも解説しているので、案件やシチュエーションに合わせて組み込みこともできます。すべてのサンプルはダウンロードできるので、使いまわししやすいパーツの作り方、汎用性のあるコードの書き方など、実装の引き出しを増やすスクラップブックとして活用してください。

[Button]
アニメーションするLikeボタン
ぴょこっと動いて誘導するページトップボタン
テキストリンクをボタンにする汎用的スタイル
マウスオーバーでフェードする画像ボタン
[Navigation]
シンプルな「ハンバーガーボタン」ナビゲーション
スマホアプリライクなスライドナビゲーション
ドアを開くように展開するナビゲーション
遠近法を利用した動きのナビゲーション
アニメーションしながら変化するハンバーガーボタン
[Menu]
HTMLだけで追加・削除が可能なタブメニュー
ステップアップインジケータ付きタブメニュー
スクロールでスライドインする固定メニュー
クリックでスルッと降りてくるメニュー
CSSで実装したレスポンシブなタブメニュー
スクロール後、上部に固定表示されるグローバルメニュー
ベーシックなヘッダメニュー部分のひな形
[Column]仕組みを理解すれば応用も簡単! 今スグ使えるSVGフィルタ
[Layout]
グリッドに変化をつけた「ひし形レイアウト」
きれいにフロートする「画像+キャプション」
テキストでも画像でも、親要素の中央に絶対配置
ブロック要素をウインドウの中央に配置する
[Text]
ふんわり表示する吹き出し風ツールチップ
軽くて簡単、さまざまな実装が可能なツールチップ
CSSで実現するドロップキャップ
Google Fontsの便利な小技「エフェクト」
一文字ずつパタパタとアニメーション
select要素の機能を損なわずにCSSのみで装飾
[Column]画像じゃなくてもいろいろできる、CSSで作る背景パターン
[Fade]
スクロールに合わせてコンテンツをフェードイン表示
画面全体をフェードイン表示
[Google]
Googleマップをカスタマイズする
YouTube動画をレスポンシブで埋め込む
[ETC]
レスポンシブ対応モーダルウインドウ
使い回しが利く、シンプルなアコーディオン
連番を自動で数えて美しく表示する汎用スタイル
リンク先の内容に応じて、自動でアイコンを付加
レスポンシブ対応カルーセル
ローディング画像だけじゃないオープニング演出
[Column]Backbone.jsで作るシングルページアプリケーション

previewpreviewpreview

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

特集2:あの名門プロダクションのWebデザイン

Web制作会社とはひと味ちがう創作の現場

多くのWebデザイナーが日々、アイデアを絞って制作にはげむWeb制作の現場。でも、ふと気になりませんか? あの大物デザイナーがいるデザイン会社や、TVCMで有名なあの映像制作会社、広告業界を牽引してきたあの会社はWeb制作をしていないのでしょうか? いえいえ、そんなことはありません。あの名門プロダクションのWeb部門には、Web制作会社とはひと味違う制作の現場がありました。

Interview
アクシス_生活とWebはもっと密接になっていく
サン・アド_もう一方の正解を探して
日本デザインセンター_オンスクリーンコミュニケーションの行方
株式会社ロボット_軸足はいつもエンターテイメント
Column
名門プロダクションだから、Web制作会社じゃないからの‥‥困った!

previewpreviewpreview

月刊 店舗設計 New!

ECサイトの快適な運営と個性を両立させるデザイン

ネットショップの運営や世界観の作り方などを学ぶべく、個性的なショップにこだわりを聞く3カ月の短期集中連載です。初回は、東京・渋谷の裏道にたたずむ、横田茂さんと愛さんご夫婦で営んでいる洋菓子とコーヒーの店「Afterhours(アフターアワーズ)」におうかがいしました。茂さんはWebクリエイターとしても活動していて、ネットショップ制作の案件では、同店のサイト運営で得た経験やノウハウが役立っているといいます。Webクリエイターと店主両方の視点を持つからこそわかる、快適なネットショップ運営のポイントについて聞きました。

preview

Afterhours

Inside Story拡大企画

Pepper_開発者の新しいプラットフォームとなる世界初の感情認識ロボット

6月にソフトバンクモバイルから発表され、話題を集めているロボット「Pepper(ペッパー)」。AI(人工知能)をクラウド上に置き、多くのセンサーやカメラを搭載することで、世界初の感情認識を実現するといった先進的な機能を備え、来年2月には20万円を切る価格で市販されるといいます。本誌読者にとって何よりも興味深いのは、このPepperにGUIベースの開発環境が用意され、開発者登録をすることでさまざまなアプリをリリースできるということではないでしょうか。これまでWebやアプリ、ゲームコンテンツを開発してきたクリエイターにとって、まったく新しいプラットフォームが登場したと言えます。そんなPepperの特徴やアプリでできることについて、開発チームの面々に話を聞きました。

preview

Pepper

肖像 -Web Craftman's Portrait-

宗佳広(ココノヱ)_岡山で輝く、独創的アイデアの源泉

地元岡山はもちろん、関西や関東にも活躍の場を広げるココノヱ。岡山に本拠を構え、ココノヱという屋号を掲げ、独創的なデザインやオリジナルのスキャンシステムを開発する要因=宗佳広の原点は、子ども時代にありました。

preview

ココノヱ

ツクルヒト

石川直樹(写真家)_秘境は体感の中にある。旅と写真と発見の関係

北極から南極を人力で横断し、またマッキンリーからエベレストまで、当時の世界最年少=23歳で七大陸最高峰登頂を達成した石川直樹。しかし彼は早くから「ぼくは冒険家ではない」と明言していました。求めるのは人類未踏の地の征でも、そこから得られる栄誉やスリルでもありません。少年時代に開眼した、旅と写真によるこの世界の自分なりの「発見」なのです。このシンプルな衝動に突き動かされる彼の表現は、自らの実体験で新たな世界地図を描く営みでもあります。

preview

石川直樹

工作のじかん

Google Glassのアプリをつくろう

その登場以来話題を呼び、いよいよ日本での発売が近いと見られているGoogleのウェアラブルデバイス「Google Glass」。これをいかに活用するかはアプリ次第。Webアプリ制作やJavaの知識を活かしてGoogle Glass用アプリを作ってみよう。

preview

Google Glass

Monthly Focus

BiND Cloud[前編]_あのWebオーサリングツール「BiND」が完全クラウド化!

デジタルステージがリリースするWebオーサリングソフトウェア「BiND for WebLiFE*」が、新たにクラウドサービスとして登場しました。前編となる今回は、用意されている3つのコースから、初年度の無償利用が可能なエントリーコースでできることを中心に検証しました。

preview

BiND Cloud

基礎講座JavaScript

画像のプリロードで一歩上の表現を

Text:小平麻美、木村壮哉(エンタクルグラフィックス

preview

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

応用講座Flash for HTML5

サウンドを使ったコンテンツを制作してみよう

Text:沖 良矢

preview

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

連載企画

movement

CMで話題のスケルトニクスの製作工房を再現する「外骨格秘密基地」展、 アートではない折り紙を紹介する「紙とテクノロジー 折り紙の呼吸」、若手クリエイター集団の展示「unframe」第2弾、第18回文化庁メディア芸術祭審査委員が激白!「私たちはこんな作品を待っている」 ほか

チョコバナナ企画会議

COWCOW×石田行言(trippiece)

チョコバナナ

WD Monthly Archive

Webサイトだけではなく、アプリやサイネージなど、編集部が注目した新着デジタルコンテンツを掲載しています。

VAIO、PAPER FASHION Kids |ペーパーファッションキッズ、Tokyo Mild Foundation、STAND BY ME ドラえもん × グリコ 動くぬりえ、BIC - Universal Typeface Experiment、These Final Hours、paintone、OPEN STUDIO 2014、SISMO DESIGN、ISSEY MIYAKE AUTUMN WINTER 2014“Ring Pleats”、Being the Bear、glacéau smartwater: look up、MUJI to Sleep、Murat、JAPANESE FACE、グラノーラ専門店「GANORI」公式サイト、Seven Digital Deadly Sins、京都大学デザインスクール

preview

WD Website Front

今月の掲載コンテンツのリンク集へ

Worldwide Creator's Archive

Vincent Morisset_ビジョンとインプットを両立する

Vincent Morisset

one's view

フィジカルの壁をぶち壊す
Text:清水幹太(パーティ
Cardboard

ブランドサイトが果たす役割
Text:北村 健
SERGE THORAVAL

情報をポップに、部屋に一輪の花を飾るみたいに。
Text:川田十夢
Pop Chart Lab

別れ話
Text:菅野 薫
Kombi Last Wishes

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

第3回 詩っぴつ中.gif

preview

shikuhack.jp

トリセツWeb化計画

第4回 メーカーの事例にトリセツのWeb化を学ぶ
宮下知起(ナレッジオンデマンド

トリセツWeb化計画

ツール・ド・グラフィーク

第18回 月
Text&collage:河村康輔

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

これからの生き方と暮らし方をつくり、伝えるライフクリエイターとは?
Text:須賀大介

この仕事のカタチ

スマホがくれたメモリー
Text:小泉森弥

モバイルサービス最前線

O:der_世界最先端のモバイル活用事例。知見を集積させたO2Oシステム
Text:中谷健一(トリムタブジャパン

preview

O:der

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

たかがシェアボタン、されどシェアボタン
Text:オオタケンジ

AddThis

ハギハラ総研

セキュリティが甘い日本のスマートフォンユーザー
Text:萩原雅之

EMC プライバシー インデックス

News Crawler

トップクリエイターが教えるクリエイティブの学校「BAPA」一期生30名の卒業制作展開催/「Maker Faire Tokyo 2014」参加者・スポンサード募集開始/ピクトグラムの技とアイデアを競うPictathon開催 ほか

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

Vol.35 連載ボーグ・シリーズ EP.15「仮想世界と物語」

@KeigoTheBot

まんがAC部活動日誌

第四十回 パクリをサイエンス

AC部

その他

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

サンプルデータについて

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