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