designからWebページを作るやりかた完全に理解した.pdf

Slide 1

Slide 1 text

Design->Webページのやりかた完全に理解した @dach

Slide 2

Slide 2 text

Why speak Today?

Slide 3

Slide 3 text

Thema: How do you do this page building?

Slide 4

Slide 4 text

Thema: How do you do this page building?

Slide 5

Slide 5 text

Today’s goal デザインからWebページを作る時に「どうすればええんや」→「こんな感じで作ればええんやな」という感覚を作る練習法を理解すること

Slide 6

Slide 6 text

Who is me? EasyEasy icon チキン南蛮 VRM ID: @dach JOB: PM / カイゼン屋 Twitter: i-dach qiita: i-dach

Slide 7

Slide 7 text

Retrospective

Slide 8

Slide 8 text

Once upon a time...

Slide 9

Slide 9 text

My master said... デザイン渡すからLP作ってよぼく(19) 師匠えっ (適当にしか作ったことないぞ...) やったことない？はえー (ほんまかいな) ちゃんと理屈覚えたら簡単よ

Slide 10

Slide 10 text

Lesson1: WEBページの構造を知る師匠 BODY HEADER MAIN 変わっているサイトもあるけど基本形は一緒。まずは基本形を知ろう

Slide 11

Slide 11 text

Lesson1: WEBページの構造を知る師匠 headerも分解するとそれぞれのまとまりが見えてくるよ CONTENT CONTENT CONTENT CONTENT MENU

Slide 12

Slide 12 text

Lesson1: WEBページの構造を知る師匠 CONTENT MAIN CONTENT SIDE BAR MAIN部分もHeaderと同じ要領で分解するだけ

Slide 13

Slide 13 text

Lesson1: WEBページの構造を知る師匠 BODY HEADER MAIN point 枠の切り方次第で、実装後の挙動とかが変わるよ headerの幅が mainと同じだったら？

Slide 14

Slide 14 text

Lesson2: WEBページの構造に慣れる師匠 Lesson1でやったことを色々なWEBページに対してやってみよう BODY HEADER MAIN ① WEBページをピックアップ ② 構造を分解してみよう

Slide 15

Slide 15 text

Lesson3: 分解した構造にHTMLタグを当て込もう HTMLクイックリファレンスより一部抜粋

…… ひとつの段落（パラグラフ）であることを表す

…… テーマや話題の区切りを表す

 …… 半角スペースや改行をそのまま表示する
 …… 引用・転載セクションであることを表す
 …… 順序のあるリストを表示する
 …… 順序のないリストを表示する
 …… リストの項目を記述する
 …… 定義・説明リストを表す
 …… 定義・説明される言葉を表す

 …… 定義用語や言葉の説明をする
 …… 図表であることを示すHTML5から追加
 …… 図表のキャプションを示すHTML5から追加
 ……ひとかたまりの範囲として定義する
 …… メインコンテンツであることを示す
師匠
正しいものを使うことでSEO対策にもな
りますよ

Slide 16

Slide 16 text

構造を分解するときにいい補助ツールないかな Question

Slide 17

Slide 17 text

Answer 引用（Atomic Design Chapter2：https://atomicdesign.bradfrost.com/）師匠若干さっきの分解と粒度は違うかもしれないですが、大体同じになります詳しくはオリジナルサイトへ

Slide 18

Slide 18 text

Conclusion

Slide 19

Slide 19 text

Conclusion 慣れるにはとにかく数をこなすことが大事理論が完全理解できたら、手に馴染むまでひたすら練習しよう！

Slide 20

Slide 20 text

Thanks