プロトタイプ時代の
WordPressテーマの作り方・考え方

4,287 views

Published on

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

Published in: Design
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,287
On SlideShare
0
From Embeds
0
Number of Embeds
2,693
Actions
Shares
0
Downloads
9
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

プロトタイプ時代の
WordPressテーマの作り方・考え方

  1. 1. 自己紹介 よつばデザイン 後藤賢司 東京と大分の2拠点で活動中。 出版社~デザイン会社~Web制作会社~企画会社~独立。 根っこから考えるタイプのお仕事が得意。 ブランド立ち上げ、メディアサイトの企画・運営など。 企業Webサイトの企画・デザイン・制作。 Twitter:@428design
  2. 2. 活動 WP-D CPIエバンジェリスト ゼロから始めるWordPress勉強会 (facebookグループ) Webクリエイターのための情報交換所 (facebookグループ) Webクリエイターズニュース すみだクリエイターズクラブ
  3. 3. 著書
  4. 4. COCOmag 子どもと一緒の毎日を 楽しく、可愛くする情報 (メディアサイト) http://COCOmag.net
  5. 5. よろずサウンド 著作権フリーのBGM販売サイト yorozusound.com
  6. 6. Webクリエイターズニュース Web制作者に 役立つ情報を発信。 http://web-cre.info/
  7. 7. ゼロから始めるWordPress勉強会 コワーキングスペース茅 場町Co-Edoで月イチ ペースで開催。 学びたい事を学ぶ。
  8. 8. Webサイトの閲覧と役割
  9. 9. Webサイトの閲覧状況 モバイルからのアクセスが増加している。 スマートフォンなどでさっと情報を取得する。 PCを立ち上げないという人も増えてきた。
  10. 10. Webサイトの役割の変化 Webサイトはカタログみたいなものという考え方から、事業のプロ モーションをする場、商品を売るための場というように、直接的な役 割の比重が上がっている。
  11. 11. 地域別Web事情
  12. 12. 海外の現状 フラットデザインなどのシンプルでわかりやすい構成のサイトが主流。 必要な情報を的確に表示。詰め込み型サイトは減少傾向。 奇抜なサイトは随分少なくなった。
  13. 13. 日本の現状 いまだ詰め込み型サイトが主流。 クレームがつかないような形で入れなくても良いような要素も 含まれがち
  14. 14. 大分(地方)の現状 スマホ対応してるWebサイトは少ないイメージ。 Webサイトを持っていないところも多い。 Webサイトを持ってる会社でもメール送れないみたいなところもある。 制作の人がWeb使ってないんじゃないの感?
  15. 15. デザインとは ある対象について、良い構成を 工夫すること
  16. 16. Webサイトの設計の話を少々
  17. 17. 省略
  18. 18. コンセプトをちゃんと固めて Webサイトの目標を共有する
  19. 19. イメージする
  20. 20. コンテンツの役割を クライアントと共有してから 進めていく
  21. 21. デザイン
  22. 22. プロトタイプ
  23. 23. 仮のテーマで コンテンツを編集していく 方法もあり
  24. 24. 動かしながら作る
  25. 25. 必要な要素は コンポーネント(かたまり)で 構成していくイメージ。
  26. 26. グリッドを活用すると合理的
  27. 27. 視線の動かし方、 アクセントの付け方も意識
  28. 28. フロントエンドフレームワーク を活用する
  29. 29. Bootstrap
  30. 30. Bootstrapの特徴 マルチデバイスに対応。様々なデバイスを想定した設計。 安定して表示してくれるのでオレオレでCSS書くより安全。 グリッド機能やコンポーネントを理解するととても便利。 共通言語として使えるので、チーム間や外部との連携も取りやすいし、 リニューアルの際などの構造も把握しやすい(かもしれない)。
  31. 31. Bootstrap事例サイト http://expo.getbootstrap.com/ http://lovebootstrap.com/
  32. 32. Dole ! http://www.dole.com/
  33. 33. intel.co.uk ! http://www.intel.co.uk/content/ www/uk/en/homepage.html
  34. 34. Newsweek ! http://www.newsweek.com/
  35. 35. 使い方はドキュメントに 【重要】ドキュメント読めば理解できる。
  36. 36. ディスプレイサイズに応じて4種類 ~768px col-xs-* 768px~ col-sm-* 992px~ col-md-* 1200px~ col-lg-* ※lgは省略する事もある。
  37. 37. マルチデバイス対応
  38. 38. グリッド
  39. 39. rowとcontainer containerはコンテンツ幅で中央に配置する rowは横幅いっぱい。
  40. 40. rowとcontainer グリッドを格納するclass row container PCの場合 1170px PCの場合 1140px 15px 15px
  41. 41. rowとconatinerはここで理解 http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap- 3-grid-works
  42. 42. Gridの仕組み(良く見る図) col-md-1 col-md-2 col-md-3 col-md-4 col-md-7 col-md-10 col-md-12
  43. 43. 12分の「?」で考える グリッドは12分のいくつを使うかで考えるだけ。 例:メインを12分の8にして、サイドバーを12分の4にしよう。 <div class=“col-md-8”></div> <div class=“col-md-4”></div>
  44. 44. グリッドと余白 グリッドの余白を把握する 15px 30px
  45. 45. カラム数を画面サイズ毎に切り替える Gridを使うと、PCの場合、タブレットの場合、スマホの場合、小さいス マホの場合と分けられる。 下記の場合はタブレット以上のサイズのディスプレイでの指定 1カラム分5カラム分 col-md-1 col-md-5
  46. 46. 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
  47. 47. ドキュメントに掲載 コラム間のマージンは表示されてないので注意。
  48. 48. offsetを覚える
  49. 49. offsetを覚える col-md-offset-4で 4カラム分空ける
  50. 50. offsetを覚える col-md-offset-4で 4カラム分空ける col-md-offset-3で 3カラム分空ける col-md-offset-3で 3カラム分空ける col-md-offset-3で 3カラム分空ける
  51. 51. offset使用例 <div class=" col-md-8 col-md-offset-2"> 赤い点線が containerサイズ
  52. 52. pushとpull 位置の入れ替えが可能
  53. 53. 特定の画面サイズで表示・非表示
  54. 54. visible-*-block xsサイズの時に clearfixのブロックを イキにする
  55. 55. xsサイズの時に clearfixのブロックを イキにする ガタガタになるのを防ぐ
  56. 56. 画像の装飾 Classを付けるだけ。四角い画像を img-circleで 丸く見せてる例
  57. 57. その他豊富な機能 カルーセル、アコーディオン、モーダル、ツールチップ、アコーディ オン、ボタン…。ドキュメント参照して好きに使いましょう。
  58. 58. 設計思想を理解すると良い
  59. 59. 自由度が低いは間違い。 覚えればいろんな事が出来る
  60. 60. Dashなどのドキュメント参照ツールを使う
  61. 61. ツールを活用して効率化
  62. 62. Blocks コンポーネント単位でページを 作成。コードが汚くない。 http:// www.mightydeals.com/deal/ blocks.html?fid=77e283db
  63. 63. DEMO
  64. 64. Briqs BootstrapベースでHTMLを作成
  65. 65. フロントエンドフレームワークを 導入する事で検証作業等、 大幅に短縮出来る。 時間の読めない作業が激減する。
  66. 66. 工数が減る分を、 料金に反映するか?、 あるいは他に注力するか?
  67. 67. 最近のWebデザインについて
  68. 68. モバイルデバイスの普及と Web閲覧環境の変化
  69. 69. 細かくページを分けない。 薄っぺらいページはいらない。
  70. 70. 紙面的なレイアウトから プレゼンテーションへ
  71. 71. 少ない時間で最大限のアピール
  72. 72. 時間軸と場面展開 止まってるものでは無くて 動いているものとして考える
  73. 73. WordPressで作る場合は アピールエリアと 情報蓄積エリア
  74. 74. 静止画では単調そうに見えても スクロールによる印象的な 場面展開やアニメーションなどの 演出で注意を惹く事が可能
  75. 75. 紙芝居や絵コンテとか 漫画的な発想。 展開が変わったと気付かせる
  76. 76. 合理的な設計と 見せ方のバランスが大事
  77. 77. 同業者からの目線より 利用者の目線。 エゴは捨てましょう
  78. 78. 再確認 Webサイトをなぜ作るか? 目的は何かを忘れない
  79. 79. 実際の作り方
  80. 80. 自分用ベーステーマ ※_s使ってる人は多い
  81. 81. 自分用ベーステーマ フロントエンドフレームワーク
  82. 82. 自分用ベーステーマ フロントエンドフレームワーク +カスタマイズ
  83. 83. 大枠はフレームワーク、 細かいところは自分流で良い
  84. 84. 必要になりそうな素材は 最初から用意しておく。 その都度作らない
  85. 85. よく使うコードは まとめておいて コメントアウトしてたり。
  86. 86. 同じような作業は極力しない
  87. 87. 必要な材料が揃ってる 料理番組みたいなもの
  88. 88. 追記してるCSSとか アイコンフォントとか
  89. 89. モバイル時だけテキスト配置変更 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;} }
  90. 90. 要素がはみだすのを防ぐ *{ @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; }
  91. 91. 要素がはみだすのを防ぐ img { max-width: 100% !important; height: auto; } embed, iframe, canvas, video, svg, input, text area ,button ,select { max-width: 100%; }
  92. 92. 装飾要素をカスタマイズ ズルいシリーズがとても参考になります(Sassの活用) https://speakerdeck.com/ken_c_lo
  93. 93. オフキャンバスメニュー 横からしゅっと出るメニュー、たくさんあるのでお好きなものを。 http://www.berriart.com/sidr/
  94. 94. FontAwesome アイコンは既存のものを うまく活用する方向。 種類が多く使いやすい。 http:// fortawesome.github.io/Font- Awesome/
  95. 95. 1600+ iOS7 Vector Icons ラインの細いアイコンフォント。シャープなイメージが欲しい時やス マホサイト用に。$69~ http://www.streamlineicons.com/
  96. 96. WOW.js アニメーション http:// mynameismatthieu.com/WOW/
  97. 97. 素材を活用
  98. 98. ダミー素材も良い感じのものを使う フリーの写真や映像のリンクサイト Free Stock Images & Videos ̃ AllTheFreeStock.com http:// allthefreestock.com/
  99. 99. VSCOcam 画像加工アプリ 良い感じの写真に加工 iOS、Android対応 http://vsco.co/vscocam
  100. 100. 開発時に便利なプラグイン
  101. 101. テーマ開発者必須 Theme Check 非推奨のテンプレートタグを使用していないか? 使用した場合、代用 となるテンプレートタグの提案もしてくれます。 https://wordpress.org/plugins/theme-check/
  102. 102. 使用しているテンプレートを表示 Show Current Template wordpress.org/plugins/show-current-template/
  103. 103. 管理者のみ違うテーマで表示 Theme Test Drive 管理者のみ違うテーマを選んで表示出来ます。 ユーザーには影響しないので、リニューアル前のチェックなどにも便 利。 https://wordpress.org/plugins/theme-test-drive/
  104. 104. 画像のトリミング指定が出来る Post Thumbnail Editor 画像のトリミング指定が出来る プラグイン。 個別にトリミング出来るので 微調整したい場合などに便利。 https://wordpress.org/ plugins/post-thumbnail-editor/
  105. 105. 画像を再生成してくれる Force Regenerate Thumbnails テーマで定義されてる画像サイズを 再生成してくれるプラグイン。 不要な画像サイズは削除してくれる。 https://wordpress.org/plugins/ force-regenerate-thumbnails/
  106. 106. ダッシュボードをカスタマイズ Dashboard Sticky Notes https://wordpress.org/plugins/dashboard-sticky-notes/
  107. 107. ありがとうございました

×