Submit Search
Upload
Html5インタラクティブデザイン
•
Download as PPT, PDF
•
2 likes
•
2,512 views
Maho Inada
Follow
Report
Share
Report
Share
1 of 13
Download now
Recommended
作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
Makiko M
・なぜポートフォリオを作ったのか? ・実際の制作の流れ ・レビューをしてもらった ・デザイン編 ・コード(HTML)編 ・コード(CSS)編 まとめ
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
10/12 WordBench神戸 WordPressの学習方法
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
マテリアルデザインの基本的なポイントをまとめた資料です。 Wordbench京都のセッションで使用しました。
SEO x UX ユーザー心理によるコンテンツプランニング
SEO x UX ユーザー心理によるコンテンツプランニング
Yoshiki Hayama
2013年12月13日(金) The 9th In-house SEO Meetup でのLT資料です。
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
レスポンシブWebデザイン(以下RWD)は、スマートフォンやタブレット、PCなどあらゆるデバイスに対応できる魅力的な手法です。しかし、安易にRWDを選択することは、弊害を産むこともあり、また実装者の負担を倍増させる危険があります。まず作る前に何を持って判断するか、負担を減らすにはどうするかについて発表させていただきます。
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
Yuki Ito
170615 Eyes, JAPAN Web Developers Meeting
働き方のプロトタイピング
働き方のプロトタイピング
力也 伊原
2016年7月24日に開催されたイベント「Adobe Design Jimoto Vol.2 in 渋谷」のトークセッションで使用したスライドです。
Recommended
作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
Makiko M
・なぜポートフォリオを作ったのか? ・実際の制作の流れ ・レビューをしてもらった ・デザイン編 ・コード(HTML)編 ・コード(CSS)編 まとめ
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
10/12 WordBench神戸 WordPressの学習方法
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
マテリアルデザインの基本的なポイントをまとめた資料です。 Wordbench京都のセッションで使用しました。
SEO x UX ユーザー心理によるコンテンツプランニング
SEO x UX ユーザー心理によるコンテンツプランニング
Yoshiki Hayama
2013年12月13日(金) The 9th In-house SEO Meetup でのLT資料です。
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
2016年5月13日 CodeGrid 四周年記念パーティーでの「ヒューマンリーダブルな CSS 記述法(異次元編、α版)」の資料です。大規模な運用でも、CSSをヒューマンリーダブルに保つ方法について、その試みを提案しました。スライド中のデモは https://github.com/storywriter/HRCSS で公開しています。
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
レスポンシブWebデザイン(以下RWD)は、スマートフォンやタブレット、PCなどあらゆるデバイスに対応できる魅力的な手法です。しかし、安易にRWDを選択することは、弊害を産むこともあり、また実装者の負担を倍増させる危険があります。まず作る前に何を持って判断するか、負担を減らすにはどうするかについて発表させていただきます。
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
Yuki Ito
170615 Eyes, JAPAN Web Developers Meeting
働き方のプロトタイピング
働き方のプロトタイピング
力也 伊原
2016年7月24日に開催されたイベント「Adobe Design Jimoto Vol.2 in 渋谷」のトークセッションで使用したスライドです。
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
グリッドレイアウトをMasonry.jsを使って実施してみました。 高さの違うアイテムを自動的に再配置して、グリッドレイアウトしてくるJavaScriptライブラリです。 また、スマートフォンデバイス、タブレットデバイスなどにも自動でレイアウトが行われるので非常に配置がしやすいです。 BootsStrapで組み合わせると非常に早く、高機能なレイアウトが作成できます。 Masonryのどのあたりが便利なのかに重点をおいて説明してみました。 Webページでのスライドは以下になります。 http://ticklecode.com/present/140309_jscafe_Masonry/
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Yamato Honda
ヒカラボ at 2014.11.4 https://atnd.org/events/56949 にてお話しさせていただいた際の資料です。 Q co.,ltd.【株式会社キュー】 http://www.q-co.jp/
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
Yamato Honda
HTML5minutes!at 2014.8.22 にてお話しさせていただいた際の資料です。 声の実体化体験 http://create.kayac.com/edge/entityvoice/ の制作に用いた技術を中心に解説しています。
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Yahoo! JAPAN 社内セミナー用資料
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
【知っておきたい「Web制作イマドキの注目ポイント」 】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。 http://r360studio.com/seminar/imedio20140411/index.html http://r360studio.com/seminar/narass20141007/index.html
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
ADC MEETUP ROUND05 HTML5 Design Tools (http://www.adobe.com/jp/joc/adc/meetup/round05/)の「Dreamweaver CS6で作るレスポインシブWebデザイン」のセッション資料です。
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
レスポンシブウェブデザイン(以下RWDと呼ぶ)とはPC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現するサイト制作手法です。GoogleがRWDを推奨したことから、昨今人気のある制作手法と言えます。 このセッションでは、レスポンシブウェブデザインとは何か、RWDの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリー」とは何かから始まり、ノンデザイナーでも簡単に実現できる、CMS+レスポンシブデザイン、CSSフレームワークを紹介します。
おいしいherokuの使い方
おいしいherokuの使い方
Hideki Ohkubo
heroku meetup#10 の導入事例資料です
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
Yuma Tahara
WordBench東京 7月『WordPressでのブログライティングとブログ運営』でのLT用スライド
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
今やスタンダードになりつつあるレスポンシブサイトについて、その概要から実際にレスポンシブサイトを構築する際に注意したいポイントまでを解説します。 また、実際にWebサイトをレスポンシブ対応する際のメリット・デメリット、レスポンシブ化するのに有効なサイト、不向きなサイト、最低限押さえておきたいソースコードなどをご紹介します。 授業では以下の様な内容についても語ります。 ・PC,SPと2つサイトを作るのと、レスポンシブサイト1つ作るのじゃ大変さは変わるのか? ・Googleが推奨してるけど、それはなぜ? ・なぜレスポンシブサイトが必要なのか?
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
2021/10/25 ポップインサイトUXリサーチ共有会 はたけ登壇資料 UXリサーチ共有会10月:https://popinsight.jp/seminar/?p=22902 はたけとは:https://twitter.com/yuw12_
ウェブ制作者のためのJimdo活用法
ウェブ制作者のためのJimdo活用法
Hiromitsu Miyanishi
2012年1月14日に行われましたJimdoセミナーでの発表内容です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
20090410 Idcon Stomita
20090410 Idcon Stomita
Shinichi Tomita
idcon#5 @ NTT musashino lab
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig24/7
WebSig会議 vol.33: http://websig247.jp/meeting/33/ 2ndセッション ハートに響くUIを生み出すためのデザインプロセス /土屋尚史(株式会社グッドパッチ 代表取締役)
More Related Content
What's hot
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
グリッドレイアウトをMasonry.jsを使って実施してみました。 高さの違うアイテムを自動的に再配置して、グリッドレイアウトしてくるJavaScriptライブラリです。 また、スマートフォンデバイス、タブレットデバイスなどにも自動でレイアウトが行われるので非常に配置がしやすいです。 BootsStrapで組み合わせると非常に早く、高機能なレイアウトが作成できます。 Masonryのどのあたりが便利なのかに重点をおいて説明してみました。 Webページでのスライドは以下になります。 http://ticklecode.com/present/140309_jscafe_Masonry/
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Yamato Honda
ヒカラボ at 2014.11.4 https://atnd.org/events/56949 にてお話しさせていただいた際の資料です。 Q co.,ltd.【株式会社キュー】 http://www.q-co.jp/
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
Yamato Honda
HTML5minutes!at 2014.8.22 にてお話しさせていただいた際の資料です。 声の実体化体験 http://create.kayac.com/edge/entityvoice/ の制作に用いた技術を中心に解説しています。
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Yahoo! JAPAN 社内セミナー用資料
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
【知っておきたい「Web制作イマドキの注目ポイント」 】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。 http://r360studio.com/seminar/imedio20140411/index.html http://r360studio.com/seminar/narass20141007/index.html
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
ADC MEETUP ROUND05 HTML5 Design Tools (http://www.adobe.com/jp/joc/adc/meetup/round05/)の「Dreamweaver CS6で作るレスポインシブWebデザイン」のセッション資料です。
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
レスポンシブウェブデザイン(以下RWDと呼ぶ)とはPC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現するサイト制作手法です。GoogleがRWDを推奨したことから、昨今人気のある制作手法と言えます。 このセッションでは、レスポンシブウェブデザインとは何か、RWDの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリー」とは何かから始まり、ノンデザイナーでも簡単に実現できる、CMS+レスポンシブデザイン、CSSフレームワークを紹介します。
おいしいherokuの使い方
おいしいherokuの使い方
Hideki Ohkubo
heroku meetup#10 の導入事例資料です
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
Yuma Tahara
WordBench東京 7月『WordPressでのブログライティングとブログ運営』でのLT用スライド
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
今やスタンダードになりつつあるレスポンシブサイトについて、その概要から実際にレスポンシブサイトを構築する際に注意したいポイントまでを解説します。 また、実際にWebサイトをレスポンシブ対応する際のメリット・デメリット、レスポンシブ化するのに有効なサイト、不向きなサイト、最低限押さえておきたいソースコードなどをご紹介します。 授業では以下の様な内容についても語ります。 ・PC,SPと2つサイトを作るのと、レスポンシブサイト1つ作るのじゃ大変さは変わるのか? ・Googleが推奨してるけど、それはなぜ? ・なぜレスポンシブサイトが必要なのか?
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
2021/10/25 ポップインサイトUXリサーチ共有会 はたけ登壇資料 UXリサーチ共有会10月:https://popinsight.jp/seminar/?p=22902 はたけとは:https://twitter.com/yuw12_
ウェブ制作者のためのJimdo活用法
ウェブ制作者のためのJimdo活用法
Hiromitsu Miyanishi
2012年1月14日に行われましたJimdoセミナーでの発表内容です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
20090410 Idcon Stomita
20090410 Idcon Stomita
Shinichi Tomita
idcon#5 @ NTT musashino lab
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig24/7
WebSig会議 vol.33: http://websig247.jp/meeting/33/ 2ndセッション ハートに響くUIを生み出すためのデザインプロセス /土屋尚史(株式会社グッドパッチ 代表取締役)
What's hot
(16)
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Q(キュー)サイトに学ぶ、 演出のためのHTML5
Q(キュー)サイトに学ぶ、 演出のためのHTML5
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
声の実体化体験 - HTML5でつくるデジタルインスタレーション -
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
おいしいherokuの使い方
おいしいherokuの使い方
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
ウェブ制作者のためのJimdo活用法
ウェブ制作者のためのJimdo活用法
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
20090410 Idcon Stomita
20090410 Idcon Stomita
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
Html5インタラクティブデザイン
1.
HTML5 インタラクテ
ィブ デザイン デザイナーとデベロッパによる生対談
2.
目次 ①
自己紹介 ② サイト紹介 ③ デザインができるまで ④ インタラクティブなデザイン ⑤ 思考回路の違い ⑥ もっとこうすればよかった! ⑦ まとめ
3.
自己紹介 名前:稲田真帆 職種:デザイナー
( 現在 js を勉強中! ) 今は主にスマホサイトを手がけています。 Html5j のデザインしました。 .org 会社:株式会社シーエー・モバイル ( 絶賛デベロッパー&デザイナーを募集 中! ) ハマっているもの:塩麹
4.
サイト紹介 サイト名: M OGUT
ARO サイト名:J a nese Cha pa lkboard サイト名: I D B Feed Rea der URL:http://ds-fileapi.qw.to/ URL:http://ds-websocket.qw.to/ URL:http://ds-indexeddb.qw.to/
5.
デザインが できるまで
6.
7.
8.
インタラクティ
ブな デザイン
9.
10.
思考回路 のちがい
11.
12.
ぶっちゃけトーク 「もっとこうす
れば よかった!」
13.
まとめ ① 作り始める前にある程度のアクシ ョンの洗い出しと動きの想定しておく ② インタラクティブなデザインを実 現するにはコミュニケーションが不可 欠 ③
お互いの領域について、ある程度 の理解は必要
Download now