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で作るシングルページアプリケーション
特集2:あの名門プロダクションのWebデザイン
Web制作会社とはひと味ちがう創作の現場
多くのWebデザイナーが日々、アイデアを絞って制作にはげむWeb制作の現場。でも、ふと気になりませんか? あの大物デザイナーがいるデザイン会社や、TVCMで有名なあの映像制作会社、広告業界を牽引してきたあの会社はWeb制作をしていないのでしょうか? いえいえ、そんなことはありません。あの名門プロダクションのWeb部門には、Web制作会社とはひと味違う制作の現場がありました。
- Interview
- アクシス_生活とWebはもっと密接になっていく
- サン・アド_もう一方の正解を探して
- 日本デザインセンター_オンスクリーンコミュニケーションの行方
- 株式会社ロボット_軸足はいつもエンターテイメント
- Column
- 名門プロダクションだから、Web制作会社じゃないからの‥‥困った!
月刊 店舗設計 New!
ECサイトの快適な運営と個性を両立させるデザイン
ネットショップの運営や世界観の作り方などを学ぶべく、個性的なショップにこだわりを聞く3カ月の短期集中連載です。初回は、東京・渋谷の裏道にたたずむ、横田茂さんと愛さんご夫婦で営んでいる洋菓子とコーヒーの店「Afterhours(アフターアワーズ)」におうかがいしました。茂さんはWebクリエイターとしても活動していて、ネットショップ制作の案件では、同店のサイト運営で得た経験やノウハウが役立っているといいます。Webクリエイターと店主両方の視点を持つからこそわかる、快適なネットショップ運営のポイントについて聞きました。
Inside Story拡大企画
Pepper_開発者の新しいプラットフォームとなる世界初の感情認識ロボット
6月にソフトバンクモバイルから発表され、話題を集めているロボット「Pepper(ペッパー)」。AI(人工知能)をクラウド上に置き、多くのセンサーやカメラを搭載することで、世界初の感情認識を実現するといった先進的な機能を備え、来年2月には20万円を切る価格で市販されるといいます。本誌読者にとって何よりも興味深いのは、このPepperにGUIベースの開発環境が用意され、開発者登録をすることでさまざまなアプリをリリースできるということではないでしょうか。これまでWebやアプリ、ゲームコンテンツを開発してきたクリエイターにとって、まったく新しいプラットフォームが登場したと言えます。そんなPepperの特徴やアプリでできることについて、開発チームの面々に話を聞きました。
肖像 -Web Craftman's Portrait-
宗佳広(ココノヱ)_岡山で輝く、独創的アイデアの源泉
地元岡山はもちろん、関西や関東にも活躍の場を広げるココノヱ。岡山に本拠を構え、ココノヱという屋号を掲げ、独創的なデザインやオリジナルのスキャンシステムを開発する要因=宗佳広の原点は、子ども時代にありました。
ツクルヒト
石川直樹(写真家)_秘境は体感の中にある。旅と写真と発見の関係
北極から南極を人力で横断し、またマッキンリーからエベレストまで、当時の世界最年少=23歳で七大陸最高峰登頂を達成した石川直樹。しかし彼は早くから「ぼくは冒険家ではない」と明言していました。求めるのは人類未踏の地の征でも、そこから得られる栄誉やスリルでもありません。少年時代に開眼した、旅と写真によるこの世界の自分なりの「発見」なのです。このシンプルな衝動に突き動かされる彼の表現は、自らの実体験で新たな世界地図を描く営みでもあります。
工作のじかん
Google Glassのアプリをつくろう
その登場以来話題を呼び、いよいよ日本での発売が近いと見られているGoogleのウェアラブルデバイス「Google Glass」。これをいかに活用するかはアプリ次第。Webアプリ制作やJavaの知識を活かしてGoogle Glass用アプリを作ってみよう。
Monthly Focus
BiND Cloud[前編]_あのWebオーサリングツール「BiND」が完全クラウド化!
デジタルステージがリリースするWebオーサリングソフトウェア「BiND for WebLiFE*」が、新たにクラウドサービスとして登場しました。前編となる今回は、用意されている3つのコースから、初年度の無償利用が可能なエントリーコースでできることを中心に検証しました。
基礎講座JavaScript
画像のプリロードで一歩上の表現を
Text:小平麻美、木村壮哉(エンタクルグラフィックス)
サンプル01を見る
サンプル02を見る
サンプル03を見る
サンプル04を見る
サンプル05を見る
サンプル06を見る
サンプルデータをダウンロードする
応用講座Flash for HTML5
サウンドを使ったコンテンツを制作してみよう
Text:沖 良矢
連載企画
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、京都大学デザインスクール
Worldwide Creator's Archive
Vincent Morisset_ビジョンとインプットを両立する
one's view
フィジカルの壁をぶち壊す
Text:清水幹太(パーティ)
Cardboard
ブランドサイトが果たす役割
Text:北村 健
SERGE THORAVAL
情報をポップに、部屋に一輪の花を飾るみたいに。
Text:川田十夢
Pop Chart Lab
別れ話
Text:菅野 薫
Kombi Last Wishes
最果タヒの「詩句ハック」
第3回 詩っぴつ中.gif
トリセツWeb化計画
第4回 メーカーの事例にトリセツのWeb化を学ぶ
宮下知起(ナレッジオンデマンド)
ツール・ド・グラフィーク
第18回 月
Text&collage:河村康輔
ローカルクリエイティブのススメ
これからの生き方と暮らし方をつくり、伝えるライフクリエイターとは?
Text:須賀大介
この仕事のカタチ
スマホがくれたメモリー
Text:小泉森弥
モバイルサービス最前線
O:der_世界最先端のモバイル活用事例。知見を集積させたO2Oシステム
Text:中谷健一(トリムタブジャパン)
デジタルマーケティングのひみつ
たかがシェアボタン、されどシェアボタン
Text:オオタケンジ
ハギハラ総研
セキュリティが甘い日本のスマートフォンユーザー
Text:萩原雅之
News Crawler
トップクリエイターが教えるクリエイティブの学校「BAPA」一期生30名の卒業制作展開催/「Maker Faire Tokyo 2014」参加者・スポンサード募集開始/ピクトグラムの技とアイデアを競うPictathon開催 ほか
エキソニモの「ウェブにふれる」
Vol.35 連載ボーグ・シリーズ EP.15「仮想世界と物語」
まんがAC部活動日誌
第四十回 パクリをサイエンス
その他
全国Web制作会社リスト
モニター&プレゼント
WD Square
Back Numbers
サンプルデータについて
- サンプルデータのダウンロードには、本誌の次号予告ページ(160ページ)に掲載しているIDとパスワードが必要です。
- 各サンプルデータの著作権は、各データの作者に帰属します。
- サンプルデータをご利用の際の利用条件や連絡先などについては、圧縮データに同梱しているテキスト「readme.txt」をご覧ください。
- 各サンプルデータの内容に関しては間違いのないように十分注意しておりますが、もしこれらのデータを利用することによってトラブルや損失・損害が発生しても、各データの作者および(株)マイナビは一切責任を負いませんのでご了承ください。