UIデザインに関するセミナー

2. はじめに
LANへのアクセスをお願いします

3. Profile
岩立 渉
Sho IWATATE

4. 目次
優れたUIについて
Twitter Bootstrapの基礎
デザイン演習
最後に

5. デザインとは
Design = 課題(問題)解決
※その最終過程でキレイなものが出てくる

7. WebにおけるDesign
ユーザー調査
ブレインストーミング
プロトタイプ
ターゲットの設定
メンタルモデル
ペルソナの設定
ユーザーシナリオの作成
ペーパープロトタイプ
コンセプト
ユーザーテスト
ワイヤーフレーム作成
KJ カードソーティング法
インフォメーションアーキテクチャ
フロントエンド
JavaScript HTML+CSS

8. 優れたUIについて
UI = ユーザーインタフェース
ユーザー(使う人)と情報(≒提供者)とを結ぶこと

11. なんのための（ウェブ）デザイン
ユーザーが欲しい情報を、 ストレスなく、すぐに手に入れられる!
ユーザーに与えたい情報を、 わかりやすく伝える!

12. 最近のトレンド
フラットデザイン
Webフォント
シングルページデザイン
フルスクリーンデザイン
モバイルファースト
パララックス効果

13. 今日作りたいもの

15. 目次
優れたUIについて
Twitter Bootstrapの基礎
デザイン演習
最後に

16. 拡張子の表示

17. Text Editor
エディターとは？!
テキストを記述するためのツール!
!
推奨ソフト!
windows：terapad!
Mac : CotEditor!
他にもvim, emacs, eclipse, coteditor, dreamweaver, サクラエディタ, 禿丸!

18. Bootstrapとは

19. http://getbootstrap.com/
だれでも簡単にかっこいいデザインにする為の仕組み
CSSのclass属性に特定の値を入れるとかっこよくなる
一部javascriptも使用

20. グリッド
ボタン
レスポンシブ

21. 見てみよう
https://www.goodfind.jp/program/pcs/201405/

22. Bootstrapでの制作方法
.html
.css
←ここを編集
←極力触らない
どうしてもCSSを編集したいときは別ファイルで管理 or Bootstrapのカスタマイズをする

23. Bootstrapの基本構造
.container
.row
.col-lg-n
.col-md-n
.col-lg-n
.col-md-n
.col-lg-n
.col-md-n

24. Bootstrapの基本構造
.container
.row
.col-lg-n
.col-md-n
.col-lg-n
.col-md-n
.col-lg-n
.col-md-n
この数字を変更すると
レイアウトが変わる

25. サンプルを見てみよう
http://getbootstrap.com/examples/navbar-fixed-top/
http://startbootstrap.com/templates/

26. 何もない状態から作ってみよう