Submit Search
Upload
構造設計 情報をデザインする基礎-
•
Download as PPTX, PDF
•
1 like
•
651 views
Junzo Matunoo
Follow
インターン向け勉強会の資料です。 そのサイトに必要な画面要素を抽出し、ワイヤーフレームへ落とし込むというワークを行いました
Read less
Read more
Design
Report
Share
Report
Share
1 of 39
Download now
Recommended
Wix勉強会用スライド案
Wix study
Wix study
Yu Hayashi
私たちはウェブサイト作成とSEOに関する専門知識とスキルを兼ね備えたトップレベルの東京のウェブ作成会社です。さらに、お客様にウェブデザインサービスをご提供しております。 訪問: https://n-works.link/
東京 ホームページ制作
東京 ホームページ制作
allonnevill
BtoB企業がWebを活用した顧客獲得を実現するまでに必要なSTEPをまとめました。
Webを活用した顧客獲得までに必要な3つのstep
Webを活用した顧客獲得までに必要な3つのstep
GaiaX
2015年9月5日に開催された、CMS 大阪夏祭り 2015の登壇資料です
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
Junzo Matunoo
Startup Weekend Shigaでの提案資料です。
Kulturoピッチ資料
Kulturoピッチ資料
Junzo Matunoo
ナイル(旧ヴォラーレ)株式会社 Webコンサルティング事業部 實川 節朗
SEOの対策キーワードの見つけ方(前編)
SEOの対策キーワードの見つけ方(前編)
ナイル株式会社
WordPress の今、新バージョン4.3の新機能や、次バージョン4.4でコアに取り込まれるかもしれないプロジェクト、PHP7への対応などをご紹介します。
WordPress の今とこれから ー CMS大阪夏祭り2015 ー
WordPress の今とこれから ー CMS大阪夏祭り2015 ー
Kite Koga
ナイル(旧ヴォラーレ)株式会社 Webコンサルティング事業部 實川 節朗
【SEOの基本のキホン】title・meta description・h1の付け方講座
【SEOの基本のキホン】title・meta description・h1の付け方講座
ナイル株式会社
Recommended
Wix勉強会用スライド案
Wix study
Wix study
Yu Hayashi
私たちはウェブサイト作成とSEOに関する専門知識とスキルを兼ね備えたトップレベルの東京のウェブ作成会社です。さらに、お客様にウェブデザインサービスをご提供しております。 訪問: https://n-works.link/
東京 ホームページ制作
東京 ホームページ制作
allonnevill
BtoB企業がWebを活用した顧客獲得を実現するまでに必要なSTEPをまとめました。
Webを活用した顧客獲得までに必要な3つのstep
Webを活用した顧客獲得までに必要な3つのstep
GaiaX
2015年9月5日に開催された、CMS 大阪夏祭り 2015の登壇資料です
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
Junzo Matunoo
Startup Weekend Shigaでの提案資料です。
Kulturoピッチ資料
Kulturoピッチ資料
Junzo Matunoo
ナイル(旧ヴォラーレ)株式会社 Webコンサルティング事業部 實川 節朗
SEOの対策キーワードの見つけ方(前編)
SEOの対策キーワードの見つけ方(前編)
ナイル株式会社
WordPress の今、新バージョン4.3の新機能や、次バージョン4.4でコアに取り込まれるかもしれないプロジェクト、PHP7への対応などをご紹介します。
WordPress の今とこれから ー CMS大阪夏祭り2015 ー
WordPress の今とこれから ー CMS大阪夏祭り2015 ー
Kite Koga
ナイル(旧ヴォラーレ)株式会社 Webコンサルティング事業部 實川 節朗
【SEOの基本のキホン】title・meta description・h1の付け方講座
【SEOの基本のキホン】title・meta description・h1の付け方講座
ナイル株式会社
第一回授業用
Webサイト入門
Webサイト入門
touhou
すぐに使えるWebライティングのポイントをまとめました。
Webライティングのポイント
Webライティングのポイント
rie hirayama
インタラクティブクリエイターズ会社概要 201204glbl
インタラクティブクリエイターズ会社概要 201204glbl
Interactive Creators Tokyo
いまさら聞けない!ホームページの立ち上げから運用体制構築 自社ウェブの立ち上げから、運用体制の構築まで、ウェブ担当者は何を考えないとならないのかをわかりやすく解説します。 2011年11月25日に、静岡商工会議所主催、静岡清水産業情報プラザ創立10周年記念セミナーでお話しした内容です。 役割まで掘り下げているので、大規模に見えますが、小さな規模でもやらなくてはならないことが整理できると思います。ここに書かれてる内容を、小さな予算で小さなホームページ構築でも実現しましょうと作り上げたのが、WIKIPLUS http://www.wikiplus.jp というサービスなのですが、記事にはあまりそう言う宣伝の話はありません :)
いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築
Yasushi Taki
Webサービス ( システム ) におけるプロトタイピングをデザイナーの方々も是非やってみようというお話。
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
2014年10月29日、銀座GAT/CALLEGEにて開催されたセミナー資料
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
Rico Sengan
081108 Web Strategy Presentation
081108 Web Strategy Presentation
KensaKプロジェクト 株式会社
ホームページを制作する前に知っておきたい13のこと( http://www.wikiplus.jp/ ) 品川区大井町のレンタルオフィスMICAN(http://www.webmican.com) にて行ったセミナーの資料となります。 ホームページを制作する前に知っておきたいこと13を、用意しておくべきことから、知っておくと良い知識、発注のしかた、RFPの書き方、見積の見方、運営の仕方まで含めて解説しています。 読んで頂いて自社のウェブサイトを、よりよいものにして頂けたらと思います。
ホームページを制作する前に知っておきたい13のこと
ホームページを制作する前に知っておきたい13のこと
Yasushi Taki
この資料を使って、1時間強の講演をしました。 参加者は基金訓練受講生・約30名。 現物には、いろいろエフェクトをかけていますが、ネタにするための過剰なものも含まれています。
Keynote 20120316
Keynote 20120316
Rikimaru Tomohiro
2012 Springが人気記事ランキング総合5位に、2012 in 名古屋が人気記事ランキング総合3位となった講演の2013年度版です。
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
明治学院大学での講義スライド
ウェブサービスのつくりかた
ウェブサービスのつくりかた
Shuhei Iitsuka
Webディレクターの変遷を振り返る/WebSigモデレーター メインセッション:Webディレクター、僕の場合、私の場合 http://websig247.jp/meeting/30/ 2012年6月23日 あるディレクターのポジション探し「SかMか」 谷口正人
あるディレクターのポジション探し「SかMか」~第30回WebSig会議:Webディレクターの変遷を振り返る:Webディレクター、僕の場合、私の場合~谷口正...
あるディレクターのポジション探し「SかMか」~第30回WebSig会議:Webディレクターの変遷を振り返る:Webディレクター、僕の場合、私の場合~谷口正...
WebSig24/7
【知っておきたい「Web制作イマドキの注目ポイント」 】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。 http://r360studio.com/seminar/imedio20140411/index.html http://r360studio.com/seminar/narass20141007/index.html
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
第7回 Creators Meetup でお話したHTMLのアウトラインについてのスライドです
HTMLを、ちゃんと書く ―アウトライン編
HTMLを、ちゃんと書く ―アウトライン編
Komei Otake
Webdirection
Webdirection
Digital Hollywood
講義用資料です。 Webデザインの基礎、HTML5とCSSの入門です。 ・HTMLの概念と役割、CSSの役割 ・Webサイトが見られるネットワークの仕組み ・各HTML要素の説明 ・カラー16進数について ・CSSリセットについて ・float clearfixの説明 ・HTML/CSS文法チェック方法について ・セレクタの優先順位 ・FTPについて
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
Yossy Taka
エンタープライズ向けWebCMS「concrete5」で実践する、簡易的なリードナーチャリングの取り組みについて。 2014年11月22日に行われた「concrete5×サーバーセキュリティ勉強会」で発表したスライドです。
concrete5で実践するリードナーチャリング
concrete5で実践するリードナーチャリング
株式会社ND&I しかたこうき
Frontend Nagoya#3 LT時資料
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Asuka Kobayashi
Web制作のアレコレ
Web制作のアレコレ
regret raym
2017年1月28日開催のゼロディレ設計編資料です。
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
本間 和城
More Related Content
Similar to 構造設計 情報をデザインする基礎-
第一回授業用
Webサイト入門
Webサイト入門
touhou
すぐに使えるWebライティングのポイントをまとめました。
Webライティングのポイント
Webライティングのポイント
rie hirayama
インタラクティブクリエイターズ会社概要 201204glbl
インタラクティブクリエイターズ会社概要 201204glbl
Interactive Creators Tokyo
いまさら聞けない!ホームページの立ち上げから運用体制構築 自社ウェブの立ち上げから、運用体制の構築まで、ウェブ担当者は何を考えないとならないのかをわかりやすく解説します。 2011年11月25日に、静岡商工会議所主催、静岡清水産業情報プラザ創立10周年記念セミナーでお話しした内容です。 役割まで掘り下げているので、大規模に見えますが、小さな規模でもやらなくてはならないことが整理できると思います。ここに書かれてる内容を、小さな予算で小さなホームページ構築でも実現しましょうと作り上げたのが、WIKIPLUS http://www.wikiplus.jp というサービスなのですが、記事にはあまりそう言う宣伝の話はありません :)
いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築
Yasushi Taki
Webサービス ( システム ) におけるプロトタイピングをデザイナーの方々も是非やってみようというお話。
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
2014年10月29日、銀座GAT/CALLEGEにて開催されたセミナー資料
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
Rico Sengan
081108 Web Strategy Presentation
081108 Web Strategy Presentation
KensaKプロジェクト 株式会社
ホームページを制作する前に知っておきたい13のこと( http://www.wikiplus.jp/ ) 品川区大井町のレンタルオフィスMICAN(http://www.webmican.com) にて行ったセミナーの資料となります。 ホームページを制作する前に知っておきたいこと13を、用意しておくべきことから、知っておくと良い知識、発注のしかた、RFPの書き方、見積の見方、運営の仕方まで含めて解説しています。 読んで頂いて自社のウェブサイトを、よりよいものにして頂けたらと思います。
ホームページを制作する前に知っておきたい13のこと
ホームページを制作する前に知っておきたい13のこと
Yasushi Taki
この資料を使って、1時間強の講演をしました。 参加者は基金訓練受講生・約30名。 現物には、いろいろエフェクトをかけていますが、ネタにするための過剰なものも含まれています。
Keynote 20120316
Keynote 20120316
Rikimaru Tomohiro
2012 Springが人気記事ランキング総合5位に、2012 in 名古屋が人気記事ランキング総合3位となった講演の2013年度版です。
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
明治学院大学での講義スライド
ウェブサービスのつくりかた
ウェブサービスのつくりかた
Shuhei Iitsuka
Webディレクターの変遷を振り返る/WebSigモデレーター メインセッション:Webディレクター、僕の場合、私の場合 http://websig247.jp/meeting/30/ 2012年6月23日 あるディレクターのポジション探し「SかMか」 谷口正人
あるディレクターのポジション探し「SかMか」~第30回WebSig会議:Webディレクターの変遷を振り返る:Webディレクター、僕の場合、私の場合~谷口正...
あるディレクターのポジション探し「SかMか」~第30回WebSig会議:Webディレクターの変遷を振り返る:Webディレクター、僕の場合、私の場合~谷口正...
WebSig24/7
【知っておきたい「Web制作イマドキの注目ポイント」 】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。 http://r360studio.com/seminar/imedio20140411/index.html http://r360studio.com/seminar/narass20141007/index.html
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
第7回 Creators Meetup でお話したHTMLのアウトラインについてのスライドです
HTMLを、ちゃんと書く ―アウトライン編
HTMLを、ちゃんと書く ―アウトライン編
Komei Otake
Webdirection
Webdirection
Digital Hollywood
講義用資料です。 Webデザインの基礎、HTML5とCSSの入門です。 ・HTMLの概念と役割、CSSの役割 ・Webサイトが見られるネットワークの仕組み ・各HTML要素の説明 ・カラー16進数について ・CSSリセットについて ・float clearfixの説明 ・HTML/CSS文法チェック方法について ・セレクタの優先順位 ・FTPについて
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
Yossy Taka
エンタープライズ向けWebCMS「concrete5」で実践する、簡易的なリードナーチャリングの取り組みについて。 2014年11月22日に行われた「concrete5×サーバーセキュリティ勉強会」で発表したスライドです。
concrete5で実践するリードナーチャリング
concrete5で実践するリードナーチャリング
株式会社ND&I しかたこうき
Frontend Nagoya#3 LT時資料
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Asuka Kobayashi
Web制作のアレコレ
Web制作のアレコレ
regret raym
2017年1月28日開催のゼロディレ設計編資料です。
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
本間 和城
Similar to 構造設計 情報をデザインする基礎-
(20)
Webサイト入門
Webサイト入門
Webライティングのポイント
Webライティングのポイント
インタラクティブクリエイターズ会社概要 201204glbl
インタラクティブクリエイターズ会社概要 201204glbl
いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
081108 Web Strategy Presentation
081108 Web Strategy Presentation
ホームページを制作する前に知っておきたい13のこと
ホームページを制作する前に知っておきたい13のこと
Keynote 20120316
Keynote 20120316
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
ウェブサービスのつくりかた
ウェブサービスのつくりかた
あるディレクターのポジション探し「SかMか」~第30回WebSig会議:Webディレクターの変遷を振り返る:Webディレクター、僕の場合、私の場合~谷口正...
あるディレクターのポジション探し「SかMか」~第30回WebSig会議:Webディレクターの変遷を振り返る:Webディレクター、僕の場合、私の場合~谷口正...
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
HTMLを、ちゃんと書く ―アウトライン編
HTMLを、ちゃんと書く ―アウトライン編
Webdirection
Webdirection
Webデザイン入門1-HTML5・CSSについて-
Webデザイン入門1-HTML5・CSSについて-
concrete5で実践するリードナーチャリング
concrete5で実践するリードナーチャリング
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Web制作のアレコレ
Web制作のアレコレ
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
構造設計 情報をデザインする基礎-
1.
構造設計 -情報をデザインする基礎- NPO法人クリエイター育成協会 合同会社ワイヤーフレームズ 松野尾 絢三
2.
アジェンダ • Web制作とは • 要素を知る •
ワーク
3.
Web制作とは
4.
サイトを作る -Build Web Site- 代弁者 -spokesman-
5.
サイトを作る -Build Web Site- 代弁者 -spokesman- アーティスト -Artist- ☓
6.
サイトを作る -Build Web Site- 代弁者 -spokesman- クリエイター -Creator- ◯
7.
サイトを作る -Build Web Site- 代弁者 -spokesman- 作り手の個性 -Creators
Personality- ☓
8.
サイトを作る -Build Web Site- 代弁者 -spokesman- 作り手の個性 -Client
Personality- ◯
9.
サイトを作る -Build Web Site- クライアントの個性を その相手に伝えることを形にする
10.
ウェブサイト制作の流れ -Flow-
11.
ウェブサイト制作の流れ -Flow- 概念的・抽象的 -Abstract-
12.
ウェブサイト制作の流れ -Flow- 概念的・抽象的 -Abstract- ホームページほしいねん
13.
ウェブサイト制作の流れ -Flow- 概念的・抽象的 -Abstract- ホームページほしいねん かっこよかやつのほしか〜
14.
ウェブサイト制作の流れ -Flow- 概念的・抽象的 -Abstract- ホームページほしいねん かっこよかやつのほしか〜 おいどんの会社の思いをとどけたいのでごわす
15.
ウェブサイト制作の流れ -Flow- 具体的 -Concrete-
16.
ウェブサイト制作の流れ -Flow- 具体的 -Concrete-
17.
ウェブサイト制作の流れ -Flow- -Jesse James Garrett- The
Elements Of User Experience
18.
ウェブサイト制作の流れ -Flow- The Elements Of
User Experience
19.
ウェブサイト制作の流れ -Flow- Strategy 戦略 サイトの目的や達成するゴールを決める 誰に?何を?どのように?を明確にする -行動・成果物- ヒアリング KGI・KPI 戦略キャンパス
20.
ウェブサイト制作の流れ -Flow- Scope しぼりこみ サイトに求められているものを抽出する サイトが提供する機能を明確にする -行動・成果物- ブレスト・ワークショップ 要件定義
21.
ウェブサイト制作の流れ -Flow- Structure 構造 情報を構造化する ユーザーがどのようにその情報にたどり着くかを考える Information Architecture(IA) -行動・成果物- グルーピング エレメント →
コンポーネント → ページ サイトマップ
22.
ウェブサイト制作の流れ -Flow- Skelton 骨組み IAで具体化した構造を、インターフェースの形にする 画面操作するとどのような事ができるかを形にする -行動・成果物- サイトワイヤーフレーム プロトタイプ
23.
ウェブサイト制作の流れ -Flow- Surface 表層 要素にデザインを加える -行動・成果物- デザインされたウェブサイト
24.
ウェブサイト制作の流れ -Flow- クライアントが求めてくるもの かっこいいサイトがほしいねん Surface 表層 ☓
25.
ウェブサイト制作の流れ -Flow- クライアントが求めてくるもの そのサイトがもたらす利益 集客 売上 認知度 Strategy 戦略 ◯
26.
要素を知る -Element-
27.
要素を知る -Element- Structure (構造設計の一部) 要素を洗い出す
28.
要素を知る -Element- Skelton (骨組み) それらをワイヤーフレームに落としこむ
29.
要素とは? -Element- この流れで言う「要素-element-」とは その情報を成す一つ一つの細かいパーツを意味します エレメント → コンポーネント
→ ページ
30.
要素とは? -Element- エレメントの集合体で一つのブロックがコンポーネント エレメント → コンポーネント
→ ページ
31.
要素とは? -Element- それらを組み合わせると一つのページになります エレメント → コンポーネント
→ ページ
32.
要素を見つける -Find Element- 凡例にならう -Examples- 同じようなサイトの要素を見て よく使われている要素を洗い出す
33.
要素を見つける -Find Element- ポイント -point- デザインにとらわれない 要素そのものに意味がある
34.
要素を見つける -Find Element- 凡例1 -Example 1- メディアサイトの記事のページ
35.
要素を見つける -Find Element- メディアサイトの記事のページ -Media site’s
description page- まずは考えてみよう とりあえず思いつく「要素」を上げていってみよう
36.
要素を見つける -Find Element- メディアサイトの記事のページ -Media site’s
description page- 他のサイトではどんな要素がある? http://www.lifehacker.jp/2015/05/150512smart_phone_walk.html http://smmlab.jp/?p=38532
37.
ワーク -WorkShop- ECサイトの商品詳細ページの要素を洗い出し ワイヤーフレームを作成しましょう 取扱う商品 アパレル系 カジュアル
38.
ワーク -Work Shop- やり方 -How- 付箋紙に要素を書き出していこう 15分 参考にできそうなサイトを色々と見て そこに含まれている要素をどんどん付箋紙に書いていこう どんな小さな物でも良い この部分なんて書いたらいいかわからない。。 は相談しよう(or 勝手に命名してみよう)
39.
ワーク -WorkShop- やり方 -How- 書きだした要素を整理して ワイヤーフレームに落としこんでみよう 手書きワイヤーフレーム
Download now