-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
2283 lines (1687 loc) · 125 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8" />
<title>制作ガイドライン - バーンワークス株式会社</title>
<link rel="stylesheet subresource" href="css/s.min.css" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" sizes="144x144" />
<link rel="icon" type="image/png" href="img/favicon.png" sizes="64x64" />
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" sizes="16x16 32x32 64x64" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="本ガイドラインは、バーンワークス株式会社が行う Web サイト制作全般においての品質を保持するために定めたものである。当社は本ガイドラインに基づいた制作を行い、クライアントに対して常に安定した品質のサービス、及び納品物を提供する。" />
<meta property="og:title" content="制作ガイドライン" />
<meta property="og:site_name" content="バーンワークス株式会社" />
<meta property="og:url" content="https://burnworks.com/docs/guidelines/" />
<meta property="og:description" content="本ガイドラインは、バーンワークス株式会社が行う Web サイト制作全般においての品質を保持するために定めたものである。当社は本ガイドラインに基づいた制作を行い、クライアントに対して常に安定した品質のサービス、及び納品物を提供する。" />
<meta property="og:image" content="https://burnworks.com/static/img/ico/bw.png" />
<meta property="og:type" content="website" />
<!-- ********************************************************************************************
Burnworks Inc. Web Development Guidelines Ver.1.5.2 (Last modified 2023-10-18)
https://burnworks.com/docs/guidelines/
by Yoshiki Kato @burnworks - First Published 2014-01-20 Ver.0.1.0
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) License.
https://creativecommons.org/licenses/by-nc/4.0/
******************************************************************************************** -->
</head>
<body id="top" class="guideline" data-bs-spy="scroll" data-bs-target="#role-sub-menu" data-offset="30">
<div class="block-header">
<header>
<h1 class="module-page-title"><a href="./" title="制作ガイドライン - バーンワークス株式会社">Web Development Guidelines</a></h1>
<p class="module-m-menu-btn module-swing"><a href="#sub-menu" title="メニューに移動">Menu</a></p>
</header>
</div>
<div class="layout-container">
<div class="block-inner">
<div class="layout-main">
<main>
<div class="block-summary">
<p>本ガイドラインは、バーンワークス株式会社が行う Web サイト制作全般においての品質を保持するために定めたものである。当社は本ガイドラインに基づいた制作を行い、クライアントに対して常に安定した品質のサービス、及び納品物を提供する。</p>
<p class="module-modified-date"><span>Last modified <time datetime="2023-10-18T10:29:35+09:00">2023-10-18</time></span></p>
</div>
<div class="block-section">
<section>
<h2 class="module-block-header" id="section-direction">サイト設計・ディレクション</h2>
<div class="block-section-body">
<h3 id="direction-basic">基本</h3>
<div class="block-article-body">
<p>ディレクターはクライアントから指定の Web サイト要件を満たし、Web サイトのビジネスゴールを達成するため、適切な情報提供、提案を行う、また Web サイトの情報設計からプロジェクトの進行管理、プロジェクトメンバーの業務管理、納品物の品質管理を適切に行うものとする。</p>
<p>ディレクターはクライアントを含めプロジェクトメンバー間でのコミュニケーションを積極的に取ることで円滑なプロジェクト進行を心がける。また、クライアントに対しては進捗の報告、情報共有を適時、および明確に行い、信頼関係の構築に努める。</p>
</div>
<h3 id="direction-kickoff">プロジェクトキックオフ</h3>
<div class="block-article-body">
<p>新規 Web サイト制作案件が立ち上げに際して行われるキックオフミーティングについては、下記の要領を基本として開催する。クライアントとの間では現状の把握、ゴールイメージの共有、プロジェクト進行におけるスケジュールを含めた認識の共有を主な目的とする。</p>
<p>また、社内のプロジェクトメンバー間においては、現状の把握、ゴールイメージの共有、スケジュールの共有の他、要件の確認に伴い、事前の意見交換を目的とする。これは例えば「事前に実装担当者、デザイナー、プログラマが知っていればもっと効率よくやる方法があった」「こうしておいてくれればもっと作業がしやすかった」といった無駄をなくすことで、生産性を高め、納期の短縮や品質の向上でクライアントに還元する。</p>
<h4>クライアントと行うキックオフ</h4>
<ul>
<li>プロジェクトの要件確認
<ul>
<li>求められる動作環境や検収条件などの確認</li>
<li>納品物の内容や納品形態についての確認</li>
<li>開発言語、環境の指定やその他要件の確認</li>
</ul></li>
<li>プロジェクトの対象となる Web サイト等のユーザー層、ターゲット層の理解（必要に応じて下記を実施）
<ul>
<li>ユーザーのセグメンテーションとペルソナ</li>
<li>ユーザーインタビュー</li>
<li>カスタマージャーニーマップ</li>
<li>既存 Web サイトが存在する場合はその分析
<ul>
<li>アクセスデータ解析</li>
<li>ヒューリスティック評価</li>
<li>ユーザビリティテスト</li>
</ul></li>
</ul></li>
<li>クライアントビジネスの理解</li>
<li>スケジュールの共有</li>
<li>議事録の作成 （プロジェクトメンバー間で共有すべき決定事項などは 「ヒアリングシート」 としてまとめる）</li>
</ul>
<h4>社内キックオフ</h4>
<ul>
<li>プロジェクトの要件確認
<ul>
<li>求められる動作環境や検収条件などの確認</li>
<li>納品物の内容や納品形態についての確認</li>
<li>開発言語、環境の指定やその他要件の確認</li>
</ul></li>
<li>プロジェクトの対象となる Web サイト等のユーザー層、ターゲット層の理解</li>
<li>既存 Web サイトが存在する場合はその分析結果の共有</li>
<li>クライアントビジネスの理解</li>
<li>スケジュールの共有</li>
<li>議事録の作成</li>
</ul>
</div>
<h3 id="direction-member">社内プロジェクトメンバーのアサイン</h3>
<div class="block-article-body">
<p>社内におけるプロジェクトメンバーのアサインは Web サイト制作事業の責任者権限で行う。リソース管理の観点から、ディレクターが現場の独自判断でメンバーをアサインしたりすることは禁止する。</p>
<p>守秘義務契約、及び業務委託契約を結んでいない外部の個人事業主、及び企業へのプロジェクト情報の開示や作業の依頼は当然ながら一切禁止する。</p>
</div>
<h3 id="direction-document">ドキュメント</h3>
<div class="block-article-body">
<p>制作過程でディレクターが作成する標準的なドキュメントは下記の通りとする。フォーマットは問わないが、クライアント環境で問題なく閲覧ができること。当然、プロジェクトに応じて必要なドキュメントは変化する。</p>
<ul>
<li>ヒアリングシート （キックオフミーティング時に確定した内容などをまとめたもの）</li>
<li>スケジュール案</li>
<li>サイト構成図</li>
<li>ワイヤーフレーム</li>
<li>Movable Type など導入プロダクトの操作マニュアル（状況に応じて）</li>
</ul>
<p>Movable Type など導入プロダクトのマニュアルに関しては通常作成不要。開発元の公式ドキュメントがある場合はそれで代用できる。</p>
<p>例えば Movable Type の場合、カスタムフィールドを用いた特殊な入力画面をクライアントに提供するなど、開発元が提供する公式ドキュメントでは対応できない場合などに、簡易なものを作成する前提とする。</p>
</div>
<h3 id="direction-communication">プロジェクト進行における連絡手段</h3>
<div class="block-article-body">
<p>プロジェクト進行中のクライアントを含むプロジェクトメンバーとの連絡・情報共有の手段は、クライアントと協議の上、Backlog、Slack、Chatwork をはじめとしたチャット・プロジェクト管理ツールを利用するが、原則として Backlog の利用を推奨する。ただし、クライアントがすでに Slack、もしくは Chatwork を利用している場合など、Backlog よりもそちらを利用した方が効率がよいと考えられる場合はこの限りではない。</p>
<p>プロジェクトのキックオフがされた後、ディレクターによってチャット・プロジェクト管理ツールに当該プロジェクト用のスペースが開設され、プロジェクトメンバーが招待される。</p>
<p>なお、クライアントの要望や、プロジェクトの特性、要件に応じて、連絡・情報共有用のツールは前述したサービス以外にも最適なものを選択できる。ただし、情報管理の観点から、使用ツールの選定はクライアント、および当社の情報管理ポリシーに基づき行う他、連絡の内容がすべて、ログとして長期にわたり保存され、後から検索可能なツールを選択すること。</p>
</div>
<h3 id="direction-accessibility">アクセシビリティ</h3>
<div class="block-article-body">
<p>設計段階からアクセシビリティに配慮する。</p>
<p>例えばカルーセルパネル（数秒ごとに画像や要素がスライド等で差し替わる UI ）は数秒間で要素内に記述されたテキストを把握できない可能性や要素が切り替わるまでの間に正しく操作できない可能性もあり、重要なナビゲーション機能をカルーセルに持たせるべきではないと考える。</p>
<p>あるいはナビゲーション機能を持たせるのであればカルーセルパネルの動作を一時停止できる仕組みを持たせるなど配慮が必要である。</p>
<p>また、色に依存したナビゲーション、文章の使用は禁止する。例えば「下記の赤い方のボタンを押してください」「文章内の赤い文字は重要項目です」などの表記、あるいは色を選択させるような際にカラーパレットのみで色名のラベルがない等の UI は、一部の色覚障がい者にとっては認識できない可能性がある。UI や文章作成時には配慮するものとする。</p>
<h4>操作性</h4>
<p>特別、スマートフォン等、画面サイズの小さいデバイスへの対応を行わない場合でも、マルチデバイスで操作しやすい UI を意識して設計する。「スマートフォンサイトではないのでスマートフォンでの操作が困難でも仕方ない」ということはない。</p>
<h4>文字サイズの変更ボタン</h4>
<p>Web ページ内の文字サイズ変更を Web サイト側で提供する所謂「文字サイズ変更ボタン」の提供は原則として行わない。文字サイズの変更はブラウザ UI に任せるべきで、必要であれば操作方法をヘルプページ等に表記するものとする。</p>
</div>
<h3 id="direction-url">ページタイトルやURL</h3>
<div class="block-article-body">
<p>各ページのタイトル、およびディレクトリ名やファイル名はディレクターが実装担当に指示すること。実装担当者が勝手に決めたりはしない。</p>
<p>ページ一覧（各ページタイトルや URL を記載した）をワイヤーフレームと同一ファイル内などに作成し、実装担当者はそれを基準に各ページを作成する。</p>
<p>必要に応じて、ページ内に記述する <code><meta name="description" /></code> の値なども決められる場合は記述しておく。</p>
<p>なお、この一覧に CSS や JavaScript 等、ページで読み込まれる各リソースのパス指定などは不要（これらに関しては別途 <a href="#section-coding">コーディング関連のセクション</a> で定める）。</p>
</div>
<h3 id="direction-use-terms-consistently">文言の統一</h3>
<div class="block-article-body">
<p>案件の状況やクライアントの要望により異なるものの、原則的には下記のように Web サイト内で使用する文言を統一する。表記のブレによる品質の低下を防ぐ。</p>
<p>特にクライアントからの明確な指定がなく、迷ったときは、例えば下記を参考に統一する。</p>
<ul>
<li>Webサイトのトップページに移動するリンクのラベル： <strong>トップページ</strong> （×ホームページ、×トップ）</li>
<li>ページ上部に移動するページ内リンクのラベル： <strong>このページの上部へ</strong> （×ページトップ、×トップ）</li>
<li><strong>お問い合わせ</strong> （×お問合せ、×お問い合せ）</li>
<li><strong>メールアドレス</strong> （×Mailアドレス、×アドレス、×email、△E-mail）</li>
<li>英数字は原則半角、URLや数値、英単語を全角で記述しない</li>
<li>文章内の全角スペースは半角に統一</li>
</ul>
<p>その他、サイト内で複数の文言が混在しないように注意すること。</p>
<ul>
<li>例）弊社|当社、貴社|御社、お客様|クライアント、～します|～いたします ...etc</li>
</ul>
</div>
<h3 id="direction-access-analytics">アクセス解析</h3>
<div class="block-article-body">
<p>制作する Web サイトに対して、アクセス解析ツールの導入は必須と考える。なお、クライアントからの特別な指定がない場合のアクセス解析ツールとしては、Google Analysis を導入する前提とする。</p>
<p>ディレクターは、Web サイト公開前に必ず Web サイトへの Google Analytics トラッキングコードの設置、及び設定 （主にゴール設定） が行われていることを確認する。</p>
<p>また、Web サイトには必ず個人情報保護方針 （プライバシーポリシー） を掲載し、その中で、Google Analysis の使用、およびクッキー （Cookie） を使用したアクセスログ収集に関する掲示を行うものとする。その際、Google 社のプライバシーポリシーページへのリンクもあわせて掲載すること。（詳しくは <a href="#direction-privacy-policy">個人情報保護方針のセクション</a> を参照） </p>
</div>
<h3 id="direction-privacy-policy">個人情報保護方針</h3>
<div class="block-article-body">
<p>Web サイトには個人情報保護方針 （プライバシーポリシー） のページを必ず用意する。クライアントによってすでに個人情報保護方針が策定されている場合はそれに準じるが、アクセス解析に Google Analysis を用いる場合は、必ず Google Analysis の利用規約に則り、クッキー （Cookie） を使用したアクセスログ収集に関する掲示を追加で行うものとする。</p>
<p>その際、Google 社のプライバシーポリシーページへのリンクもあわせて掲載すること。下記の記述をサンプルとして利用できる。</p>
<div class="module-text-example">
<p><strong>アクセス解析について</strong></p>
<p>当サイトにおけるアクセスログの収集、および解析には Google Analytics を使用しています。Google Analytics ではクッキー（Cookie） を使用してアクセスログを収集しますが、これは個人を特定する情報を含みません。</p>
<p>なお、収集されるアクセスログは Google 社のプライバシーポリシーに基づいて管理されます。</p>
<p>Google Analytics で収集したアクセスログに関するプライバシーポリシーについては、下記をご確認ください（外部サイト）。</p>
<ul>
<li><a href="http://www.google.com/policies/privacy/partners/">ユーザーが Google パートナーのサイトやアプリを使用する際の Google によるデータ使用</a></li>
<li><a href="http://www.google.com/intl/ja/policies/privacy/">Google 社のプライバシー ポリシー</a></li>
</ul>
</div>
<p>上記サンプル文章は、下記ページの内容を参考にしたもの。</p>
<ul>
<li><a href="https://burnworks.com/privacy/">個人情報保護方針 ： バーンワークス株式会社</a></li>
</ul>
</div>
<h3 id="direction-contract">サーバや外部サービスの契約</h3>
<div class="block-article-body">
<p>クライアントから新規のサーバ契約やその他外部サービス（ドメイン取得、ASP の利用等）の利用を求められた場合は、当社にてその選定や申し込みの代行を行うなど、最大限協力するものとする。しかし、実際の契約自体はクライアントとサービス提供元間での直接契約とし、当社が代理契約をすることは原則として行わない。</p>
</div>
</div>
</section>
</div>
<div class="block-section">
<section>
<h2 class="module-block-header" id="section-design">デザイン関連</h2>
<div class="block-section-body">
<h3 id="design-accessibility">アクセシビリティ</h3>
<div class="block-article-body">
<p>デザイン時にもアクセシビリティに配慮すること。</p>
<p>背景色とテキストのコントラスト、色覚障がい者向けの配色等に考慮する。JIS X 8341-3:2016 における該当箇所は下記引用の通り。</p>
<blockquote>
<p><strong>1.4.3 コントラスト（最低限レベル）の達成基準</strong></p>
<p>テキスト及び文字画像の視覚的提示には，少なくとも 4.5:1 のコントラスト比がある。ただし，次の場合は除く（レベル AA）。 <br />
<strong>a) 大きな文字</strong> サイズの大きなテキスト及びサイズの大きな文字画像には，少なくとも 3:1 のコントラスト比がある。 <br />
<strong>b) 附随的</strong> テキスト又は文字画像において，次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である，純粋な装飾である，誰も視覚的に確認できない，又は重要な他の視覚的なコンテンツを含む写真の一部分である。 <br />
<strong>c) ロゴタイプ</strong> ロゴ又はブランド名の一部である文字には，最低限のコントラストの要件はない。 </p>
<p>JIS X 8341-3:2016「1.4 判別可能のガイドライン」から引用</p>
</blockquote>
<p>コントラストのチェックに関しては、下記のツール等を推奨。</p>
<ul>
<li><a href="https://www.tpgi.com/color-contrast-checker/">Colour Contrast Analyzer (CCA)</a></li>
</ul>
<h4>フォントサイズやボタンサイズ</h4>
<p>フォントサイズは、最小サイズを 12px 相当とする。ただし、重要でない注釈等に関しては 10px 相当まで許容する。現在のディスプレイサイズ等を考慮すれば、標準的なフォントサイズは本文で 14px 相当～ 18px 相当が妥当と考える。その他、ボタンサイズ等については <a href="#smartphone-touch-device">タッチデバイスのセクション</a> を参照。</p>
</div>
<h3 id="design-design-data">デザインデータ</h3>
<div class="block-article-body">
<p>基本的には Adobe 社の Xd もしくは Figma を使用して作成することを推奨する。インストール版ソフトウェアの場合は、できる限り最新バージョンのソフトウェアを使用し、プロジェクトメンバー間でのデータ互換性による作業遅滞を避けるよう努めること。</p>
<p>デザインデータには必ず「指示」レイヤーを追加し、リンクカラー（通常、ホバー時、訪問済み、アクティブ時）の指定をはじめ、実装担当者向けの指示を記載するのもとする。</p>
<p>ディレクター、およびデザイナーはデザインの進行、確定にあたり、実装面からの意見を必ず実装担当者に聞くこと。それにより実装時になってデザインの不具合により手戻りが発生するなどの無駄を省き、実装面の負荷を低減する。</p>
<p>原則としてデザインデータのクライアントへの提供は行わないが、あらかじめ業務委託契約内などでの取り決めがある場合、デザインデータはクライアントに納品される。レイヤーの分け方や名前の付け方など、他の人が見てもわかりやすいように配慮すること。これは実装担当者の作業効率も向上させる。</p>
</div>
<h3 id="design-style-guide">スタイルガイド</h3>
<div class="block-article-body">
<p>スタイルガイドの作成を行う。ワイヤーフレームに特に指示がなかった場合でも、各見出しレベルのデザイン（h1～h6）、リスト（ul, ol, dl）、表組み（table）、引用（blockquote）など、頻繁に使用される HTML 要素のデザインはスタイルガイドとして用意する。</p>
<p>また、各要素が配置された際の他要素とのマージンなどもスタイルガイド内に明記する。この際、例えば同じレベルの見出しにもかかわらず、配置される場所によってマージンが異なるなど、1つの要素に複数のスタイルが混在するような事態は避けること。</p>
<p>加えて、デザイン内で使用している基本カラーの一覧、および使用フォントの一覧もスタイルガイド内に記載すること。</p>
</div>
<h3 id="design-stock-photo">画像素材のライセンス</h3>
<div class="block-article-body">
<p>画像の著作権には十分配慮し、著作権、モデルリリース等の権利関係がクリアされていない、あるいは明確にされていない画像素材の使用は一切禁止。また、画像の使用にあたり、提供元サイトへのリンクが必須の素材 （所謂リンクツール）、およびサービスの利用も禁止とする。</p>
<p>素材として使用する画像のライセンスは、原則として「ロイヤリティフリー」のものとする。ただし、クライアントの許可を得た上で、「ライツマネージドライセンス」 の画像素材を購入することは問題ない。その際の契約は素材提供業者とクライアント間で行い、当社が代理で契約することはしない。</p>
</div>
<h3 id="design-svg">SVG</h3>
<div class="block-article-body">
<p>アイコン、簡単な図版などに関しては、SVG の使用を推奨する。SVG での書き出しは実装担当者が行う。実際のデザイン上での表示サイズなどはデザインデータ内で明確に指定すること。</p>
</div>
<h3 id="design-text">長いテキストの可読性など</h3>
<div class="block-article-body">
<h4>行間や行長</h4>
<p>Web ページ内に表示するテキストの行間や各段落の間隔などは下記を基準とする。</p>
<ul>
<li>行の間隔をフォントサイズの少なくとも 1.5 倍に設定する（例： <code>line-height: 1.5;</code>）</li>
<li>段落ごとの間隔をフォントサイズの少なくとも 2 倍に設定する（例： <code>* + * {margin-top: 2rem;}</code>）</li>
<li>文字の間隔をフォントサイズの少なくとも 0.12 倍に設定する (原則として <code>letter-spacing: normal</code> を推奨)</li>
<li>単語の間隔をフォントサイズの少なくとも 0.16 倍に設定する (日本語の場合はあまり関係しないが、原則として <code>word-spacing: normal;</code> を推奨)</li>
</ul>
<p>なお、1行あたりの文字数 （行長） は、最長で 30 ～ 40 文字程度になるよう調整することが読みやすさの点から望ましい。</p>
<p>上記はデザインの要件や文字サイズ等によって変動、もしくは Web ページを閲覧する環境に依存するため、あくまで基準とするが、1行あたりの文字数が極端に多すぎる場合、逆に少なすぎて改行が多すぎる場合などは可読性を低下させるため注意が必要。</p>
<h4>デバイスフォントの利用</h4>
<p>画像処理が適当である箇所を除いては、なるべくデバイスフォントを使用する前提でデザインすること。また、デザインデータ内では、画像処理すべきテキストとそうでないものが実装担当者にわかるよう、指示レイヤーに記述する。</p>
<p>Web サイトのパフォーマンス、メンテナンス性や CMS の利用も考慮し、バナーなど画像化が必然な場合を除き、テキストの画像化は原則として禁止する。</p>
</div>
<h3 id="design-favicon">Favicon</h3>
<div class="block-article-body">
<p>新規構築の Web サイトに関して、デザインには Favicon のデータも含めること。既存のデータがある場合はそれを使用する。サイズは最低限、下記を実装担当者が生成する前提でデザインを用意すること。基本的にはすべて同じデザインとするため、最小サイズでも認識しやすいようにデザインする。</p>
<ul>
<li>favicon.ico （16×16, 32×32, 48×48）</li>
<li>favicon.png （64×64）</li>
<li>apple-touch-icon.png （152×152）</li>
</ul>
<p>favicon.png は 64×64 の画像を作成せず apple-touch-icon.png （152px×152px）のファイル名だけ変更して同じ画像を使用してもよい。</p>
<p>実装担当者は上記サイズの画像をデザイナーのデータを基に生成する。例えばビルドツールを使用する場合、下記などがある。</p>
<ul>
<li><a href="https://github.com/gleero/grunt-favicons">gleero/grunt-favicons</a></li>
</ul>
</div>
</div>
</section>
</div>
<div class="block-section">
<section>
<h2 class="module-block-header" id="section-smartphone">スマートフォン関連</h2>
<div class="block-section-body">
<h3 id="smartphone-basic">基本</h3>
<div class="block-article-body">
<p>明確にスマートフォン対応が要件に含まれていない案件においても、スマートフォンやタブレットによる操作を想定したデザインや実装が求められる。特に後述するタッチデバイスの特性に関しては十分配慮すること。</p>
<p>画面サイズが小さいデバイスでは、モーダルウィンドウ形式の UI は操作性を著しく低下させる可能性があるため避ける。あるいは画面サイズが小さい場合は無効にするなどの配慮が必要。</p>
</div>
<h3 id="smartphone-touch-device">タッチデバイス</h3>
<div class="block-article-body">
<p>タッチ操作を考慮したデザインや実装を行うこと。マウスオーバーに依存した UI は避ける他、タッチ操作により表示非表示を切り替える所謂アコーディオン形式の UI は、数が多くなると操作が煩わしくなるため、はじめからすべて開いた状態にするなど配慮する。</p>
<p>画面の縦サイズが長くなることよりもタッチ操作が多くなりすぎないことを重視すること。</p>
<p>また、タップ可能な要素（ボタンやリンク）には、最低でも 44px × 44px 以上のサイズを持たせること。もし視覚的にそのサイズを持たせることが難しい場合はタップ可能領域を広げるなどして対応する。また、タップ可能な要素同士の間には十分な余白をもたせること（ただし十分にサイズが大きいタップ可能要素同士であれば問題はない）。</p>
<p>タップ可能な要素は視覚的にわかりやすいよう配慮する。</p>
</div>
<h3 id="smartphone-breakpoint">ブレイクポイント</h3>
<div class="block-article-body">
<p>要件説明時に特別な指定がないレスポンシブ Web デザイン対応案件では、ブレイクポイントを 1つ、768px に設定 （初期 iPad / 縦表示を基準） することを基準とする。スマートフォンの最小画面サイズは横幅 320px とし、768px までの間は横サイズの可変で対応する。</p>
<p>ディスプレイの横サイズ 768px 以上のデバイスに関しては PC 向けレイアウトを表示する。</p>
<p>ただし、上記はプロジェクトの要件によって変動する場合がある。</p>
</div>
<h3 id="smartphone-retina">高精細ディスプレイ対応</h3>
<div class="block-article-body">
<p>所謂 Retina 対応。</p>
<p>前提として、スマートフォン向けページのデザインに際しては、レイアウトの基準は、最小横幅を 320px での表示とし、そのサイズで文字サイズやレイアウトが最適化されていること。</p>
<p><a href="#smartphone-breakpoint">ブレイクポイント</a> のセクションで指定されているとおり、複数のブレイクポイントを指定しない案件におけるスマートフォン向けデザインの最大サイズは横幅 768px での表示となるため、320px ～ 768px までの間でデザインの整合性がとれるように配慮する事（この間の画面サイズによってレイアウトが変わるような指定は禁止。要素のサイズ可変で対応する）。</p>
<p>よって、Retina 対応が必要なスマートフォンサイトのデザインデータの作成は、ブレイクポイントとなる 768px の 2 倍の横サイズ（1,536px）で行うこととなる。その際、アイコンフォントや CSS を利用し、極力画像の使用を避けるデザインを心がけることで実装時の負担を低減する。また、Web サイトの表示速度面も配慮すること。</p>
<p>PC 向け Web ページに関しては、Retina 対応は不要とする。対応する場合は画像のファイルサイズ増加に十分注意すること。</p>
</div>
</div>
</section>
</div>
<div class="block-section">
<section>
<h2 class="module-block-header" id="section-coding">コーディング全般</h2>
<div class="block-section-body">
<h3 id="coding-basic">基本</h3>
<div class="block-article-body">
<p>納品は、クライアントが Git および GitHub の使用、操作に慣れている場合は、プロジェクトで使用しているリポジトリに、クライアント担当者を招待することで引き継ぎを行う。そのまま運用・更新を当該リポジトリで行う場合は、別途ブランチの作成ルール、コミットやプルリクエストのルールなどを事前にクライアントとの間で決めておくこと。</p>
<p>納品後に希望される場合は、リポジトリの移管も可能。その場合は移管先リポジトリをクライアントに用意して頂いた上で、手順に基づいて移管する。</p>
<p>上記以外で、クライアントが Git および GitHub を使用できない事情がある場合は、HTML、CSS、JavaScript 等ファイル、及び画像を含む、Web サイトを構成するリソース一式を、クライアントサーバにアップロードした状態で納品とする。</p>
<p>Git 管理外にある、例えば外部 CDN から直接読み込まれた JavaScript ライブラリ や Movable Type 等、CMS、および使用プラグインに関してはその情報を 1つのドキュメントにまとめてディレクターに提出すること。</p>
<p>また、クライアントサーバへのアップロードにて納品する場合、Sass ファイルや、プリプロセスされた中間制作物一式 （<a href="#css-halfway">中間制作物のセクション</a> を参照） は、特に要望がない限りはクライアントへは納品しない。元のファイル群が Git 管理されていることをクライアントに説明し、納品物への直接の編集は、差分や修正履歴の把握が難しくなることを前提として共有すること。</p>
</div>
<h3 id="coding-git">バージョン管理</h3>
<div class="block-article-body">
<p>バージョン管理には Git、および GitHub を使用する。新規リポジトリの作成に当たっては別途定める社内ルールに基づいてディレクターが申請を行うこと。プロジェクトに使用されるリポジトリはすべてプライベートリポジトリとし、会社契約以外の個人リポジトリをプロジェクトに使用することなどは一切禁止する。</p>
<p>ただし、クライアントからの指定で、クライアントが管理するリポジトリでの作業を行う場合などは、クライアントからの指示、要望に従って対応すること。</p>
<p>なお、デザインデータに関しては、GitHub にはアップロードしないこと。</p>
</div>
<h3 id="coding-server-path">ディレクトリ構成</h3>
<div class="block-article-body">
<p>既存の Web サイトを踏襲する場合やクライアントからの指定がある場合等を除き、基本的なディレクトリ構成は下記の通りとする。</p>
<ul>
<li>htdocs
<ul>
<li>index.html</li>
<li>css
<ul>
<li>style.css</li>
</ul></li>
<li>img
<ul>
<li>share
<ul>
<li>logo.png</li>
</ul></li>
<li>service(example)
<ul>
<li>image.png</li>
</ul></li>
</ul></li>
<li>inc
<ul>
<li>header.inc</li>
</ul></li>
<li>js
<ul>
<li>function.js</li>
</ul></li>
</ul></li>
</ul>
<p>スタイルシートは css ディレクトリへ、同様に、画像、インクルード用ファイル、JavaScript ファイルをそれぞれのディレクトリに格納する。画像は全ページ共通で使用するものを share ディレクトリへ、その他は使用するページのディレクトリ構成に合わせて格納する。</p>
</div>
<h3 id="coding-file-name">ファイル名の基本ルール</h3>
<div class="block-article-body">
<p>画像などのファイル名は下記の基本ルールに則って付ける。</p>
<ul>
<li>区切り文字はハイフン （-） を使用する。</li>
<li>大文字小文字を混ぜず、すべて小文字で付ける。</li>
<li>同じ種別のファイルは頭に同じ接頭辞を付ける。例えば、バナー関連なら <code>bnr-</code> など。</li>
<li>背景画像は頭に <code>bg-</code> という接頭辞を付ける。</li>
<li>例えば同じ内容の画像でサイズが異なる場合はサイズを入れたり （例： <code>example-200x50.png</code>）、デバイスピクセル比を入れたりしてわかりやすくする （例： <code>example-x2.png</code>）。</li>
<li>ある class 名に対応する画像は、class 名と同じファイル名を付けるなどわかりやすくするとよい （例： <code>bg-module-section-header.png</code>）。</li>
</ul>
<p><a href="#coding-server-path">ディレクトリ構成のルール</a>とあわせて、第三者が見てもわかりやすいファイル名を心がけること。</p>
</div>
<h3 id="coding-browser-version">動作検証ブラウザ</h3>
<div class="block-article-body">
<p>当社が標準で保証する動作環境ブラウザは下記の通りとする。このセクションは 6ヶ月ごとに見直される。</p>
<h4>パソコン</h4>
<ul>
<li>Microsoft Edge（Chromium 版）</li>
<li>Google Chrome 最新版</li>
<li>Safari 最新版</li>
<li>Mozilla Firefox 最新版</li>
</ul>
<p>Internet Explorer 11 （IE11） への対応は原則として行わない。クライアントの要望により行う場合は別途 IE11 対応費用を請求すること。</p>
<h4>スマートフォン</h4>
<p>スマートフォンOSに関しては、原則としてプロジェクト開始時点における最新リリースから2バージョン前までを動作確認対象とする。</p>
<ul>
<li>iOS Safari 14.x 以降 （iOS 14.x 以降）</li>
<li>Android 11.x 以降 標準ブラウザ</li>
<li>Android 11.x 以降 Chrome</li>
</ul>
<h4>その他</h4>
<p>ヘルプページ等に対応ブラウザ（推奨環境）を記載する場合は、上記動作検証ブラウザを踏まえ、下記の記述を基本とする。</p>
<div class="module-text-example">
<p>JavaScript、スタイルシート、画像表示が有効になっている下記のブラウザソフト</p>
<ul>
<li>Microsoft Edge（Chromium 版）</li>
<li>Google Chrome 最新版</li>
<li>Safari 最新版</li>
<li>Mozilla Firefox 最新版</li>
</ul>
</div>
<h4>プログレッシブエンハンスメント</h4>
<p>上記、動作検証ブラウザに含まれない旧式ブラウザに関しても、最低限必要な操作、情報の取得ができるよう、スタイルシートを無効にした場合の構造には配慮すること。例えばある CSS プロパティが解釈されなかったときに、重要な情報が表示されない、といったことが起こらないように最低限の配慮は必要。一方で多少のレイアウト崩れや装飾目的の画像の表示がされないといった問題に関しては気にする必要はない。旧式ブラウザとは主に IE11 や Android 4.1.x や Android 4.2.x 系の標準ブラウザを指す。</p>
<p><a href="#html-accessibility">HTML コーディング -> アクセシビリティのセクション</a> や、<a href="#javascript-basic">JavaScruipt -> 基本・バリデーションのセクション</a> 等もあわせて参照のこと。</p>
</div>
<h3 id="coding-charset">文字コード</h3>
<div class="block-article-body">
<p>Web サイトの文字コードは、特別な指定がない限り UTF-8 (no BOM) を使用すること。HTML 文書においては、<code><meta charset="utf-8" /></code> を head 要素内の可能な限り上部 （基本的には最初の子要素として） に記述すること。</p>
</div>
<h3 id="coding-indent">インデントルール</h3>
<div class="block-article-body">
<p>インデントを行う場合、タブ文字は使用しないこと。エディタの設定等で <strong>1タブ = 2半角スペース</strong> に設定し、1階層の字下げは 2半角スペースを基準とする。HTML のインデントは任意。CSS は宣言ブロック部分に必ずインデントを入れること。</p>
<pre>
<!-- 推奨 -->
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</pre>
<pre>
/* 推奨 */
.example {
color: red;
}
</pre>
<pre class="badcode">
/* 非推奨 */
.example {color: red;}
.example{
color:blue;
}
</pre>
<p>CSS においては、@media 規則内に記述した規則集合を、すべて 1階層インデントすること。</p>
<pre>
/* 推奨 */
@media (min-width: 1200px) {
.block-container {
max-width: 970px;
}
}
</pre>
<p>ただし、プリプロセッサやビルドツールを使用する場合においては、最終的な納品物からインデントや改行が削除されていてもよい。元のコーディングファイル、あるいは中間制作物はこのフォーマットに従うこと。</p>
</div>
<h3 id="coding-letter">大文字小文字</h3>
<div class="block-article-body">
<p>HTML の要素名、属性名、および CSS 内のカラーコード等はすべて小文字で統一すること。また、画像をはじめとしたファイル名などでも大文字小文字を混在させたりしないこと。</p>
<pre class="badcode">
<!-- 非推奨 -->
<A HREF="/sample/"><IMG SRC="sampleImage.png" ALT="Sample" /></A>
</pre>
<pre>
<!-- 推奨 -->
<a href="/sample/"><img src="sample-image.png" alt="Sample" /></a>
</pre>
<pre class="badcode">
/* 非推奨 */
.example {
color: #E5E5E5;
}
</pre>
<pre>
/* 推奨 */
.example {
color: #e5e5e5;
}
</pre>
</div>
<h3 id="coding-comment">コメント</h3>
<div class="block-article-body">
<p>HTML、CSS、JavaScript 共にわかりやすくコメントを付けること。ただし、プリプロセッサやビルドツールを使用する場合においては、最終的な納品物にコメントが含まれなくてもよい。元のコーディングファイル、あるいは中間制作物にコメントが残るようにすること。</p>
<p>HTML において、要素の閉じタグを認識するためにコメントを入れる場合は、下記のように「//」に続けて該当する要素の class 名、id 名を記述するルールに従う。</p>
<pre>
<div class="example">
<p>...</p>
<!--//.example--></div>
</pre>
<pre>
<div id="example">
<p>...</p>
<!--//#example--></div>
</pre>
<p>また、HTML 文書内で不要になった要素ブロックや、CSS ファイル内の不要なスタイル宣言等を、一時的な場合を除いてコメントアウトで長い期間運用することは推奨しない。</p>
</div>
<h3 id="coding-viewport">viewport</h3>
<div class="block-article-body">
<p>viewport に関しては、原則として下記の記述を標準とする。</p>
<pre>
<!-- 推奨 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</pre>
<p>ユーザーによる拡大縮小ができなくなるため、下記の記述は推奨されない。</p>
<pre class="badcode">
<!-- 非推奨 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
</pre>
<h4>補足</h4>
<p>なお、ページ幅が固定されている Web ページの場合、viewport meta を記述しない、もしくは</p>
<pre>
<meta name="viewport" content="width=640px" />
</pre>
<p>などと数値を指定して記述する。</p>
<p>一方で画面サイズが固定されていない Web ページの場合（リキッドレイアウトやレスポンシブ Web デザイン）、本来は下記のように initial-scale のみの記述で問題ないが、Windows Phone の IE など、一部の initial-scale に対応しないブラウザに配慮して、上記推奨コードの通り、両方の指定を行う。</p>
<pre>
<meta name="viewport" content="initial-scale=1.0" />
</pre>
</div>
<h3 id="coding-scheme">スキームの記述</h3>
<div class="block-article-body">
<p>外部 CDN からの JavaScript ライブラリ読み込み等を行う場合、URI のスキーム（http: / https:）はすべて <code>https://</code> から記述すること。</p>
<p>ただし、読み込むファイルが HTTPS で提供されていない等、状況によってはこの限りではないが、原則として HTTPS で提供されない第三者サーバからのライブラリの読み込みは禁止する。また配信先ドメイン所有者の信頼性については事前に確認すること。</p>
<pre class="badcode">
<!-- 非推奨 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</pre>
<pre class="badcode">
<!-- 非推奨 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</pre>
<pre>
<!-- 推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</pre>
<pre>
<!-- 推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
</pre>
<pre class="badcode">
/* 非推奨 */
@font-face {
url(http://www.example.com/fonts/example) format('woff');
}
</pre>
<pre class="badcode">
/* 非推奨 */
@font-face {
url(//www.example.com/fonts/example) format('woff');
}
</pre>
<pre>
/* 推奨 */
@font-face {
url(https://www.google.com/fonts/example) format('woff');
}
</pre>
</div>
<h3 id="coding-ｌibrary">ライブラリ・フレームワーク</h3>
<div class="block-article-body">
<p>CSS / JavaScript ライブラリやフレームワークの利用はプロジェクトの要件に応じて選択可能。ただし、使用するライブラリやフレームワークに関してはメンテナンスが継続されていること、バグフィックスや脆弱性への対応等が、適切に行われていることを重視して選択すること。また、各ライブラリ、フレームワークの利用規約、ライセンスは必ず確認し、不明な点がある場合はディレクターに相談すること。</p>
<p>OSS については Fork した上で、クライアントの要望に合わせて利用することも可能だが、継続的なメンテナンスが可能、かつ会社としてメリットがある場合のみとする。</p>
<p>また、使用したライブラリ・フレームワークは一覧できるように別途ドキュメントに記載すること。</p>
</div>
</div>
</section>
</div>
<div class="block-section">
<section>
<h2 class="module-block-header" id="section-html">HTMLコーディング</h2>
<div class="block-section-body">
<h3 id="html-validation">基本・バリデーション</h3>
<div class="block-article-body">
<h4>基本的な考え方</h4>
<p>HTML はメンテナンス性を考慮すること。各ブロックのモジュール化を意識し、CSS の記述と合わせて、あるブロックを他のページにそのまま移動したり、同一ブロック内で要素が多少変更されたとしても（ul 要素 → ol 要素や段落の追加など）、レイアウトや見た目が変化しないように考慮し、モジュールの使い回しを容易にすること。</p>
<p>HTML Standard で追加された新要素は適切に使用すること。ただし、旧ブラウザに配慮し、HTML Standard 要素をセレクタとしては原則として使用しないこと。また、input 要素の type 属性値などについても HTML Standard から追加された属性値を用途に応じて適切に使い分けること（<code>type="mail"</code>、<code>type="number"</code>、<code>type="tel"</code>、<code>type="search"</code> など）。</p>
<p>id 属性は適切に使用すること。セレクタとしての利用も特に制限しないが、多用しすぎてメンテナンス性や再利用性が妨げられてはならない。</p>
<h4>バリデーション</h4>
<p>各要素は、HTML Standard のコンテンツモデルや使用できる文脈に基づき適切に記述すること。またアウトラインが適切かについて必ず確認すること。</p>
<p>また、納品前の HTML ファイルは、必ず <a href="https://validator.w3.org/nu/">The W3C Markup Validation Service</a> によるチェックを行うこと。特に HTML タグの閉じ忘れといったミスは避ける。なお、バリデーションはビルドツール等によって行っても構わない。</p>
</div>
<h3 id="html-accessibility">アクセシビリティ</h3>
<div class="block-article-body">
<p>JIS X 8341-3:2016 の、<strong>適合レベル A</strong> に準拠することを社内基準とする。ただし、Web サイトの特性や要件によっては、適合レベル A 対象となる全項目にわたる準拠を必須とするものではなく、また逆に 適合レベル AA、適合レベル AAA 項目を無視してよいということではない。JIS X 8341-3:2016 の全項目に関して適切な知識を持って制作にあたる。</p>
<p>最低限、下記の事柄についてはクリアすること。</p>
<ul>
<li>各ページにはページの内容を推測しやすい適切なタイトルを必ず付けること。ページ分割等を行う場合も、（1/2ページ）などとページ数表記を入れるなどして、ページタイトルは Web サイト内で重複しないようにすること</li>
<li>画像には適切な代替テキストを付与する。代替テキストは、画像の内容を具体的に示すものとする（下記サンプル 1）</li>
<li>文字間隔の調整を空白文字を用いて行ってはならない</li>
<li>英単語をすべて大文字で記述することは避けること。<code>text-transform: uppercase;</code> などを適切に使用すること。</li>
<li>略称にはなるべく正式名称を abbr 要素を用いて付与する （下記サンプル 2）。</li>
<li>背景色と文字色には適切なコントラスト比を持たせる。</li>
<li>ブラウザによる文字サイズの変更が可能なように実装すること。また、10px 以下のサイズの文字は重要でない注釈等を除いて原則として使用しないことが望ましい。</li>
<li>文字サイズ変更ボタンを Web ページ側で独自に提供しないこと（ブラウザの UI に任せる）。</li>
<li>JavaScript が無効な環境を常に配慮すること。アコーディオンメニューなど、JavaScript によって開閉するような UI については、JavaScript が無効だった場合には開いた状態になるなど、重要な操作が JavaScript の無効によって不可能になるような実装は行わない。</li>
<li>リンクアンカーとなるテキストは適切に選択すること。アンカーテキストに制約がある場合は、title 属性を併用すること （下記サンプル 3）。</li>
<li>リンク領域、ボタンのサイズ等は適切なサイズを考慮すること。また、各リンクのマージンは適切にとり、誤クリックを誘発するような実装は行わないこと。</li>
<li>PDF ファイルなど、HTML 以外のフォーマットへのリンクを提供する場合は、そのリンク先のフォーマットやファイルサイズがわかるようにしておくことが望ましい。</li>
<li>フォームコントロールは、label 要素を適切に用いてラベルとの関連づけを行うこと。</li>
<li>キーボードによる操作を考慮した実装を行うこと。</li>
</ul>
<pre>
<!-- サンプル 1 -->
<img
src="photo.jpg"
alt="熱海に行ったときに撮影した写真。海をバックに白壁の民家とペットの黒猫が写っています。"
/>
</pre>
<pre>
<!-- サンプル 2 -->
<p>
<abbr title="World Wide Web Consortium">W3C</abbr> は World Wide Web で使用される各種技術の標準化を推進する為に設立された標準化団体です。
</p>
</pre>
<pre class="badcode">
<!-- サンプル 3 非推奨 -->
資料のダウンロードは<a href="/dl/">こちら</a>から
</pre>
<pre>
<!-- サンプル 3 推奨 -->
<a href="/dl/">資料のダウンロードはこちらから</a>
</pre>
<p>また、ある要素 （例えばナビゲーションなど） の位置固定表示 （e.g. <code>position: fixed;</code>） を行う場合は、画面サイズが小さいときなどに画面外に要素がはみ出して閲覧できなくなるなどの可能性を十分に配慮する。</p>
</div>
<h3 id="html-document-type-definition">文書型宣言</h3>
<div class="block-article-body">
<p>新規に作成する HTML 文書は、特別な指定がある場合を除いて HTML Standard を使用すること。文書型宣言は <code><!DOCTYPE html></code> と記述。大文字小文字も左記の通りとする。</p>
<p>MIME Type は <code>text/html</code> を指定すること。特別な指定がある場合を除いて、XHTML （<code>application/xhtml+xml</code>） は使用しないこと。</p>
<p>HTML は記述統一の観点から下記のルールに則って記述すること。</p>
<ul>
<li>閉じタグは省略しないこと</li>
<li>空要素は必ず閉じること。<code class="badcode"><br></code> → <code><br /></code></li>
<li>属性値は必ず <code>" "</code> で囲むこと</li>
<li>論理属性は必ず 属性名="属性値" という記述にすること。<code class="badcode"><input type="check" checked /></code> → <code><input type="check" checked="checked" /></code></li>
<li>URL内やテキストノード内の & は <code>&amp;</code> と文字参照で記述すること</li>
</ul>
<p>ただし、静的サイトジェネレーターなど、フレームワークを使用した場合に空要素が閉じられなかったり、論理属性が属性名のみになるなど、フレームワーク側のデフォルト設定、あるいは仕様により避けられない場合は問題ない。一方でページによって記述方法にばらつきが出るようなことはないように注意すること。</p>
</div>
<h3 id="html-tag">要素や終了タグの省略</h3>
<div class="block-article-body">
<p>HTML における省略可能な要素、あるいは終了タグの省略は原則として行わないこと。</p>
<pre class="badcode">
<!-- 非推奨 -->
<title>example page</title>
<article>
<h1>Example 1
<p>This is example page.
</pre>
<pre>
<!-- 推奨 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>example page</title>
</head>
<body>
<article>
<h1>Example 1</h1>
<p>This is example page.</p>
</article>
</body>
</html>
</pre>
<p>本セクションにおける 「省略可能な要素」 とは、ある要素のコンテンツモデル上は必須だが、条件を満たすことで記述を省略することができるとされている要素 （html 要素、head 要素、body 要素） がその対象となる （詳しくは下記参考リンクを参照）。記述が任意の要素、例えば table 要素内における thead 要素、tbody 要素などはこの限りではない。</p>
<p>なお、要素に関わらず、終了タグの省略は禁止する。</p>
<h4>参考リンク （省略可能な要素）</h4>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/syntax.html#optional-tags">13.1.2.4 Optional tags - HTML Standard</a></li>
</ul>
</div>
<h3 id="html-semantics">セマンティクス</h3>
<div class="block-article-body">
<p>要素の意味と異なる動作を与えたりしないこと。例えば div 要素や p 要素をクリックすることでリンクとして機能させたりといったことは行わない。リンクを設定したい場合は a 要素を使用すること。</p>
<pre class="badcode">
<!-- 非推奨 -->
<div onclick="allEntries();">すべての記事一覧へ</div>
</pre>
<pre>
<!-- 推奨 -->
<a href="/all/">すべての記事一覧へ</a>
</pre>
<p>また、class 名や id 名を要素に付与する際も命名規則にはセマンティクスを意識すること。</p>
<pre class="badcode">
<!-- 非推奨 -->
<span class="red">注意してください</span>
</pre>
<pre>
<!-- 推奨 -->
<span class="elm-coution">注意してください</span>
</pre>
<p>class 名や id 名の命名規則に関して詳しくは <a href="#css-selector-name">セレクタの命名規則セクション</a> を参照。</p>
</div>
<h3 id="html-include">CSS や JavaScript ファイルの読み込み</h3>
<div class="block-article-body">
<p>CSS を外部ファイルとして読み込む場合、パフォーマンスを考慮して 1ファイルにまとめること。また、link 要素に対する media 属性の使用は原則として行わず、CSS ファイル内に @media規則を用いて記述すること。また、原則として CSS ファイル内での @import 規則の使用、および HTML 文書内でのインライン・スタイルの記述は禁止する。</p>
<p>JacaScript の読み込みは、script 要素を body 要素の終了タグ直前に記述する。また、可能な場合は async 属性や defer 属性を付与してレンダリングブロックを避ける。なお、「Google タグマネージャ」が使用できる場合は、導入することが望ましい。</p>
<pre class="badcode">
<!-- 非推奨 -->
<link rel="stylesheet" href="base.css" media="screen" />
<link rel="stylesheet" href="grid.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
</pre>
<pre>
<!-- 推奨 -->
<link rel="stylesheet" href="style.css" />
</pre>
<pre class="badcode">
<!-- 非推奨 -->
<head>
<script src="plugin.js"></script>
<script src="function.js"></script>
</head>
</pre>
<pre>
<!-- 推奨 -->
<script src="plugin.js" async="async" defer="defer"></script>
<script src="function.js" async="async" defer="defer"></script>
</body>
</pre>
<p>ただし、async 属性、defer 属性はスクリプトの依存関係等によって正常に動作しなくなる場合があるため、スクリプトの動作を優先してよい。</p>
<p><a href="#section-performance">パフォーマンスのセクション</a> もあわせて参照のこと。</p>
</div>
<h3 id="html-type-attribute">type 属性</h3>
<div class="block-article-body">
<p>link 要素による CSS の読み込み時や、script 要素に対して type 属性は付与せず省略する。</p>
<pre class="badcode">
<!-- 非推奨 -->
<link rel="stylesheet" href="style.css" type="text/css" />
</pre>
<pre>
<!-- 推奨 -->
<link rel="stylesheet" href="style.css" />
</pre>
<pre class="badcode">
<!-- 非推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
type="text/javascript"></script>
</pre>
<pre><!-- 推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</pre>
</div>
<h3 id="html-structured-data">構造化データ</h3>
<div class="block-article-body">
<p>HTML 文書に対する構造化データの付与は、Microdata、もしくは RDFa Lite を用い、語彙は <a href="https://schema.org/">schema.org</a> を原則として使用すること。ただし、構造化データの付与自体は必須ではない。</p>
<p>構造化データのテストツールとしては、Google の <a href="https://developers.google.com/webmasters/structured-data/testing-tool/">構造化データテストツール</a> を推奨する。</p>
</div>
<h3 id="html-ogp">メタデータや OGP</h3>
<div class="block-article-body">
<h4>メタデータ</h4>
<p><code><meta name="description" /></code> に関しては、主要なページでは設定しておく事。その際、重複が発生しないように注意。主要でないページで description が重複するくらいであれば最初から記述しない事。</p>
<p><code><meta name="keywords" /></code> に関しては記述不要。クライアントから別予算をもって求められない限り原則として対応しない（IE11 対応と同様の扱いとする）。</p>
<h4>OGP</h4>