Webãµã€ãã®ç¹åŸŽ
ããã¢ãã¯ã1893å¹Žã«æ¥æ¬åã®çç 逿®å ŽãéèšããäŒç€Ÿã§ãã
çŸåšã§ã¯ãäžçæå€§ã®çç 逿®äŒç€Ÿã§ãããçç ã®åè³ªãšæè¡ã¯äžçäžã§èªããããŠããŸãã
ããã¢ãã¯ãçç ã®é€æ®æè¡ãäžçã«åºããããšã§ãæ¥æ¬ã代衚ããäŒæ¥ã®äžã€ãšãªã£ãŠããŸãã
ãŸããçç ã®åè³ªãšæè¡ã¯äžçäžã§èªããããŠãããããã¢ãã®å
¬åŒãµã€ãã¯é«çŽæã®ãããã¶ã€ã³ãç¹åŸŽã§ãã
ããã¢ãã®Webãµã€ãã§ã¯ãããã¯ã¬ã¹ã»ãã¬ã¹ã¬ããã»ãªã³ã°ã»ãã¢ã¹ã»ã€ã€ãªã³ã°ã»æèšã»ããŒã«è£œåã»ãããŒãã»ã«ãã¹ã»ãã¬ã°ã©ã³ã¹ã»ã¹ã«ãŒãã»ã¹ããŒã«ãªã©ã販売ããŠããŸãã
Webãµã€ãåæ
💻PCç»é¢
1. FVïŒãã¡ãŒã¹ããã¥ãŒïŒ
Headerãšãªã¢
å¹ 100ïŒ
1段ç®ïŒ
ãå·Šå¯ãã
- ãã³ããŒã¬ãŒã¡ãã¥ãŒ
- æ€çŽ¢
- èšèª
ãäžå€®æãã
- ããŽ
ã峿ãã
- ãæ°ã«å ¥ããªã¹ã
- ã«ãŒã
- ãã°ã€ã³ïŒäŒå¡ç»é²
ããŒããžã¥ã¢ã«ïŒ
- ã¹ã©ã€ããŒ
h1ïŒ
ã¹ã©ã€ã2æç®ïœ4æç®ã®å·Šååã®ããããåçŽäžå€®äœçœ®ã«é 眮
buttonïŒ
h1ã®äžã«é 眮

âŒå¹ 1136px以äžã§1段ç®ã®ããã¹ããæãè¿ã衚瀺

âŒå¹ 991px以äžã§ããã¹ããé衚瀺ã«ãªãã¢ã€ã³ã³è¡šç€ºã®ã¿ã«ãªã

2. ã¹ã©ã€ãã·ã§ãŒ
ãããããŒãžã®ã¡ã€ã³ããžã¥ã¢ã«ã®ã¹ã©ã€ã圢åŒã¯äžèšã®ãšããã§ãã
èªååçïŒãªã³
ç¢å°ïŒè¡šç€º
dotsïŒè¡šç€ºãããŠããã¹ã©ã€ãã®äœçœ®ã®dotããŽãŒã«ãã«ã«ã¹ã¿ãã€ãº
è¡šç€ºææ°ïŒ1æ
äžåºŠã®ã¹ã©ã€ãææ°ïŒ1æ
ç»åïŒå š4æ
ã¹ã©ã€ãæ¹åïŒå·ŠåŽã«æŒãåºã
ã«ãŒãïŒãã




3. ããã²ãŒã·ã§ã³ïŒã¡ã¬ããããããŠã³ïŒ
æšªå¹ 100%ã100vh
å·Šãããã¯ïŒç¬¬1éå±€ïŒããã¹ã瞊䞊ã³ïŒ
äžå€®ãããã¯ïŒç¬¬2éå±€ïŒããã¹ã瞊䞊ã³ïŒ
å³ãããã¯ïŒç»å1æ
ãã³ããŒã¬ãŒãã¿ã³ãã¯ãªãã¯ãããšãå³ãããã¯ã®åçã¯ã¢ãã¡ãŒã·ã§ã³ãªãã§è¡šç€ºã
å·Šãããã¯ïŒç¬¬1éå±€ïŒã»äžå€®ãããã¯ïŒç¬¬2éå±€ïŒã¯åãã¿ã€ãã³ã°ã§äžããäžæ¹åã«ã¹ã©ã€ã衚瀺ã

📱SPç»é¢
1. FVïŒãã¡ãŒã¹ããã¥ãŒïŒ
PCç»é¢ã®æšªé·ããŒããžã¥ã¢ã«ã®åçã®å³åŽã«æ ã£ãŠãã人ç©ãSPç»é¢ã§ã¯äžå€®é 眮ã

2. ã¹ã©ã€ã
ãµã€ãºä»¥å€ã¯PCãšåã仿§




3. ããã²ãŒã·ã§ã³
ããã²ãŒã·ã§ã³ã®æšªå¹ ã¯100%衚瀺ã

4. ã¡ã¬ããããããŠã³ã¡ãã¥ãŒ
- 2éå±€ç®ã®ã¡ãã¥ãŒã®æ§é
ããã¹ã瞊䞊ã³

- 3éå±€ç®
ãã®ãŸãŸååããŒãžãžé·ç§»
Webãµã€ãã®èŠä»¶å®çŸ©ã®æšå¯
- ããã¢ãã®ãã©ã³ãã€ã¡ãŒãžã衚çŸããã
- çç ã®é åãååã«äŒããã
- ãžã¥ãšãªãŒã®çš®é¡ãäŸ¡æ Œãè³Œå ¥æ¹æ³ãªã©ã®æ å ±ãããããããäŒããã
- çç ã®æŽå²ã逿®æ¹æ³ããžã¥ãšãªãŒã®éžã³æ¹ãªã©ã®ã³ã³ãã³ããå å®ãããã
- èŠèŽè ã®æ³šæãåŒããåç»ã®æµããã¹ã ãŒãºã«ãããæ åãããã¹ãã匷調ãããªã©ã®å¹æãåŸãã
ããã¢ãã®å ¬åŒãµã€ãã¯ããããã®èŠä»¶ãæºããããã«ãé«çŽæã®ãããã¶ã€ã³ãããããããæ å ±æ§æãå å®ããã³ã³ãã³ããæ åãããã¹ãã®ãã§ãŒãã€ã³ã»ãã§ãŒãã¢ãŠããªã©ã®å¹æçãªæè¡ãæ¡çšããŠããŸãã
Webãµã€ãã®ã¿ãŒã²ããå±€ã®æšå¯
ããã¢ãã®å
¬åŒãµã€ãã®ã¿ãŒã²ããå±€ã¯ã20代ãã40代ã®å¥³æ§ãšç·æ§ã§ãã
ãã®å¹Žéœ¢å±€ã¯çµæžåããããããã¢ãã®é«çŽæã®ããååã«èå³ãæã£ãŠããåŸåããããŸãã
ãŸããããã¢ãã¯çµå©åŒãèšå¿µæ¥ãªã©ã®ç¹å¥ãªæ¥ã«ãžã¥ãšãªãŒãèŽãéã«éžã°ãããã©ã³ãã§ããããããã®å¹Žéœ¢å±€ã®å¥³æ§ãšç·æ§ã¯é²èЧããå¯èœæ§ãé«ããšèšããŸãã
çµå©åŒãèšå¿µæ¥ã®ãã¬ãŒã³ãã«ããããã®ååãªã©ãæ²èŒãããŠãããããããã¢ãã®Webãµã€ãã¯å¥³æ§ãèªåã§ååã賌å
¥ããã ãã§ãªããç·æ§ã女æ§ã«ãã¬ãŒã³ããæ¢ãéã«ãå©çšãããŠããŸãã
ãã£ãŠãããã¢ãã®å
¬åŒãµã€ãã®ã¿ãŒã²ããå±€ã¯ã20代ãã40代ã®å¥³æ§ãšç·æ§ãšèããããŸãã
Webãµã€ãã®ãã¶ã€ã³

1. é è²
ããã¢ãã®å ¬åŒãµã€ãã¯ãçç ã®çŸãããšé«çŽæãååã«äŒããããã«ããã¯ã€ãã»ãã©ãã¯ã»ãŽãŒã«ãã®3è²ã广çã«äœ¿çšããŠããŸãã
ãã¯ã€ãã¯æž
æœæãéææã象城ããè²ã§ãã
ãŸããçœã¯ç©ºéãåºãèŠãã广ããããããWebãµã€ããããèŠããããã广ããããŸãã
ãã©ãã¯ã¯é«çŽæãéåæã象城ããè²ã§ãã
ãã©ãã¯ãã¢ã¯ã»ã³ããšããŠäœ¿çšããããšã§ãé«çŽæãæŒåºããŠããŸãã
ãŸãããã©ãã¯ã¯åŒãç· ã广ããããããWebãµã€ãããããŸãšãŸãã®ãããã®ã«ãã广ããããŸãã
ãŽãŒã«ãã¯è¯ããããé«çŽæã象城ããè²ã§ãã
ãŽãŒã«ããã¢ã¯ã»ã³ããšããŠäœ¿çšããããšã§ãé«çŽæãæŒåºããŠããŸãã
ãŸãããŽãŒã«ãã¯ç®ç«ã€è²ãªã®ã§ãWebãµã€ãã®æ³šç®ãéãã广ããããŸãã
2. Font Family
- Noto Sans JP
- cormorant_garamondregular
Noto Sans JPã¯ãæ¥æ¬èªããµããŒããããªãŒãã³ãœãŒã¹ã®ãã©ã³ããã¡ããªãŒã§ãããèªã¿ãããã¯ãªã¢ãªå°è±¡ãäžããŸãã
ãµã³ã»ãªãïŒã»ãªãã®ãªãïŒã®ç¹åŸŽãæã¡ãã·ã³ãã«ãã€çŸä»£çãªãã¶ã€ã³ã§ãã
cormorant_garamondregularã¯ãé«çŽæãšã¯ã©ã·ã«ã«ãªå°è±¡ãäžããã»ãªããã©ã³ãã§ãã
ãã®ãã©ã³ãã¯ãç¹å®ã®ããã¹ãèŠçŽ ãåŒãç«ãŠããå Žåãè£
食çãªèŠçŽ ã«äœ¿çšããã®ã«é©ããŠããŸãã
ããã¢ãã®å
¬åŒãµã€ãã§ã¯ãspanã¿ã°(éé¡è¡šç€º)ã«ãã®ãã©ã³ãã䜿çšãããŠããŸãã
3. Font Size
- header ããã²ãŒã·ã§ã³
Noto Sans JP, sans-serif
Font Size 14px
- a
Noto Sans JP, sans-serif
Font Size 12px - h1
Noto Sans JP, sans-serif
Font Size 42px - h2
Noto Sans JP, sans-serif
Font Size 28px - p
Noto Sans JP, sans-serif
Font Size 14px - span
cormorant_garamondregular
Font Size 28px
ãã©ã³ããµã€ãºã¯äžè¬çãªWebãã¶ã€ã³ã®æšæºçãªãµã€ãºã§ãã
14pxã¯ããã¹ãã®èªã¿ããããšèŠèªæ§ã®ãã©ã³ã¹ãåããŠããã12pxã¯ããã³ã³ãã¯ããªãµã€ãºã§ãããååã«èªã¿ãããç¯å²ã«ãããŸãã
以äžã®ãã©ã³ããã¡ããªãŒãšãã©ã³ããµã€ãºã®çµã¿åããã¯ãããã¢ãã®å ¬åŒãµã€ãã«ãããŠã¯é©åãªéžæãšèšããŸãã
ããããã®èŠçŽ ã«ãã£ãŠç°ãªã圹å²ãç®çããããé©åãªèŠèªæ§ãå°è±¡ãäžããŠããŸãã
Webãµã€ãã«äœ¿çšãããŠããææ³
1. åç»ïŒ
- æ åã®ãã§ãŒãã€ã³ã»ãã§ãŒãã¢ãŠã
- ããã¹ããããã£ãšåºçŸ
çç ãæ±ãããã¢ãã®ã€ã¡ãŒãžã«åãæµ·ã®æ åãå€ã䜿çšãããŠããŸãã
æ åã«æµããããããã¯ã³ã³ãã¯ãã§ãããŒã¯ãŒããå°è±¡ã«æ®ããããã§ãã
æ åãšããã¹ãã«ãã§ãŒãã€ã³ã»ãã§ãŒãã¢ãŠãã®å¹æãé©çšããããšã«ãããèŠèŽè
ã®æ³šæãåŒããããåç»ã®æµããã¹ã ãŒãºã«ãã广ãåŸãããŸãã






- é åçãªååã®é 眮
åã«Webãµã€ãã«åç»ãåã蟌ãã®ã§ã¯ãªããåç»ã®ãã£ããã£ã®äžã«ååã®äžéšã被ããäºã«ããååã匷調ããããé
åçã«ååã衚çŸããŠããŸãã
ãŸããååã®äžéšã被ããã¬ã€ã¢ãŠãããã³ã¬ãŒã·ã§ã³ã®åœ¹å²ãæãããŠããããããŠãŒã¶ãŒãåç»ãåçããã¢ã¯ã·ã§ã³ã«ãäžåœ¹è²·ã£ãŠãããšèšããŸãã






2. ãããŒãšãã§ã¯ãïŒ
- åå詳现ã®ç»åãšååã®çç»ã亀äºã«å·Šå³ã«èªååç
- æåã¯ãªãã¯ã䜿çšå¯èœ



3. 詊çïŒ
- ããŠã¹ããã©ãã°ããäºã«ããè£ çäœçœ®ã®å€æŽãå¯èœ
- ã¢ãã«ããã®ç»åã ãã§ãªããèªåã®åçã§çç»ã確èªããäºãå¯èœ


4. çŸããå€èгåç
- åååçã ãã§ãªããåºèå€èгåçããžã¥ãšãªãŒã®ããã«çŸããã
- ããã³ããã«ã©ã€ãã£ã³ã°ãããŠãããè¶³ãéã³ãããªãã
- é«çŽæãæŒãè²é£ããšã©ã€ãã£ã³ã°ã

5. ããããïŒ
- çç ããã£ã¢ã©ãæ±ããžã¥ãšãªãŒã·ã§ãããªãã§ã¯ã®Webãã¶ã€ã³
ãã©ã€ãã«ã®ããŒãžã«ã¯ãã»ã¯ã·ã§ã³ã®éã«çç ã®å圢ãšãžã¥ãšãªãŒãååã£ããªããžã§ã¯ããé 眮ãããŠããŸãã
ãã®ããããã«ãããããŒãžãããè¯ããã«æŒåºããäºãã§ããŠããŸãã


