SlideShare a Scribd company logo
1 of 70
これからのWebデザイナーに
必要なモノ・コト
2015年8月28日(土曜日) 株式会社アラタナ
クリエイティブディレクター 金田 麻琴
© Aratana inc. For Internal Use Only
@Kinta_Taisa
【 WEB配布向け 抜粋資料 】
© Aratana inc. For Internal Use Only
Profile
金田 麻琴
Webデザイナー(クリエイティブディレクター)
おひつじ座 B型
宮崎県立佐土原高等学校 卒業
@Kinta_Taisa
 Webデザイン
 マークアップ
- コーディング(HTML+CSS)
- UI構築・フロントエンド系JavaScript少々
 Webディレクション(顧客対応・フロント制作)
 企画提案・プレゼンテーション
「 デザインで課題解決します! 」
© Aratana inc. For Internal Use Only
デザインで課題解決できる時代は
半分終わっている?
© Aratana inc. For Internal Use Only
しかし、ここで問題提起
© Aratana inc. For Internal Use Only
問題・悩み
デザインによる
企画・戦略
デザインによる
問題解決
もちろんデザインによる課題解決は可能。
出来なくなったわけではない。
© Aratana inc. For Internal Use Only
解 決 解 決 解 決 解 決 解 決
解 決 解 決 解 決 解 決 解 決
以前は問題が「10」あったとしても
デザインで「10」の問題解決をすることは可能だった。
過去のデザインの仕事
© Aratana inc. For Internal Use Only
解 決 解 決
解決
不可
解 決
解決
不可
解 決
解決
不可
解 決
解決
不可
解決
不可
いま、デザインで「5」の問題解決は可能だが
残りの「5」は、デザイン単体での解決が難しい…
しかし今日のデザインの仕事は…
どうしてそうなった?
Webにどんな経緯があった?
© Aratana inc. For Internal Use Only
© Aratana inc. For Internal Use Only
1998年
1999年
2000年
2001年
2002年
IT業界は、毎年が激動の時代
2006年
2007年
2008〜2009年
2004年
2015年
© Aratana inc. For Internal Use Only
1998年 2000年 2002年
変化は課題解決を徐々に複雑にしていく…
2006年 2015年
クリエイティブ ビジネス
(デザイン以外の仕事の事)
デバイスの
利用傾向
世の中の
社会的動向
人の傾向
コミュニケーション
課題解決
© Aratana inc. For Internal Use Only
参考までに、スマホとPCのネット利用者傾向について
スマートフォン:ブラウザとアプリからのネット利用 参考:ニールセン株式会社(東京都港区)発表資料より引用
 今年の冬には、スマホでのネット利用者がPCを超える?
 Webデザインは「PC対応をメイン」にしてて良いのだろうか?
インターネット利用者数 25ヶ月推移
© Aratana inc. For Internal Use Only
参考までに、スマホとPCのネット利用者傾向について
スマートフォン:ブラウザとアプリからのネット利用 参考:ニールセン株式会社(東京都港区)発表資料より引用
 1日あたりで見ると、PCでのネット利用がメインとは言えない?
 スマホによるネット利用時間の方が年々増えてる?
1日あたりのインターネット利用時間 2015年4月
© Aratana inc. For Internal Use Only
参考までに、スマホとPCのネット利用者傾向について
スマートフォン:ブラウザとアプリからのネット利用 参考:ニールセン株式会社(東京都港区)発表資料より引用
 若い世代のネット利用時間はどんどん増えていく?
 女性のネット利用時間が長いのはなぜ?
 SNSがネット利用時間の増加を助長してる?
性年代別 スマートフォンからの1日あたりのインターネット利用時間 2015年4月
© Aratana inc. For Internal Use Only
ユーザーが情報を利用する環境・目的は無限。
SNSがツールとして浸透したことで
コミュニケーションの方法も無限に。
作るべき・やるべき事は必ずしも
一つではなくなった。
解決手段としてWebサイトを作ることが
ゴールの全てでは無くなった。
デザインで課題解決できる時代は
半分終わっている。
© Aratana inc. For Internal Use Only
© Aratana inc. For Internal Use Only
※ 辻様、誠にありがとうございます。
春雨
【 は る さ め 】
Search Engine Optimizer 辻正浩さんの講話より引用
© Aratana inc. For Internal Use Only
春雨
ある日の「春雨」検索結果(イメージ)
© Aratana inc. For Internal Use Only
春雨
ほんのちょっと置いて・・・ある日の「春雨」検索結果(イメージ)
春雨?
春雨!
春雨?
春雨?
春雨!
© Aratana inc. For Internal Use Only
春雨
Googleは「春雨」をこう判断している?
食品としての
「春雨」
艦これとしての
「春雨」
つい昨日までは
コッチだとばかり思ってたけど…
どうやら最近のトレンドでは
コッチを指すみたい。
でも「春雨 レシピ」とか
他の候補も案内しとこ。
どちらも誤りじゃないからね!
食品としての
「春雨」
© Aratana inc. For Internal Use Only
って、なんなんだ?
© Aratana inc. For Internal Use Only
それは、検索エンジンであって、それだけではない存在。
..........etc
Googleは、さまざまな情報をインデックスできて
解析・分析できて、世の中の「トレンド」を察知できる存在。
© Aratana inc. For Internal Use Only
は、ただ単にプログラムで条件検索しているだけの
『検索エンジン』という存在ではなく…
は、その日その時、その地域の何かを情報から判断し
トレンドとして反映する『人工知能』と言える。
© Aratana inc. For Internal Use Only
Webデザイナーが
これから取り組むべきコト。
© Aratana inc. For Internal Use Only
それは、ただ依頼されたものを
そのままデザインしない…というコト。
© Aratana inc. For Internal Use Only
ナンバーワンである理由…
オンリーワンである理由…
なにで、どのジャンルで、一番になりたいか。
© Aratana inc. For Internal Use Only
クライアントが世に出したい情報の
を引き出したデザイン
クリエイティブをしましょう。
「 本 質 」
© Aratana inc. For Internal Use Only
そうしなければ・・・
クライアントが自信を持っているモノや、その理由など
「本質」が描かれていないページは、トレンドの波にのまれてしまう。
目立つことが出来ない。
※イメージ
© Aratana inc. For Internal Use Only
デザインで問題解決する時代は半分終わっている。
デザイン単体で解決できる問題ばかりではなくなった。
解決するために必要なデザインの形も一つではなくなった。
…ゴール自体も一つでは無くなった。
ネット端末も、コミュニケーション方法も、無限に広がった。
本質が何かを考えるための
例
© Aratana inc. For Internal Use Only
デザインで問題解決する時代は半分終わっている。
デザイン単体で解決できる問題ばかりではなくなった。
解決するために必要なデザインの形も一つではなくなった。
…ゴール自体も一つでは無くなった。
ネット端末も、コミュニケーション方法も、無限に広がった。
そんな話題を耳にしたあなた、
「至高の激ウマスイーツ」
© Aratana inc. For Internal Use Only
そのサイトにどんなイメージを求めますか?
※イメージ
© Aratana inc. For Internal Use Only
もし、こんなイメージ・情報が載っていたら・・・どう感じますか?
※イメージ
© Aratana inc. For Internal Use Only
なんとなく描いたイメージって…こっちですよね?
※イメージ
© Aratana inc. For Internal Use Only
これよりも現実的で、複雑で
かつ多角的な「問題」が絡んで存在している…というのが
これから先のWebデザインです。
「至高の激ウマスイーツ=スーツの社長?」
「本質」って、そうそう簡単に引き出せるもの?
コミニュケーションに努めることが全て?
© Aratana inc. For Internal Use Only
Information Architecture
( 情報アーキテクチャ )
© Aratana inc. For Internal Use Only
情報アーキテクチャ(IA)とは?
知識やデータの組織化を意味し
「情報をわかりやすく伝え」「受け手が情報を探しやすくする」
ために、どのような思考のプロセスをもって
デザイン設計するべきかをまとめたモノである。
© Aratana inc. For Internal Use Only
IAで、デザイナーはこうなれる。
閃きとアイディア
センスあるデザインが武器
閃き・アイディア・センス
情報をロジカルに分析した
デザイン設計が武器
閃いたり、発想したり、アイディアが降ってくるのを待つだけじゃなく
目の前にある「情報」を材料にして思考すると・・・
© Aratana inc. For Internal Use Only
IAで、デザイナーはこうなれる。
閃きとアイディア
センスあるデザインが武器
閃き・アイディア・センス
情報をロジカルに分析した
デザイン設計が武器
閃いたり、発想・アイディアが降ってくるのを待つだけじゃなく
目の前にある「情報」を材料に、IA思考すると・・・
IA的解説
「至高の激ウマスイーツのお店」という情報を
正しく伝える(設計する)ためには…
激ウマスイーツを
想像した人・興味がある人
 想像している至高のスイーツ
 自分の好みのスイーツ
 買うかもしれない欲(極少々)
 お店への興味・関心(少々)
抱いているイメージ・情報
激ウマスイーツを売りたいお店
抱いた情報は「期待」に
無意識にお店に求める
 こだわりのスイーツ(量産できない・材料がいい、等)
 よく売れている = 流行っているという認識
 実績(本場アメリカで人気の…的な)
 自負(NYでは老舗、等)
与えたいイメージ・情報
自負・実績を全面出し
しているイメージ
スイーツそのもの
「数量限定」を全面出し
しているイメージ
用意したイメージ・情報
ナニ
コレ?
ユーザーの抱く
イメージ・情報に
答えてないから×
ウマ
ソー!
実績・自負は
伝えられてないが
イメージには答えられる。
© Aratana inc. For Internal Use Only
IA的解説
まずは「激ウマスイーツ」の情報を届けよう。
お店の「実績・自負」は、その後からでも届けられる。
ナニコレ?
ウマソー!
お店が出した
イメージ・情報
お店の実績・自負推し
スイーツ・数量限定推し
イメージ・情報を受け取った
ユーザーの感覚・感情
予想されるユーザーの
次の段階(リアクション予想)
…とりあえず他に
激ウマスイーツ情報が無いか探す。
誰これ…?(とりあえずクリック)
激ウマな感じしない…(他サイトとの比較へ)
他にも激ウマスイーツが無いか探す!
どんくらい激ウマなの!?
どんなお店?名店なの?
この段階で情報を
伝え直すのは難しい。
この段階なら
他の情報が伝えられる。
© Aratana inc. For Internal Use Only
IA的解説
IAはデザイン設計の前に、必ず3つの情報分析を行う。
※ IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計(長谷川 敦士 著)より引用
© Aratana inc. For Internal Use Only
IA的解説
そして、3つの分析に基づいて「設計」し、デザインていく。
※ IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計(長谷川 敦士 著)より引用
© Aratana inc. For Internal Use Only
IA的解説
IAにはデザインの知識・センスだけではなく
幅広い知識・能力を活かす事ができる。
※ IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計(長谷川 敦士 著)より引用
© Aratana inc. For Internal Use Only
Webデザイナーが
これから取り組むべきコト。
© Aratana inc. For Internal Use Only
複雑な問題に、ひらめきやセンスだけで
立ち向かおうとしないこと。
周囲の情報をよく観察して、話し合って、
を用いたデザイン設計をしましょう。
「 I A 」
© Aratana inc. For Internal Use Only
SMART PHONE
©Apple Inc.
© Aratana inc. For Internal Use Only
iOS、Android、端末により異なる挙動。
スマホ、タブレット、ファブレット
どんどん増える画面解像度。
またもやガラパゴス化する
SMART PHONE。
SMART PHONEは悪か?
クリエィティブを混乱させる嫌な存在か?
© Aratana inc. For Internal Use Only
SMART PHONEは悪か?
クリエィティブを混乱させる嫌な存在か?
SMART PHONEは
新たな活躍の場をWebデザイナーにもたらしてくれてます。
いいえ
© Aratana inc. For Internal Use Only
iOS、Android、端末により異なる挙動。
SMART PHONEは悪か?
クリエィティブを混乱させる嫌な存在か?
jQuery、jQuery mobile、BootStrap…etc
フロントエンドUIを構築するための技術は
既に多くのものがローコスト化され、ナレッジされている。
多くのフロントエンド技術は
整いつつある。
© Aratana inc. For Internal Use Only
iOS、Android、端末により異なる挙動。
スマホ、タブレット、ファブレット
どんどん増える画面解像度。
またもやガラパゴス化する
SMART PHONE。
SMART PHONEは悪か?
クリエィティブを混乱させる嫌な存在か?
デザインは
どうだろうか?
© Aratana inc. For Internal Use Only
スマホファースト
SMART PHONE FIRST
© Aratana inc. For Internal Use Only
とても大切な前提
スマホによるネット利用率は年々上がっている。
Webのスマホ対応、デザインのノウハウは、いま最も求められている。
スマートフォン:ブラウザとアプリからのネット利用 参考:ニールセン株式会社(東京都港区)発表資料より引用
© Aratana inc. For Internal Use Only
いま、スマートフォンには様々な要望・欲求(ニーズ)が
ユーザー・クライアントの双方から寄せられています。
スマホファーストでデザイン?
しかしスマホデザインには
まだ「王道」と呼べるナレッジが、あまり蓄積されていません。
なので、これから先、Webデザイナーはまず
PC向けよりも先に「スマホデザイン」に注力しましょう。
© Aratana inc. For Internal Use Only
いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図
© Aratana inc. For Internal Use Only
いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図
ヘッダーは基本的に
この位置で固定(スクロールさせない)
※ その時のIAによる。
ページ先頭へ戻るアイコン
基本的にこの位置で固定。
ブラウザフッターからおおよそ
20〜30pxほど下を空ける。
※ ブラウザフッターの挙動が
おかしい時があるため…
※大まかな目安をお伝えするために「px」を用いています。(実際の構築時は「%」などによるレスポンシブ対応を推奨します。)
© Aratana inc. For Internal Use Only
いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図
この周囲の5〜10pxのエリアには
操作系UI、およびTextを置かない。
 指先どころか、爪先じゃないと
タップできない。
 テキストの頭が画面端に
くっついている or はみ出ていると
読みにくい。
マージン5〜10px程度の空き
こういった演出上の意図が
デザイン上ある場合は空けない。
(画面をフルに使って解放感を等)
※大まかな目安をお伝えするために「px」を用いています。(実際の構築時は「%」などによるレスポンシブ対応を推奨します。)
© Aratana inc. For Internal Use Only
いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図
操作系UIを上下左右に寄せる場合
おおよそこのエリアと同じか
少し大きいくらいでレイアウトする
※ 目安約40〜60px程度
 UIが小さ過ぎるのはストレス。
 掌が小さめの方でも、片手操作の時に
多少操作がしやすいよう、上下左右に
寄せたボタンのサイズを考える。
※大まかな目安をお伝えするために「px」を用いています。(実際の構築時は「%」などによるレスポンシブ対応を推奨します。)
© Aratana inc. For Internal Use Only
いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図
中央にあるほどタップしやすく
上下左右ともに、外に向かうほど
タップしにくくなる。
 指は自在に伸びないし、スマホも
柔軟に伸び縮みしたりしない…
 少なからずタップしにくいエリアに
ボタン等がレイアウトされてしまうのは
仕方がない。
 両手操作が主なユーザーなら、あまり
この件は考慮しなくて良い。
 中央は一貫してタップしやすい位置。
有効に使うこと。
タップ時のストレスなどを
マップ化したもの。
© Aratana inc. For Internal Use Only
いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図
ページタイトル、メインとなる画像
ほか見出し等々…そのページ中で
「最も読ませたい」と考える要素 =
主役となる要素は、画面中央位置に
表示されるようレイアウトする。
 中央は最もタップしやすい
エリアでもある。
 主役となる要素を中央揃えで
センタリング位置に配置すれば
どのデバイスの画面サイズでも
中央に表示されるようになる。
※ 表示的にデバイス依存しにくい。
※大まかな目安をお伝えするために「px」を用いています。(実際の構築時は「%」などによるレスポンシブ対応を推奨します。)
© Aratana inc. For Internal Use Only
Webデザイナーが
これから取り組むべきコト。
© Aratana inc. For Internal Use Only
スマホのトレンドは変化しやすく
PCサイトデザインのように「王道」が無い。
可能な限り多くのナレッジを貯めるためにも、
でのWebデザインに注力しましょう。
「 スマホファースト 」
まとめ
© Aratana inc. For Internal Use Only
デザインで課題解決できる時代は
半分終わっている。
© Aratana inc. For Internal Use Only
問題提起
© Aratana inc. For Internal Use Only
1998年 2000年 2002年 2006年 2015年
クリエイティブ ビジネス
(デザイン以外の仕事の事)
デバイスの
利用傾向
世の中の
社会的動向
人の傾向
コミュニケーション
マーケティング
(市場に関する事)
課題解決
「クリエイティブ」だけでは、全ての課題は解決できない
© Aratana inc. For Internal Use Only
コミュニケーションに注力し
「本当に伝えるべきこと」を見つけ、デザインする。
ESSENCE
【 本質を引き出したデザイン 】
© Aratana inc. For Internal Use Only
しかし、情報は見えにくくて複雑。
社会は自由で、無限で、曖昧な世界…
© Aratana inc. For Internal Use Only
© Aratana inc. For Internal Use Only
INFORMATIN
ARCHITECTURE
複雑な問題に、ひらめきやセンスだけで
立ち向かおうとしないこと。
情報を分析して設計するデザインを身につける。
【 インフォメーション アーキテクチャ 】
© Aratana inc. For Internal Use Only
SMART PHONE
©Apple Inc.
© Aratana inc. For Internal Use Only
SMART PHONE FIRST
フロントエンドの技術は確立してきているが
デザインはトレンドが移り変わりやすい。
いち早くスマホデザインに取り組み「王道」を作ること。
【 スマートフォン ファースト なデザイン 】
© Aratana inc. For Internal Use Only
【 自分自身のクリエイティブを、ディレクションしましょう! 】
Creative direction!
ご静聴ありがとうございました。
© Aratana inc. For Internal Use Only

More Related Content

Similar to これからのWebデザイナーに必要なモノ・コト(配布版)

[社内向け]Titanium勉強会
[社内向け]Titanium勉強会[社内向け]Titanium勉強会
[社内向け]Titanium勉強会Rei Matsushita
 
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』Ryohei Sogo
 
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Atsushi Harada
 
AI-OCR 導入最前線 (AI inside)
AI-OCR 導入最前線 (AI inside)AI-OCR 導入最前線 (AI inside)
AI-OCR 導入最前線 (AI inside)Shotaro Umeda
 
#コロナに負けない ためのノーコード事業
#コロナに負けない ためのノーコード事業#コロナに負けない ためのノーコード事業
#コロナに負けない ためのノーコード事業Syuntaro Kane
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewRakuten Group, Inc.
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料Monaca
 
技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)Toru Yamaguchi
 
プログラムを自動生成する技術 ~ Programming by Example ~(NTTデータ テクノロジーカンファレンス 2020 発表資料)
プログラムを自動生成する技術 ~ Programming by Example ~(NTTデータ テクノロジーカンファレンス 2020 発表資料)プログラムを自動生成する技術 ~ Programming by Example ~(NTTデータ テクノロジーカンファレンス 2020 発表資料)
プログラムを自動生成する技術 ~ Programming by Example ~(NTTデータ テクノロジーカンファレンス 2020 発表資料)NTT DATA Technology & Innovation
 
アプリ開発の勉強の始め方
アプリ開発の勉強の始め方アプリ開発の勉強の始め方
アプリ開発の勉強の始め方koichinagata4
 
マルチデバイスに対応するためのAuto layout
マルチデバイスに対応するためのAuto layoutマルチデバイスに対応するためのAuto layout
マルチデバイスに対応するためのAuto layoutasakahara
 
ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~Ken Azuma
 
自社取り組み紹介(BetaComputing)
自社取り組み紹介(BetaComputing)自社取り組み紹介(BetaComputing)
自社取り組み紹介(BetaComputing)Yasuhiro Kobayashi
 
11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料Yuta Sayama
 

Similar to これからのWebデザイナーに必要なモノ・コト(配布版) (20)

[社内向け]Titanium勉強会
[社内向け]Titanium勉強会[社内向け]Titanium勉強会
[社内向け]Titanium勉強会
 
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
 
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
 
AI-OCR 導入最前線 (AI inside)
AI-OCR 導入最前線 (AI inside)AI-OCR 導入最前線 (AI inside)
AI-OCR 導入最前線 (AI inside)
 
#コロナに負けない ためのノーコード事業
#コロナに負けない ためのノーコード事業#コロナに負けない ためのノーコード事業
#コロナに負けない ためのノーコード事業
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
 
Smfl20201001
Smfl20201001Smfl20201001
Smfl20201001
 
技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)技術選択とアーキテクトの役割 (要約版)
技術選択とアーキテクトの役割 (要約版)
 
プログラムを自動生成する技術 ~ Programming by Example ~(NTTデータ テクノロジーカンファレンス 2020 発表資料)
プログラムを自動生成する技術 ~ Programming by Example ~(NTTデータ テクノロジーカンファレンス 2020 発表資料)プログラムを自動生成する技術 ~ Programming by Example ~(NTTデータ テクノロジーカンファレンス 2020 発表資料)
プログラムを自動生成する技術 ~ Programming by Example ~(NTTデータ テクノロジーカンファレンス 2020 発表資料)
 
アプリ開発の勉強の始め方
アプリ開発の勉強の始め方アプリ開発の勉強の始め方
アプリ開発の勉強の始め方
 
.NET Lab2022年2月
.NET Lab2022年2月.NET Lab2022年2月
.NET Lab2022年2月
 
マルチデバイスに対応するためのAuto layout
マルチデバイスに対応するためのAuto layoutマルチデバイスに対応するためのAuto layout
マルチデバイスに対応するためのAuto layout
 
デバイス時代の Web UI コンポーネント活用
デバイス時代の Web UI コンポーネント活用デバイス時代の Web UI コンポーネント活用
デバイス時代の Web UI コンポーネント活用
 
ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~ビジネスとデザイン ~ビジネスは悪くない~
ビジネスとデザイン ~ビジネスは悪くない~
 
自社取り組み紹介(BetaComputing)
自社取り組み紹介(BetaComputing)自社取り組み紹介(BetaComputing)
自社取り組み紹介(BetaComputing)
 
Googleアシスタントアプリ実際のところ
Googleアシスタントアプリ実際のところ Googleアシスタントアプリ実際のところ
Googleアシスタントアプリ実際のところ
 
11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料
 
EIoTLTvol1
EIoTLTvol1EIoTLTvol1
EIoTLTvol1
 

これからのWebデザイナーに必要なモノ・コト(配布版)

  • 2. © Aratana inc. For Internal Use Only Profile 金田 麻琴 Webデザイナー(クリエイティブディレクター) おひつじ座 B型 宮崎県立佐土原高等学校 卒業 @Kinta_Taisa  Webデザイン  マークアップ - コーディング(HTML+CSS) - UI構築・フロントエンド系JavaScript少々  Webディレクション(顧客対応・フロント制作)  企画提案・プレゼンテーション
  • 3. 「 デザインで課題解決します! 」 © Aratana inc. For Internal Use Only
  • 5. © Aratana inc. For Internal Use Only 問題・悩み デザインによる 企画・戦略 デザインによる 問題解決 もちろんデザインによる課題解決は可能。 出来なくなったわけではない。
  • 6. © Aratana inc. For Internal Use Only 解 決 解 決 解 決 解 決 解 決 解 決 解 決 解 決 解 決 解 決 以前は問題が「10」あったとしても デザインで「10」の問題解決をすることは可能だった。 過去のデザインの仕事
  • 7. © Aratana inc. For Internal Use Only 解 決 解 決 解決 不可 解 決 解決 不可 解 決 解決 不可 解 決 解決 不可 解決 不可 いま、デザインで「5」の問題解決は可能だが 残りの「5」は、デザイン単体での解決が難しい… しかし今日のデザインの仕事は…
  • 9. © Aratana inc. For Internal Use Only 1998年 1999年 2000年 2001年 2002年 IT業界は、毎年が激動の時代 2006年 2007年 2008〜2009年 2004年 2015年
  • 10. © Aratana inc. For Internal Use Only 1998年 2000年 2002年 変化は課題解決を徐々に複雑にしていく… 2006年 2015年 クリエイティブ ビジネス (デザイン以外の仕事の事) デバイスの 利用傾向 世の中の 社会的動向 人の傾向 コミュニケーション 課題解決
  • 11. © Aratana inc. For Internal Use Only 参考までに、スマホとPCのネット利用者傾向について スマートフォン:ブラウザとアプリからのネット利用 参考:ニールセン株式会社(東京都港区)発表資料より引用  今年の冬には、スマホでのネット利用者がPCを超える?  Webデザインは「PC対応をメイン」にしてて良いのだろうか? インターネット利用者数 25ヶ月推移
  • 12. © Aratana inc. For Internal Use Only 参考までに、スマホとPCのネット利用者傾向について スマートフォン:ブラウザとアプリからのネット利用 参考:ニールセン株式会社(東京都港区)発表資料より引用  1日あたりで見ると、PCでのネット利用がメインとは言えない?  スマホによるネット利用時間の方が年々増えてる? 1日あたりのインターネット利用時間 2015年4月
  • 13. © Aratana inc. For Internal Use Only 参考までに、スマホとPCのネット利用者傾向について スマートフォン:ブラウザとアプリからのネット利用 参考:ニールセン株式会社(東京都港区)発表資料より引用  若い世代のネット利用時間はどんどん増えていく?  女性のネット利用時間が長いのはなぜ?  SNSがネット利用時間の増加を助長してる? 性年代別 スマートフォンからの1日あたりのインターネット利用時間 2015年4月
  • 14. © Aratana inc. For Internal Use Only ユーザーが情報を利用する環境・目的は無限。 SNSがツールとして浸透したことで コミュニケーションの方法も無限に。 作るべき・やるべき事は必ずしも 一つではなくなった。 解決手段としてWebサイトを作ることが ゴールの全てでは無くなった。
  • 16. © Aratana inc. For Internal Use Only ※ 辻様、誠にありがとうございます。 春雨 【 は る さ め 】 Search Engine Optimizer 辻正浩さんの講話より引用
  • 17. © Aratana inc. For Internal Use Only 春雨 ある日の「春雨」検索結果(イメージ)
  • 18. © Aratana inc. For Internal Use Only 春雨 ほんのちょっと置いて・・・ある日の「春雨」検索結果(イメージ) 春雨? 春雨! 春雨? 春雨? 春雨!
  • 19. © Aratana inc. For Internal Use Only 春雨 Googleは「春雨」をこう判断している? 食品としての 「春雨」 艦これとしての 「春雨」 つい昨日までは コッチだとばかり思ってたけど… どうやら最近のトレンドでは コッチを指すみたい。 でも「春雨 レシピ」とか 他の候補も案内しとこ。 どちらも誤りじゃないからね! 食品としての 「春雨」
  • 20. © Aratana inc. For Internal Use Only って、なんなんだ?
  • 21. © Aratana inc. For Internal Use Only それは、検索エンジンであって、それだけではない存在。 ..........etc Googleは、さまざまな情報をインデックスできて 解析・分析できて、世の中の「トレンド」を察知できる存在。
  • 22. © Aratana inc. For Internal Use Only は、ただ単にプログラムで条件検索しているだけの 『検索エンジン』という存在ではなく… は、その日その時、その地域の何かを情報から判断し トレンドとして反映する『人工知能』と言える。
  • 23. © Aratana inc. For Internal Use Only Webデザイナーが これから取り組むべきコト。
  • 24. © Aratana inc. For Internal Use Only それは、ただ依頼されたものを そのままデザインしない…というコト。
  • 25. © Aratana inc. For Internal Use Only ナンバーワンである理由… オンリーワンである理由… なにで、どのジャンルで、一番になりたいか。
  • 26. © Aratana inc. For Internal Use Only クライアントが世に出したい情報の を引き出したデザイン クリエイティブをしましょう。 「 本 質 」
  • 27. © Aratana inc. For Internal Use Only そうしなければ・・・ クライアントが自信を持っているモノや、その理由など 「本質」が描かれていないページは、トレンドの波にのまれてしまう。 目立つことが出来ない。 ※イメージ
  • 28. © Aratana inc. For Internal Use Only デザインで問題解決する時代は半分終わっている。 デザイン単体で解決できる問題ばかりではなくなった。 解決するために必要なデザインの形も一つではなくなった。 …ゴール自体も一つでは無くなった。 ネット端末も、コミュニケーション方法も、無限に広がった。 本質が何かを考えるための 例
  • 29. © Aratana inc. For Internal Use Only デザインで問題解決する時代は半分終わっている。 デザイン単体で解決できる問題ばかりではなくなった。 解決するために必要なデザインの形も一つではなくなった。 …ゴール自体も一つでは無くなった。 ネット端末も、コミュニケーション方法も、無限に広がった。 そんな話題を耳にしたあなた、 「至高の激ウマスイーツ」
  • 30. © Aratana inc. For Internal Use Only そのサイトにどんなイメージを求めますか? ※イメージ
  • 31. © Aratana inc. For Internal Use Only もし、こんなイメージ・情報が載っていたら・・・どう感じますか? ※イメージ
  • 32. © Aratana inc. For Internal Use Only なんとなく描いたイメージって…こっちですよね? ※イメージ
  • 33. © Aratana inc. For Internal Use Only これよりも現実的で、複雑で かつ多角的な「問題」が絡んで存在している…というのが これから先のWebデザインです。 「至高の激ウマスイーツ=スーツの社長?」 「本質」って、そうそう簡単に引き出せるもの? コミニュケーションに努めることが全て?
  • 34. © Aratana inc. For Internal Use Only Information Architecture ( 情報アーキテクチャ )
  • 35. © Aratana inc. For Internal Use Only 情報アーキテクチャ(IA)とは? 知識やデータの組織化を意味し 「情報をわかりやすく伝え」「受け手が情報を探しやすくする」 ために、どのような思考のプロセスをもって デザイン設計するべきかをまとめたモノである。
  • 36. © Aratana inc. For Internal Use Only IAで、デザイナーはこうなれる。 閃きとアイディア センスあるデザインが武器 閃き・アイディア・センス 情報をロジカルに分析した デザイン設計が武器 閃いたり、発想したり、アイディアが降ってくるのを待つだけじゃなく 目の前にある「情報」を材料にして思考すると・・・
  • 37. © Aratana inc. For Internal Use Only IAで、デザイナーはこうなれる。 閃きとアイディア センスあるデザインが武器 閃き・アイディア・センス 情報をロジカルに分析した デザイン設計が武器 閃いたり、発想・アイディアが降ってくるのを待つだけじゃなく 目の前にある「情報」を材料に、IA思考すると・・・ IA的解説 「至高の激ウマスイーツのお店」という情報を 正しく伝える(設計する)ためには… 激ウマスイーツを 想像した人・興味がある人  想像している至高のスイーツ  自分の好みのスイーツ  買うかもしれない欲(極少々)  お店への興味・関心(少々) 抱いているイメージ・情報 激ウマスイーツを売りたいお店 抱いた情報は「期待」に 無意識にお店に求める  こだわりのスイーツ(量産できない・材料がいい、等)  よく売れている = 流行っているという認識  実績(本場アメリカで人気の…的な)  自負(NYでは老舗、等) 与えたいイメージ・情報 自負・実績を全面出し しているイメージ スイーツそのもの 「数量限定」を全面出し しているイメージ 用意したイメージ・情報 ナニ コレ? ユーザーの抱く イメージ・情報に 答えてないから× ウマ ソー! 実績・自負は 伝えられてないが イメージには答えられる。
  • 38. © Aratana inc. For Internal Use Only IA的解説 まずは「激ウマスイーツ」の情報を届けよう。 お店の「実績・自負」は、その後からでも届けられる。 ナニコレ? ウマソー! お店が出した イメージ・情報 お店の実績・自負推し スイーツ・数量限定推し イメージ・情報を受け取った ユーザーの感覚・感情 予想されるユーザーの 次の段階(リアクション予想) …とりあえず他に 激ウマスイーツ情報が無いか探す。 誰これ…?(とりあえずクリック) 激ウマな感じしない…(他サイトとの比較へ) 他にも激ウマスイーツが無いか探す! どんくらい激ウマなの!? どんなお店?名店なの? この段階で情報を 伝え直すのは難しい。 この段階なら 他の情報が伝えられる。
  • 39. © Aratana inc. For Internal Use Only IA的解説 IAはデザイン設計の前に、必ず3つの情報分析を行う。 ※ IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計(長谷川 敦士 著)より引用
  • 40. © Aratana inc. For Internal Use Only IA的解説 そして、3つの分析に基づいて「設計」し、デザインていく。 ※ IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計(長谷川 敦士 著)より引用
  • 41. © Aratana inc. For Internal Use Only IA的解説 IAにはデザインの知識・センスだけではなく 幅広い知識・能力を活かす事ができる。 ※ IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計(長谷川 敦士 著)より引用
  • 42. © Aratana inc. For Internal Use Only Webデザイナーが これから取り組むべきコト。
  • 43. © Aratana inc. For Internal Use Only 複雑な問題に、ひらめきやセンスだけで 立ち向かおうとしないこと。 周囲の情報をよく観察して、話し合って、 を用いたデザイン設計をしましょう。 「 I A 」
  • 44. © Aratana inc. For Internal Use Only SMART PHONE ©Apple Inc.
  • 45. © Aratana inc. For Internal Use Only iOS、Android、端末により異なる挙動。 スマホ、タブレット、ファブレット どんどん増える画面解像度。 またもやガラパゴス化する SMART PHONE。 SMART PHONEは悪か? クリエィティブを混乱させる嫌な存在か?
  • 46. © Aratana inc. For Internal Use Only SMART PHONEは悪か? クリエィティブを混乱させる嫌な存在か? SMART PHONEは 新たな活躍の場をWebデザイナーにもたらしてくれてます。 いいえ
  • 47. © Aratana inc. For Internal Use Only iOS、Android、端末により異なる挙動。 SMART PHONEは悪か? クリエィティブを混乱させる嫌な存在か? jQuery、jQuery mobile、BootStrap…etc フロントエンドUIを構築するための技術は 既に多くのものがローコスト化され、ナレッジされている。 多くのフロントエンド技術は 整いつつある。
  • 48. © Aratana inc. For Internal Use Only iOS、Android、端末により異なる挙動。 スマホ、タブレット、ファブレット どんどん増える画面解像度。 またもやガラパゴス化する SMART PHONE。 SMART PHONEは悪か? クリエィティブを混乱させる嫌な存在か? デザインは どうだろうか?
  • 49. © Aratana inc. For Internal Use Only スマホファースト SMART PHONE FIRST
  • 50. © Aratana inc. For Internal Use Only とても大切な前提 スマホによるネット利用率は年々上がっている。 Webのスマホ対応、デザインのノウハウは、いま最も求められている。 スマートフォン:ブラウザとアプリからのネット利用 参考:ニールセン株式会社(東京都港区)発表資料より引用
  • 51. © Aratana inc. For Internal Use Only いま、スマートフォンには様々な要望・欲求(ニーズ)が ユーザー・クライアントの双方から寄せられています。 スマホファーストでデザイン? しかしスマホデザインには まだ「王道」と呼べるナレッジが、あまり蓄積されていません。 なので、これから先、Webデザイナーはまず PC向けよりも先に「スマホデザイン」に注力しましょう。
  • 52. © Aratana inc. For Internal Use Only いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図
  • 53. © Aratana inc. For Internal Use Only いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図 ヘッダーは基本的に この位置で固定(スクロールさせない) ※ その時のIAによる。 ページ先頭へ戻るアイコン 基本的にこの位置で固定。 ブラウザフッターからおおよそ 20〜30pxほど下を空ける。 ※ ブラウザフッターの挙動が おかしい時があるため… ※大まかな目安をお伝えするために「px」を用いています。(実際の構築時は「%」などによるレスポンシブ対応を推奨します。)
  • 54. © Aratana inc. For Internal Use Only いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図 この周囲の5〜10pxのエリアには 操作系UI、およびTextを置かない。  指先どころか、爪先じゃないと タップできない。  テキストの頭が画面端に くっついている or はみ出ていると 読みにくい。 マージン5〜10px程度の空き こういった演出上の意図が デザイン上ある場合は空けない。 (画面をフルに使って解放感を等) ※大まかな目安をお伝えするために「px」を用いています。(実際の構築時は「%」などによるレスポンシブ対応を推奨します。)
  • 55. © Aratana inc. For Internal Use Only いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図 操作系UIを上下左右に寄せる場合 おおよそこのエリアと同じか 少し大きいくらいでレイアウトする ※ 目安約40〜60px程度  UIが小さ過ぎるのはストレス。  掌が小さめの方でも、片手操作の時に 多少操作がしやすいよう、上下左右に 寄せたボタンのサイズを考える。 ※大まかな目安をお伝えするために「px」を用いています。(実際の構築時は「%」などによるレスポンシブ対応を推奨します。)
  • 56. © Aratana inc. For Internal Use Only いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図 中央にあるほどタップしやすく 上下左右ともに、外に向かうほど タップしにくくなる。  指は自在に伸びないし、スマホも 柔軟に伸び縮みしたりしない…  少なからずタップしにくいエリアに ボタン等がレイアウトされてしまうのは 仕方がない。  両手操作が主なユーザーなら、あまり この件は考慮しなくて良い。  中央は一貫してタップしやすい位置。 有効に使うこと。 タップ時のストレスなどを マップ化したもの。
  • 57. © Aratana inc. For Internal Use Only いま僕が、スマホデザイン・マークアップを考える上で念頭に置いていること、の図 ページタイトル、メインとなる画像 ほか見出し等々…そのページ中で 「最も読ませたい」と考える要素 = 主役となる要素は、画面中央位置に 表示されるようレイアウトする。  中央は最もタップしやすい エリアでもある。  主役となる要素を中央揃えで センタリング位置に配置すれば どのデバイスの画面サイズでも 中央に表示されるようになる。 ※ 表示的にデバイス依存しにくい。 ※大まかな目安をお伝えするために「px」を用いています。(実際の構築時は「%」などによるレスポンシブ対応を推奨します。)
  • 58. © Aratana inc. For Internal Use Only Webデザイナーが これから取り組むべきコト。
  • 59. © Aratana inc. For Internal Use Only スマホのトレンドは変化しやすく PCサイトデザインのように「王道」が無い。 可能な限り多くのナレッジを貯めるためにも、 でのWebデザインに注力しましょう。 「 スマホファースト 」
  • 60. まとめ © Aratana inc. For Internal Use Only
  • 62. © Aratana inc. For Internal Use Only 1998年 2000年 2002年 2006年 2015年 クリエイティブ ビジネス (デザイン以外の仕事の事) デバイスの 利用傾向 世の中の 社会的動向 人の傾向 コミュニケーション マーケティング (市場に関する事) 課題解決 「クリエイティブ」だけでは、全ての課題は解決できない
  • 63. © Aratana inc. For Internal Use Only コミュニケーションに注力し 「本当に伝えるべきこと」を見つけ、デザインする。 ESSENCE 【 本質を引き出したデザイン 】
  • 64. © Aratana inc. For Internal Use Only しかし、情報は見えにくくて複雑。 社会は自由で、無限で、曖昧な世界…
  • 65. © Aratana inc. For Internal Use Only
  • 66. © Aratana inc. For Internal Use Only INFORMATIN ARCHITECTURE 複雑な問題に、ひらめきやセンスだけで 立ち向かおうとしないこと。 情報を分析して設計するデザインを身につける。 【 インフォメーション アーキテクチャ 】
  • 67. © Aratana inc. For Internal Use Only SMART PHONE ©Apple Inc.
  • 68. © Aratana inc. For Internal Use Only SMART PHONE FIRST フロントエンドの技術は確立してきているが デザインはトレンドが移り変わりやすい。 いち早くスマホデザインに取り組み「王道」を作ること。 【 スマートフォン ファースト なデザイン 】
  • 69. © Aratana inc. For Internal Use Only 【 自分自身のクリエイティブを、ディレクションしましょう! 】 Creative direction!

Editor's Notes

  1. 海辺の45階ぐらいあるホテルのWebサイト構築とか ハイでアールなアジア系の家電屋さんのやつとか ----- 会議メモ (15/08/28 22:20) ----- さて、ここで問題定義。 「デザインであなたの課題を解決します」というキャッチコピー、たまに聞くんですけど・・・
  2. デザインで課題解決できる時代は、半分終わってるんじゃないかと。 爆弾発言かもしれませんが・・・最近そう思うんです。
  3. もちろん、誤解無いように言っておきますが、デザインで課題解決なんかできるかよ!ってことではないんです。
  4. しかし、過去と今ではもう、何かが違うんですね。 以前は10ある問題のうち、10は何かしらのデザイン提案で解決できたように思います。
  5. しかし、今のデザインの仕事は・・・5つぐらいなら解決できるんじゃないですかね。 残りの5つに問題があるんですよ。これがデザイン単体ではもう、解決できないんです。
  6. 一体、過去と今の間に何があったんだろう・・・ そう思いますよね。そんなに何か失われたり、形変わってしまったのかと・・・ 具体的には、そのどちらでもないんですね。ちょっと経緯を紐解きましょう。
  7. これは、過去から今日までの時間の流れを表す線だと思ってください。 ----- 会議メモ (15/08/28 22:29) ----- まず、僕がこの業界に入って仕事を始めたのが、おおよそ16・7年前です。 当時、楽天市場、これが1998年ぐらいに出てきました。 次にオークションという言葉が流行りまして、マニアックなネット民以外の・・・いままでネットに興味が無かったような一般民が、徐々に集まってくるようになりました。 大きく変わり始めたのは、2000年代にはいってからですね。Googleさんがやってきます。 当時はまだ、日本国内だとYahooを使ってる人が圧倒的に多かったです。 しかも「ディレクトリ型」っていう検索で、九州・宮崎県・宮崎市・医療・歯医者・・・今井歯科・・・みたいな感じで、フォルダをクリックして掘り下げながら情報を探すんですね。 これをGoogleが、勢いで変えていくんです。 程なくして課金型ネット広告というものが出始めますね。 2001年代になると、Googleは日本法人を立ち上げます。国内のWebサイトが怒号の勢いでインデックス化されていきました。 となってくると・・・もうWebサイト同士が競争し合い始めるんですね。 我こそが我こそが、検索で一位に! 広告で目立つところに! 自然な流れでSEOというものが活発になります。 検索エンジン対策ですね。 ----- 会議メモ (15/08/28 22:36) ----- ・・・と、ここらへんでもう一つ大きな動きがありましたね。 携帯電話です、ドコモのI-modeがでてきます。 あとはみなさんご存知の通り、au、vodafone・・・はSoftbankになりましたけど。 2006年2007年頃になると、もう携帯持ってない人なんてほとんど居なかったんじゃないですかね。 ・・・以上、ここまでで、今の時代の基礎みたいなものが出来てきてます。 ----- 会議メモ (15/08/28 22:38) ----- しかし、さらに動きがありました。 そう、2007年のiPhoneですね。 程なくしてAndroidもでてきます。 ここに来ると、もうテキストと写真が載ってるようなWebでは物足りなくなってきました。 Youtube、ニコニコ動画・・・あとまぁいろいろと、ネット上のコンテンツがとんでもなく増えてきます。 ----- 会議メモ (15/08/28 22:40) ----- ネットがどんどん充実して、どんどん高機能になってきたら、一度ユーザーのリテラシーは上がっていくんです。 だけど、今度は下がります。 上がりすぎた高機能性に、ユーザーがついていけなくなりますね。 もっと便利に、もっと簡単に・・・テクノロジーが進歩して、あらゆる物事を簡単にできるようにしていくんです。 ----- 会議メモ (15/08/28 22:42) ----- すでにスマホの登場と同時にでてきていた、ItunesとGooglePlay。 気づけばスマホでお買い物なんて当たり前の事でした。 カードコンビニで買えば、音楽もアプリも、なにかしらの商品もかな・・・小学生でも買える時代になってますよね。 ----- 会議メモ (15/08/28 22:45) ----- で、また大きな動きがありましたよね。 SNSがここらへんですごい盛り上がりました。 それまでは、まぁmixiがありましたけど、当時のWebって、「サイトとユーザー」の情報のやり取りが主だってたと思います。 SNSが生まれた事で、情報がどのように交わされるのか、生まれるのか、人と人はどうコミュニケーションをとるのか・・・もう無限大ですね。 「バズる」なんて言葉があります。 「コニュニケーションをデザインする」とか、あまり安易に言える台詞じゃありません。 コミュニケーションは、デザインの預かり知らないところで、自分で勝手にデザインして盛り上がってくるんです。 それが、ある意味バズる、というやつですね。 ----- 会議メモ (15/08/28 22:47) ----- さて、2008年から2009年の間で、facebookが世界規模のSNSシェアを誇るようになります。 twitterも広まってます。 で、SNSはまだまだ増えます。 インスタグラム、最近芸能人が、味噌汁とご飯の並べ方で話題に上がってましたね。なんだその話題! google+もいますよ。 ----- 会議メモ (15/08/28 22:48) ----- もう入りきりませんけど・・・個人がチャンネルを持つ時代になりました。 HIKAKIN。 端末、そういえばまだありましたね。 iPad、タブレット端末ですね。 ----- 会議メモ (15/08/28 22:49) ----- で、2005年・・・ みなさん、以上が経緯ですけど、ついてこれました?(汗 なにはともあれ、ここと、この時期が、いちばんIT業界に変化をもたらしてますよね。
  8. とにかく今、ユーザーはありとあらゆる端末を駆使して、ありとあらゆる情報を娯楽で楽しんでます。ゲームもそうですよ。 SNSはすごいと思いますね。もはや人のコミュニケーションの方法は無限に広がってます。 しかしそれらが、デザイン単体では課題解決ができなくなってしまった要因です。 自由でインパクトがあって、他の誰も持ってないようなWebサイトを作れば喜ぶ・・・なんてことも多かったWebデザインですが Googleの登場で少しビジネスを意識しなければならないようになります。 まぁでも、これはまだまだ・・・クリエイティブの延長として乗り越えられる変化でした。 つぎです。 端末が増えた。もう数えられない。 でもそれぞれに、画面解像度とブラウザの概念がある。 PCとスマホじゃ、根本的に操作が違う。スマホはマウスいらない。 コミュニケーションも無限に広がった。 世の中の社会的な動きは、すぐにネット上の情報に反映される。 人はネットに、無限にいろんなことを求めます。 仕事、娯楽、勉強などなど。 一体なにが人にウケるのか、深く深く知るようにしないとわからない。
  9. 一つの例です。 ここに「春雨」というキーワードがあります。
  10. HCIとは、人とコンピューターの関連を調べることで、人がコンピューターをより効率的に使えるような設計を研究する分野
  11. ----- 会議メモ (15/08/29 14:25) ----- クリエイティブは、ここにいる僕たち全員にとって、大切な行動原理です。 しかし、それはもう、「デザイン単体」とかではどうすることもできないようなシーンに来てる。 僕たちは、自分たちのクリエイティブが今後どうなっていくのか、毎年のように考えて 方向転換、意味づけの変更が必要であれば、情報をよく読んで柔軟に受け入れなくてはなりません。 自分たちのクリエイティブを、誰に言われるでもなく・・・ディレクションしなくてはいけないんです。 一件でも多くのWebデザインを、Webサイトを、クリエイティブをするために・・・ みんなで熱い、クリエイティブディレクションをこれからやっていきましょう! 以上です!