・なぜポートフォリオを作ったのか？ ・実際の制作の流れ ・レビューをしてもらった 　・デザイン編 　・コード(HTML)編 　・コード(CSS)編 まとめ

1. 作品は
誰かに
見てもらった方が良い！
ひよっこWebディレクターが、
初めて作ったポートフォリオをレビューしてもらったお話

2. 自己紹介
ひだまきこ(@makiko_ol)
ザ・マーズナレッジトレーニング生 第1号
2013年 元道産子。
2013年 11月、都会島に上陸したひよっこWebディレクター。
!
WP-Eにて共同執筆中。現在最多執筆者とか。
Schooにて司会もしたりしています。
!
【スペック】
Illustrator/Photoshop/HTML/CSS・・・少々

3. 本日のアジェンダ
❖ なぜポートフォリオを作ったのか？
❖ 実際の制作の流れ
❖ レビューをしてもらった
❖ デザイン編
❖ コード(HTML)編
❖ コード(CSS)編
❖ まとめ

4. なぜポートフォリオを作ったの？
❖ Illustrator
❖ Photoshop
❖ Bootstrap
❖ HTML
❖ CSS
❖ jQuery

5. 実際に作成した流れ
❖ 1.Bootstrapでワイヤーフレームを作る
(1ヶ月14時間位)
❖ 2.Photoshopでデザインカンプを作る
(10日間10時間位)
❖ 3.コーディング（HTML/CSS）する
(5日間7時間位) 23%
32%
45%

6. 出来上がった
私のポートフォリオ

7. Photoshop Illustrator
Bootstrap

8. レビューしてもらって
出来上がったポートフォリオ

9. レビュー後、できあがったデザインカンプ

10. 本日のアジェンダ
❖ なぜポートフォリオを作ったのか？
❖ 実際の制作の流れ
❖ レビューをしてもらった
❖ デザイン編
❖ コード(HTML)編
❖ コード(CSS)編
❖ まとめ
3要素!!

11. デザイン編

12. デザイン編 1/4 自己分析
自己紹介文をとことん考える
あなたはどんな人？
コンセプトは？？
どんな風になりたい？？？
もっと自分をアピールした方がいいとのこと

13. レビュー後、できあがったデザインカンプ

14. デザイン編 2/4 ロゴが見づらい
ロゴは文字を見易く、大きく
タイトルが分かるようにするべき！
分解して色を
変えてみる！
字体を部分的に
変えてみる

15. レビュー後、できあがったデザインカンプ

16. デザイン編 3/4 フォントは２種類まで！
②重要なところを ① 全部、同じ書体で
ピックアップ
フォントを決める時は
③字体を変えたり
大きさを変えたり

17. レビュー後、できあがったデザインカンプ

18. デザイン編 4/4 メイン画像はレスポンシブに対応！
横幅は1500px
背景の両端はぼ
かす！

19. レビュー後、できあがったデザインカンプ

20. デザイン編 ポイント
❖ ミスと意図的をしっかりと区別！
❖ まずは白黒で違いをつける。

21. コード(HTML)編

22. コード(HTML)編 1/3 見出し
h1は1つのドキュメントに
1コだけ
section
話題で変わる
!
div(dividers)
レイアウトを変える

23. コード(HTML)編 2/3 代替テキスト
altは日本語でもOK
altは必ず入れる！
日本語でもOK！

24. コード(HTML)編 3/3 idとclass
idは
JSの操作の時に使用
classは
見た目変更に使用

25. コード(CSS)編

26. コード(CSS)編 1/2 ショートハンド
同じ要素は,(カンマ)で
まとめる

27. コード(CSS)編 2/2 ページ全体にかかるモノはbodyに
下に書けば書くほど
上書きされる

28. お土産
❖ logo pond(http://logopond.com/)
❖ flat icon(http://www.flaticon.com/)
❖ ONE PAGE LOVE(http://onepagelove.com/)
!
❖ HTML5 Outliner(https://gsnedders.html5.org/outliner/)
❖ HTML5.jp(http://html5.jp/)
!
❖ stack overflow(http://stackoverflow.com/)
❖ メンテナブルCSS(https://www.cyberagent.co.jp/recruit/techreport/report/id=7926)
❖ コーディングガイドライン(http://met.hanatoweb.jp/guideline/html5/)

29. まとめ
誰かに見てもらって色々と意見を
言ってもらった方がいい！

30. まとめ
実務を持っている人なら
的確なアドバイスがもらえるので
スキルアップに繋がる

31. まとめ
クライアントや業界外の友達なら
率直な意見がもらえる
論理的な説明の
スキルアップに繋がる

32. まとめ
https://www.timeticket.jp/items/5355

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