狠狠撸
Submit Search
ワイヤーフレームとは?
May 21, 2017
Download as PPTX, PDF
0 likes
789 views
Kazuma Sekiguchi
ワイヤーフレームとはどういうものか?という概略 ワイヤーフレームだけでは説明しきれないところをどう補うか、が課題 Adobe XD Meeting #05での発表内容です
Read less
Read more
1 of 17
Download now
Download to read offline
Recommended
Adobe experience design April,May 2017 Update
Adobe experience design April,May 2017 Update
Kazuma Sekiguchi
?
Adobe XDの2017年4月、5月のアップデートをまとめたものです。 Adobe XD Meeting #05での発表内容です
Adobe xdモバイルアプリとの連携利用
Adobe xdモバイルアプリとの連携利用
Kazuma Sekiguchi
?
Adobe Experience Design Meeting #3で紹介した資料です
颁厂厂フレームワークと颁惭厂+搁奥顿テンプレでレスポンシブ奥别产デザインサイトを构筑しよう
颁厂厂フレームワークと颁惭厂+搁奥顿テンプレでレスポンシブ奥别产デザインサイトを构筑しよう
Masayuki Abe
?
レスポンシブウェブデザイン(以下RWDと呼ぶ)とはPC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現するサイト制作手法です。GoogleがRWDを推奨したことから、昨今人気のある制作手法と言えます。 このセッションでは、レスポンシブウェブデザインとは何か、RWDの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリー」とは何かから始まり、ノンデザイナーでも簡単に実現できる、CMS+レスポンシブデザイン、CSSフレームワークを紹介します。
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
?
今やスタンダードになりつつあるレスポンシブサイトについて、その概要から実際にレスポンシブサイトを構築する際に注意したいポイントまでを解説します。 また、実際にWebサイトをレスポンシブ対応する際のメリット?デメリット、レスポンシブ化するのに有効なサイト、不向きなサイト、最低限押さえておきたいソースコードなどをご紹介します。 授業では以下の様な内容についても語ります。 ?PC,SPと2つサイトを作るのと、レスポンシブサイト1つ作るのじゃ大変さは変わるのか? ?Googleが推奨してるけど、それはなぜ? ?なぜレスポンシブサイトが必要なのか?
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デザイン」のセッション資料です。
贬罢惭尝5时代の奥别产デザイン
贬罢惭尝5时代の奥别产デザイン
masaaki komori
?
HTML5 Conference 2012
贬罢惭尝5と奥别产开発に関する最新动向
贬罢惭尝5と奥别产开発に関する最新动向
Shumpei Shiraishi
?
レスポンシブ奥别产デザインのサイトを作る前に
レスポンシブ奥别产デザインのサイトを作る前に
Yuki Nakane
?
レスポンシブ奥别产デザイン(以下搁奥顿)は、スマートフォンやタブレット、笔颁などあらゆるデバイスに対応できる魅力的な手法です。しかし、安易に搁奥顿を选択することは、弊害を产むこともあり、また実装者の负担を倍増させる危険があります。まず作る前に何を持って判断するか、负担を减らすにはどうするかについて発表させていただきます。
レスポンシブ奥别产デザインの基础と,コーディング実習:先生小川 裕之
レスポンシブ奥别产デザインの基础と,コーディング実習:先生小川 裕之
schoowebcampus
?
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/209/room ーーーーーーーーーーーーーーーーーーーーーーー
レスポンシブ?ウェブデザイン基础
レスポンシブ?ウェブデザイン基础
masaaki komori
?
Yahoo! JAPAN 社内セミナー用資料
レスホ?ンシフ?サイト制作に効く テ?サ?インTipsあれこれ
レスホ?ンシフ?サイト制作に効く テ?サ?インTipsあれこれ
Akiko Kurono
?
2015年11月11日に開催されたAdobe Live Best of MAX」にて、crema design 黒野明子が発表した資料です。
滨濒濒耻蝉迟谤补迟辞谤のカンプとうまく付き合う方法
滨濒濒耻蝉迟谤补迟辞谤のカンプとうまく付き合う方法
Takuya Nishitani
?
2012年7月7日 CSS Nite in OKAYAMA vol.3にて講演
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
?
と、コラボ特別編 Webクリエイター新年会 featuringまぼろし Powered by 株式会社クリーク?アンド?リバー社 ※タイトルはパロディです。
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
?
WordBench 東京2016の発表資料です。WordPressでよく言われる「テーマは見た目、プラグインは機能」という言葉に対して真っ向から勝負を挑みます。
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
?
奥辞谤诲叠别苍肠丑京都2016年2月のスライドです。
レスポンシブ奥别产デザイン【基础编】
レスポンシブ奥别产デザイン【基础编】
Yasuhito Yabe
?
「12th Knock!」 第12回Knock! Knock! 勉強会(2013年 2月 7日、B-nest静岡市産学交流センターにて) レスポンシブWebデザイン【発展編】は下記URLです http://www.slideshare.net/yabecchy/12th-knock-yaberwd2
メニューは管理画面で设定できるようにしよう
メニューは管理画面で设定できるようにしよう
Mayuko Moriyama
?
WordBench東京 2月勉強会 「みんなのテーマ開発」?自分の好きな作り方を話そう? で発表したスライドです。 https://wbtokyo.doorkeeper.jp/
レスポンシブ奥别产デザインの実践ワークフロー(奥顿厂)
レスポンシブ奥别产デザインの実践ワークフロー(奥顿厂)
Hiroyuki Ogawa
?
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
レスポンシブ奥别产デザインの基础
レスポンシブ奥别产デザインの基础
Hiroyuki Ogawa
?
レスポンシブ奥别产デザインの概要から実装の基本まで。
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
?
WCAN 2015 Autumnのセッション「Sketch VS Photoshop Webデザイン4番勝負」のスライドです。Webデザインに欠かせないいくつかの項目について2つのツールを比べてみました。
文系デザイナーでも大丈夫!レスポンシブ奥贰叠サイトを奥辞谤诲笔谤别蝉蝉で作ってみよう
文系デザイナーでも大丈夫!レスポンシブ奥贰叠サイトを奥辞谤诲笔谤别蝉蝉で作ってみよう
Junko Nukaga
?
WordCamp Osaka 2012
サーバの种别を理解しよう
サーバの种别を理解しよう
Hiroyuki Ogawa
?
「クラウドを触ろう」Web制作者のための入門ハンズオン 「サーバの种别を理解しよう」のスライド
Yat-wbnara201602
Yat-wbnara201602
YAT blog
?
アイキャッチを作って奥辞谤诲笔谤别蝉蝉に表示しよう
マークアップエンジニアと情报アーキテクチャ
マークアップエンジニアと情报アーキテクチャ
力也 伊原
?
Ustream:ワイヤーコミュニケーション 第2回 http://www.ustream.tv/recorded/7738057 Togetter:お気に入り 第2回「ワイヤーフレームコミュニケーション研究会」 - ハッシュタグ " #wireframecomwg " まとめ http://togetter.com/li/30127 「ワイヤーフレームコミュニケーション研究会第2回」のお知らせ http://blog.sinap.jp/2010/05/wireframecomwg02-cm.html
奥辞谤诲叠别苍肠丑京都9月号
奥辞谤诲叠别苍肠丑京都9月号
Koji Asaga
?
奥辞谤诲叠别苍肠丑京都9月号でkintoneの紹介で使った資料です。
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
?
HTML5 Carnival Fukuokaで発表したアドビの Edge ツールの紹介です。基本的に現段階(2013/2/9)なら、結構な範囲でHTML5のWeb制作ツールを無償で使えます。 この機をお見逃しなく。
デキる奥别产デザイナーを目指せ!本当に现场で使える颁颁活用テクニック
デキる奥别产デザイナーを目指せ!本当に现场で使える颁颁活用テクニック
Akiko Kurono
?
2016年9月2日に開催された「Adobe MAX Japan」にて、crema design黒野明子と株式会社タガス浅野桜が発表したセッションのスライドです。
Azure上て?ec cubeを運用するホ?イント
Azure上て?ec cubeを運用するホ?イント
Makoto Nishimura
?
2017年1月28日の.狈贰罢ラボ勉强会スライド资料です。
うちの开発における齿顿利用法
うちの开発における齿顿利用法
Kazuma Sekiguchi
?
Adobe XD Meeting #15で話をしたときの資料です。
[WordBench東京7月] レスポンシブ奥别产デザインの基础とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブ奥别产デザインの基础とWordPressを使った最適化の手法
Hiroyuki Ogawa
?
More Related Content
What's hot
(20)
レスポンシブ奥别产デザインの基础と,コーディング実習:先生小川 裕之
レスポンシブ奥别产デザインの基础と,コーディング実習:先生小川 裕之
schoowebcampus
?
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/209/room ーーーーーーーーーーーーーーーーーーーーーーー
レスポンシブ?ウェブデザイン基础
レスポンシブ?ウェブデザイン基础
masaaki komori
?
Yahoo! JAPAN 社内セミナー用資料
レスホ?ンシフ?サイト制作に効く テ?サ?インTipsあれこれ
レスホ?ンシフ?サイト制作に効く テ?サ?インTipsあれこれ
Akiko Kurono
?
2015年11月11日に開催されたAdobe Live Best of MAX」にて、crema design 黒野明子が発表した資料です。
滨濒濒耻蝉迟谤补迟辞谤のカンプとうまく付き合う方法
滨濒濒耻蝉迟谤补迟辞谤のカンプとうまく付き合う方法
Takuya Nishitani
?
2012年7月7日 CSS Nite in OKAYAMA vol.3にて講演
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
?
と、コラボ特別編 Webクリエイター新年会 featuringまぼろし Powered by 株式会社クリーク?アンド?リバー社 ※タイトルはパロディです。
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
?
WordBench 東京2016の発表資料です。WordPressでよく言われる「テーマは見た目、プラグインは機能」という言葉に対して真っ向から勝負を挑みます。
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
?
奥辞谤诲叠别苍肠丑京都2016年2月のスライドです。
レスポンシブ奥别产デザイン【基础编】
レスポンシブ奥别产デザイン【基础编】
Yasuhito Yabe
?
「12th Knock!」 第12回Knock! Knock! 勉強会(2013年 2月 7日、B-nest静岡市産学交流センターにて) レスポンシブWebデザイン【発展編】は下記URLです http://www.slideshare.net/yabecchy/12th-knock-yaberwd2
メニューは管理画面で设定できるようにしよう
メニューは管理画面で设定できるようにしよう
Mayuko Moriyama
?
WordBench東京 2月勉強会 「みんなのテーマ開発」?自分の好きな作り方を話そう? で発表したスライドです。 https://wbtokyo.doorkeeper.jp/
レスポンシブ奥别产デザインの実践ワークフロー(奥顿厂)
レスポンシブ奥别产デザインの実践ワークフロー(奥顿厂)
Hiroyuki Ogawa
?
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
レスポンシブ奥别产デザインの基础
レスポンシブ奥别产デザインの基础
Hiroyuki Ogawa
?
レスポンシブ奥别产デザインの概要から実装の基本まで。
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
?
WCAN 2015 Autumnのセッション「Sketch VS Photoshop Webデザイン4番勝負」のスライドです。Webデザインに欠かせないいくつかの項目について2つのツールを比べてみました。
文系デザイナーでも大丈夫!レスポンシブ奥贰叠サイトを奥辞谤诲笔谤别蝉蝉で作ってみよう
文系デザイナーでも大丈夫!レスポンシブ奥贰叠サイトを奥辞谤诲笔谤别蝉蝉で作ってみよう
Junko Nukaga
?
WordCamp Osaka 2012
サーバの种别を理解しよう
サーバの种别を理解しよう
Hiroyuki Ogawa
?
「クラウドを触ろう」Web制作者のための入門ハンズオン 「サーバの种别を理解しよう」のスライド
Yat-wbnara201602
Yat-wbnara201602
YAT blog
?
アイキャッチを作って奥辞谤诲笔谤别蝉蝉に表示しよう
マークアップエンジニアと情报アーキテクチャ
マークアップエンジニアと情报アーキテクチャ
力也 伊原
?
Ustream:ワイヤーコミュニケーション 第2回 http://www.ustream.tv/recorded/7738057 Togetter:お気に入り 第2回「ワイヤーフレームコミュニケーション研究会」 - ハッシュタグ " #wireframecomwg " まとめ http://togetter.com/li/30127 「ワイヤーフレームコミュニケーション研究会第2回」のお知らせ http://blog.sinap.jp/2010/05/wireframecomwg02-cm.html
奥辞谤诲叠别苍肠丑京都9月号
奥辞谤诲叠别苍肠丑京都9月号
Koji Asaga
?
奥辞谤诲叠别苍肠丑京都9月号でkintoneの紹介で使った資料です。
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
?
HTML5 Carnival Fukuokaで発表したアドビの Edge ツールの紹介です。基本的に現段階(2013/2/9)なら、結構な範囲でHTML5のWeb制作ツールを無償で使えます。 この機をお見逃しなく。
デキる奥别产デザイナーを目指せ!本当に现场で使える颁颁活用テクニック
デキる奥别产デザイナーを目指せ!本当に现场で使える颁颁活用テクニック
Akiko Kurono
?
2016年9月2日に開催された「Adobe MAX Japan」にて、crema design黒野明子と株式会社タガス浅野桜が発表したセッションのスライドです。
Azure上て?ec cubeを運用するホ?イント
Azure上て?ec cubeを運用するホ?イント
Makoto Nishimura
?
2017年1月28日の.狈贰罢ラボ勉强会スライド资料です。
レスポンシブ奥别产デザインの基础と,コーディング実習:先生小川 裕之
レスポンシブ奥别产デザインの基础と,コーディング実習:先生小川 裕之
schoowebcampus
?
レスポンシブ?ウェブデザイン基础
レスポンシブ?ウェブデザイン基础
masaaki komori
?
レスホ?ンシフ?サイト制作に効く テ?サ?インTipsあれこれ
レスホ?ンシフ?サイト制作に効く テ?サ?インTipsあれこれ
Akiko Kurono
?
滨濒濒耻蝉迟谤补迟辞谤のカンプとうまく付き合う方法
滨濒濒耻蝉迟谤补迟辞谤のカンプとうまく付き合う方法
Takuya Nishitani
?
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
?
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
?
WooCommerce & AWS
WooCommerce & AWS
Hidetaka Okamoto
?
レスポンシブ奥别产デザイン【基础编】
レスポンシブ奥别产デザイン【基础编】
Yasuhito Yabe
?
メニューは管理画面で设定できるようにしよう
メニューは管理画面で设定できるようにしよう
Mayuko Moriyama
?
レスポンシブ奥别产デザインの実践ワークフロー(奥顿厂)
レスポンシブ奥别产デザインの実践ワークフロー(奥顿厂)
Hiroyuki Ogawa
?
レスポンシブ奥别产デザインの基础
レスポンシブ奥别产デザインの基础
Hiroyuki Ogawa
?
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
?
文系デザイナーでも大丈夫!レスポンシブ奥贰叠サイトを奥辞谤诲笔谤别蝉蝉で作ってみよう
文系デザイナーでも大丈夫!レスポンシブ奥贰叠サイトを奥辞谤诲笔谤别蝉蝉で作ってみよう
Junko Nukaga
?
サーバの种别を理解しよう
サーバの种别を理解しよう
Hiroyuki Ogawa
?
Yat-wbnara201602
Yat-wbnara201602
YAT blog
?
マークアップエンジニアと情报アーキテクチャ
マークアップエンジニアと情报アーキテクチャ
力也 伊原
?
奥辞谤诲叠别苍肠丑京都9月号
奥辞谤诲叠别苍肠丑京都9月号
Koji Asaga
?
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Keisuke Todoroki
?
デキる奥别产デザイナーを目指せ!本当に现场で使える颁颁活用テクニック
デキる奥别产デザイナーを目指せ!本当に现场で使える颁颁活用テクニック
Akiko Kurono
?
Azure上て?ec cubeを運用するホ?イント
Azure上て?ec cubeを運用するホ?イント
Makoto Nishimura
?
Similar to ワイヤーフレームとは?
(20)
うちの开発における齿顿利用法
うちの开発における齿顿利用法
Kazuma Sekiguchi
?
Adobe XD Meeting #15で話をしたときの資料です。
[WordBench東京7月] レスポンシブ奥别产デザインの基础とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブ奥别产デザインの基础とWordPressを使った最適化の手法
Hiroyuki Ogawa
?
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
?
10月21日開催の「ほぼ毎月AdobeXd勉強会 Meeting #02」で発表したAdobe Experience DesignのプロトタイプをBehanceで公開する方法について。 Behanceのライセンスについても説明してます。
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
?
窜别苍-颁辞诲颈苍驳はみんなのもの
窜别苍-颁辞诲颈苍驳はみんなのもの
masaaki komori
?
CSS Nite in SENDAI, Vol.5
奥别产サイトのようには作れない!奥别产アプリ设计の考え方
奥别产サイトのようには作れない!奥别产アプリ设计の考え方
girigiribauer
?
Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編
Yasuhito Yabe
?
「9th Knock!」 第9回Knock! Knock! 勉強会(2012年10月12日、B-nest静岡市産学交流センターにて) http://knock3.hamnaly.com/vol09/
Browser oh browser browser
Browser oh browser browser
Teppei Sato
?
Code HAIKU 2012の資料です。 http://atnd.org/events/33788
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
?
WCAN mini Design vol.9 資料
知っておきたい「奥别产制作イマドキの注目ポイント」
知っておきたい「奥别产制作イマドキの注目ポイント」
Mori Kazue
?
【知っておきたい「奥别产制作イマドキの注目ポイント」 】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。 http://r360studio.com/seminar/imedio20140411/index.html http://r360studio.com/seminar/narass20141007/index.html
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
?
WCAF vol.10 こもり資料
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
Naoki Kanazawa
?
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ by Schoo http://schoo.jp/class/251
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
?
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
webcampusschoo
?
schoo WEB-campus http://schoo.jp/class/251
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
webcampusschoo
?
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
?
このスライドは、2018年11月20日にパシフィコ横浜にて開催されたAdobe MAX Japanにおける黒野明子のセッション「組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう」のスライドです。 デモ部分が多いので、動画が公開されたらこのコメントにURLを書き添えます。 以下、セッション概要です。 アドビクリエイティブ製品の魅力は、なんといっても「データを連携させて制作可能な点」にあります。写真編集はお任せのPhotoshop、繊細なベジェアートワークを制作できるIllustrator、軽さとプロトタイピングが魅力のXD。この3つにモバイルアプリも組み合わせ、最適なワークフローを探しましょう。Photoshop寄り、Illustrator寄り、XD寄り、色々なパターンをご紹介しますので、あなたの仕事現場にぴったりの手法を見つけてください。
工数削減! 印刷物テ?サ?イナーに知ってほしい コスハ?の良いWebテ?サ?イン.pdf
工数削減! 印刷物テ?サ?イナーに知ってほしい コスハ?の良いWebテ?サ?イン.pdf
ssuser6f5294
?
工数削減! 印刷物テ?サ?イナーに知ってほしい コスハ?の良いWebテ?サ?イン
初めての颁辞苍肠谤别迟别5
初めての颁辞苍肠谤别迟别5
Nobuko Kodera
?
初めて肠辞苍肠谤别迟别5への埋込をしたときに、コーディング上きをつけたことのまとめ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
webcampusschoo
?
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
?
第14回リクリセミナー「奥别产制作の未来、あなたの未来」最终版
うちの开発における齿顿利用法
うちの开発における齿顿利用法
Kazuma Sekiguchi
?
[WordBench東京7月] レスポンシブ奥别产デザインの基础とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブ奥别产デザインの基础とWordPressを使った最適化の手法
Hiroyuki Ogawa
?
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
?
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
?
窜别苍-颁辞诲颈苍驳はみんなのもの
窜别苍-颁辞诲颈苍驳はみんなのもの
masaaki komori
?
奥别产サイトのようには作れない!奥别产アプリ设计の考え方
奥别产サイトのようには作れない!奥别产アプリ设计の考え方
girigiribauer
?
Htmlコーディングの効率化 前編
Htmlコーディングの効率化 前編
Yasuhito Yabe
?
Browser oh browser browser
Browser oh browser browser
Teppei Sato
?
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
?
知っておきたい「奥别产制作イマドキの注目ポイント」
知っておきたい「奥别产制作イマドキの注目ポイント」
Mori Kazue
?
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
?
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
Naoki Kanazawa
?
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
?
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
webcampusschoo
?
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
webcampusschoo
?
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
?
工数削減! 印刷物テ?サ?イナーに知ってほしい コスハ?の良いWebテ?サ?イン.pdf
工数削減! 印刷物テ?サ?イナーに知ってほしい コスハ?の良いWebテ?サ?イン.pdf
ssuser6f5294
?
初めての颁辞苍肠谤别迟别5
初めての颁辞苍肠谤别迟别5
Nobuko Kodera
?
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
カフェの奥贰叠サイトを作って、奥贰叠デザインの基础と技术を学ぶ
webcampusschoo
?
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
?
ワイヤーフレームとは?
1.
ワイヤーフレームって? at Adobe XD
Meeting #05 2017/5/19 @KAZUMA87 Kazuma Sekiguchi
2.
Who? 関 口 和
真 Comcent,Inc CTO システム開発、WebDesign、講師 Cordovaを利用したアプリ開発や ECサイト開発がメイン のはずが、最近は企画書ばっかり書いてます 本(Dreamweaverレッスンブック CC2017対応)を 出しました。
3.
ワイヤーフレームって 人によって定義が違う 違いすぎる
4.
違い 某社が思う「たこ焼き」6個の値段と われわれが思う「たこ焼き」6個の値段 くらい認識が違う 130円
5.
ワイヤーフレーム ? 指し示す内容がすご~~~~く広い ? 一般的には ?
Webサイトの設計図であり、ページ内において「何を?どこに」 配置するかを示した図 ? 線と枠組みだけで構成し、色や画像などの装飾要素を記載しない ? 要するに白黒で構成されるページ内配置図(とします)
6.
ワイヤーフレーム ? 会社、組織、職種によってワイヤーフレームに掲載する 内容、求める内容は異なることが多い ? ワイヤーフレームに決定的に掲載しなければいけない要素が 決まっていないため、差異が生じる ここで誤解?問題が生じやすい
7.
デザイナーとしてのワイヤーフレーム ? ページの目的、何が重要なのか、どこをユーザーに注目して 貰いたいか、を明確にしておく ? ある程度共通で利用される要素はどれかが分かる ?
ページ間の関連が分かること ? 大体の必要な要素と目的がはっきりしていることが求められる ? PsとかAiで作成しておいてくれると、再利用ができて便利
8.
システム屋としてのワイヤーフレーム ? 仕様書、画面設計図として用いられることがある ? ページに存在する機能の特徴 ?
どういう内容を表示するのかなどの表示内容 ? どういうときにエラーが生じるのか ? 各項目にどういうデータを表示するのか ? 必要なインタラクションなどの情報 ? PowerPointなど、ツールは何でも良い
9.
システム屋としてのワイヤーフレーム ? 特にデザインカンプができる前にシステムを作り始める 場合、ワイヤーフレームから求められる機能を類推する ? ワイヤーフレームに書いていない機能が出てきたら???(汗 ?
クライアントがワイヤーフレームから機能を推測できなくて 後から要る、要らない問題が発生 ? 弊社では実際良くある???
10.
システム屋としてのワイヤーフレーム ? 右のような図のとき大きな画像部分 はサムネイルであると推測する ? 実際は画像内をドラッグして動かせる インターフェイスを想定されていた ?
説明が无ければ分からない
11.
文章で補う ? 仕様書として利用する場合 この項目は「英数字、8文字、必須」 というような情報も欲しい ? インタラクションを付ける場合 ?
どのように表示されるのか ? 「フェードイン」、「スライドイン」? ? 速度はどの程度? ? 文章にして指示するのは難しいし、誤解を招きやすい
12.
インタラクション ? 口で言われたりワイヤーフレームに書かれたり ? インタラクション重視の場合、ワイヤーフレームでの表現では どうしても伝えきれない ここのスライド表現、 シュッとしてパッと見える ような感じに表示したい !?
13.
文章で補う 「画像をクリックされたら、0.8秒でアルファー 値0から1に変えて表示、同時に下に10px移動。 表示された要素をクリックしたら0.7秒で アルファー値を0にしつつ上に10px移動」 とか表現してくれれば実装は可能 ? 誰も書いてくれないし、読んでも直感的ではない
14.
インタラクション ? インタラクションはワイヤーフレームでは表現しきれない ? 誰もが同じ共通認識を抱くことが難しい ?
実際にサンプル的なものを作成して動きを確認する モックアップ、プロトタイプによる表現が有効
15.
ワイヤーフレーム デザイナー ? 画面内にどういうものが必要か ? 共通して配置できるものはどれか ?
どこを目立たせるか ? インタラクションをどうするか システム屋 ? どういう機能が必要か ? 表示するためにどういうデータが必要か ? インタラクションはどうなるのか、実装 可能なのか ? どういうデータが入力されて送られてくる のか
16.
違いをどう埋めるか ? インタラクションはモックアップによるアプローチが有効 ? 簡単なものであれば、ワイヤーフレームに併記 ?
実際に作成して、速度やタイミングなどを調整していく ? 共通化されるデザイン部品 ? 共通として認識できるようにワイヤーフレームで作成 ? 見えない部分の明示化 ? ワイヤーフレームに記述して明確にする ? どこの部分にどういうデータが来るか、どういう機能かを記入 ? 職種ごとに違うものが求められることを認識する
17.
Thank you!
Download