WordBench大分 第10回勉強会 【芸術の秋　Webデザインフェス】 2014年10月26日 @ホルトホール大分 内容は諸事情によりカットして公開。

2. 自己紹介
よつばデザイン 後藤賢司
東京と大分の2拠点で活動中。
出版社～デザイン会社～Web制作会社～企画会社～独立。
根っこから考えるタイプのお仕事が得意。
ブランド立ち上げ、メディアサイトの企画・運営など。
企業Webサイトの企画・デザイン・制作。
Twitter:@428design

3. 活動
WP-D
CPIエバンジェリスト
ゼロから始めるWordPress勉強会 (facebookグループ）
Webクリエイターのための情報交換所 (facebookグループ）
Webクリエイターズニュース
すみだクリエイターズクラブ

4. 著書

5. COCOmag
子どもと一緒の毎日を
楽しく、可愛くする情報
（メディアサイト）
http://COCOmag.net

6. よろずサウンド
著作権フリーのBGM販売サイト
yorozusound.com

7. Webクリエイターズニュース
Web制作者に
役立つ情報を発信。
http://web-cre.info/

8. ゼロから始めるWordPress勉強会
コワーキングスペース茅
場町Co-Edoで月イチ
ペースで開催。
学びたい事を学ぶ。

9. Webサイトの閲覧と役割

10. Webサイトの閲覧状況
モバイルからのアクセスが増加している。
スマートフォンなどでさっと情報を取得する。
PCを立ち上げないという人も増えてきた。

11. Webサイトの役割の変化
Webサイトはカタログみたいなものという考え方から、事業のプロ
モーションをする場、商品を売るための場というように、直接的な役
割の比重が上がっている。

12. 地域別Web事情

13. 海外の現状
フラットデザインなどのシンプルでわかりやすい構成のサイトが主流。
必要な情報を的確に表示。詰め込み型サイトは減少傾向。
奇抜なサイトは随分少なくなった。

14. 日本の現状
いまだ詰め込み型サイトが主流。
クレームがつかないような形で入れなくても良いような要素も
含まれがち

15. 大分（地方）の現状
スマホ対応してるWebサイトは少ないイメージ。
Webサイトを持っていないところも多い。
Webサイトを持ってる会社でもメール送れないみたいなところもある。
制作の人がWeb使ってないんじゃないの感？

16. デザインとは
ある対象について、良い構成を
工夫すること

17. Webサイトの設計の話を少々

18. 省略

19. コンセプトをちゃんと固めて
Webサイトの目標を共有する

20. イメージする

21. コンテンツの役割を
クライアントと共有してから
進めていく

22. デザイン

24. プロトタイプ

25. 仮のテーマで
コンテンツを編集していく
方法もあり

26. 動かしながら作る

27. 必要な要素は
コンポーネント（かたまり）で
構成していくイメージ。

28. グリッドを活用すると合理的

29. 視線の動かし方、
アクセントの付け方も意識

30. フロントエンドフレームワーク
を活用する

31. Bootstrap

32. Bootstrapの特徴
マルチデバイスに対応。様々なデバイスを想定した設計。
安定して表示してくれるのでオレオレでCSS書くより安全。
グリッド機能やコンポーネントを理解するととても便利。
共通言語として使えるので、チーム間や外部との連携も取りやすいし、
リニューアルの際などの構造も把握しやすい（かもしれない）。

33. Bootstrap事例サイト
http://expo.getbootstrap.com/
http://lovebootstrap.com/

34. Dole
!
http://www.dole.com/

35. intel.co.uk
!
http://www.intel.co.uk/content/
www/uk/en/homepage.html

36. Newsweek
!
http://www.newsweek.com/

37. 使い方はドキュメントに
【重要】ドキュメント読めば理解できる。

38. ディスプレイサイズに応じて4種類
～768px col-xs-*
768px～ col-sm-*
992px～ col-md-*
1200px～ col-lg-*
※lgは省略する事もある。

39. マルチデバイス対応

40. グリッド

41. rowとcontainer
containerはコンテンツ幅で中央に配置する
rowは横幅いっぱい。

42. rowとcontainer
グリッドを格納するclass
row
container
PCの場合
1170px
PCの場合
1140px
15px 15px

43. rowとconatinerはここで理解
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-
3-grid-works

44. Gridの仕組み（良く見る図）
col-md-1
col-md-2
col-md-3
col-md-4
col-md-7
col-md-10
col-md-12

45. 12分の「？」で考える
グリッドは12分のいくつを使うかで考えるだけ。
例：メインを12分の8にして、サイドバーを12分の4にしよう。
<div class=“col-md-8”></div>
<div class=“col-md-4”></div>

46. グリッドと余白
グリッドの余白を把握する
15px
30px

47. カラム数を画面サイズ毎に切り替える
Gridを使うと、PCの場合、タブレットの場合、スマホの場合、小さいス
マホの場合と分けられる。
下記の場合はタブレット以上のサイズのディスプレイでの指定
1カラム分5カラム分
col-md-1 col-md-5

48. CSSの記述
タブレットサイズ以上は4カラム、スマホより小さいサイズは6カラム、
一番小さいサイズは12カラム（全幅）
<div class=“col-md-4 col-sm-6 col-xs-12”>コンテンツ</
div>
PC、タブレットスマホ小画面
col-md-4 col-sm-6 col-xs-12

49. ドキュメントに掲載
コラム間のマージンは表示されてないので注意。

50. offsetを覚える

51. offsetを覚える
col-md-offset-4で
4カラム分空ける

52. offsetを覚える
col-md-offset-4で
4カラム分空ける
col-md-offset-3で
3カラム分空ける
col-md-offset-3で
3カラム分空ける
col-md-offset-3で
3カラム分空ける

53. offset使用例
<div class="
col-md-8 col-md-offset-2">
赤い点線が
containerサイズ

54. pushとpull
位置の入れ替えが可能

55. 特定の画面サイズで表示・非表示

56. visible-*-block
xsサイズの時に
clearfixのブロックを
イキにする

57. xsサイズの時に
clearfixのブロックを
イキにする
ガタガタになるのを防ぐ

58. 画像の装飾
Classを付けるだけ。四角い画像を
img-circleで
丸く見せてる例

59. その他豊富な機能
カルーセル、アコーディオン、モーダル、ツールチップ、アコーディ
オン、ボタン…。ドキュメント参照して好きに使いましょう。

60. 設計思想を理解すると良い

61. 自由度が低いは間違い。
覚えればいろんな事が出来る

62. Dashなどのドキュメント参照ツールを使う

63. ツールを活用して効率化

64. Blocks
コンポーネント単位でページを
作成。コードが汚くない。
http://
www.mightydeals.com/deal/
blocks.html?fid=77e283db

65. DEMO

66. Briqs
BootstrapベースでHTMLを作成

67. フロントエンドフレームワークを
導入する事で検証作業等、
大幅に短縮出来る。
時間の読めない作業が激減する。

68. 工数が減る分を、
料金に反映するか？、
あるいは他に注力するか？

69. 最近のWebデザインについて

71. モバイルデバイスの普及と
Web閲覧環境の変化

72. 細かくページを分けない。
薄っぺらいページはいらない。

73. 紙面的なレイアウトから
プレゼンテーションへ

74. 少ない時間で最大限のアピール

75. 時間軸と場面展開
止まってるものでは無くて
動いているものとして考える

76. WordPressで作る場合は
アピールエリアと
情報蓄積エリア

78. 静止画では単調そうに見えても
スクロールによる印象的な
場面展開やアニメーションなどの
演出で注意を惹く事が可能

79. 紙芝居や絵コンテとか
漫画的な発想。
展開が変わったと気付かせる

80. 合理的な設計と
見せ方のバランスが大事

81. 同業者からの目線より
利用者の目線。
エゴは捨てましょう

82. 再確認
Webサイトをなぜ作るか?
目的は何かを忘れない

83. 実際の作り方

84. 自分用ベーステーマ
※_s使ってる人は多い

85. 自分用ベーステーマ
フロントエンドフレームワーク

86. 自分用ベーステーマ
フロントエンドフレームワーク
＋カスタマイズ

87. 大枠はフレームワーク、
細かいところは自分流で良い

88. 必要になりそうな素材は
最初から用意しておく。
その都度作らない

89. よく使うコードは
まとめておいて
コメントアウトしてたり。

90. 同じような作業は極力しない

91. 必要な材料が揃ってる
料理番組みたいなもの

92. 追記してるCSSとか
アイコンフォントとか

93. モバイル時だけテキスト配置変更
PC画面などでセンター合わせのテキストとかを使った場合、モバイルのみ左よせにするなど。
@media only screen and (max-width: 768px){
.mob-text-center {text-align: center !important;}
.mob-text-left {text-align: left !important;}
.mob-text-right {text-align: right !important;}
}

94. 要素がはみだすのを防ぐ
*{
@include box-sizing(border-box);
}
※上記はcompass用、compass使ってない人は下記を使用してください。
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}

95. 要素がはみだすのを防ぐ
img {
max-width: 100% !important;
height: auto;
}
embed, iframe, canvas, video, svg, input, text area ,button ,select {
max-width: 100%;
}

96. 装飾要素をカスタマイズ
ズルいシリーズがとても参考になります（Sassの活用）
https://speakerdeck.com/ken_c_lo

97. オフキャンバスメニュー
横からしゅっと出るメニュー、たくさんあるのでお好きなものを。
http://www.berriart.com/sidr/

98. FontAwesome
アイコンは既存のものを
うまく活用する方向。
種類が多く使いやすい。
http://
fortawesome.github.io/Font-
Awesome/

99. 1600+ iOS7 Vector Icons
ラインの細いアイコンフォント。シャープなイメージが欲しい時やス
マホサイト用に。$69～
http://www.streamlineicons.com/

100. WOW.js
アニメーション
http://
mynameismatthieu.com/WOW/

101. 素材を活用

102. ダミー素材も良い感じのものを使う
フリーの写真や映像のリンクサイト
Free Stock Images & Videos ̃
AllTheFreeStock.com http://
allthefreestock.com/

103. VSCOcam
画像加工アプリ
良い感じの写真に加工
iOS、Android対応
http://vsco.co/vscocam

104. 開発時に便利なプラグイン

105. テーマ開発者必須 Theme Check
非推奨のテンプレートタグを使用していないか？ 使用した場合、代用
となるテンプレートタグの提案もしてくれます。
https://wordpress.org/plugins/theme-check/

106. 使用しているテンプレートを表示
Show Current Template
wordpress.org/plugins/show-current-template/

107. 管理者のみ違うテーマで表示 Theme Test Drive
管理者のみ違うテーマを選んで表示出来ます。
ユーザーには影響しないので、リニューアル前のチェックなどにも便
利。
https://wordpress.org/plugins/theme-test-drive/

108. 画像のトリミング指定が出来る Post Thumbnail Editor
画像のトリミング指定が出来る
プラグイン。
個別にトリミング出来るので
微調整したい場合などに便利。
https://wordpress.org/
plugins/post-thumbnail-editor/

109. 画像を再生成してくれる Force Regenerate Thumbnails
テーマで定義されてる画像サイズを
再生成してくれるプラグイン。
不要な画像サイズは削除してくれる。
https://wordpress.org/plugins/
force-regenerate-thumbnails/

110. ダッシュボードをカスタマイズ
Dashboard Sticky Notes
https://wordpress.org/plugins/dashboard-sticky-notes/

111. ありがとうございました