UI設計の土台になる考え方-インテリジェントネット社内勉強会
Upcoming SlideShare
Loading in...5
×
 

UI設計の土台になる考え方-インテリジェントネット社内勉強会

on

  • 272 views

社内勉強会で使用したセミナーのスライドです。

社内勉強会で使用したセミナーのスライドです。
UI設計そのものというより、その前の土台となる考え方について講義しました。基礎の基礎のものです。

Statistics

Views

Total Views
272
Views on SlideShare
232
Embed Views
40

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 40

http://www.ini.co.jp 39
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UI設計の土台になる考え方-インテリジェントネット社内勉強会 UI設計の土台になる考え方-インテリジェントネット社内勉強会 Presentation Transcript

  • UI設計の土台になる考え方 ©2014 Intelligentnet, Inc. All rights reserved. インテリジェントネット社内勉強会 徳永聡 ∧∧ ／￣￣￣￣￣ (,,ﾟДﾟ)＜ はじまるよ！ ⊂ ⊃ ＼＿＿＿＿＿ ～| | ,, し`J
  • ©2014 Intelligentnet, Inc. All rights reserved. 今日のお話の前提1/2 1. これを聞いたからすぐに超素敵UI設計ができるよ うになるわけじゃありません。 2. でも聞かないよりは聞いたほうが良い設計はでき ると思います 3. 少なくともUI設計のタイミングで「どういう判断 基準で考えれば良いか」はわかるようになると思 います
  • ©2014 Intelligentnet, Inc. All rights reserved. 今日のお話の前提2/2 1. 便宜上なんとなく「UI設計」としています。「UI 設計」には本来ビジュアルデザインも入ってきま すが、今日はその手前の「画面構成まで」です。 2. だから「UI設計（の基礎）」＝「画面構成」とい うことで聞いてください。 3. メモは取らなくて大丈夫です。話すことのほとん どはスライドにしてあります。 4. そのため、物凄いスピードでスライドが進みます。 （たぶん1枚平均数秒です）
  • ©2014 Intelligentnet, Inc. All rights reserved. もくじ 1. UI設計はです 2. 「UI設計」の主な範囲と 「設計する前の大事なこと」 3. 「UI設計」のいろんな事例 4. UI設計の手法と実践（パターン）
  • ©2014 Intelligentnet, Inc. All rights reserved. でははじめます
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. (;;;;:::::) （;;;;;;;;:::::::::） （;;;;;(;;;;;;:::::);;:::） （;;;（;;;;;(;;;;;:::);;:::）;::） ヾ|i l i i l;|ｿ |i l i i l | |i ( ﾟДﾟ) ＜ それは気になる… |i (ﾉl !,| 人从从ﾈ
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 突然ですが質問です。
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 採用を強化したいので、 採用情報をもっと目立たせたい。
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. どうする？
  • ０１．UI設計はです こんなのは簡単です ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. こうすればいい
  • ０１．UI設計はです こうすればいい ©2014 Intelligentnet, Inc. All rights reserved. げっきゅう いちおくえん！
  • ０１．UI設計はです こんなのはUIの設計や提案とは言わない (*´з`).oO(厳密には言わないことはない) ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. グロナビはこうなります 一番推すべき コンテンツはこれです すべてのユーザーへの おすすめコンテンツを ここに置きます
  • ０１．UI設計はです これが本来あるべきUIの設計や提案 ©2014 Intelligentnet, Inc. All rights reserved. グロナビはこうなります 一番おすべき コンテンツはこれです すべてのユーザーへの おすすめコンテンツを 置きます
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. よくある話
  • ０１．UI設計はです 「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです 「全部目立たせて」 はい無理。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです 「全部目立たせて」 はい無理。 クライアントはだいたいこんなことを言う Ｂｙ C.W.ニコル（嘘） ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです 「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  • ０１．UI設計はです 「うちはサービスも顧客も たくさんで複雑なんだよね」 （Web屋さんにはわからんだろうけどね） 「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  • ０１．UI設計はです 「全部目立たせて」 そんなときはこう返す ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  • ０１．UI設計はです 「全部目立たせて」 （ ´_ゝ`）そうですか ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  • ０１．UI設計はです 「全部目立たせて」 （ ´_ゝ`）そうですか ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」
  • ０１．UI設計はです 「全部目立たせて」 ©2014 Intelligentnet, Inc. All rights reserved. 「だって全部大事だから」 「ここ事業部の担当者がうるさいので」 「うちはサービスがいっぱいあるから」 でも 無理なものは無理。 「うちはサービスも顧客も たくさんで複雑なんだよね」 （Web屋さんにはわからんだろうけどね） そもそもこういう話は だいたいどこでも同じ みんな複雑。
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. たとえばサーラ住宅サイト。
  • ０１．UI設計はです •キービジュアル •サムネイル •注力コンテンツ •イベント情報 •フッター ・・・とか。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです •キービジュアル •サムネイル •注力コンテンツ •イベント情報 たとえばこれをドラマの配役で考える ・・・とか。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 主演助演１ 脇役 助演２ エキストラ
  • たとえば「踊る大捜査線」０１．UI設計はです 主演織田裕二 助演柳葉敏郎 助演深津絵里 脇役水野美紀 エキストラたまに出てくる警官 ©2014 Intelligentnet, Inc. All rights reserved. 主演助演１ 脇役 助演２ エキストラ
  • ０１．UI設計はです たとえばこの配役が、こんなだったら。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. •織田裕二（BAC CORPORATION所属） •木村拓哉（ジャニーズ事務所所属） •オダギリジョー（鈍牛倶楽部所属） •堺雅人（田辺エージェンシー所属） •佐藤浩市（テアトル・ド・ポッシュ所属） •長瀬智也（ジャニーズ事務所所属） •二宮和也（ジャニーズ事務所所属） •妻夫木聡（ホリプロ所属） •向井理（ホリエージェンシー所属） •草彅剛（ジャニーズ事務所所属） •香取慎吾（ジャニーズ事務所所属） •唐沢寿明（奥さんも研音所属） 結論：ジャニーズ事務所はすごい
  • ０１．UI設計はです •二宮和也（ジャニーズ事務所所属） •妻夫木聡（ホリプロ所属） •向井理（ホリエージェンシー所属） •草彅剛（ジャニーズ事務所所属） •香取慎吾（ジャニーズ事務所所属） •唐沢寿明（奥さんも研音所属） ©2014 Intelligentnet, Inc. All rights reserved. •織田裕二（BAC CORPORATION所属） •木村拓哉（ジャニーズ事務所所属） •オダギリジョー（鈍牛倶楽部所属） •堺雅人（田辺エージェンシー所属） •佐藤浩市（テアトル・ド・ポッシュ所属） •長瀬智也（ジャニーズ事務所所属） っていうのは冗談で。 こうなる： 物語の軸はだれ？？(´・ω・｀)
  • ０１．UI設計はです たとえばこんなシーンが。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 織田裕二と妻夫木聡がカフェで会話 ↓ そこに堺雅人が合流 ↓ 草彅剛演じるウェイターが注文取りに ↓ 遠くの席に謎めいたオダギリジョー ↓ 窓の外を香取慎吾が通り過ぎる
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 織田裕二と妻夫木聡がカフェで会話 ↓ そこに堺雅人が合流 ↓ 草彅剛演じるウェイターが注文取りに ↓ 遠くの席に謎めいたオダギリジョー ↓ 窓の外を香取慎吾が通り過ぎる 実は、 ここからここまで、 物語に一切関係なし。
  • ０１．UI設計はです 工エｴェｪ(´д｀)ｪェｴエ工 ©2014 Intelligentnet, Inc. All rights reserved. 織田裕二と妻夫木聡がカフェで会話 ↓ そこに堺雅人が合流 ↓ 草彅剛演じるウェイターが注文取りに ↓ 遠くの席にオダギリジョー ↓ 窓の外を香取慎吾が通り過ぎる 実は、 ここからここまで、 物語に一切関係なし。 なんと出演1シーンのみ。
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. たとえば「オールスター感謝祭」。
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです もはやカオス TVならそれはそれで楽しいけど。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 全部目立たせようにも、 こうなっちゃうわけです。 1. 結果的に一人一人は目立たなくなる。 2. 見てる人がどこに注目すればいいのか わからなくなる
  • ０１．UI設計はです このように、 優先順位を決める 必要があるのです。 ©2014 Intelligentnet, Inc. All rights reserved. つまり。
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. さて。 「では何を主役にする？」
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. さて。 「では何を主役にする？」 それはビジネスが決める ビジネス側だけじゃないけどだいたいビジネス側の話。
  • ０１．UI設計はです ビジネスとはたとえば。 •何に注力している？ •ユーザーに受け入れられている部分は？ •どこが競合より優れている？ •逆にどこが競合より劣っている？ •何を中心に提供すればユーザーが喜ぶ？ ©2014 Intelligentnet, Inc. All rights reserved.
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. つまり。 つまり つーーーまーーーり
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 突然すぎますがまとめます この章をまとめます。 ０１．UI設計はです
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. 突然すぎますがまとめます この章をまとめます。 というわけでもう一度 ０１．UI設計はです
  • ０１．UI設計はです ©2014 Intelligentnet, Inc. All rights reserved. つまり。 つまり つーーーまーーーり
  • ０１．UI設計はです UI設計は天才の所業ではないのです まさかの否定が入ります ©2014 Intelligentnet, Inc. All rights reserved.
  • ©2014 Intelligentnet, Inc. All rights reserved. ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 |￣￣￣￣￣￣￣￣| | 覚えてね!!! | |＿＿＿＿＿＿＿＿| ∧∧ || ( ﾟдﾟ)|| / づΦ
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 みなさんは 分けて考えていますか？ ©2014 Intelligentnet, Inc. All rights reserved. 突然「ACジャパン」みたいな 質問を投げかけてみる。 ええぇぇーぃしぃいいー♪(・∀・)
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」これを。 ©2014 Intelligentnet, Inc. All rights reserved. どこに 何を どのように
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 「これをどのくらいのサイズと形で置こうかなぁ？」 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 「これをどのくらいのサイズと形で置こうかなぁ？」 ©2014 Intelligentnet, Inc. All rights reserved. そもそも “これ” を置くことは決定している？
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 3. 見（魅）せるのか ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに どのように
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 3. 見（魅）せるのか ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに どのように 本来いっぺんに 考えることではない。
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 3. 見（魅）せるのかここがUI設計の中心。 ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに どのように
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ↓ここがデザインの中心。 3. 見（魅）せるのか ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに どのように
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 じゃあこれは？ ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか 2. 置くのか どこに 3. 置くのか どのように 僕の大好きな「そもそも論」(・∀・)
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 何を置くのか 正しくは 何と何と何を置くのか。
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 何と何と何を置くのか。 これどうやって決める？ ﾊﾃ(゜-゜) ﾄﾞｳｼﾀﾓﾉｶ ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 何と何と何を置くのか。 |дﾟ)つ「このページでユーザーに 何を体験してもらう？」 これどうやって決める？ ﾊﾃ(゜-゜) ﾄﾞｳｼﾀﾓﾉｶ ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 これどうやって決める？ ©2014 Intelligentnet, Inc. All rights reserved. |дﾟ)つ「このページでユーザーに何を 体験してもらう？」 (゜-゜)ｺﾋﾟﾍﾟ・・・
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 |дﾟ)つ「このページでユーザーに何を 「前体の験しペてもーらうジ？」と次のページで これどうやって決める？ (゜-゜)ｺﾋﾟﾍﾟ・・・ ©2014 Intelligentnet, Inc. All rights reserved. 何を体験する？」 前の ページ この ページ 次の ページ |дﾟ)何があるー？ (゜-゜)ほすぃかきこφ(・ω・)ﾊﾟﾋﾟｺ ※フォーム
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 というわけでコイツの登場です。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. サイトストラクチャ。 （サイト構造図orサイトマップ） だんだんUIの話じゃなくなってきた・・・
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 家の設計と同じです （知らんけど）
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ（知らんけど） 使う人 どんな人が住みますか？ 家族構成は？ 生活スタイルは？ 家（住宅） の設計
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ（知らんけど） 使う人 どんな人が住みますか？ 家族構成は？ 生活スタイルは？ 家（住宅） の設計 設計図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ（知らんけど） 使う人 どんな人が住みますか？ 家族構成は？ 生活スタイルは？ 家（住宅） の設計 設計図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？ どんな部屋にしますか？ どんな配置にしますか？ どんなインテリアを置きますか？
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 各部屋の設計 Q.「この部屋、ドアってどっちにつければいい？」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ（知らんけど） 使う人 どんな人が住みますか？ 家族構成は？ 生活スタイルは？ 家（住宅） の設計 設計図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？ どんな部屋にしますか？ どんな配置にしますか？ どんなインテリアを置きますか？
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 各部屋の設計 Q.「この部屋、ドアってどっちにつければいい？」 ©2014 Intelligentnet, Inc. All rights reserved. 家ってこうでしょ（知らんけど） 使う人 どんな人が住みますか？ 家族構成は？ 生活スタイルは？ 家（住宅） の設計 設計図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？ どんな部屋にしますか？ どんな配置にしますか？ どんなインテリアを置きますか？ A.「廊下がある方に決まってんだろうがああああ ああああああああああああ(；ﾟДﾟ)」
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 Webサイトだって同じ。（知ら・・・知ってるよ！） 各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか？ 家族構成は？ 生活スタイルは？ 設計図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？ 使う人 どんな部屋にしますか？ どんな配置にしますか？ どんなインテリアを置きますか？ 使う人 どんな人が使いますか？ どんな使い方をしますか？ どんな目的を持った人ですか？ 家（住宅） の設計 Ｗｅｂサイト の設計
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 Webサイトだって同じ。（知ら・・・知ってるよ！） 各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか？ 家族構成は？ 生活スタイルは？ 設計図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？ 使う人 どんな部屋にしますか？ どんな配置にしますか？ どんなインテリアを置きますか？ 使う人 どんな人が使いますか？ どんな使い方をしますか？ どんな目的を持った人ですか？ 家（住宅） の設計 Ｗｅｂサイト の設計 サイト構造図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 Webサイトだって同じ。（知ら・・・知ってるよ！） 各部屋の設計 各部屋の設計 ©2014 Intelligentnet, Inc. All rights reserved. どんな人が住みますか？ 家族構成は？ 生活スタイルは？ 設計図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？ 使う人 どんな部屋にしますか？ どんな配置にしますか？ どんなインテリアを置きますか？ どんな人が使いますか？ どんな使い方をしますか？ どんな目的を持った人ですか？ サイト構造図 どんな全体構造にしますか？ 各部屋はどんな配置にしますか？ 使う人 どんな部屋にしますか？ どんな配置にしますか？ どんなデザインを置きますか？ 家（住宅） の設計 Ｗｅｂサイト の設計
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 「グロナビ何にする・・・？」 「KVエリアなにいれる？」 「コンテンツエリアはどうする？」 ©2014 Intelligentnet, Inc. All rights reserved. 画面構成を考える・・・？
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 「グロナビ何にする・・・？」 「KVのエリアなにいれる？」 このページだけで考えるのがマチガイ！！ ｽﾐﾏｾﾝ(*´з`) (ﾟДﾟ)ｺﾞﾙｧ! 「コンテンツエリアはどする？」 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 画面構成を考える前にその１ ≡≡≡ﾍ(*ﾟ∇ﾟ)ﾉｻﾖﾅﾗｰ ©2014 Intelligentnet, Inc. All rights reserved. 三(・∀・) 「どこから来る？」 「どこから出る？」
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 画面構成を考える前にその２ (・∀・) (・∀・) 「どういう塊で情報を見ていく？」 (・∀・) ぐる ぐる ぐる ぐる (・∀・) (・∀・) ぐる(・∀・) ぐる ぐる ぐる
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 画面構成を考える前にその３ (・∀・) ﾅﾙﾎﾄﾞﾅ 「どのページから違うカテゴリへ移動す る？」 三(・∀・)ｺｯﾁｰ 三(・∀・)ｺｯﾁﾔｰ ｱｯﾁｰ(・∀・)三
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 たとえばこれがこうなります ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」たとえばこれがこうなります グローバルナビ ©2014 Intelligentnet, Inc. All rights reserved. ローカルナビ
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」たとえばこれがこうなります 次ステップへのリンク ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」たとえばこれがこうなります コンバージョン導線 （アクションエリア） ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」たとえばこれがこうなります グローバルナビ 関連リンク ©2014 Intelligentnet, Inc. All rights reserved. ローカルナビ コンバージョン導線
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 この章をまとめます。 「UI設計」の主な範囲とは？ ©2014 Intelligentnet, Inc. All rights reserved.
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか どこに 2. 置くのか 3. 見（魅）せるのか どのように だいたいココ 「UI設計」の主な範囲 まとめますわ 「UI設計」の主な範囲は
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. 何を 1. 置くのか どこに 2. 置くのか 3. 見（魅）せるのか どのように だいたいココ 「UI設計」の主な範囲 まとめますわ でもココだけ考えたって 答えなんかでやしねぇ
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」「UI設計」の主な範囲 まとめますわ とっても大事なこと。 ©2014 Intelligentnet, Inc. All rights reserved. • ページのＵＸを考える • その前に前後のＵＸを考える • その前にサイト全体のＵＸを考える
  • ０２．「UI設計」の主な範囲と 「設計する前の大事なこと」「UI設計」の主な範囲 まとめますわ とっても大事なこと。 忘れないでね( ´_ゝ`) ©2014 Intelligentnet, Inc. All rights reserved. • ページのＵＸを考える • その前に前後のＵＸを考える • その前にサイト全体のＵＸを考える
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ∧__∧ （ ´∀｀） やっと具体論だお ( O┬O ≡◎-ヽJ┴◎
  • ０３．「UI設計」のいろんな事例 というわけで実際のサイトを例に ＵＩ設計的な何かを紹介したいと思います。 だってﾛｼﾞｯｸだけじゃつまらないﾃﾞｼｮ(´Д⊂ヽ ※ちなみに全部徳永の推測です。 本当にそうかどうかはわかりません。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０３．「UI設計」のいろんな事例 知らないとは言わせない２つのサイト Yahoo! Google ©2014 Intelligentnet, Inc. All rights reserved. やほー 知らなかったらアナタはもぐり( ´_ゝ`)
  • ０３．「UI設計」のいろんな事例 知らないとは言わせない２つのサイト ぜんぜんちがう・・・ →なぜ？(‘ω’) Yahoo! Google ©2014 Intelligentnet, Inc. All rights reserved. やほー
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. Yahoo! • リンクいっぱい • 機能（ツール）もいっぱい • コンテンツもいっぱい • 広告デカイ！ Yahoo!の場合
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. Yahoo!の場合 Yahoo! • リンクいっぱい • 機能（ツール）もいっぱい • コンテンツもいっぱい • 広告デカイ！ Yahoo!はメディアモデルなのです。
  • ０３．「UI設計」のいろんな事例 Google ©2014 Intelligentnet, Inc. All rights reserved. Google大先生の場合 • リンク少ない • 機能少ない • コンテンツ・・・ない • 広告・・・どこ？(；ﾟДﾟ) 潔いにもほどがある
  • ０３．「UI設計」のいろんな事例 Google ©2014 Intelligentnet, Inc. All rights reserved. Google大先生の場合 • リンク少ない • 機能少ない • コンテンツ・・・ない • 広告・・・どこ？(；ﾟДﾟ) 潔いにもほどがある Googleはインフラモデルなのです。
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ いっぱいサイト内に居てほしいとにかく検索してほしい
  • ０３．「UI設計」のいろんな事例 いっぱいサイト内に居てほしいとにかく検索してほしい ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ ビジネスモデルの違い
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ゲーム開発会社の場合。 SCE 任天堂セガ
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. SCEの場合 SCE • KVにPS4（ゲーム情報） • でもほとんど企業情報 • コンテンツ部分も企業情報 • PS専用サイトが別にある
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. SCEの場合 SCE • KVにPS4（ゲーム情報） • でもほとんど企業情報 • コンテンツ部分も企業情報 • PS専用サイトが別にある いわゆる一般的な「ゲーム会社のコーポレートサイト」？？
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 任天堂の場合 • 主力商品が全面に！ • ゲーム情報だらけ • ファビコンまでマリオ • 企業情報少ない 任天堂
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 任天堂の場合 • 主力商品が全面に！ • ゲーム情報だらけ • ファビコンまでマリオ • 企業情報少ない 任天堂 任天堂に求められているのは老若男女に対する 「ゲームのワクワク」ということ
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. セェェエガァアア♪じゃなくてセガの場合 セガ • 「・・・ふぁっ？！」 • というほどにゲーム情報ない • KVもゲームじゃない
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. セェェエガァアア♪じゃなくてセガの場合 セガ • 「・・・ふぁっ？！」 • というほどにゲーム情報ない • KVもゲームじゃない セガはもう「普通の家庭用ゲーム開発会社」じゃないのです （パチンコ、スロット、アミューズメント）
  • ０３．「UI設計」のいろんな事例 SCE 任天堂セガ ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ みんな知ってる！ わくわく！を提供 もはや家庭用ゲーム じゃないぜ 知らない人多い （”SCE”で検索する人は企業について知り たい。ゲームなら”PS3”で検索する）
  • ０３．「UI設計」のいろんな事例 SCE 任天堂セガ もはや家庭用ゲーム じゃないぜ ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ みんな知ってる！ わくわく！を提供 知らない人多い （”SCE”で検索する人は企業について知り たい。ゲームなら”PS3”で検索する） 「事業ドメイン」と「認知度」の違い
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 星のや富士屋ホテルチェーン 東急ホテルズワシントンホテル
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 星のや 富士屋ホテルチェーン
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 星のや 富士屋ホテルチェーン とりあえず見ろ！ 話はそれからだ！ とりあえず見ｒ・・・ たくさん体験できるよ(-”-)
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 東急ホテルズワシントンホテル
  • ０３．「UI設計」のいろんな事例 東急ホテルズワシントンホテル ©2014 Intelligentnet, Inc. All rights reserved. ホテル・旅館チェーンの場合 さくっと予約しろください
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・
  • ０３．「UI設計」のいろんな事例 ©2014 Intelligentnet, Inc. All rights reserved. 何が違うかというと・・・ ブランドプロミスの違い
  • ０３．「UI設計」のいろんな事例 この章をまとめます。 いろんな事例からわかることは？ ©2014 Intelligentnet, Inc. All rights reserved.
  • ０３．「UI設計」のいろんな事例 と思ったけど、とくにない。 ©2014 Intelligentnet, Inc. All rights reserved. ま、まと、まとめ・・・ いやまあ、前章で話した通り ビジネスやUXで変わるってことがわかればよいと思います。
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. ／￣￣￣￣￣＼ | おまいらも| ∩_∩ | | （´ー`） < がんばると| （ ） | | | | | | いい| （___）__） ＼＿＿＿＿＿／
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. まずは手法。
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. 手法その１：みんな大好き「ワイヤーフレーム」 ※架空案件の資料です
  • ０４．UI設計の手法と実践（パターン） って、実はこれじゃだめです。 ©2014 Intelligentnet, Inc. All rights reserved. 手法その１：みんな大好き「ワイヤーフレーム」
  • ０４．UI設計の手法と実践（パターン） 手法その１：みんな大好き「ワイヤーフレーム」 ※架空案件の資料です ©2014 Intelligentnet, Inc. All rights reserved. 名前がだめ。
  • ０４．UI設計の手法と実践（パターン） 手法その１：みんな大好き「ワイヤーフレーム」 ※架空案件の資料です ©2014 Intelligentnet, Inc. All rights reserved. 名前がだめ。 • 「ワイヤーフレーム（モデル）」とは、本来３DCGのレンダリング形式 の名前です。 • 「ワイヤー」で「表現されたモデル」 • つまり「ワイヤーフレーム」だけだと何のドキュメントかまでは指して いません。 • 「ビジネス文書」と言ってるのと同じレベル • それは報告書？稟議書？送付状？
  • ０４．UI設計の手法と実践（パターン） 手法その１：みんな大好き「ワイヤーフレーム」 ※架空案件の資料です ©2014 Intelligentnet, Inc. All rights reserved. 正しくは 「画面構成案ワイヤーフレーム」 他に「コンテンツワイヤーフレーム」なんかもある。
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. 手法その２：ペーパープロトタイプ • 手書きでつくる • 素早くつくれる • 手軽に修正できる • その場でディスカッション 「http://blog.webtron.jp/archives/2011/08/000083.html」より
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. 手法その２：ペーパープロトタイプ • 手書きでつくる • 素早くつくれる ここで要注意！ • 手軽に修正できる • その場でディスカッション
  • ０４．UI設計の手法と実践（パターン） 厳密には、手書き＝ペーパープロトタイプ ©2014 Intelligentnet, Inc. All rights reserved. 手法その２：ペーパープロトタイプ なわけではないです。 • 手書きでつくる • 素早くつくれる • 手軽に修正できる • その場でディスカッション
  • ０４．UI設計の手法と実践（パターン） 厳密には、手書き＝ペーパープロトタイプ • 手書きワイヤー＝ ペーパープロトタイプ× ©2014 Intelligentnet, Inc. All rights reserved. 手法その２：ペーパープロトタイプ なわけではないです。 • 手書きでつくる • 素早くつくれる • 手軽に修正できる • テストするための紙のワイヤー • その場でディスカッション ＝ ペーパープロトタイプ○ • できるディレクターがつくる紙のワイヤー ＝ ペーパープロトタイプ(ｷﾘｯ
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. 手法その３：ユーザエクスペリエンスフロー （UXフロー）  UXフローの仮説立案（手法）について  ユーザーが迷わない構造を実現するために、サイト 内外でのユーザー行動の仮説を立てます  ユーザーがどこで何を感じ、何を求めるのかを定義 します  それぞれのタスク、状況で発生するニーズ、求めら れるコンテンツを導き出します。  UXフローによるWebサイト上の理想的なサービス設 計に対して、現状のWebサイトがどのような状態に あるのかを検証し、改善案を導き出します マンション購入を検討している （知識あり＆なし） サイトにたどり着く ブリリアについて調べる マンション購入ノウハウを調べる 商品・サービスについて調べる 実際に商品を見る・体験する 問い合わせる 購入 検討 繰り返す 事例や感想について調べる ＵＸフローはお客様（ユーザー）と企業の繋がりをスケッチした 関係図です。お客様に対して、いかに自社最高のサービスを提供 し、ゴールまで導くかを描いた満足体験のストーリーです。
  • ０４．UI設計の手法と実践（パターン） 手法その３：ユーザエクスペリエンスフロー （UXフロー）  UXフローの仮説立案（手法）について  ユーザーが迷わない構造を実現するために、サイト 内外でのユーザー行動の仮説を立てます  ユーザーがどこで何を感じ、何を求めるのかを定義 します ユーザーとどこで出会い、どこで興味を持ち、どこでアクションを  それぞれのタスク、状況で発生するニーズ、求めら れるコンテンツを導き出します。 起こしてもらうのかをフロー図にしたもの。 自社最高の満足体験をフローにしたもの。  本プロジェクトでは、UXフローによるWebサイト上 の理想的なサービス設計に対して、現状のWebサイ トがどのような状態にあるのかを検証し、改善案を 導き出します ©2014 Intelligentnet, Inc. All rights reserved. マンション購入を検討している （知識あり＆なし） サイトにたどり着く ブリリアについて調べる マンション購入ノウハウを調べる 商品・サービスについて調べる 実際に商品を見る・体験する 問い合わせる 購入 検討 繰り返す 事例や感想について調べる ＵＸフローはお客様（ユーザー）と企業の繋がりをスケッチした 関係図です。お客様に対して、いかに自社最高のサービスを提供 し、ゴールまで導くかを描いた満足体験のストーリーです。
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. 手法その他：ほかにこんなものがあります。 • カスタマージャーニーマップ • ペルソナ/シナリオ法 • アクティングアウト（厳密には設計じゃなくてテスト手法） • プロトコル分析（厳密には設計じゃなくてテスト手法） • モックアップ
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. 続いて実践（パターン）。
  • ０４．UI設計の手法と実践（パターン） といいつつ、事前の話の通り、 具体的なパターンみたいのはやめときます。 （調べりゃわかるので） ©2014 Intelligentnet, Inc. All rights reserved.
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. 一応、基本的なナビゲーションパターン •機能ナビゲーション •階層型ナビゲーション （グローバル、ローカルなど） •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション （参照元：書籍「IA100」より）
  • ０４．UI設計の手法と実践（パターン） 気になるようだったら調べてみてください ©2014 Intelligentnet, Inc. All rights reserved. 一応、基本的なナビゲーションパターン •機能ナビゲーション •階層型ナビゲーション （グローバル、ローカルなど） •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション （参照元：書籍「IA100」より）
  • ０４．UI設計の手法と実践（パターン） この章をまとめます。 手法と実践の話をしましたが。 ©2014 Intelligentnet, Inc. All rights reserved.
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ
  • ０４．UI設計の手法と実践（パターン） ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ 手法パターン
  • ０４．UI設計の手法と実践（パターン） •機能ナビゲーション •階層型ナビゲーション •パンくずナビゲーション •ダイナミックナビゲーション •ダイレクトナビゲーション •ステップナビゲーション 手法パターン ©2014 Intelligentnet, Inc. All rights reserved. UI設計の手法と実践のまとめ •ワイヤーフレーム •ペーパープロトタイプ •UXフロー •カスタマージャーニーマップ ・・・これだと当てずっぽうになっちゃうので。
  • ©2014 Intelligentnet, Inc. All rights reserved. というわけで全体のまとめ。
  • ©2014 Intelligentnet, Inc. All rights reserved. まとめると何が言いたいかというと 1. UI設計は天才の所業ではないのです 2. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」 この２つで話してきたこと
  • 2. ０２．「UI設計」の主な範囲と「設計する前の大事なこと」 ©2014 Intelligentnet, Inc. All rights reserved. まとめると何が言いたいかというと 1. UI設計は天才の所業ではないのです この２つで話してきたこと ビジネス側をみてぇー、 ユーザーの行動をみてぇ、 前後の関係性をみてぇー、 優先順位を考えてぇー、
  • これは「ロジック」ですね。 ©2014 Intelligentnet, Inc. All rights reserved. まとめると何が言いたいかというと 1. UI設計は天才の所業ではないのです 2. 「UI設計」の主な範囲と「それ以外」 この２つで話してきたこと ビジネス側をみてぇー、 ユーザーの行動をみてぇ、 前後の関係性をみてぇー、 優先順位を考えてぇー、
  • ©2014 Intelligentnet, Inc. All rights reserved. つまり。 つまり つーーーまーーーり ｺﾋﾟﾍﾟ(・∀・)ｺﾋﾟﾍﾟ
  • ©2014 Intelligentnet, Inc. All rights reserved. UI設計の基本は ロジック 手法パターン なのです。
  • ©2014 Intelligentnet, Inc. All rights reserved. だから、最後に言いたいこと。 •「んん～・・っ！こうだ！」とかっていきなり出すものでもない •そのページだけでお絵かきするものでもない •だから鍛錬をつめばある程度までは誰だってたどり着ける •そもそも徳永は美的センスがない（泣） •でも、日々「ロジック」と「手法」と「パターン」 を磨けば、ある程度はできるようになるのです。
  • ここから先はオマケ（時間があればやります） 興味がある人はあとで読んでみてください。 ©2014 Intelligentnet, Inc. All rights reserved.
  • おまけ おまけ１：UI設計能力を向上させるには ©2014 Intelligentnet, Inc. All rights reserved.
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには １．たくさんつくる
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ２．たくさんサイトを見る
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ３．ユーザー体験を重ねる
  • おまけ UI設計能力を向上させるには ３．ユーザー体験を重ねる タッチパネル接客（サービス） 銀行とか手続き ©2014 Intelligentnet, Inc. All rights reserved. ※クロスドリーム、「CROSS i(クロスアイ)」
  • おまけ UI設計能力を向上させるには ３．ユーザー体験を重ねる タッチパネル接客（サービス） 銀行とか手続き ©2014 Intelligentnet, Inc. All rights reserved. ※クロスドリーム、「CROSS i(クロスアイ)」 いつだって「ユーザー体験」
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ４．○○に学ぶ
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ４．○○に学ぶ ﾅﾝﾄｶｶﾝﾄｶ株式会社沿革 2000年6月創立。 創業者：軟渡寛治が当時フリーター だった関都海斗とﾅﾝｶﾝ有限会社起業。 軟渡が初代社長就任に。その後すぐに 現役員の丸山が合流。2003年4月に洗 濯機、食洗器の取り扱いを開始。 2005年3月問題解決型家政婦「市原」 を提供開始。2006年7月現住所へ本社 移転（東京都港区西新橋3-24-9 飯田ビ ル3F）2010年7月ISMS（情報セキュ リティマネジメントシステム） ISO27001:2005の認証を取得。 2014年11月代表取締役変更。関都海 斗が社長に就任。軟渡寛治の甥の妻の 姉である夜蔵北未が外部顧問として参 画 読む気しねぇ( ﾟДﾟ) ※社名・沿革すべて適当です
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ４．○○に学ぶ どこに何が書いてある かわかるようになった (*’▽’) でもつまんねぇ ( ﾟДﾟ)ﾖﾐﾀｸﾈｪ ﾅﾝﾄｶｶﾝﾄｶ株式会社沿革 ■2000年6月 創業者：軟渡寛治が当時フリーター だった関都海斗とﾅﾝｶﾝ有限会社起業。 軟渡が初代社長就任に。その後すぐに 現役員の丸山が合流。 ■2003年4月 洗濯機、食洗器の取り扱いを開始。 ■2005年3月 問題解決型家政婦「市原」を提供開始。 ■2006年7月 現住所へ本社移転（東京都港区西新橋 3-24-9 飯田ビル3F） ■2014年11月 代表取締役変更。関都海斗が社長に就 任。軟渡寛治の甥の妻の姉である夜蔵 北未が外部顧※問社と名し・て沿参革画すべて適当です
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ４．○○に学ぶ インテリジェントネットの歴史 ■2000年6月創立。 岡健太郎さんが和田嘉弘さんを若手に 起業。円城均さんが初代社長に。すぐ に石丸さん石川さん合流。 ■2005年4月 Googleアドワーズ広告、オーバーチュ ア広告（現Yahoo!リスティング広告） の取り扱いを開始。 ■2006年3月ASP型アクセス解析 「PYXIS」を開始。2006年6月現住所 へ本社移転（東京都港区西新橋3-24-9 飯田ビル3F） ■2011年6月 ISMS（情報セキュリティマネジメント システム）ISO27001:2005の認証を取 得。 どこに何が書いてある かわかるようになった (*’▽’) じゃあこれならどう？ でもつまんねぇ ( ﾟДﾟ)ﾖﾐﾀｸﾈｪ
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ４．○○に学ぶ (ﾟωﾟ)ﾎｩ・・・ ﾅﾝﾄｶｶﾝﾄｶ株式会社の歴史 ■軟渡氏。ダイヤの原石「ｶﾝﾄ」を発見 2000年6月創業。 軟渡寛治が当時フリーターだった関都 海斗とﾅﾝｶﾝ有限会社起業。軟渡が初代 社長就任に。その後すぐに現役員の丸 山が合流。 ■なぜか「洗い物」事業に 洗濯機、食洗器の取り扱いを開始。 ■さらになぜか「人」を送り込む 問題解決型家政婦「市原」を提供開始。 ■当然、手狭になりまして 現住所へ本社移転（東京都港区西新橋 3-24-9 飯田ビル3F） ■原石がダイヤに。そしてコネ採用 代表取締役変更。関都海斗が社長に就 任。軟渡寛治の甥の妻の姉である夜蔵 北未が外部顧問として参画 ※社名・沿革すべて適当です
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ４．雑誌に学ぶ
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ４．雑誌に学ぶ 雑誌には学ぶところが たくさんあります。 •テンプレートという考え方 •文書構造という考え方 •文章の割り付け •何よりも見出しの付け方
  • おまけ もちろん雑誌だけじゃないです ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには ４．雑誌に学ぶ 雑誌には学ぶところが たくさんあります。 •テンプレートという考え方 •文書構造という考え方 •文章の割り付け •何よりも見出しの付け方
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには を、まとめると。
  • おまけ つまり亀仙流である ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには
  • おまけ ©2014 Intelligentnet, Inc. All rights reserved. UI設計能力を向上させるには こういうこと。
  • おまけ 以上ですありがとうございました。 インテリジェントネット株式会社 http://www.ini.co.jp/ インテリジェントネットFacebook https://www.facebook.com/intelligentnet ©2014 Intelligentnet, Inc. All rights reserved.