SlideShare una empresa de Scribd logo
1 de 71
8
                 Web デザインのウソ・ホント
                 ∼ Webらしくデザインするためのヒント
    Web Design




長谷川恭久                            CSS Nite in TAKAMATSU
                                 2012 年 2 月 25 日
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
ウソ   ホント
見た目    コントロール




   ピクセル
  パーフェクト
            ページ
まったく同じの見た目にできる
     ...と思っていたけど無理ですね
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webサイト   利用者
Webサイト   ソフトウェア   ハードウェア   インプット   利用者
完成したかのように見える


間違った期待を与えてしまう


           IE6対応?
Progressive Enhancement




                          photo by Eustaquio Santimano
コンテンツ


  マークアップ

           スタイル




           インタラクション
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
ボックス   +角丸
+グラデーション   +シャドー
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
見た目は違って当然


コンテンツ配信


          体験を重ねていく




                 photo by Eustaquio Santimano
ピクセルパーフェクトに出来る
    ...デザイナーのコダワリかと思ってた
動的なデザイン


                    解像度の多様化


                                  限られた仮説




photo by EB Morse
photo by Dan King
PPI

     iPhone 4+      326

    MacBook Air     132

   iMac 27-inch     109

       iPad         132

   Sony Vaio Z92    140

     Xperia S       342

   Galaxy Nexus     316

   HTC Desire HD    217

  LG Optimus LTE    329

16:9ワイドスクリーンモニタ    85∼138

 4:3スタンダードモニタ      61∼126
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
流れ
                        リズム




      ピクセル   <   バランス・調和




     サイズ


                   空間



                              photo by popupology
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
完全なコントロールはできる
     ...思うようにはいきません
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
デザイナー   <
        =   利用者
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
コントロールの余地


柔軟性とのバランス


       それぞれの体験を提供
Webはページの集まりである
   ...あまり良いメタファではないですね
<モーグリ投げ>
                                            モーグリとの絆が深まると、モーグリを投げ、は
                                            るか遠方のアイテムを探すことができるようにな                 キャンペーン概要
                                            ります。ただ、その扱いの粗さにモーグリは内心
                                            穏やかじゃない様子…!?
                                                                                   特典の紹介

                                                                                   ゲームの概要
ファイナルファンタジーXIII-2 予約受付中
                                                                                   動画
                                       【ローソン・HMV限定特典付】PS3 ファイナルファン
                                  タジー XIII-2

                                  Game Soft (Playstation3)
                                                                                   キャラクター紹介
                                                      オンラインセール価格(税込):¥7,280

                                                                   参考価格(税込):¥7,980 システム

                                                                                   バトル
                                      【ローソン・HMV限定特典付】Xbox360 ファイナル
                                  ファンタジー XIII-2                                    世界
                                  Game Soft (Xbox360)

                                                      オンラインセール価格(税込):¥7,280
                                                                                   ストアの価格
                                                                   参考価格(税込):¥7,980




   ©2011 SQUARE ENIX CO.,LTD ALL Rights Reserved.CHARACTER DESIGN:TETSUYA NOMURA
キャンペーンをツイート

              担当者向け情報




動画をクリッピング




               姉妹サイト
Facebook
                             ブログ



                                   YouTube
Google
                    Webサイト




                               Twitter
    モバイル
Responsive Design
Text Reflow (CSS Regions)
ページではなくスペース


コンテンツの整理と構造化


               動き出すコンテンツ
見た目    コントロール




   ピクセル
  パーフェクト
            ページ
標準技術        ツール



   マークアップ     コミュニティ
これからも標準技術が残る
   ...オープンであることの重要性
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
オープン


                シンプル


未知への対応
マークアップはより重要になる
      ...コンテンツを支える基盤
photo by Yersinia pestis
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
コンテンツへの意味付け


人とデータを繋げる

       Webブラウザ以外へ
同じツールはこれからも使える
  ...Photoshop や Fireworks は、より便利に
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
アセット制作


      プロトタイピング


クリエイティブの共有
コミュニティはより重要になる
    ...2人以上が集まることに意味がある
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
若い業界


ネットワークの強み


  コラボレーション
ウソ   ホント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Design is the fundamental soul of a human-

made creation that ends up expressing itself in
successive outer layers of the product or service.


                                   Steve Jobs
デザインとは、人間の創造物の根源となる魂で

あり、それが結果として製品やサービスの表面

にあらわれる。


               Steve Jobs
8
                 長谷川恭久
                 mail@yasuhisa.com   www.yasuhisa.com   @yhassy
    Web Design

Más contenido relacionado

La actualidad más candente

スマートフォン向けゲームにおける ユーザーの動向分析
スマートフォン向けゲームにおけるユーザーの動向分析スマートフォン向けゲームにおけるユーザーの動向分析
スマートフォン向けゲームにおける ユーザーの動向分析Shibaura Institute of Technology
 
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」paiza
 
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?cfm_art
 
Power Automate for desktopで最強の防具を手に入れた話
Power Automate for desktopで最強の防具を手に入れた話Power Automate for desktopで最強の防具を手に入れた話
Power Automate for desktopで最強の防具を手に入れた話kinuasa
 
ガンスリンガーストラトス分析
ガンスリンガーストラトス分析ガンスリンガーストラトス分析
ガンスリンガーストラトス分析kei aran
 
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるにはGREE/Art
 
スマートフォンゲームのチート事情
スマートフォンゲームのチート事情スマートフォンゲームのチート事情
スマートフォンゲームのチート事情直生 亀山
 
Unity × graphics × effects
Unity × graphics × effectsUnity × graphics × effects
Unity × graphics × effectsHironori Sugino
 
各種ゲームエンジンの紹介と利用について
各種ゲームエンジンの紹介と利用について各種ゲームエンジンの紹介と利用について
各種ゲームエンジンの紹介と利用についてKatsutoshi Makino
 
Unity恐くないよ!!
Unity恐くないよ!!Unity恐くないよ!!
Unity恐くないよ!!nakamura001
 
わたしのVisual studio環境
わたしのVisual studio環境わたしのVisual studio環境
わたしのVisual studio環境Keigo Ando
 
世界・日本のコンテンツ及びビデオゲーム市場の動向 (Digital content and video game market in the world ...
世界・日本のコンテンツ及びビデオゲーム市場の動向 (Digital content and video game market in the world ...世界・日本のコンテンツ及びビデオゲーム市場の動向 (Digital content and video game market in the world ...
世界・日本のコンテンツ及びビデオゲーム市場の動向 (Digital content and video game market in the world ...Nobushige Kobayashi (Hichibe)
 
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版小林 信行
 
CEDEC 20110907 ショートセッション マネタイズとゲーミフィケーション
CEDEC 20110907 ショートセッション マネタイズとゲーミフィケーションCEDEC 20110907 ショートセッション マネタイズとゲーミフィケーション
CEDEC 20110907 ショートセッション マネタイズとゲーミフィケーションKoji Fukada
 

La actualidad más candente (20)

ゲーム産業講義2015年1月
ゲーム産業講義2015年1月ゲーム産業講義2015年1月
ゲーム産業講義2015年1月
 
スマートフォン向けゲームにおける ユーザーの動向分析
スマートフォン向けゲームにおけるユーザーの動向分析スマートフォン向けゲームにおけるユーザーの動向分析
スマートフォン向けゲームにおける ユーザーの動向分析
 
ゲーム産業講義2017年9月
ゲーム産業講義2017年9月ゲーム産業講義2017年9月
ゲーム産業講義2017年9月
 
日本ゲーム産業史(関西大学講演)Up用
日本ゲーム産業史(関西大学講演)Up用日本ゲーム産業史(関西大学講演)Up用
日本ゲーム産業史(関西大学講演)Up用
 
日本ゲーム産業史概説
日本ゲーム産業史概説日本ゲーム産業史概説
日本ゲーム産業史概説
 
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
【社内勉強会資料】自社サービスエンジニアの為の「UX設計と情報設計」
 
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
 
ゲーム産業講義2020年6月
ゲーム産業講義2020年6月ゲーム産業講義2020年6月
ゲーム産業講義2020年6月
 
Power Automate for desktopで最強の防具を手に入れた話
Power Automate for desktopで最強の防具を手に入れた話Power Automate for desktopで最強の防具を手に入れた話
Power Automate for desktopで最強の防具を手に入れた話
 
ガンスリンガーストラトス分析
ガンスリンガーストラトス分析ガンスリンガーストラトス分析
ガンスリンガーストラトス分析
 
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには【CEDEC2016】Ui discussionのススメ  uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
 
スマートフォンゲームのチート事情
スマートフォンゲームのチート事情スマートフォンゲームのチート事情
スマートフォンゲームのチート事情
 
Unity × graphics × effects
Unity × graphics × effectsUnity × graphics × effects
Unity × graphics × effects
 
各種ゲームエンジンの紹介と利用について
各種ゲームエンジンの紹介と利用について各種ゲームエンジンの紹介と利用について
各種ゲームエンジンの紹介と利用について
 
中国のゲーム規制の実態とその影響
中国のゲーム規制の実態とその影響中国のゲーム規制の実態とその影響
中国のゲーム規制の実態とその影響
 
Unity恐くないよ!!
Unity恐くないよ!!Unity恐くないよ!!
Unity恐くないよ!!
 
わたしのVisual studio環境
わたしのVisual studio環境わたしのVisual studio環境
わたしのVisual studio環境
 
世界・日本のコンテンツ及びビデオゲーム市場の動向 (Digital content and video game market in the world ...
世界・日本のコンテンツ及びビデオゲーム市場の動向 (Digital content and video game market in the world ...世界・日本のコンテンツ及びビデオゲーム市場の動向 (Digital content and video game market in the world ...
世界・日本のコンテンツ及びビデオゲーム市場の動向 (Digital content and video game market in the world ...
 
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
 
CEDEC 20110907 ショートセッション マネタイズとゲーミフィケーション
CEDEC 20110907 ショートセッション マネタイズとゲーミフィケーションCEDEC 20110907 ショートセッション マネタイズとゲーミフィケーション
CEDEC 20110907 ショートセッション マネタイズとゲーミフィケーション
 

Destacado

文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)Takashi Iba
 
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西rie05
 
プレゼンテーションドキュメント講座 Basic
プレゼンテーションドキュメント講座 Basicプレゼンテーションドキュメント講座 Basic
プレゼンテーションドキュメント講座 BasicMiho Yamahashi
 
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたらSKET
 
ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015Masahito Zembutsu
 
“ロジカル・プレゼンテーション” で実践的な論理的思考力を身につける
“ロジカル・プレゼンテーション”で実践的な論理的思考力を身につける“ロジカル・プレゼンテーション”で実践的な論理的思考力を身につける
“ロジカル・プレゼンテーション” で実践的な論理的思考力を身につけるbijikin
 
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」Kumiko Hiramoto
 
いいデザインと悪いデザイン
いいデザインと悪いデザインいいデザインと悪いデザイン
いいデザインと悪いデザインTakahashi Koki
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法Junichi Izumi
 
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」Michiyo Fukada
 
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイントSlideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイントTaichi Hirano
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうToshiaki Sasaki
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2Shoe-g Ueyama
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論tsukasa obara
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_uxSaori Matsui
 
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -Shoko Tanaka
 
Owasp Project を使ってみた
Owasp Project を使ってみたOwasp Project を使ってみた
Owasp Project を使ってみたAkitsugu Ito
 
プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割Mharu
 
ラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイントラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイントKairi Ishizuka
 
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ将一 深見
 

Destacado (20)

文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
文章のクオリティを上げる方法(井庭研レクチャーズ Vol.3)
 
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
 
プレゼンテーションドキュメント講座 Basic
プレゼンテーションドキュメント講座 Basicプレゼンテーションドキュメント講座 Basic
プレゼンテーションドキュメント講座 Basic
 
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
明治維新の原動力、高杉晋作が奇兵隊の募集要項をパワポで作ってみたら
 
ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015
 
“ロジカル・プレゼンテーション” で実践的な論理的思考力を身につける
“ロジカル・プレゼンテーション”で実践的な論理的思考力を身につける“ロジカル・プレゼンテーション”で実践的な論理的思考力を身につける
“ロジカル・プレゼンテーション” で実践的な論理的思考力を身につける
 
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
伝わるチラシの作りかた講座:2日目「レイアウト・デザインのコツ」
 
いいデザインと悪いデザイン
いいデザインと悪いデザインいいデザインと悪いデザイン
いいデザインと悪いデザイン
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
 
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイントSlideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
Slideshareで見つけた「読みやすい・見やすいスライド」に共通する4つのポイント
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_ux
 
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
 
Owasp Project を使ってみた
Owasp Project を使ってみたOwasp Project を使ってみた
Owasp Project を使ってみた
 
プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割
 
ラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイントラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイント
 
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
 

Similar a Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント

次世代ゲームにおける自動生成技術
次世代ゲームにおける自動生成技術 次世代ゲームにおける自動生成技術
次世代ゲームにおける自動生成技術 Youichiro Miyake
 
マッチに火をつけろ」スマホアプリ成功者Night発表資料
マッチに火をつけろ」スマホアプリ成功者Night発表資料マッチに火をつけろ」スマホアプリ成功者Night発表資料
マッチに火をつけろ」スマホアプリ成功者Night発表資料Yukikazu Ariga
 
商業ゲームの保守化とインディーズゲームへの期待
商業ゲームの保守化とインディーズゲームへの期待商業ゲームの保守化とインディーズゲームへの期待
商業ゲームの保守化とインディーズゲームへの期待IGDA Japan
 
1人ソーシャルゲームを作る肝
1人ソーシャルゲームを作る肝1人ソーシャルゲームを作る肝
1人ソーシャルゲームを作る肝leverages_event
 
キックオフ代表挨拶&概要説明(10分)
キックオフ代表挨拶&概要説明(10分)キックオフ代表挨拶&概要説明(10分)
キックオフ代表挨拶&概要説明(10分)Fujimoto Gen
 
ガリュウケンドー 大決戦プレゼンテーション 【ゲームクリエイター就職大作戦】
ガリュウケンドー 大決戦プレゼンテーション 【ゲームクリエイター就職大作戦】ガリュウケンドー 大決戦プレゼンテーション 【ゲームクリエイター就職大作戦】
ガリュウケンドー 大決戦プレゼンテーション 【ゲームクリエイター就職大作戦】亘 中谷
 
ゲーム産業の近未来2011
ゲーム産業の近未来2011ゲーム産業の近未来2011
ゲーム産業の近未来2011Kenji Ono
 
変化の時代で勝つためのアジャイルゲーム開発 2012 03-24
変化の時代で勝つためのアジャイルゲーム開発 2012 03-24変化の時代で勝つためのアジャイルゲーム開発 2012 03-24
変化の時代で勝つためのアジャイルゲーム開発 2012 03-24俊仁 小林
 
SHIBUYA SYNAPSE #2「ゲームAIのこれから - ゲーム開発工程における人工知能 「ゲームの外のAI」の促進に向けて」
SHIBUYA SYNAPSE #2「ゲームAIのこれから - ゲーム開発工程における人工知能 「ゲームの外のAI」の促進に向けて」SHIBUYA SYNAPSE #2「ゲームAIのこれから - ゲーム開発工程における人工知能 「ゲームの外のAI」の促進に向けて」
SHIBUYA SYNAPSE #2「ゲームAIのこれから - ゲーム開発工程における人工知能 「ゲームの外のAI」の促進に向けて」shibuya_synapse
 
【Unite 2017 Tokyo】ゲームAI・ゲームデザインから考えるゲームの過去・現在・未来
【Unite 2017 Tokyo】ゲームAI・ゲームデザインから考えるゲームの過去・現在・未来【Unite 2017 Tokyo】ゲームAI・ゲームデザインから考えるゲームの過去・現在・未来
【Unite 2017 Tokyo】ゲームAI・ゲームデザインから考えるゲームの過去・現在・未来Unity Technologies Japan K.K.
 
話題のゲーミフィケーションを理解し、チーム力を倍増させる技
話題のゲーミフィケーションを理解し、チーム力を倍増させる技話題のゲーミフィケーションを理解し、チーム力を倍増させる技
話題のゲーミフィケーションを理解し、チーム力を倍増させる技BizCOLLEGE
 
『ナンジャタウン×MRプロジェクト』テーマパークにおけるHoloLens開発事例の紹介
『ナンジャタウン×MRプロジェクト』テーマパークにおけるHoloLens開発事例の紹介『ナンジャタウン×MRプロジェクト』テーマパークにおけるHoloLens開発事例の紹介
『ナンジャタウン×MRプロジェクト』テーマパークにおけるHoloLens開発事例の紹介Shingo Mori
 
デジハリ講義 人工知能 第五回「人工知能とゲーム」 Game and AI
デジハリ講義 人工知能 第五回「人工知能とゲーム」 Game and AI デジハリ講義 人工知能 第五回「人工知能とゲーム」 Game and AI
デジハリ講義 人工知能 第五回「人工知能とゲーム」 Game and AI Youichiro Miyake
 
【クラウドゲート】事業紹介(2012年12月)
【クラウドゲート】事業紹介(2012年12月)【クラウドゲート】事業紹介(2012年12月)
【クラウドゲート】事業紹介(2012年12月)Junpei Kawabata
 
【クラウドゲート】事業紹介(2012年12月)
【クラウドゲート】事業紹介(2012年12月)【クラウドゲート】事業紹介(2012年12月)
【クラウドゲート】事業紹介(2012年12月)Junpei Kawabata
 
y2011m12d04 日本Androidの会 福井支部 第4回勉強会
y2011m12d04 日本Androidの会 福井支部 第4回勉強会y2011m12d04 日本Androidの会 福井支部 第4回勉強会
y2011m12d04 日本Androidの会 福井支部 第4回勉強会Tomotaka Yamaguchi
 
「LINQ」っていう名前だけでも 覚えて帰ってください!
「LINQ」っていう名前だけでも 覚えて帰ってください!「LINQ」っていう名前だけでも 覚えて帰ってください!
「LINQ」っていう名前だけでも 覚えて帰ってください!Ryota Murohoshi
 
ゲーム x リアル - Mont Blanc Pj. & LITTAI -
ゲーム x リアル - Mont Blanc Pj. & LITTAI - ゲーム x リアル - Mont Blanc Pj. & LITTAI -
ゲーム x リアル - Mont Blanc Pj. & LITTAI - hecomi
 
【ソシャゲ鉄人化計画】スマホソーシャルゲーム市場の現状と実現体制
【ソシャゲ鉄人化計画】スマホソーシャルゲーム市場の現状と実現体制【ソシャゲ鉄人化計画】スマホソーシャルゲーム市場の現状と実現体制
【ソシャゲ鉄人化計画】スマホソーシャルゲーム市場の現状と実現体制Takuya Kanda
 

Similar a Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント (20)

次世代ゲームにおける自動生成技術
次世代ゲームにおける自動生成技術 次世代ゲームにおける自動生成技術
次世代ゲームにおける自動生成技術
 
マッチに火をつけろ」スマホアプリ成功者Night発表資料
マッチに火をつけろ」スマホアプリ成功者Night発表資料マッチに火をつけろ」スマホアプリ成功者Night発表資料
マッチに火をつけろ」スマホアプリ成功者Night発表資料
 
商業ゲームの保守化とインディーズゲームへの期待
商業ゲームの保守化とインディーズゲームへの期待商業ゲームの保守化とインディーズゲームへの期待
商業ゲームの保守化とインディーズゲームへの期待
 
1人ソーシャルゲームを作る肝
1人ソーシャルゲームを作る肝1人ソーシャルゲームを作る肝
1人ソーシャルゲームを作る肝
 
キックオフ代表挨拶&概要説明(10分)
キックオフ代表挨拶&概要説明(10分)キックオフ代表挨拶&概要説明(10分)
キックオフ代表挨拶&概要説明(10分)
 
ガリュウケンドー 大決戦プレゼンテーション 【ゲームクリエイター就職大作戦】
ガリュウケンドー 大決戦プレゼンテーション 【ゲームクリエイター就職大作戦】ガリュウケンドー 大決戦プレゼンテーション 【ゲームクリエイター就職大作戦】
ガリュウケンドー 大決戦プレゼンテーション 【ゲームクリエイター就職大作戦】
 
ゲーム産業の近未来2011
ゲーム産業の近未来2011ゲーム産業の近未来2011
ゲーム産業の近未来2011
 
変化の時代で勝つためのアジャイルゲーム開発 2012 03-24
変化の時代で勝つためのアジャイルゲーム開発 2012 03-24変化の時代で勝つためのアジャイルゲーム開発 2012 03-24
変化の時代で勝つためのアジャイルゲーム開発 2012 03-24
 
SHIBUYA SYNAPSE #2「ゲームAIのこれから - ゲーム開発工程における人工知能 「ゲームの外のAI」の促進に向けて」
SHIBUYA SYNAPSE #2「ゲームAIのこれから - ゲーム開発工程における人工知能 「ゲームの外のAI」の促進に向けて」SHIBUYA SYNAPSE #2「ゲームAIのこれから - ゲーム開発工程における人工知能 「ゲームの外のAI」の促進に向けて」
SHIBUYA SYNAPSE #2「ゲームAIのこれから - ゲーム開発工程における人工知能 「ゲームの外のAI」の促進に向けて」
 
【Unite 2017 Tokyo】ゲームAI・ゲームデザインから考えるゲームの過去・現在・未来
【Unite 2017 Tokyo】ゲームAI・ゲームデザインから考えるゲームの過去・現在・未来【Unite 2017 Tokyo】ゲームAI・ゲームデザインから考えるゲームの過去・現在・未来
【Unite 2017 Tokyo】ゲームAI・ゲームデザインから考えるゲームの過去・現在・未来
 
話題のゲーミフィケーションを理解し、チーム力を倍増させる技
話題のゲーミフィケーションを理解し、チーム力を倍増させる技話題のゲーミフィケーションを理解し、チーム力を倍増させる技
話題のゲーミフィケーションを理解し、チーム力を倍増させる技
 
『ナンジャタウン×MRプロジェクト』テーマパークにおけるHoloLens開発事例の紹介
『ナンジャタウン×MRプロジェクト』テーマパークにおけるHoloLens開発事例の紹介『ナンジャタウン×MRプロジェクト』テーマパークにおけるHoloLens開発事例の紹介
『ナンジャタウン×MRプロジェクト』テーマパークにおけるHoloLens開発事例の紹介
 
デジハリ講義 人工知能 第五回「人工知能とゲーム」 Game and AI
デジハリ講義 人工知能 第五回「人工知能とゲーム」 Game and AI デジハリ講義 人工知能 第五回「人工知能とゲーム」 Game and AI
デジハリ講義 人工知能 第五回「人工知能とゲーム」 Game and AI
 
【クラウドゲート】事業紹介(2012年12月)
【クラウドゲート】事業紹介(2012年12月)【クラウドゲート】事業紹介(2012年12月)
【クラウドゲート】事業紹介(2012年12月)
 
【クラウドゲート】事業紹介(2012年12月)
【クラウドゲート】事業紹介(2012年12月)【クラウドゲート】事業紹介(2012年12月)
【クラウドゲート】事業紹介(2012年12月)
 
y2011m12d04 日本Androidの会 福井支部 第4回勉強会
y2011m12d04 日本Androidの会 福井支部 第4回勉強会y2011m12d04 日本Androidの会 福井支部 第4回勉強会
y2011m12d04 日本Androidの会 福井支部 第4回勉強会
 
20121220 matsumoto
20121220 matsumoto20121220 matsumoto
20121220 matsumoto
 
「LINQ」っていう名前だけでも 覚えて帰ってください!
「LINQ」っていう名前だけでも 覚えて帰ってください!「LINQ」っていう名前だけでも 覚えて帰ってください!
「LINQ」っていう名前だけでも 覚えて帰ってください!
 
ゲーム x リアル - Mont Blanc Pj. & LITTAI -
ゲーム x リアル - Mont Blanc Pj. & LITTAI - ゲーム x リアル - Mont Blanc Pj. & LITTAI -
ゲーム x リアル - Mont Blanc Pj. & LITTAI -
 
【ソシャゲ鉄人化計画】スマホソーシャルゲーム市場の現状と実現体制
【ソシャゲ鉄人化計画】スマホソーシャルゲーム市場の現状と実現体制【ソシャゲ鉄人化計画】スマホソーシャルゲーム市場の現状と実現体制
【ソシャゲ鉄人化計画】スマホソーシャルゲーム市場の現状と実現体制
 

Más de Yasuhisa Hasegawa

作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編Yasuhisa Hasegawa
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作Yasuhisa Hasegawa
 
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法Yasuhisa Hasegawa
 
データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法Yasuhisa Hasegawa
 
再入門ペーパープロトタイピング
再入門ペーパープロトタイピング再入門ペーパープロトタイピング
再入門ペーパープロトタイピングYasuhisa Hasegawa
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方Yasuhisa Hasegawa
 
Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Yasuhisa Hasegawa
 
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセスYasuhisa Hasegawa
 
デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ Yasuhisa Hasegawa
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方Yasuhisa Hasegawa
 
Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査Yasuhisa Hasegawa
 
センスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすることセンスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすることYasuhisa Hasegawa
 
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計Yasuhisa Hasegawa
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方Yasuhisa Hasegawa
 
スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法Yasuhisa Hasegawa
 
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩Yasuhisa Hasegawa
 
6から始まる Movable Type の旅
6から始まる Movable Type の旅6から始まる Movable Type の旅
6から始まる Movable Type の旅Yasuhisa Hasegawa
 
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考Yasuhisa Hasegawa
 
Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法Yasuhisa Hasegawa
 
今だからデザインできるMTの未来
今だからデザインできるMTの未来今だからデザインできるMTの未来
今だからデザインできるMTの未来Yasuhisa Hasegawa
 

Más de Yasuhisa Hasegawa (20)

作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作
 
あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法あたかもプロのようにプロトタイプを活用する方法
あたかもプロのようにプロトタイプを活用する方法
 
データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法
 
再入門ペーパープロトタイピング
再入門ペーパープロトタイピング再入門ペーパープロトタイピング
再入門ペーパープロトタイピング
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方
 
Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法
 
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
 
デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
 
Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査
 
センスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすることセンスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすること
 
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方
 
スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法
 
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
 
6から始まる Movable Type の旅
6から始まる Movable Type の旅6から始まる Movable Type の旅
6から始まる Movable Type の旅
 
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
 
Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法
 
今だからデザインできるMTの未来
今だからデザインできるMTの未来今だからデザインできるMTの未来
今だからデザインできるMTの未来
 

Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント