Close Menu

    【DIY】阿〇寛さんのホームページを超えた！？個人VTuberが本気で爆速サイト作ってみた



    【DIY】阿〇寛さんのホームページを超えた！？個人VTuberが本気で爆速サイト作ってみた

    おお、早い。めっちゃ早い。 これはいけるかも。大物俳優のホームページに無所属人 VTuber が一体何があったのか最初から説明します。 どうもちアイルです。突然ですが皆さんこのサイト見たことありますか?そう。さんの公式ホームページ。このサイト実はインターネットの文解さんって呼ばれてるみたいです。なぜか [音楽] 爆足すぎるから。何でもネット環境を確認 するためにこのサイトを開く人が特出し てるみたいなんですよね。で、ここから 本題なんですけど、私実はホームページが ないんです。10月から個人VTuber として活動を始めたんですけど、それまで は某大手芸能事務所に所属してて、立派な ホームページもあったんですよ。でも今は 何もない。だったら作ろう。調節作るなら あさを超える爆速サイトを大物俳優v無 所属弱勝個人VTuber果たして勝てる のか。 さてまずは敵を知らなければ調べてみると アさんのホームページの特徴は3つある ようです。JavaScriptを使わ ない性的サイト。画像も装飾も最小限。 レイアウトはテーブルタグを使用。待って 待って。これって令和の技術を全部 捨てろってこと。 ちなみに私ホームページを作るの完全に初めてなんですけど大丈夫か? [音楽] さあ行くぞ。 まずPYonをダウンロードして自分の PC サイトを確認できるようにします。これ別にいらなかったです。メモ帳で [音楽] HTML を書いていきます。潜在写真を載せて [音楽] ここだ。 背景を載せます。 ここ左にあるメニューをかけます。 [音楽] [拍手] メニューのレイアウトや隙間を調整して いきます。 軽くするために画像をガビガビにします。 洗剤の大きさをいじっていきます。 左に色をつけていきます。 位置を調節していきます。 メモ帳よりオンラインエディターの方が結果を見ながら修正できるみたいなのでメモ帳は首にしました。 こんなはずでは あとは気合いてレイアウトを寄せていきます。無料のサーバーに置いていきます。 くらえ。 無料のだとバナーが出てきて読み込みが遅くなるので課金します。 [音楽] ついでにドメインも取っちゃいました。 もう後には引けません。 さあ、ついに来ました。大物俳優V無所属 弱勝個人VTuberホームページ速度 対決。実況は事務所からライブ2Dモデル を買い取るために人生で初めて人からお金 を借りたVTuberこと私チアルが担当 いたします。今のところ勝てる要素が1個 もありません。 せめて速度だけ速度だけでも勝たせてください。まずは体感速度チェック。やるじゃないか。 こお、早い。めっちゃ早い。これはいけるかも。次に詳しく測定していきます。 F12 キーでブラウザの開発を起動してパフォーマンス機能で表示速度を分析していきます。 まずは、あ、あのサイト [音楽] [拍手] 早い。さすが分解遺産。ちなみにロードとは完全に表示された状態なのでここで比較していきます。は、そして私のサイトはちょっと待って待って待って。嘘でしょ? [音楽] 念のため別ツールでも検証だ。 使うのはウェブページテストという測定 ツール。注目するのはここ。これがページ が画面に表示され始めるまでの時間です。 [音楽] 同立でももう1つ重要な指標があります。 [音楽] 待って。14KB さんのほぼ1/3じゃん。つまり開発者 ツールでは読み込み速度で勝利。ウェブ ページテストでは表示度は互角だけど データで圧勝。 結論無所属弱個人VTuberでも大物 俳優のホームページに勝てる。というわけ で本日からこの爆速ホームページが私の 公式サイトになります。まだトップページ しかできてないけどこれから色々追加して いきます。皆さんも是非アクセスしてこの 爆速を体感してください。URLは概要欄 に。それではチャンネル登録と高評価、X のフォローもお願いします。 [音楽]

    せっかくなので企業VTuberじゃ出来なさそうなことを…

    伝説（と書いてレジェンドと読む）のHP
    https://abehiroshi.la.coocan.jp/

    HPを作るために参考にした動画

    先駆者のHP
    https://kattu0403.com/

    めっちゃ頑張って作った千空のHP
    https://www.chiaeiru.com/

    35件のコメント

    1. @ChiaEiru on

      阿部さんの好きな作品書いてけ！

      【追記】アマプラで見られるやつだとありがたい👉👈

    6. @Koeda_SL on

      補足ですが、阿〇寛さんのページは1つのHTMLファイルで映画出演などの別タブを用意しているので、やっぱすごい。

    10. @レア-m7n on

      以下のチューニングを行う事でさらに速くなる可能性があります

      ・画像をデータURL化してHTMLに埋め込む

      ・cssをHTMLに直書きする

      ・CDNを利用してキャッシュ化

    14. @noki_ii on

      ソース見ると最後の<br>の連続を無くすともう少し速くなるかと思いつつ、結局は容量の食う画像をどれだけガビガビにするかが決め手になりそうですね

    15. @isshii0420 on

      2012年製WALKMAN（Android4.0.4）でも爆速で開けました。証拠あります🐰w素晴らしいサイトをありがとうございます🤣

    20. @こうちゃかん-hdl on

      全力で色んなあれこれを切り捨てて、速さのみを追い求めるのはある種のロマンを感じる！
      阿部さんのHPも遅くなったらしいし、今後多くの方がお世話になるかも？

    23. @まめゴマ-x6h on

      卓越したWEBデザイナーの一周回ったポートフォリオみたいな感じですね。いいと思います。

      動画はホロライブのAちゃんみたいな編集ですね。いいと思います。

    25. @HIDEO-exp on

      阿部寛のホームページは、不意から生まれたからここまで愛されてるんよ…
      初めから速さを意識してる輩には阿部寛を超えることは色んな意味で出来ないね

    29. @lostgene_trader on

      すげー挑戦だな。てのがファーストインプレッション。
      開発者コンソールは[Disabled cache]にチェックして比較せな意味ないやろ…。
      と思って実験したら、明らかにこっちが早い。

      大物俳優：330~600[ms]
      えいる：170～330[ms]

      イニシエの技術（frameset）を捨てて高速化した印象。
      CSS直書きは工数増えるからともかく、画像はサイズをもう少し最適化して data: で埋め込むのがよいかも。

    Leave A Reply