インハウスデザイナー1年目の振り返り~整体の会社で、Web制作を内製化した話~

Transcript

1. インハウスデザイナー1年⽬の振り返り ~整体の会社で、Web制作を内製化した話~ 2019.12.25 デザイナーゆるのみ 4杯⽬｜忘年LT⼤会
2. ひらともや Webデザイナー&コーダー 2012年 ITの会社でエンジニア(C++, SQL) 2016年 (株)SMILE CREATE GROUP     整体師     ↓ 2019年 Webデザイナー
3. 会社のやっていること ⼥性のための整体サロン 「パウワウ」
4. 会社のやっていること ファスト整体スタンド 「チャージ」
5. 〜2018年 ⾃社で管理しているWebサイト8コ       (制作会社に外注）     ↓ 2019年3⽉ 内製化して、運⽤・制作 そのなかで様々な壁にぶつかり…
6. 01 キャッシュで更新が反映されない問題
7. ページの修正できました！ 確認お願いします 変わってないです。 別なところで、レイアウトが崩れてます…
8. ファイル名にgetパラメータをつけて解決！ salon_ginza.jpg ↓ salon_ginza.jpg?ver=20191225 sytle.css ↓ style.css?ver=20191225
9. キャッシュが残るのは仕⽅ないと思っていたけど… 調べたら更新できる⽅法があった 「そういうもの」だと思わず、まずは調べるのが⼤事 ⾃分がぶつかる問題は、周りの⼈も経験している
10. 02 1万⾏のcssとの戦い
11. ・最初に作られたのは10年以上前 ・⾊んな⼈が更新して ・scssで書かれていたのが、途中からcssへ… ・⼦孫セレクタが5階層を超えて ・修正箇所を⾒つけるのも、ひと苦労
12. Sassを使ってCSSを設計！ 1万⾏を超えるCSS ↓ FLOCSSに基づいて、ファイルを分割 ネストしまくってる⼦孫セレクタ ↓ BEMの命名規則で、 原則「⼦孫セレクタ」は使わない！
13. Sassって難しそうって思ってたけど… Sassで「出来ること」と、よく使う機能は違う cssは拡張しやすく、保守しやすく、再利⽤しやすく 未来の⾃分も、他の⼈もしあわせになるように
14. 03 デザインお任せ案件
15. 画像が表⽰されなくなってしまって… もっと⾒やすくできますか？ （細かいデザインはお任せします）
16. 「楽天市場」のいいデザインとは？ １．定番・王道を知る ２．流⾏を知る ３．共通点を⾒つける
17. 楽天市場のランキング上位サイトを分析 ↓ コンテンツとデザインの傾向を知る
18. ・ファーストビューはスライドショー ・余⽩を広めに取って ・なるべくシンプルに ・「楽天市場」によくあるコンテンツで ・お店や商品がわかりやすいように
19. デザインはセンスだと思っていたけど… 観察・知識・経験の積み重ねなのかもしれない サイトの種類ごとに王道や定番がありそう 「⾒慣れている」はわかりやすい
20. 04 BtoBサイトの作り⽅がわからない
21. はい、わかりました！ （どうしよう…） フランチャイズをはじめるので、 LPを作ってください！
22. BtoBサイトには型がある？
23. 記事で紹介されていたBtoBのLPの要素を観察する ↓ 基本の構成とデザインのポイントを把握する
24. ・FVの⽬⽴つところにCTAボタンを⼊れる ・「オシャレさ」より、情報の伝わりやすさ ・ターゲットに合わせたコンテンツと並び順に
25. BtoBのサイトの作り⽅がわからなかったけど… BtoBサイトには型がある ⾞輪の再発明はしない 愚者は経験に学び、賢者は歴史に学ぶ
26. 05 まとめ
27. 1年間いろんな壁にぶつかってきた
28. わからないことを調べたり、 はじめてのことに挑戦したり
29. ⼤変だったけど、気づいたらできることが増えていた
30. まだまだできないことはいっぱいある だけど2020年も、⽬の前のことに向き合って 壁をひとつずつ乗り越えていく
31. あなたは今年どんな壁にぶつかって、 乗り越えてきましたか？
32. ありがとうございました！