受講者視点で 語ります。

作業中の私

Mars Knowledge トレーニングスクール

とはなんぞや!?

社畜デス。

社畜自己紹介経歴 ・2010 大学新卒でアパレルメーカーに就職 ・2012 人生に不安を感じてWebデザインを勉強し始める。(Webおもしろい！） ・2013 勉強会に参加するも方向性が決まらず進歩がない。 ・2014 2月 BootStrap勉強会で石嶋さんに再開 ・2014 ６月 Mars Knowledge　入学。 （僕をプロデュースしてもらおう！）

山岸　恵輔26歳　趣味:ロック （楽器できませぬ）

アジェンダ

ロゴデザインの種

実務案件を受けました

ポートフォリオサイトサイトのイメージ

狩りガールSeason２案件コーディングとWordPressテーマ導入実務案件をつうじてためになったこと

インブラウザデザインは初心者にこそオススメ！BootStrapでつくるスマホ対応部分各項目について

サイトイメージ

スクロールしたくなるように項目ごとに がらりと色を変えよう

前提条件：BootStrapをつかった、 レスポンシブ&シングルページ

Bootstrapっぽくないサイトデザインで

デザインはこりたい

ブランドカラー　黒×黄

ロゴデザインの種

イナズマ　　 王道さ Webっぽさ （クラウド）

できあがったロゴがこちら

・要素は少なくシンプルに！

・丁寧に要素を揃えて

・レザーテクスチャで質感UP！

・色も3色以内でまとまりよく

BootStrapでつくるスマホ対応部分

“row”&“col”

スマホに必要不可欠な２つのクラス

“img-responsive”

Glid System

Bootstrapは横幅を12分割している。

列数の合計が12になるようにブロックを配置していきます

“row”

“row”&“col”

ブロックの表示をPCとスマホで分けたい要素をrowで囲む

“col”ブロックにそれぞれ表示する端末で使うグリッド数をいれる

サンプル　コード

“row”&“col”col-md-12

col-md-6 col-md-6

col-md-3 col-md-9

“img-responsive”

超簡単！

classにimgでいれるだけ！

“img-responsive”

“img-responsive”はみ出てる！！ 縦横縮小でスッキリ！

インブラウザデザインは 初心者にこそオススメ！

自分にできることが少ないから デザインカンプをhtml&cssで 再現できるかわからない

デザイン自体を 遠慮してつくってしまう

アイディアが広がらない！ （作業進まない）

PSDデータ作成↓

html&css　コーディング

従来的

分担作業

インブラウザデザイン

デザイン、コーディング、 確認の繰り返し

統合的作業

頭で考えたデザインをブラウザ で確認していくから課題を見つけ 出しやすい

一つ一つ問題をクリアしながら デザイン＆コーディング

アイディアをねり出せる！ （作業がすすむ）

ONE PAGE LOVEシングルページ作成するのに最適♪

ポートフォリオサイトのまとめ

デザインおもしろい！

Bootstrap　Less　jQuery Media Queries　を覚えられた。

依頼：インタビュー形式でリニューアルしたい。

納期：短い

自分たちで更新できるようにWordPressを導入

WordPressは既存テーマをカスタマイズ

デザインカンプは石嶋さんが作成済み

デザイン カンプ

header

contents

widget1

sns!footer

widget2

menu

WordPress Theme

header

menucontents

footersns

widget

img img img

img

imgheader

contents

widget1

sns!footer

widget2

menu

Facebook Like Box

header

menucontents

footersns

widget

img img img

img

imgheader

contents

widget1

sns!footer

widget2

menu

Facebook Like Box

header

menucontents

footersns

widget

img img img

img

header

contents

widget1

sns!footer

menuimg

img img img

img Facebook Like Box

Facebook Like Box

contents

img img img

contents

img img img

スペースキーで空白いれて調節していました。

できなかったところ

WordPressテンプレートタグ化

実務案件のまとめ

WordPress Theme　カスタマイズの利点

トレーニングスクールでありながら 時間・金額を意識でき責任を感じれた

WordPress　PHP階層の理解が深まった

最後に

ご清聴ありがとうございました

早く社畜を卒業したい

ちゃんと業務でWEBデザインをしたい

デザインと技術を覚えるのは楽しい！