mars knowledgeトレーニングスクールとは何ぞや!?
DESCRIPTION
「The Mars Knowledgeとは何ぞや?実際にどのようなことをおこなっているのか?」(30分) 今回は入学した生徒が全員作成するポートフォリオについてと 他スクールとの一番の差別要素である実務案件の二つを実際に体験した私が紹介します。 これでThe Mars Knowledgeの全貌が明らかに!TRANSCRIPT
![Page 1: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/1.jpg)
受講者視点で 語ります。
作業中の私
Mars Knowledge トレーニングスクール
とはなんぞや!?
![Page 2: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/2.jpg)
社畜デス。
![Page 3: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/3.jpg)
社畜自己紹介経歴 ・2010 大学新卒でアパレルメーカーに就職 ・2012 人生に不安を感じてWebデザインを勉強し始める。(Webおもしろい!) ・2013 勉強会に参加するも方向性が決まらず進歩がない。 ・2014 2月 BootStrap勉強会で石嶋さんに再開 ・2014 6月 Mars Knowledge 入学。 (僕をプロデュースしてもらおう!)
山岸 恵輔26歳 趣味:ロック (楽器できませぬ)
![Page 4: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/4.jpg)
アジェンダ
ロゴデザインの種
実務案件を受けました
ポートフォリオサイトサイトのイメージ
狩りガールSeason2案件コーディングとWordPressテーマ導入実務案件をつうじてためになったこと
インブラウザデザインは初心者にこそオススメ!BootStrapでつくるスマホ対応部分各項目について
![Page 5: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/5.jpg)
サイトイメージ
スクロールしたくなるように項目ごとに がらりと色を変えよう
前提条件:BootStrapをつかった、 レスポンシブ&シングルページ
Bootstrapっぽくないサイトデザインで
デザインはこりたい
ブランドカラー 黒×黄
![Page 6: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/6.jpg)
ロゴデザインの種
イナズマ 王道さ Webっぽさ (クラウド)
![Page 7: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/7.jpg)
できあがったロゴがこちら
・要素は少なくシンプルに!
・丁寧に要素を揃えて
・レザーテクスチャで質感UP!
・色も3色以内でまとまりよく
![Page 8: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/8.jpg)
BootStrapでつくるスマホ対応部分
“row”&“col”
スマホに必要不可欠な2つのクラス
“img-responsive”
![Page 9: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/9.jpg)
Glid System
Bootstrapは横幅を12分割している。
列数の合計が12になるようにブロックを配置していきます
![Page 10: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/10.jpg)
“row”
“row”&“col”
ブロックの表示をPCとスマホで分けたい要素をrowで囲む
“col”ブロックにそれぞれ表示する端末で使うグリッド数をいれる
![Page 11: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/11.jpg)
サンプル コード
![Page 12: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/12.jpg)
“row”&“col”col-md-12
col-md-6 col-md-6
col-md-3 col-md-9
![Page 13: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/13.jpg)
“img-responsive”
超簡単!
classにimgでいれるだけ!
![Page 14: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/14.jpg)
“img-responsive”
![Page 15: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/15.jpg)
“img-responsive”はみ出てる!! 縦横縮小でスッキリ!
![Page 16: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/16.jpg)
インブラウザデザインは 初心者にこそオススメ!
![Page 17: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/17.jpg)
自分にできることが少ないから デザインカンプをhtml&cssで 再現できるかわからない
デザイン自体を 遠慮してつくってしまう
アイディアが広がらない! (作業進まない)
PSDデータ作成↓
html&css コーディング
従来的
分担作業
インブラウザデザイン
デザイン、コーディング、 確認の繰り返し
統合的作業
頭で考えたデザインをブラウザ で確認していくから課題を見つけ 出しやすい
一つ一つ問題をクリアしながら デザイン&コーディング
アイディアをねり出せる! (作業がすすむ)
![Page 18: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/18.jpg)
ONE PAGE LOVEシングルページ作成するのに最適♪
![Page 19: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/19.jpg)
ポートフォリオサイトのまとめ
デザインおもしろい!
Bootstrap Less jQuery Media Queries を覚えられた。
![Page 20: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/20.jpg)
![Page 21: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/21.jpg)
依頼:インタビュー形式でリニューアルしたい。
納期:短い
自分たちで更新できるようにWordPressを導入
![Page 22: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/22.jpg)
WordPressは既存テーマをカスタマイズ
デザインカンプは石嶋さんが作成済み
![Page 23: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/23.jpg)
デザイン カンプ
![Page 24: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/24.jpg)
header
contents
widget1
sns!footer
widget2
menu
WordPress Theme
![Page 25: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/25.jpg)
header
menucontents
footersns
widget
img img img
img
imgheader
contents
widget1
sns!footer
widget2
menu
Facebook Like Box
![Page 26: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/26.jpg)
header
menucontents
footersns
widget
img img img
img
imgheader
contents
widget1
sns!footer
widget2
menu
Facebook Like Box
![Page 27: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/27.jpg)
header
menucontents
footersns
widget
img img img
img
header
contents
widget1
sns!footer
menuimg
img img img
img Facebook Like Box
Facebook Like Box
![Page 28: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/28.jpg)
contents
img img img
![Page 29: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/29.jpg)
contents
img img img
スペースキーで空白いれて調節していました。
![Page 30: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/30.jpg)
![Page 31: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/31.jpg)
![Page 32: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/32.jpg)
できなかったところ
WordPressテンプレートタグ化
![Page 33: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/33.jpg)
実務案件のまとめ
WordPress Theme カスタマイズの利点
トレーニングスクールでありながら 時間・金額を意識でき責任を感じれた
WordPress PHP階層の理解が深まった
![Page 34: Mars Knowledgeトレーニングスクールとは何ぞや!?](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a3e9bd8b42a4a1e8b48a7/html5/thumbnails/34.jpg)
最後に
ご清聴ありがとうございました
早く社畜を卒業したい
ちゃんと業務でWEBデザインをしたい
デザインと技術を覚えるのは楽しい!