サステナブルなウェブサイト制作

2022年10月21日に行われた「BITSTAR CROSS in EZO 2022」において行われた講演「サステナブルなウェブサイト制作」のスライド資料です。
継続してサイトを構築・運用していくために必要な心構えについてお話しています。

Transcript

1. サステナブルなウェブサイト制作 2022年10月21日 bitstar CROSS in EZO 2022
2. Copyright © 2021 bitstar Inc. All Rights Reserved. 1 自己紹介 齋藤 大祐（さいとう だいすけ） 1975年北海道生まれ。 北海道綜合美術専門学校（現：北海道芸術デザイン専門学校／BISEN）卒。 2000年頃よりウェブ制作に携わり、フリーランスを経て、 現在は bitstar にてフロントエンジニアとして従事。 1
3. Copyright © 2021 bitstar Inc. All Rights Reserved. フロントエンジニアとして眺める背景 2
4. Copyright © 2021 bitstar Inc. All Rights Reserved. 3 フロントエンジニアとして眺める背景 10年以上から「HTMLを書く仕事はなくなるかも」と巷では言われていた。 ⇒CMSの普及（ Wordpress、MovableType など） ⇒アプリやWebサービスによるHTML生成（Wix、Jimdoなど） 2 この仕事ももうオワコンかー
5. Copyright © 2021 bitstar Inc. All Rights Reserved. 4 フロントエンジニアとして眺める背景 オリジナルのデザイン・機能にこだわらない ⇒比較的簡単にウェブサイトが構築できる CMS・Webサービス利用 オリジナルのデザイン・機能が必須 ⇒手作業で最適化したフロント開発を行う必要がある 2 なんでか 今でもやってます
6. Copyright © 2021 bitstar Inc. All Rights Reserved. 5 フロントエンジニアとして眺める背景 ウェブサイトの目的によって、 CMS・Webサービス利用と オリジナルコーディングの住み分けができた オリジナルコーディングでは、ブラウザ表示部分に関して フロントエンジニアが調整を行うようになった 2 ＜結果＞
7. Copyright © 2021 bitstar Inc. All Rights Reserved. サステナブルなウェブサイト制作に 必要なこと 6
8. Copyright © 2021 bitstar Inc. All Rights Reserved. 7 サステナブルなウェブサイト制作に必要なこと 3 継続してWebを更新する難しさ ⇒いつの間にか、つぎはぎだらけのソースになってしまう ・更新したら、更新していなところに影響が出て、 表示が崩れてしまった・機能が動かなくなってしまった ・項目やテキスト量の増減に追従できない ・新しく追加した部分がマッチしない （新しいボタンの装飾が増えている、操作感の異なる機能の実装など）
9. Copyright © 2021 bitstar Inc. All Rights Reserved. 8 サステナブルなウェブサイト制作に必要なこと 3 ⇒原因は複数人数が更新に携わることによる ・余白の取り方 ・左右配置の方法 ・画像の種類 ・フォームの選択・・・などなど 「コーディングポリシーのぶれ」
10. Copyright © 2021 bitstar Inc. All Rights Reserved. 9 サステナブルなウェブサイト制作に必要なこと 3 明確なコーディングポリシーを設定する ⇒どの要素がどこまで影響を持つのか考える ・土台となるフレーム ［ヘッダー・フッター・メイン］など ・機能を持たせたモジュールユニット ［ナビゲーション・ページネーション・パンくず・検索エリア］など ・共通して複数ページに使用されるパーツ・装飾 ［見出し・ボタン・リンク・アイコン］など ⇒共通部分・再利用部分・派生部分を明確に！
11. Copyright © 2021 bitstar Inc. All Rights Reserved. 10 サステナブルなウェブサイト制作に必要なこと 3 ⇒追加や削除のたびにソースを大きく書き換えるのは 非効率＆不具合の元 ・ページの構成要素を追加・削除しても破綻しないHTMLの構造 例）Qiita記事： 【CSSの基本】そのmarginはどの要素が持っているのか ・Class や Id の命名規則の統一 ・影響しあわないCSSの書き方
12. Copyright © 2021 bitstar Inc. All Rights Reserved. 他職種との協力体制 11
13. Copyright © 2021 bitstar Inc. All Rights Reserved. 12 他職種との協力体制 フロントエンジニアが上手にサイト更新をしていくためには、 ・デザイナーのデザインアプローチをフロントリソースに取りこむ デザインとウェブサイトの利用マナーのすり合わせ ・機能の破綻が無いよう考慮したフロントリソースを バックエンド側に受け渡す ⇒フロントエンジニアが橋渡し役になる必要がある 4
14. Copyright © 2021 bitstar Inc. All Rights Reserved. 13 他職種との協力体制 デザイナーと協力して仕様をあらかじめ共有する ・Class化できる要素をあらかじめ意識してデザインに盛り込んでもらう ・デザインを趣旨を理解して、UI・UXにも反映する ⇒デザインを分解して、パーツやモジュールの設計を一緒に検討する ⇒ユーザーに「見やすい・使いやすい・気持ちがいい」を提供する 例）メニューの開閉アニメーション （開閉速度、ボタンの領域、操作がわかるリアクションなど） 4
15. Copyright © 2021 bitstar Inc. All Rights Reserved. 14 他職種との協力体制 バックエンドエンジニアが理解しやすいフロント側のリソース構成 ・フロントで作成したリソースを取り込む時、 機能の影響範囲がどこまで必要か予め確認しておく ・機能と操作方法がマッチするか検討する ⇒ユーザーが見る画面の表面を整える 例）バックエンドから書き出される要素［文字量、フォームの選択］ ⇒機能と操作性によって切り分ける要素の領域を変える 例）ヘッダー VS サイドナビ 4
16. Copyright © 2021 bitstar Inc. All Rights Reserved. 15 まとめ ◎フロントリソースをポリシーを持って作成する ◎デザインとバックエンドのつなぎ目を柔軟に吸収する ⇒不整合をできるだけ取り除き、機能を満たすよう気を利かせる 5 つまり、それって 「思いやり」 だと思うんです
17. Copyright © 2021 bitstar Inc. All Rights Reserved. 16