Upgrade to Pro — share decks privately, control downloads, hide ads and more …

オリジナルWordPressテーマを完成させ 画面デザインを行う特別集中講座

Designsprint
January 20, 2017

オリジナルWordPressテーマを完成させ 画面デザインを行う特別集中講座

別名:WordPressで見栄えのするペライチページの作り方講座
・PHPの基礎(とりあえずこれだけ知っていれば大丈夫)
http://www.iaowd.com/jp/php%E3%81%AE%E5%9F%BA%E7%A4%8E/

・PHPの基礎2
http://www.iaowd.com/jp/wordpress%E3%81%A8php/

・ゼロからテーマを作る
http://www.iaowd.com/p-lesson/

・浅野さん用WP
http://esthetic.iaowd.com/wp-login.php
ID asano
PWD asano2017

Designsprint

January 20, 2017
Tweet

More Decks by Designsprint

Other Decks in Design

Transcript

  1. オリジナルWordPressテーマを完成させ
    画面デザインを行う特別集中講座
    2017.1.21,28
    WordPressで見栄えのするペライチページの作
    り方講座

    View full-size slide

  2. 2
    講座のレジュメ
    ◆21日(土)
    1.WordPressテーマの仕組み解説
    2.PHPの基本(これだけ覚えればとりあえす大丈夫)
    3.2を応用したテンプレートタグの事例
    4.PHPとテンプレートタグ実習(例)
    5.間違いやすい箇所の改善法について

    View full-size slide

  3. 3
    講座のレジュメ
    ◆28日(土)
    1.トピック:使用すべきプラグイン、使用しない方が
    よいプラグイン
    2.主要テンプレートの作成の解説
    3.主要テンプレートの作成実習
    4.CSS設計とSassの使い方
    5.CSSフレームワークの使い方
    6.Webフォント、Webアイコンの使い方

    View full-size slide

  4. 4
    講座のレジュメ
    +カッコよく見せるデザインのコツがわかる
     すぐにお客がつくコンテンツの書き方がわかる

    View full-size slide

  5. 5
    この勉強会で学べること
    WordPressとは何か?がわかる
    WordPresで自分のテーマを持てる
    普段の「モヤモヤ」が 0.5%
    ※過去参加者体感値
    解消できる

    View full-size slide

  6. 6
    対象
    6
    Webデザイナー・フルスタックWebデザイナー
    フロントエンドエンジニア
    エンジニア
    HTMLやCSSが少し分かる起業家・サムライ業の方
    企業のWeb担当者

    View full-size slide

  7. 7
    目的
    テーマの選び方がわからない
    テーマを自由にデザインするには?
    WordPressを一通り学びたい
    という人のために企画しました。
    この勉強会は、

    View full-size slide

  8. 講師プロフィール
    クリエイティブコーチ/Webクリエイター。
    ・Webデザイナーとして22年のキャリア
    ・講師としての経験5年
    ・教えた生徒の数:120人
    ・創ったWebの数:120
    ・ベンチャー事業の立ち上げに関わった数4件
    ・新規事業立ち上げ数3
    ・マーケティング・コンテンツ企画提案の数3桁
    ・広告効果測定の改善提案数22件
    ・東京藝術大学美術学部卒
    夏本健司

    View full-size slide

  9. 3桁のサイト構築を経験。
    おそらく

    View full-size slide

  10. 80名以上にWordPress
    をレクチャー。
    2013年から

    View full-size slide

  11. 11
    結果の出る学び方・出ない学び方
    1つのやり方、1つの技術に固執しない
    点と点を線にして面を増やすイメージが大切
    全体と部分の関係性を常に意識すること
    手段でなく、目的にフォーカスすること
    順算ではなく逆算思考で考える
    結果の出る人の学び方は、
    結果の出ない人はその逆をやる

    View full-size slide

  12. 12
    言葉の定義
    WordPress
    テーマ
    テンプレート
    テンプレートタグ
    テンプレート階層
    カスタム投稿タイプ
    独自テーマ・既存テーマ
    プロダクトの名前
    サイトの外観・テンプレの集合体
    テーマの部分
    データの置き換え呪文
    テンプレートの名前決めルール
    投稿の追加方法
    自作のテーマ、人のテーマ

    View full-size slide

  13. 13
    テーマを選ぶ上での問題点
    既存テーマの中から選ぶ
    すでに完成しているので、拡張性が低い(☓)
    ・レイアウト変更やデザイン変更時に困る
    ・カスタマイズがうまくいかなくて妥協する
    ・顧客ニーズや仕様が満たされない

    View full-size slide

  14. 14
    テーマを選ぶ上での問題点
    独自テーマを作る
    ゼロから作るので拡張性は期待できるが時間がかかる
    ・正しいテーマの作り方がわからないので手探り
    ・書籍やセミナーを参考にするがいまいち
    ・途中であきらめるケースも

    View full-size slide

  15. 15
    そもそもCMSは・・・
    テンプレートは案件ごとに、ゼロから作る
    サイト設計とCMS設計は別に行う
    ・サイト設計後にテンプレートを作るので、
    個々のサイトにフィットするのは、あたり前。
    ・書籍やセミナーを参考にするがいまいち
    ・途中であきらめるケースも

    View full-size slide

  16. 16
    予算的にも、納期的にも、
    そして技術的にも、、、
    じっくり作り込んでいられない!!!
    しかし実際は、
    無理! 無理! 無理!

    View full-size slide

  17. 17
    「汎用テーマ」のススメ
    どんなサイトにも使える「汎用テーマ」があれば
    仕事の効率が上がり、思ったようにカスタマイズ
    できるようになる。
    ・半分出来てたら、あと半分を作るだけ
    ・インストール後の面倒をまるごとカット
    ・既存テーマとフルカスタマイズの丁度中間
    ・仕様が統一されるので、ミスや手戻りがなくなる

    View full-size slide

  18. 汎用テンプレートがあれば・・・
    どんな
    サイトも!

    View full-size slide

  19. 汎用テンプレートがあれば・・・
    どんな
    サイトも!

    View full-size slide

  20. 汎用テンプレートがあれば・・・
    どんな
    サイトも!

    View full-size slide

  21. 汎用テンプレートがあれば・・・
    どんな
    サイトも!

    View full-size slide

  22. 22
    とはいえ、私、PHPが・・・
    とりあえずPHPの知識は必要なし
    コピペで最低限のテンプレートがわずかな時間で
    構築できる!
    ・CMSプロトタイプという考え方
    ・構造を先に、細部はあとで!
    ・動くサイトがあれば、意思疎通しやすい
    合議をとりやすい

    View full-size slide

  23. 23
    「汎用テンプレート」の制作実演をします。
    それでは、
    www.iaowd.com/p-lesson/
    「独自テーマをゼロから作る」

    View full-size slide