飛脚が駆け込む送信ボタン

飛脚って、昔の郵便配達の人ですよね？それがボタンに？

そう。江戸時代の飛脚をモチーフにしたユニークなボタンだよ。ホバーすると左から飛脚が駆け込んできて、急ブレーキで砂煙が舞い上がる演出が入る。日本文化とWebデザインを組み合わせた面白い例だね。

送信ボタンに飛脚って、確かに「配達」のイメージでぴったりですね！

そのとおり。メールを「届ける」という機能と飛脚のイメージが重なるから、視覚的にも意味的にもつながりがある。藍色と白の配色で和の雰囲気も表現しているよ。

作成した飛脚送信ボタン

ホバー時に左から飛脚が駆け込んで、急ブレーキで砂煙が舞い上がる送信ボタンです。藍色と白の配色で日本的な雰囲気を演出し、メールを「届ける」機能と飛脚のイメージを視覚的に結びつけています。

HTML

<button class="btn" aria-label="メールを送信">
        <div class="btn-default">
            <svg class="mail-icon" viewbox="0 0 24 24">
                <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
            <span class="btn-text">送信</span>
        </div>
        <div class="btn-hikyaku">
            <span class="dust-particle dust-1"></span>
            <span class="dust-particle dust-2"></span>
            <span class="dust-particle dust-3"></span>
            <span class="dust-particle dust-4"></span>
            <span class="dust-particle dust-5"></span>
            <span class="dust-particle dust-6"></span>
            <svg class="hikyaku-icon" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0 C20.67370756 0.08455504 20.67370756 0.08455504 26.9453125 4.265625 C25.90443637 11.30684585 24.77244607 18.3241271 23.5078125 25.328125 C21.7765918 34.94230433 20.35469746 44.59984302 18.9453125 54.265625 C19.9353125 54.41257812 19.9353125 54.41257812 20.9453125 54.5625 C26.43160479 55.39115873 31.9089406 56.25344359 37.37890625 57.18359375 C47.17760158 58.84864132 56.96111313 60.43949511 66.8203125 61.703125 C78.14970952 63.17829091 89.31576531 65.35319097 100.51660156 67.58642578 C106.52926077 68.77748374 112.55028218 69.92501812 118.5703125 71.078125 C120.77086885 71.50111737 122.97139311 71.92427671 125.171875 72.34765625 C126.76302083 72.65364583 128.35416667 72.95963542 129.9453125 73.265625 C129.79908447 74.1220459 129.65285645 74.9784668 129.50219727 75.86083984 C128.95342691 79.08467522 128.40773321 82.30900184 127.86401367 85.53369141 C127.62953859 86.9206139 127.3938924 88.307339 127.15698242 89.69384766 C125.52577182 99.15117185 125.52577182 99.15117185 124.41015625 108.6796875 C124.07886847 112.40964322 123.40515031 115.91076912 122.54296875 119.55029297 C121.27049847 125.33150802 120.33800841 131.18524184 119.34082031 137.01928711 C118.95022883 139.29942514 118.55345387 141.57842771 118.15625 143.85742188 C116.89897089 151.14480974 115.75415467 158.42181949 114.87890625 165.765625 C114.17338937 171.65184918 113.25510392 177.41009424 112.0078125 183.203125 C111.6560753 184.90203867 111.30584047 186.60126401 110.95703125 188.30078125 C110.70058838 189.54625732 110.70058838 189.54625732 110.43896484 190.81689453 C108.65853225 199.64861508 107.15676278 208.5261266 105.9453125 217.453125 C104.98196731 224.48227932 103.52198903 231.34927063 101.9453125 238.265625 C93.28399454 238.68409317 85.05249377 237.09991043 76.5703125 235.578125 C75.00358517 235.30232776 73.4367708 235.02702457 71.86987305 234.75219727 C67.95338431 234.06267832 64.03882239 233.36290329 60.12506104 232.65808105 C58.10495596 232.29436824 56.08447601 231.93273917 54.06396484 231.57128906 C42.29591146 229.45969243 30.57277397 227.21140413 18.8828125 224.703125 C9.46693802 222.6863296 0.02730932 221.12697661 -9.49780273 219.72338867 C-19.7443366 218.20316603 -29.89777757 216.29269407 -40.0546875 214.265625 C-39.38955792 206.56989016 -38.30470608 198.97468594 -37.09375 191.34765625 C-36.90251556 190.13220627 -36.71128113 188.91675629 -36.51425171 187.66447449 C-36.11050728 185.10348831 -35.70534116 182.5427259 -35.29882812 179.98217773 C-34.68441534 176.10793689 -34.07627741 172.23274766 -33.46875 168.35742188 C-31.71689982 157.24589747 -29.94246547 146.168925 -27.640625 135.15649414 C-26.82845288 131.14943993 -26.26370204 127.13139278 -25.7421875 123.078125 C-24.37386241 113.02441435 -22.72949988 103.02179359 -21.0546875 93.015625 C-20.92903412 92.26302399 -20.80338074 91.51042297 -20.67391968 90.73501587 C-19.31995762 82.63475328 -17.93096591 74.54196641 -16.48828125 66.45703125 C-15.24441036 59.47208759 -14.1505514 52.47245186 -13.1171875 45.453125 C-11.55682797 35.07908912 -9.71226407 24.79826704 -7.52246094 14.5390625 C-7.18147916 12.88184837 -6.86513542 11.21950856 -6.56347656 9.5546875 C-6.31549316 8.20503906 -6.31549316 8.20503906 -6.0625 6.828125 C-5.91699707 6.00441406 -5.77149414 5.18070312 -5.62158203 4.33203125 C-4.66274246 0.836933 -3.55629518 0.30924306 0 0 Z " fill="#010101" transform="translate(203.0546875,254.734375)"></path>
                <path d="M0 0 C0.83370117 0.1453418 1.66740234 0.29068359 2.52636719 0.44042969 C23.18597928 4.11994112 42.69166976 11.09870236 61.171875 21.02490234 C63.03010865 22.01605955 64.90282207 22.97352265 66.78125 23.92578125 C75.98106465 28.63649402 84.53170246 34.08473552 93 40 C93.93199219 40.64582031 94.86398437 41.29164063 95.82421875 41.95703125 C110.11747508 52.10545689 123.68561026 63.53148225 136.125 75.875 C136.80175781 76.53113281 137.47851562 77.18726563 138.17578125 77.86328125 C143.77296176 83.41715669 150.36979263 90.22842989 151.4375 98.3125 C151 102 151 102 148.37890625 104.6171875 C127.83091476 120.46763376 78.24770781 108.48837794 54.30322266 105.40039062 C37.14285911 103.14001431 20.13265748 100.27577044 3.20019531 96.67236328 C-0.31267573 95.93430661 -3.83123391 95.22894131 -7.3515625 94.52734375 C-9.88025128 94.01844251 -12.40889786 93.50933154 -14.9375 93 C-16.07356689 92.77513916 -17.20963379 92.55027832 -18.38012695 92.31860352 C-27.2884347 90.49981068 -35.98310023 88.12526548 -44.72213745 85.64105225 C-48.34422492 84.62169868 -51.9789657 83.65043352 -55.61328125 82.67578125 C-85.70724706 74.551155 -116.4762891 65.8693975 -143.9375 50.8125 C-144.65317139 50.420625 -145.36884277 50.02875 -146.10620117 49.625 C-151.90910896 46.31261355 -157.25948231 42.61077653 -161 37 C-161.51804487 33.71904913 -161.24822816 32.3800036 -159.41796875 29.578125 C-156.59046592 26.56334008 -153.61570688 24.87519463 -149.9375 23.125 C-149.23705566 22.78549316 -148.53661133 22.44598633 -147.81494141 22.09619141 C-122.90019657 10.30544341 -95.99779464 4.67262047 -69 0 C-68.14519043 -0.14985352 -67.29038086 -0.29970703 -66.40966797 -0.45410156 C-45.43428891 -3.95388672 -20.89083496 -3.90673155 0 0 Z " fill="#010101" transform="translate(679,223)"></path>
                <path d="M0 0 C11.44614262 -0.27495881 22.61214174 -0.37276813 33.5859375 3.24609375 C34.62363281 3.57480469 35.66132812 3.90351562 36.73046875 4.2421875 C47.61699408 8.1996791 55.36340365 15.09130719 60.46875 25.50390625 C65.5874979 38.06810563 64.06612897 52.03349502 61.5859375 65.05859375 C61.36881104 66.23639404 61.15168457 67.41419434 60.92797852 68.62768555 C56.37036232 92.55165991 50.51930523 116.60277309 42.9609375 139.74609375 C41.07795787 145.55735847 39.2193878 151.35920357 37.5859375 157.24609375 C38.55466797 157.44912109 38.55466797 157.44912109 39.54296875 157.65625 C60.2205329 162.38012581 82.91008543 170.90226281 97.2109375 187.24609375 C99.0949923 191.35675877 99.08743386 193.73262655 98.5859375 198.24609375 C95.14759574 205.18645026 89.28077502 207.94527366 82.1796875 210.4453125 C59.68431245 216.69660991 35.72125947 215.62926875 12.5859375 215.24609375 C11.59529297 215.2320752 10.60464844 215.21805664 9.58398438 215.20361328 C-4.49302657 214.94480546 -22.2375878 213.86574353 -33.0234375 203.734375 C-38.0945423 198.07923847 -38.05739864 191.68756239 -37.890625 184.37890625 C-37.19535857 173.45141681 -33.43104191 162.70963318 -30.4140625 152.24609375 C-30.14223145 151.30008301 -29.87040039 150.35407227 -29.59033203 149.37939453 C-28.60350965 145.95224657 -27.61449439 142.52575474 -26.61914062 139.10107422 C-20.91698807 119.2765905 -15.76720549 98.77202422 -13.4140625 78.24609375 C-30.00541886 81.39366095 -46.56467291 84.62507203 -63.06152344 88.24072266 C-82.08232312 92.39597414 -82.08232312 92.39597414 -88.4140625 92.24609375 C-85.26159215 87.2065813 -82.07412079 82.19868887 -78.734375 77.28125 C-68.23800903 61.81525572 -58.74170376 45.88492552 -50.1015625 29.30859375 C-49.58779053 28.35025635 -49.07401855 27.39191895 -48.54467773 26.40454102 C-46.30807854 22.18398537 -44.28274278 18.15234999 -42.90625 13.5703125 C-41.54083058 9.40462612 -40.15509751 5.76550574 -36.4140625 3.24609375 C-24.86832241 -0.5661012 -12.00456462 0.39972407 0 0 Z " fill="#010101" transform="translate(647.4140625,541.75390625)"></path>
                <path d="M0 0 C1.33691406 1.51196289 1.33691406 1.51196289 2.515625 3.47265625 C2.95825684 4.19952637 3.40088867 4.92639648 3.85693359 5.67529297 C4.54650146 6.85696045 4.54650146 6.85696045 5.25 8.0625 C5.97243896 9.27510498 5.97243896 9.27510498 6.70947266 10.51220703 C11.20320671 18.15200265 15.26635589 25.96381819 19 34 C19.44730469 34.95390625 19.89460937 35.9078125 20.35546875 36.890625 C26.30048071 50.35828965 30.32368856 64.81858824 33.9375 79.0625 C34.14890625 79.88878906 34.3603125 80.71507812 34.578125 81.56640625 C36.57233404 89.70603497 36.57233404 89.70603497 36 93 C33.21753292 95.71809124 29.44582659 97.24942525 26 99 C25.34 99.3407959 24.68 99.6815918 24 100.03271484 C-9.69262377 117.28339925 -57.50060118 130.64491497 -95 119 C-92.42224119 114.33289984 -89.18382714 110.35330127 -85.8125 106.25 C-84.94782104 105.19135742 -84.94782104 105.19135742 -84.06567383 104.11132812 C-79.83612402 98.95706348 -75.51352045 93.90896484 -71 89 C-88.56266569 97.55488013 -105.99524304 106.43367377 -122.03515625 117.63574219 C-124.25077821 119.17412384 -126.48344784 120.68567625 -128.71875 122.1953125 C-148.61553725 134.48787478 -148.61553725 134.48787478 -163.375 151.875 C-169.07823837 161.87402522 -177.30939015 169.31993899 -188.3515625 173.16796875 C-195.43636697 174.78366827 -203.87874778 175.56780504 -210.79296875 172.9375 C-217.38322428 168.7632934 -223.61512496 162.53353049 -226 155 C-227.44412359 143.40140741 -224.1790771 136.0857779 -217.4375 126.9375 C-211.25616003 119.55004491 -203.76161665 114.12105302 -195 110.1875 C-188.68673267 107.2242976 -184.65209269 103.00059679 -179.93359375 98.01953125 C-176.48018241 94.3907736 -172.66513434 91.30049678 -168.74609375 88.1875 C-165.96607708 85.97297747 -163.26683843 83.68108382 -160.5625 81.375 C-153.62410298 75.57802322 -146.37111753 70.21732842 -139.1171875 64.82421875 C-135.07657138 61.81698297 -131.07993903 58.75829499 -127.09887695 55.67285156 C-120.26765327 50.38565574 -113.37819226 45.50418378 -106 41 C-104.53083835 40.06779956 -103.06356083 39.13262641 -101.59765625 38.1953125 C-92.20349192 32.19385393 -82.76396495 26.38545459 -73 21 C-72.13592529 20.51370117 -72.13592529 20.51370117 -71.25439453 20.01757812 C-21.87003934 -7.75350898 -21.87003934 -7.75350898 0 0 Z " fill="#010101" transform="translate(565,389)"></path>
                <path d="M0 0 C0.69351563 0.71671875 1.38703125 1.4334375 2.1015625 2.171875 C11.44003937 11.49069192 22.53807237 18.60980693 34 25 C35.00675781 25.5775 36.01351562 26.155 37.05078125 26.75 C49.29101955 33.37529813 62.23631075 35.56988471 76 36 C74.64255131 38.91616587 73.08255825 41.34662063 71.09375 43.87109375 C70.52003662 44.60344238 69.94632324 45.33579102 69.35522461 46.09033203 C68.74300049 46.86489746 68.13077637 47.63946289 67.5 48.4375 C66.21970898 50.06874119 64.93976267 51.70025298 63.66015625 53.33203125 C63.03254395 54.1307666 62.40493164 54.92950195 61.75830078 55.75244141 C59.45933931 58.6911028 57.19813332 61.65675493 54.9375 64.625 C50.10389451 70.92140716 45.11284063 77.0831 40.08203125 83.22265625 C38.26301612 85.44294911 36.47084288 87.67469778 34.69921875 89.93359375 C22.81042259 105.00169133 8.78212963 120.62838515 -11 124 C-30.21557246 125.3391728 -50.13939453 121.1240145 -69 118 C-70.14891724 117.81087036 -70.14891724 117.81087036 -71.32104492 117.61791992 C-76.50767571 116.76335438 -81.69155069 115.89382818 -86.87316895 115.0093689 C-88.59231886 114.71691209 -90.31195049 114.42726952 -92.03210449 114.14077759 C-101.87969544 112.49479128 -111.45747105 110.56919909 -120.97717285 107.50892639 C-126.97841122 105.67436162 -132.18886199 105.76367487 -137.91015625 108.671875 C-138.58288574 109.00421143 -139.25561523 109.33654785 -139.94873047 109.67895508 C-140.64627441 110.0323999 -141.34381836 110.38584473 -142.0625 110.75 C-149.56808102 114.41275628 -157.04154324 117.42835669 -165 120 C-165.91910156 120.3196875 -166.83820313 120.639375 -167.78515625 120.96875 C-176.96054989 123.8875792 -187.52094384 125.04535863 -196.5 121 C-202.04034449 117.76273694 -206.94441188 113.16676436 -209 107 C-210.42167829 97.58138131 -205.0189654 89.16150086 -199.73046875 81.69921875 C-197.26505922 78.3734182 -194.6543201 75.17596773 -192 72 C-191.50242188 71.4009082 -191.00484375 70.80181641 -190.4921875 70.18457031 C-178.4325317 55.72358858 -165.3972675 41.1324225 -147 35 C-136.39710763 34.18189186 -126.76836513 35.71882569 -116.48522949 38.13369751 C-114.06143757 38.70241424 -111.63375294 39.25059523 -109.20410156 39.79370117 C-105.95603269 40.52049928 -102.70934902 41.25294762 -99.46386719 41.99121094 C-81.4619559 46.07373433 -63.42286588 49.50830409 -45 51 C-44.14905762 51.06936768 -43.29811523 51.13873535 -42.42138672 51.21020508 C-37.78615295 51.45615507 -37.78615295 51.45615507 -33.7578125 49.41015625 C-33.21898437 48.63542969 -32.68015625 47.86070312 -32.125 47.0625 C-31.47144531 46.14597656 -30.81789063 45.22945312 -30.14453125 44.28515625 C-29.43683594 43.20105469 -28.72914063 42.11695313 -28 41 C-27.60087402 40.38882324 -27.20174805 39.77764648 -26.79052734 39.14794922 C-24.99102561 36.38376614 -23.20205816 33.61341441 -21.43383789 30.82910156 C-16.85583955 23.65120367 -11.87906706 16.79000157 -6.84765625 9.92578125 C-4.46870832 6.67489342 -2.20367676 3.37189095 0 0 Z " fill="#010101" transform="translate(423,633)"></path>
                <path d="M0 0 C10.0703135 -0.57605607 20.41180108 0.80393369 30 4 C29.71504112 6.9799423 29.42220718 9.95877433 29.125 12.9375 C29.04636719 13.76830078 28.96773438 14.59910156 28.88671875 15.45507812 C28.39984647 20.26762332 27.64983241 24.88555513 26.53955078 29.59155273 C25.46697835 34.37930254 24.69872843 39.226909 23.875 44.0625 C23.69324219 45.11888672 23.51148438 46.17527344 23.32421875 47.26367188 C22.88086558 49.84212056 22.43950067 52.42089236 22 55 C23.52415527 55.24121582 23.52415527 55.24121582 25.07910156 55.48730469 C58.95118053 60.86012938 58.95118053 60.86012938 70.9375 63.125 C71.69643555 63.25874023 72.45537109 63.39248047 73.23730469 63.53027344 C78.90751662 64.64956748 83.15242351 66.78290822 86.875 71.25 C89.78213157 78.35632161 87.36164457 86.77239424 86.06640625 94.05859375 C85.77031715 95.77418236 85.77031715 95.77418236 85.46824646 97.52442932 C84.83928541 101.16324426 84.20141697 104.80042114 83.5625 108.4375 C82.92854442 112.0712302 82.29653967 115.70528056 81.66746521 119.33985901 C81.27662685 121.59540247 80.88279727 123.85043036 80.48548889 126.10484314 C79.67328838 130.77030144 78.93447906 135.38019572 78.51953125 140.09887695 C78 144 78 144 75.62109375 146.609375 C74.57050781 147.31578125 73.51992188 148.0221875 72.4375 148.75 C71.24268612 149.58945903 70.0500749 150.43205953 68.859375 151.27734375 C68.22837891 151.71546387 67.59738281 152.15358398 66.94726562 152.60498047 C63.57225481 155.02283551 60.39083378 157.6739056 57.1875 160.3125 C55.82970368 161.42091183 54.47162809 162.52898164 53.11328125 163.63671875 C51.74215841 164.75777692 50.37106467 165.87887069 49 167 C46.29335742 169.210414 43.58495601 171.41864961 40.875 173.625 C40.21081055 174.16616455 39.54662109 174.7073291 38.86230469 175.26489258 C34.5954742 178.73182314 30.28048715 182.12928674 25.9375 185.5 C20.26342721 189.91307785 14.81904649 194.5544634 9.41186523 199.28930664 C4.80670263 203.31935252 0.13224108 207.2329651 -4.6484375 211.0546875 C-6.98217745 212.9285318 -6.98217745 212.9285318 -8.9140625 214.8828125 C-11.84333384 217.75858117 -13.87527918 219.37810862 -18.0625 219.5625 C-24.46895911 219.12872933 -30.77154658 217.48844975 -37 216 C-36.38659217 206.8701498 -34.97718291 197.89367222 -33.52587891 188.86865234 C-33.12923135 186.40132098 -32.73796426 183.93318505 -32.34765625 181.46484375 C-30.14185556 167.57938219 -27.7237461 153.73950562 -25.11132812 139.92456055 C-23.28388327 130.2480065 -21.56715203 120.57718329 -20.15966797 110.83081055 C-17.43100603 92.04357897 -14.12742354 73.33292215 -10.69970703 54.66210938 C-9.47485645 47.92696094 -8.43094492 41.18500492 -7.48461914 34.40527344 C-6.75773083 29.29764717 -5.92750604 24.21081862 -5.0625 19.125 C-4.90587891 18.15820312 -4.74925781 17.19140625 -4.58789062 16.1953125 C-3.61170295 10.47041905 -2.22666658 5.36683741 0 0 Z " fill="#010101" transform="translate(355,280)"></path>
                <path d="M0 0 C5.83843683 1.52656376 11.62992071 3.18053777 17.39868164 4.95019531 C51.76959978 15.44884736 86.54305583 22.80695177 121.9375 28.875 C122.78341705 29.02043243 123.62933411 29.16586487 124.50088501 29.31570435 C134.27049839 30.98567371 144.02895768 32.45114487 153.87719727 33.57470703 C157 34 157 34 160 35 C160.2979792 40.68648822 158.19280018 44.27805407 155.5625 49.1875 C155.11237549 50.03521973 154.66225098 50.88293945 154.19848633 51.75634766 C150.54907892 58.41848182 146.52589119 63.74985189 141 69 C140.13375 69.86625 139.2675 70.7325 138.375 71.625 C137.59125 72.40875 136.8075 73.1925 136 74 C135.32517578 74.85271484 135.32517578 74.85271484 134.63671875 75.72265625 C126.86078336 85.42810414 115.65491398 92.81822322 104 97 C102.94167969 97.39058594 101.88335938 97.78117187 100.79296875 98.18359375 C92.46743702 100.8363817 85.59716815 101.00837605 76.9375 100.625 C69.55781621 100.10838871 69.55781621 100.10838871 63.1953125 103.2109375 C61.67025174 105.81594559 60.67599072 108.06546663 60 111 C61.98 111.66 63.96 112.32 66 113 C60.0589747 132.77247484 46.58895647 148.02844451 32 162 C29.38672403 159.38672403 29.11283223 157.26064269 28.1875 153.68359375 C27.8366914 152.36037397 27.48500965 151.03738545 27.13256836 149.71459961 C26.94854462 149.01704559 26.76452087 148.31949158 26.57492065 147.60079956 C20.77198944 125.76564986 13.59926143 103.56417863 0.7734375 84.73046875 C-1 82 -1 82 -1 80 C-0.10796875 79.80664062 0.7840625 79.61328125 1.703125 79.4140625 C2.87359375 79.15367187 4.0440625 78.89328125 5.25 78.625 C6.41015625 78.36976563 7.5703125 78.11453125 8.765625 77.8515625 C11.46052401 77.14203595 13.59525832 76.36903611 16 75 C15.71984519 68.83659421 13.31573748 64.41246937 10.4921875 58.98828125 C7.7918053 53.58044778 6.20265851 48.16518131 5.0625 42.25 C4.2366741 38.23190591 2.6085023 36.17911218 0 33 C-1.71873561 27.38990171 -2.31386997 22.34410257 -2.25 16.5 C-2.25773438 15.79230469 -2.26546875 15.08460938 -2.2734375 14.35546875 C-2.25487843 9.27956304 -1.3855165 4.88229624 0 0 Z " fill="#010101" transform="translate(586,307)"></path>
                <path d="M0 0 C3.89215524 1.22752588 7.6136629 2.66988361 11.34985352 4.30932617 C22.90148393 9.31851419 34.80209726 12.92496456 47 16 C47.89912109 16.22880859 48.79824219 16.45761719 49.72460938 16.69335938 C77.59667243 23.40827449 109.98216408 22.53912416 137.67773438 15.55126953 C140.77212894 14.81670867 143.84410344 14.37923066 147 14 C138.93205379 30.55200425 130.50768889 46.85141518 120 62 C119.401875 62.93328125 118.80375 63.8665625 118.1875 64.828125 C114.26061849 70.94751536 110.0073154 76.66140742 105.4375 82.3125 C104.64243042 83.29911621 104.64243042 83.29911621 103.83129883 84.30566406 C94.22071155 96.02249895 84.23806868 103.96609881 69 107 C44.05502729 109.4316567 16.98362899 100.13038726 -2.671875 84.91796875 C-3.44015625 84.28503906 -4.2084375 83.65210938 -5 83 C-5.99773437 82.18982422 -5.99773437 82.18982422 -7.015625 81.36328125 C-15.28821754 73.93593186 -19.23168871 63.17531229 -20.25 52.33984375 C-21.0532182 33.69012121 -12.4105414 13.73943785 0 0 Z " fill="#010101" transform="translate(442,545)"></path>
                <path d="M0 0 C6.05249762 3.97864369 11.8332531 10.04999496 14.0625 17 C15.64898455 31.77413737 9.90892586 41.66306474 1.0625 53 C-7.07941873 63.09056972 -7.07941873 63.09056972 -11.8984375 65.44921875 C-15.48620218 67.27999327 -17.78024105 69.69238522 -20.375 72.6875 C-20.81392578 73.17927734 -21.25285156 73.67105469 -21.70507812 74.17773438 C-23.62665974 76.33778066 -25.52637934 78.5140988 -27.39379883 80.72119141 C-32.64284036 86.86212687 -38.31528305 92.56389712 -44.0246582 98.27246094 C-45.74136091 99.99134991 -47.44988662 101.7180938 -49.15820312 103.4453125 C-66.12073979 120.4973944 -82.20175169 130.26070963 -106.71018982 130.37342834 C-108.97372644 130.36512658 -111.23662352 130.34016523 -113.5 130.3125 C-115.08235566 130.30383135 -116.66471247 130.2953698 -118.24707031 130.28710938 C-130.21293622 130.18625402 -142.05680297 129.46546043 -153.9375 128 C-154.21585693 128.59224365 -154.49421387 129.1844873 -154.78100586 129.79467773 C-155.85690421 131.84631164 -156.9885543 133.49001356 -158.44140625 135.28515625 C-158.9305249 135.89311035 -159.41964355 136.50106445 -159.92358398 137.12744141 C-160.44380127 137.76601074 -160.96401855 138.40458008 -161.5 139.0625 C-162.30256226 140.05515869 -162.30256226 140.05515869 -163.12133789 141.06787109 C-164.20842766 142.41104243 -165.29720303 143.75285134 -166.38769531 145.09326172 C-167.782302 146.80905854 -169.16989417 148.53018879 -170.5546875 150.25390625 C-174.17516136 154.73378552 -177.81347724 158.96921601 -181.9375 163 C-182.50502004 160.1421312 -183.00479957 157.29332434 -183.4296875 154.41015625 C-183.87950398 151.06096343 -183.87950398 151.06096343 -184.6328125 148.05859375 C-185.16846571 144.4794564 -185.1196472 142.45388916 -183.9375 139 C-179.94398333 133.91326324 -174.79894646 129.84430533 -169.88574219 125.68212891 C-153.91485407 111.89272801 -144.09063198 92.43996213 -136.9375 73 C-136.18243164 73.01571045 -135.42736328 73.0314209 -134.64941406 73.04760742 C-131.16218843 73.11073548 -127.67508367 73.14923498 -124.1875 73.1875 C-123.00027344 73.21263672 -121.81304688 73.23777344 -120.58984375 73.26367188 C-96.69794174 73.45950714 -80.3188967 60.15277432 -63.6796875 44.55859375 C-60.63263246 41.71554382 -57.51408308 38.96896838 -54.36328125 36.2421875 C-51.54101857 33.78333947 -51.69460577 32.28632009 -51.25 28.5 C-49.68808394 18.95873014 -45.08930645 13.22949287 -37.37109375 7.6328125 C-26.30284958 0.20660694 -13.31181781 -6.79314414 0 0 Z " fill="#010101" transform="translate(805.9375,349)"></path>
                <path d="M0 0 C-0.50949888 10.22300996 -1.87856383 20.12365042 -3.6875 30.1875 C-3.95566423 31.7105617 -4.22306272 33.23375839 -4.48974609 34.75708008 C-5.04374738 37.91801185 -5.6009977 41.07834433 -6.16064453 44.23828125 C-7.38389281 51.15935177 -8.56846343 58.08703363 -9.75308228 65.01480103 C-10.10726254 67.0838799 -10.46292864 69.1526972 -10.8190918 71.22143555 C-12.37434223 80.26691429 -13.8892625 89.31882288 -15.39500427 98.37266541 C-17.27412942 109.66343107 -19.17900944 120.94979741 -21.09204102 132.23486328 C-21.49506001 134.61398076 -21.89738383 136.9932161 -22.29907227 139.37255859 C-22.88928574 142.8684202 -23.48151599 146.36393469 -24.07421875 149.859375 C-24.25337326 150.92275085 -24.43252777 151.98612671 -24.61711121 153.08172607 C-24.78431168 154.0650592 -24.95151215 155.04839233 -25.1237793 156.06152344 C-25.2693779 156.92179138 -25.4149765 157.78205933 -25.56498718 158.668396 C-25.96394388 160.80674455 -26.44640177 162.89701351 -27 165 C-54.50764817 162.19982025 -54.50764817 162.19982025 -62 157 C-66.78617797 150.92026042 -66.481426 145.52490891 -66 138 C-65.26806223 132.31836408 -64.27609764 126.69719787 -63.25 121.0625 C-62.97201925 119.49167778 -62.6948458 117.92071249 -62.41845703 116.34960938 C-60.83479665 107.39710866 -59.14591864 98.46720625 -57.39282227 89.54638672 C-56.12240567 82.95328385 -55.13645886 76.33367173 -54.1875 69.6875 C-52.47895891 57.72859486 -50.46575986 45.83465825 -48.375 33.9375 C-48.22284027 33.06942719 -48.07068054 32.20135437 -47.91390991 31.30697632 C-47.07485116 26.52803873 -46.2244673 21.75136382 -45.3571167 16.97747803 C-45.04091428 15.22655645 -44.73388459 13.47398379 -44.42822266 11.72119141 C-44.18531494 10.391604 -44.18531494 10.391604 -43.9375 9.03515625 C-43.74607422 7.96019897 -43.74607422 7.96019897 -43.55078125 6.86352539 C-42.36489921 2.85118601 -39.69451235 0.03593087 -36.140625 -2.13671875 C-25.84824989 -6.28747586 -10.54276274 -1.58732466 0 0 Z " fill="#020202" transform="translate(177,301)"></path>
                <path d="M0 0 C7.08416458 0.70444644 14.04520677 1.80366139 21.0546875 3.0390625 C22.21333817 3.24074036 23.37198883 3.44241821 24.56575012 3.65020752 C27.04811647 4.08230061 29.53029427 4.51547813 32.01229858 4.949646 C38.55257149 6.09314611 45.0944205 7.22753022 51.63671875 8.359375 C52.29225801 8.47283642 52.94779728 8.58629784 53.62320137 8.70319748 C67.72361488 11.14177177 81.84339598 13.45088038 95.97094727 15.72583008 C97.64470965 15.99550845 99.31845686 16.26528095 100.9921875 16.53515625 C102.17593208 16.72601555 102.17593208 16.72601555 103.3835907 16.92073059 C110.94724411 18.14489731 118.49459871 19.45687594 126.03857422 20.79663086 C130.62118699 21.60561406 135.19809644 22.32742261 139.8125 22.9375 C150.95494853 24.44248995 161.97349797 26.82355306 173 29 C173.05607422 30.68802734 173.05607422 30.68802734 173.11328125 32.41015625 C173.52324648 42.5626286 174.67828463 52.09985522 177 62 C169.42417549 62.33424504 162.20852829 61.05972997 154.7578125 59.8046875 C153.36029924 59.57398298 151.96269893 59.34380524 150.5650177 59.11412048 C146.85079075 58.50199339 143.13796664 57.88173061 139.42539597 57.25964737 C136.34154687 56.74399943 133.25688557 56.23330598 130.17221737 55.72258472 C113.50602229 52.9624824 96.85208021 50.14453528 80.22753906 47.14257812 C65.56983602 44.51878501 50.85936602 42.21647322 36.15209961 39.88989258 C34.13003358 39.56990001 32.10797941 39.24983246 30.0859375 38.9296875 C29.10268997 38.77402817 28.11944244 38.61836884 27.10639954 38.45799255 C16.06035565 36.70250301 5.02948313 34.85631555 -6 33 C-5.30935867 28.78195088 -4.61551226 24.56444531 -3.91870117 20.34741211 C-3.6821434 18.91298676 -3.44645943 17.47841702 -3.21166992 16.04370117 C-2.87388488 13.9805701 -2.53295273 11.91798003 -2.19140625 9.85546875 C-1.98717041 8.61434326 -1.78293457 7.37321777 -1.57250977 6.09448242 C-1 3 -1 3 0 0 Z " fill="#030303" transform="translate(398,287)"></path>
                <path d="M0 0 C3.81780349 3.81780349 2.36984439 10.53961965 2.375 15.6875 C2.39949219 16.95529297 2.42398438 18.22308594 2.44921875 19.52929688 C2.48707963 31.58798573 2.48707963 31.58798573 -2 37 C-26.15812579 53.55967255 -71.34736178 51.79394038 -98.89038086 46.7043457 C-101.60133862 46.16699473 -104.30133746 45.59580861 -107 45 C-108.16885742 44.74379883 -108.16885742 44.74379883 -109.36132812 44.48242188 C-113.94658514 43.452254 -118.47388158 42.26811513 -123 41 C-124.11246094 40.70480469 -125.22492188 40.40960937 -126.37109375 40.10546875 C-134.80894942 37.72504128 -142.30055608 34.10944833 -150 30 C-148.68 27.69 -147.36 25.38 -146 23 C-145.351521 23.11593506 -144.70304199 23.23187012 -144.03491211 23.35131836 C-131.70179375 25.53622937 -119.543793 27.66452647 -107 28 C-105.30617188 28.05994141 -105.30617188 28.05994141 -103.578125 28.12109375 C-79.07862207 28.59223804 -53.06269396 23.21032566 -30.3125 14.375 C-29.18924316 13.94203613 -28.06598633 13.50907227 -26.90869141 13.06298828 C-17.54450887 9.3743927 -8.71198808 5.02334689 0 0 Z " fill="#040404" transform="translate(603,500)"></path>
                <path d="M0 0 C6.09260959 0.38586527 11.93015644 0.83042588 17.81835938 2.46923828 C22.8782867 3.70024567 28.09576311 4.23439562 33.25 4.9375 C35.75006088 5.28732561 38.25006054 5.63758899 40.75 5.98828125 C41.9771875 6.15924316 43.204375 6.33020508 44.46875 6.50634766 C49.39840692 7.19549079 54.32533556 7.90109139 59.25 8.625 C60.02762695 8.73577881 60.80525391 8.84655762 61.60644531 8.96069336 C65.75116584 9.57329216 69.74424588 10.40872059 73.80371094 11.46923828 C78.32607764 12.56212681 82.92040226 13.31365394 87.5 14.125 C89.01980469 14.39763672 89.01980469 14.39763672 90.5703125 14.67578125 C93.04645144 15.11961747 95.52300587 15.56096621 98 16 C97.29776886 23.08883852 96.18931498 30.05145146 94.9375 37.0625 C94.75123047 38.11888672 94.56496094 39.17527344 94.37304688 40.26367188 C93.91788796 42.8429057 93.46015627 45.4216539 93 48 C87.71495424 48.10277794 82.87333232 47.80407392 77.64453125 46.8984375 C76.95700775 46.78153061 76.26948425 46.66462372 75.56112671 46.54417419 C73.31052692 46.16035548 71.06157594 45.76764017 68.8125 45.375 C66.41231403 44.96335041 64.01172956 44.55408438 61.61109924 44.14503479 C59.94808393 43.86160432 58.28519256 43.5774458 56.62242126 43.29258728 C50.73003547 42.28540771 44.83229907 41.31639994 38.9296875 40.37109375 C37.69931007 40.17377655 37.69931007 40.17377655 36.44407654 39.97247314 C33.26004955 39.46247876 30.07591148 38.95325084 26.89102173 38.44866943 C-0.92368602 34.03815699 -0.92368602 34.03815699 -5 32 C-5.34591237 24.87420522 -4.03590302 18.44062121 -2.5 11.5 C-2.26152344 10.39140625 -2.02304688 9.2828125 -1.77734375 8.140625 C-1.19216944 5.42541621 -0.59956201 2.71206134 0 0 Z " fill="#040404" transform="translate(243,261)"></path>
                <path d="M0 0 C24.42428853 1.96214308 48.80771732 5.25162954 73 9.125 C73.94721924 9.27114746 74.89443848 9.41729492 75.87036133 9.56787109 C81.97573522 10.58930678 86.79087847 11.83144664 91.33984375 16.296875 C94.36475001 21.22213413 93.77109819 26.4243669 93 32 C91.1166874 37.22563416 88.67416969 40.93823769 84 44 C73.94555216 47.35148261 62.94010477 43.71876439 52.98529053 41.43795776 C38.68301383 38.16756659 24.37483539 35.18579839 9.875 32.9375 C8.87297546 32.78204208 8.87297546 32.78204208 7.85070801 32.6234436 C4.23608616 32.06640806 0.61939183 31.52510782 -3 31 C-2.52343588 29.20763933 -2.04366502 27.41613103 -1.5625 25.625 C-1.29566406 24.62726563 -1.02882813 23.62953125 -0.75390625 22.6015625 C0 20 0 20 1 18 C1.09745179 16.08535894 1.12976894 14.16711358 1.125 12.25 C1.12886719 10.71085937 1.12886719 10.71085937 1.1328125 9.140625 C1.0007246 6.01713471 0.57893705 3.06928532 0 0 Z " fill="#030303" transform="translate(832,360)"></path>
            </svg>
        </div>
    </button>

CSS

.btn {
  position: relative;
  width: 200px;
  height: 60px;
  background: linear-gradient(135deg, #213a8a 0%, #2140af 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.15), 0 4px 6px -2px rgba(30, 58, 138, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(30, 58, 138, 0.2), 0 10px 10px -5px rgba(30, 58, 138, 0.15);
}

.btn:active {
  transform: translateY(0);
}

/* デフォルト状態のコンテンツ */
.btn-default {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateX(0);
}

.btn:hover .btn-default {
  opacity: 0;
  transform: translateX(20px);
}

.mail-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-text {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ホバー時の飛脚コンテンツ */
.btn-hikyaku {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover .btn-hikyaku {
  opacity: 1;
  transform: translateX(0);
}

.hikyaku-icon {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
  position: relative;
  transition: filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover .hikyaku-icon {
  animation: motion-blur 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes motion-blur {
  0% {
    filter: brightness(0) invert(1) blur(10px);
    opacity: 0.6;
  }
  30% {
    filter: brightness(0) invert(1) blur(8px);
    opacity: 0.7;
  }
  50% {
    filter: brightness(0) invert(1) blur(5px);
    opacity: 0.85;
  }
  70% {
    filter: brightness(0) invert(1) blur(2px);
    opacity: 0.95;
  }
  85% {
    filter: brightness(0) invert(1) blur(0.5px);
    opacity: 1;
  }
  100% {
    filter: brightness(0) invert(1) blur(0);
    opacity: 1;
  }
}

/* 砂埃エフェクト */
.dust-particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.08) 70%, transparent 100%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.dust-1 {
  width: 16px;
  height: 16px;
  left: 45%;
  bottom: 15%;
}

.dust-2 {
  width: 13px;
  height: 13px;
  left: 52%;
  bottom: 12%;
}

.dust-3 {
  width: 19px;
  height: 19px;
  left: 38%;
  bottom: 18%;
}

.dust-4 {
  width: 10px;
  height: 10px;
  left: 48%;
  bottom: 10%;
}

.dust-5 {
  width: 14px;
  height: 14px;
  left: 55%;
  bottom: 14%;
}

.dust-6 {
  width: 11px;
  height: 11px;
  left: 42%;
  bottom: 11%;
}

.btn:hover .dust-1 {
  animation: dust-burst-1 0.6s ease-out 0.25s;
}

.btn:hover .dust-2 {
  animation: dust-burst-2 0.55s ease-out 0.28s;
}

.btn:hover .dust-3 {
  animation: dust-burst-3 0.65s ease-out 0.23s;
}

.btn:hover .dust-4 {
  animation: dust-burst-4 0.5s ease-out 0.3s;
}

.btn:hover .dust-5 {
  animation: dust-burst-5 0.6s ease-out 0.26s;
}

.btn:hover .dust-6 {
  animation: dust-burst-6 0.58s ease-out 0.29s;
}

@keyframes dust-burst-1 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  15% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(40px, -55px) scale(2.5) rotate(45deg);
  }
}

@keyframes dust-burst-2 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  18% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(48px, -50px) scale(2.2) rotate(-30deg);
  }
}

@keyframes dust-burst-3 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  12% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(35px, -60px) scale(2.8) rotate(60deg);
  }
}

@keyframes dust-burst-4 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  20% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(52px, -45px) scale(2) rotate(-45deg);
  }
}

@keyframes dust-burst-5 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  16% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(45px, -58px) scale(2.4) rotate(30deg);
  }
}

@keyframes dust-burst-6 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  14% {
    opacity: 0.87;
  }
  100% {
    opacity: 0;
    transform: translate(38px, -52px) scale(2.3) rotate(-60deg);
  }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

button要素を使用して、飛脚をモチーフにした送信ボタンを作成してください。

### 初期状態
- 藍色のグラデーション背景
- 白いメールアイコンと「送信」テキスト
- 適度な角丸と影付き

### ホバー時
- メールアイコンとテキストが右にスライドアウトして消える
- 左から飛脚のアイコンが駆け込んでくる
- 飛脚が到着する瞬間、ブラー効果で動きの速さを表現
- 砂煙が舞い上がるアニメーション（複数のパーティクルが放射状に広がる）
- ボタン全体が少し浮き上がる

このボタンの特徴

文化的モチーフ 飛脚という日本文化を現代のWebデザインに活用
意味の一致 「メールを届ける」機能と飛脚のイメージが連動
動きの演出 ブラー効果で飛脚の駆け込みの速さを表現
砂煙エフェクト 複数のパーティクルが時間差で放射状に広がる
和の配色 藍色と白で日本的な雰囲気を演出

コードのポイント

2つの状態の切り替え:

/* デフォルト状態 */
.btn-default {
  opacity: 1;
  transform: translateX(0);
}

.btn:hover .btn-default {
  opacity: 0;
  transform: translateX(20px); /* 右にスライドアウト */
}

/* ホバー時の飛脚 */
.btn-hikyaku {
  opacity: 0;
  transform: translateX(-100%); /* 左から登場 */
}

.btn:hover .btn-hikyaku {
  opacity: 1;
  transform: translateX(0);
}

.btn-defaultと.btn-hikyakuの2つの状態を用意
ホバー時にopacityとtransformで切り替え

ブラー効果でスピード感:

@keyframes motion-blur {
  0% {
    filter: blur(10px);
    opacity: 0.6;
  }
  50% {
    filter: blur(5px);
    opacity: 0.85;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

アニメーション開始時は強いブラーでスピード感
徐々にブラーを弱め、最後はクリアに表示

砂煙の時間差アニメーション:

.btn:hover .dust-1 {
  animation: dust-burst-1 0.6s ease-out 0.25s;
}

.btn:hover .dust-2 {
  animation: dust-burst-2 0.55s ease-out 0.28s;
}

/* 各パーティクルで異なる遅延時間 */

6つのパーティクルにそれぞれ異なる遅延時間を設定
時間差で舞い上がることで、よりリアルな砂煙を演出

まとめ

文化的なモチーフをボタンに使うって面白いですね！

そう。飛脚という「届ける」イメージを持つ日本文化の要素が、送信ボタンの機能と自然に結びついている。デザインと機能の意味が一致すると、ユーザーに伝わりやすくなるんだ。

砂煙のアニメーションもかっこいいです！

複数のパーティクルに時間差をつけて放射状に広がる演出だね。こういった細かいアニメーションが、ボタンに「急ブレーキ」の印象を与えているんだ。

文化的要素の活用 機能と意味が一致するモチーフを選ぶことで、直感的なデザインが実現
ブラーアニメーション 速度感や動きの勢いを視覚的に表現する技法
複数要素の時間差 パーティクルに異なる遅延時間を設定し、よりリアルな砂煙を演出
状態の切り替え 2つのコンテンツを用意し、ホバーでスムーズに入れ替える
イージング関数 cubic-bezierで独自の動きを作り、ユニークな印象を与える

次回は、さらに複雑なホバーアニメーションやインタラクティブなボタンデザインについて学んでいきます。