designからWebページを作るやりかた完全に理解した.pdf

Transcript

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

   View Slide

2. Why speak Today?
   

   View Slide

3. Thema: How do you do this page building?
   

   View Slide

4. Thema: How do you do this page building?
   

   View Slide

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

   View Slide

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

   View Slide

7. Retrospective
   

   View Slide

8. Once upon a time...
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Lesson3: 分解した構造にHTMLタグを当て込もう
    HTMLクイックリファレンスより一部抜粋
    …… ひとつの段落（パラグラフ）であることを表す
    …… テーマや話題の区切りを表す
    …… 半角スペースや改行をそのまま表示する
    …… 引用・転載セクションであることを表す
    …… 順序のあるリストを表示する
    …… 順序のないリストを表示する
    …… リストの項目を記述する
    …… 定義・説明リストを表す
    …… 定義・説明される言葉を表す
    …… 定義用語や言葉の説明をする
    …… 図表であることを示すHTML5から追加
    …… 図表のキャプションを示すHTML5から追加
    ……ひとかたまりの範囲として定義する
    …… メインコンテンツであることを示す
    師匠
    正しいものを使うことでSEO対策にもな
    りますよ
    

    View Slide

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

    View Slide

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

    View Slide

18. Conclusion
    

    View Slide

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

    View Slide

20. Thanks
    

    View Slide