ブログ

  • 我がデジタルロード〜消費者から作り手へ〜

    皆様、ご機嫌いかがでしょうか?

    今回は、私とインターネット、いや、もっと言えばパソコンとの出会いから、今日に至るまでの、なんとも数奇な運命を辿った半生について語らせていただこうと思います。

    ええ、実は私、つい最近まで、デジタル世界の“お客さん”でしかなかったんです。それが、ひょんなことから作る側に足を踏み入れることになりましてね⋯⋯。これが、もう、とんでもない大冒険の始まりだったんです。

    第1章:始まりは祖父の書斎から〜Win95とチンギス・ハーンの衝撃〜

    私のデジタルロードの原点は、祖父の書斎にありました。初めてパソコンというものを認識したのは、あの懐かしきWindows 95が鎮座する、祖父のデスクの上です。

    祖父はよくそのパソコンで「エイジ オブ エンパイア」というゲームをやったり、真剣な顔で囲碁ゲーをしたりしていました。当時の私は、囲碁のルールなんてチンプンカンプン。「おじいちゃん、何やってるんだろう?」と首を傾げるばかりでした。

    しかし、「エイジ オブ エンパイア」は違いました。

    画面の中で繰り広げられる壮大な歴史絵巻に、幼心ながらに惹きつけられました。ですが、戦略や戦術という概念を知らない私は、チンギス・ハーンを大量に配置して、他の国を次々と滅ぼしていく、というちょっとおバカな遊び方ばかりを繰り返していました。今思えば、なんと野蛮な園児だったことか!でも、あの頃の私は、画面の中で世界を支配する全能感に、すっかり魅了されてしまったのでした。

    これが、私がデジタル世界の入り口に立った、最初の消費者体験でした。

    第2章:フラッシュ倉庫の魔力〜小学生時代のデジタル遊戯〜

    時は流れ、私が小学生になった頃、世間では「フラッシュ倉庫」なるものが大流行しました。なんだか怪しげな響きですが、当時は多くの子供たちが、そこで公開されているFlashアニメーションに夢中になったものです。私もご多分に漏れず、何も知らない友人に「ウォーリーを探さないで」をやらせる、なんてことをしていた記憶があります。

    特に好きだったのは、「ナイトメアシティ」と呼ばれる一連の作品です。

    曲が流れて、アニメ調になったAAキャラクターたちが戦う系のFlashで、見ていて本当にワクワクしましたね。あの躍動感と、ちょっとシュールな世界観がたまらなかった。今見てもかっちょいいですね。

    一方で、「ピンポンダッシュ」という、これまたフラッシュ倉庫の有名な作品もありました。これがもう、本当に怖かったんですよ。でも、ビビりながらもついつい最後までやってしまう。あのスリルと不気味な雰囲気が忘れられません。

    この頃も、ひたすら面白いものを探し求める、生粋のデジタル消費者として生きていたわけです。

    第3章:DSiの片隅で雑誌創刊!?〜広がる創作活動の舞台〜

    さらに少し時が経ち、(誕生日プレゼントにねだりまくった結果)私が手にしたのはニンテンドーDSiでした。

    パソコンは家族で共有のものを使っていたし、ゲームボーイアドバンスも、ゲームキューブも、SPも、無印DSもすべて兄のモノだった⋯⋯けど!ビビットにかがやくピンク色のDSiは正真正銘、私のモノ。

    そしてなんと、このDSiには「うごメモ」というアプリケーションが入っていました。

    うごメモは、手軽にアニメーションやイラストが作れるツールでしたが、私はそれをまさかの雑誌に見立て(そもそも「雑誌」といううごメモのジャンルがあったような気もしますが)、短いマンガやイラスト、ちょっとしたコラムのようなものを描いていました。最盛期には「読モ」なる人材を募集して、オキニのアクセやら最近みた夢やらなんやらを訊いたアンケート原稿を集め、雑誌にまとめて載せていました。

    「これが私の雑誌だ!」と、一人悦に入っていたものです。

    今振り返ると、とても稚拙なものだったと思いますが、あの頃の私にとっては、まさに自分だけのメディアを生み出す、とてつもない創造体験だったんです。

    ⋯⋯とはいえ、この時もまだ、誰かに見せるためというよりは、自分が楽しむためのおもちゃを作っている感覚でしたから、根っこの部分はバリバリの消費者だったんだと思います。

    第4章:ハムスターとアメブロと「HTML?なにそれ美味しいの?」な日々〜黒歴史とコミュニケーションの世界〜

    DSiのうごメモに熱中していたのと同時期に、私のネットライフはさらに広がりを見せました。まずは、「アメーバブログ」です。ここで私が書いたのは、ハムスターとの会話形式のブログでした。

    その頃、実際に飼っていたハムスターが、まるで本当にしゃべっているかのように、日々の出来事について語り合う⋯⋯。しかも、そのハムスターのセリフ、「〇〇でしゅ!」という、今考えると結構恥ずかしい語尾で書いていました。まさに、デジタル世界の黒歴史です。

    この頃の私は、まだ「HTML?なにそれ美味しいの?」(こういう言い回しありましたよね)という状態でした。アメブロには、文字の色を変えたり、リンクを貼ったりといったことができるタグを使って書く機能があったことは、なんとなく覚えているんですが、その記号の羅列が当時の私には異世界の呪文のように思えて、「なんだか複雑そうだから、触らないでおこう!!」と、完全にスルーしていました。

    ともあれアメブロというプラットフォームは、その頃の私にとって、自分の中のアイデアを形にする大切な遊び場でした。

    そして、「アメーバピグ」では、うごメモで知り合った同年代の子たちと遊んでいました。ピグの広場で待ち合わせして、アバター同士でチャットしたり、ゲームをしたり。まさに、デジタル世界での秘密基地のような場所でしたね。

    さらに、「ふみコミュ」や「キャスフィ」といった掲示板サイトもよく利用していました。匿名で色々な人と交流したり、自分の興味のある話題について語り合ったり。今では当たり前になったネット掲示板ですが、あの頃は、見知らぬ誰かと文章で繋がれることに、なんだかすごい可能性を感じていましたね。

    ⋯⋯ええ、そうなんです。この頃も、相変わらずネットの海を漂う一介の消費者だったわけです。

    第5章:人生最大の転機!〜社長の一言で、私は「作り手」になった!〜

    さらに時は経ち、気がつけば私は社会に放り出されていました。そんな主体性の欠片もなかった私に、まさに青天の霹靂とも言うべき出来事が訪れます。それは、前の会社でバックエンドのエンジニアとして働いていたある日のことでした。依存性を注入()している私のデスクへ社長がやってきて、こう仰ったんです。

    「ねぇ、うちの会社のウェブサイト、作ってくれる?」

    ⋯⋯え? 私が? Webサイトを?当時の私は、もちろんWeb制作なんて、まるで知識がありませんでした。普段はただネットを見て楽しむだけの、生粋の“お客さん”だったんですからね。それこそ、あの「HTML?なにそれ?」状態のままです。

    「え、ええと⋯⋯」

    と、しどろもどろになる私に、社長はニヤリと笑って一言。

    「よろしくね。ちょっとできたら見せてね」

    この、なんとも無責任⋯⋯いや、「信じられている」と感じさせる一言が、私の人生を大きく変えることになったのです!

    そこからの私は、まさに無我夢中でした。右も左も分からないながらも書籍を読み漁り、ネットで調べまくり、まるで砂漠でオアシスを探す旅人のように、Web制作の知識と技術を貪欲に吸収していきました。あの時ほど、脳みそがフル回転したことはなかったかもしれません。

    そして、試行錯誤の末、ついに会社のWebサイトを完成させた時の達成感たるや! それはもう、チンギス・ハーンで世界を滅ぼした時以上の全能感でしたね!

    終章:デジタルロードは続くよ、どこまでも〜消費者から作り手へ、そして未来へ〜

    祖父のWindows 95から始まり、チンギス・ハーンを量産し、フラッシュ倉庫で震え、DSiで雑誌を作り、ハムスターと会話し、ピグ友と戯れ、掲示板で語り合った⋯⋯。

    そんな生粋の消費者だった私が、社長の一言というひょんなきっかけで、まさかWebサイトを作る側の人間になるなんて、人生って本当に面白いものですね!

    あの時、社長に頼まれなければ、私は今もWebサイトをただ“見る”だけの人間だったかもしれません。しかし、その一言が、私の新たな扉を開いてくれたのです。

    技術は急速に進化し、あの頃のツールはもうほとんど使われていないかもしれません。でも、あの時の「面白い!」という純粋な気持ちや、「もっと知りたい」「もっと作りたい」という探求心は、消費者だった頃も、そして作り手になった今も、私の中に脈々と息づいていると信じています。

    これからも、このデジタルロードを、一体どこまで歩んでいくことになるのか。私自身、楽しみで仕方ありません。

    さて、皆様のデジタルロードは、どこから始まりましたか? そして、ひょんなことから作り手になった経験はありますか? よろしければ、皆様の物語もどこかで聞かせてください!

  • WordPressが大変身!? ヘッドレスCMSとAngularで挑む、次世代サイト構築!

    WEBの世界に興味を持つ皆様、こんにちは! 今日は私が今まさに取り組んでいる、WEB制作の新しい挑戦についてご紹介したいと思います。

    皆様が普段目にしているWEBサイト。その裏側には、様々な技術と工夫が隠されています。そして今回、私が挑むのは、まさにWEB界の新常識とも言えるプロジェクトなのです。

    WordPressとの初対面が、まさかの“ヘッドレス”だった!

    実は私、これまでWordPressを“普通に”使った経験がほとんどないんです。ブログや簡易的なサイトでよく使われるWordPressですが、私にとっては、いきなりヘッドレスCMSという形でWordPressと出会うことになった、というわけです。

    ヘッドレスCMSとは、コンテンツの管理だけをWordPressに任せ、見た目の部分を完全に切り離してしまうという、現代のWEB開発で注目を集める手法なのです。

    例えるなら、こんなイメージです。

    普段のWordPressは「料理も盛り付けも、全部一人でこなす定食屋さん」。メニュー(コンテンツ)を考えるのも、料理を作るのも、お皿に盛り付けてお客さんに出すのも全部WordPressがやる感じですね。

    でも、ヘッドレスCMSのWordPressは「最高の食材を完璧に管理する“専門の食材庫”」なのです。美味しい料理を作るための材料(記事のテキスト、画像、動画など)を、きちんと整理して保管するだけ。お客さんの前に出す「料理の盛り付け」は、別の誰かに任せる、というわけです。

    フロントエンドには“高速の担い手”Angularが舞い降りる!

    そして、WordPressという名の“コンテンツの宝庫”から情報を引き出し、皆様のブラウザに魅力的な形で表現する役割を担うのが、私が現在、まさにそのポテンシャルを引き出さんと学習・実践を重ねているフレームワーク、Angular(アンギュラー)です!

    Angularは、Googleが開発したフロントエンド構築の強力なツールとでも言いましょうか。複雑なウェブアプリケーションを、驚くほどのスピードと効率で作り上げることを可能にする、すごいやつです。

    例えるなら、こんなイメージです。

    先ほどの「食材庫」(WordPress)から最高の食材を受け取って、それを「華麗に盛り付けてお客さんに出す一流シェフ」がAngularです。見た目も美しく、しかもお客さんを待たせることなく、瞬時に料理(WEBサイト)を提供できるわけですね。

    日本におけるAngularの立ち位置としては、ReactやVue.jsといった他の人気のフレームワークと比べると、現時点では採用事例が少し控えめに見えるかもしれません。しかし、大規模な企業システムや複雑な業務アプリケーションの開発においては、その堅牢な構造とGoogleによる手厚いサポートから、根強い人気と高い評価を得ています。特に、TypeScriptとの相性が良く、大規模開発での保守性やチーム開発のしやすさは特筆すべき点です。

    WEBサイト表示の秘密兵器 SSR、CSR、そしてハイドレーション!

    さて、ここで少しだけ、WEBサイトの表示方法に関する奥深き世界をご紹介しましょう。皆様が普段見ているサイトが、どのように画面に現れているか、ご存じですか?

    大きく分けて二つの方法があります。

    1. CSR(クライアントサイドレンダリング): これは、皆様のブラウザ(クライアント)が、サイトの表示に必要なデータをダウンロードし、ブラウザ自身でページを組み立てて表示する方法です。AngularのようなJava Scriptフレームワークは、基本的にこのCSRを得意としています。
      • 例えるなら、あなたがお店でレシピ(データ)をもらって、その場で自分で料理(ページ)を作るイメージです。一度作り方を覚えてしまえば、その後の違う料理(別のページ)もサッと作れますね。
    2. SSR(サーバーサイドレンダリング): 一方、SSRは、WEBサイトのサーバー側でページを組み立て、完成したHTMLの状態でブラウザに送り届ける方法です。これにより、最初のページ表示が非常に速く、検索エンジンにも優しいという利点があります。
      • 例えるなら、お店で既に完成しているお弁当(完成したページ)を受け取るイメージです。すぐに食べ始められますし、どんな料理が入っているか(どんな情報があるか)も一目瞭然ですね。

    そして、この二つの良いとこ取りをするのが、ハイドレーションという技術です!

    ハイドレーションとは、サーバー側でSSRによって生成されたHTMLを、クライアント側でJava Script(Angular)が引き継ぎ、インタラクティブな機能や動的な部分を追加していく手法のこと。

    例えるなら、完成したお弁当(SSRで作られたページ)を受け取った後、あなたがその場で「このお箸、もっと使いやすくカスタマイズしちゃお!」とか、「ここに好きな調味料を足しちゃお!」と手を加えるイメージです。最初の提供はスムーズ、その後の使い勝手も最高!というわけですね。

    私のAngularプロジェクトも、まさにこのSSRとハイドレーションを積極的に取り入れ、ユーザーにとって最高の体験を提供できるよう、日々調整を重ねています。

    挑戦は、まだまだ続く!

    このWordPressのヘッドレスCMS化とAngularを使ったフロントエンド構築、そしてSSRとハイドレーションの活用は、私にとってまさに“新しい挑戦”です。時には解決すべき課題に直面し、時には試行錯誤を繰り返すこともあります。しかし、その先に待つ“より良いウェブサイト”という目標を目指し、私は今日もウェブ制作の道を突き進んでいます!

    もし、皆様がウェブサイトのパフォーマンスやセキュリティ、あるいはユーザー体験でお悩みでしたら、この「ヘッドレスCMS × Angular × SSR/ハイドレーション」という組み合わせを、ぜひ一度検討してみてはいかがでしょうか?

    それでは、また次回のWEB制作話にご期待ください!

  • はじめまして!WEBと“好き”を追いかける、生粋のマイペース人間“アライ”です!

    このブログにお越しいただき、本当にありがとうございます! はじめまして、アライと申します。どうぞ、よろしくお願いいたします!

    普段はHR業界の会社で、WEB制作チームのコーダーとして、日々奮闘しています。WEBサイトの裏側、そう、コードをカチッと組み上げていく作業は、まるで巨大なパズルを完成させるようで、これまた実に楽しいんです。新しい技術を学ぶことにも、常にワクワクしながら取り組んでいます。

    このブログを始めた、とある野望について

    会社員としてWEB制作に携わる中で、ふと気づいたんです。「あれ? もっとこう、自由に、心ゆくまで色々なものを作りたいんじゃないか?」と。将来的には独立して自分の力で働きたい。その大きな夢に向かって、このブログという場所でWEB制作の実力を、コツコツと積み重ねていこうと決めたわけなんです。

    もちろん、このブログ自体を将来の事業の柱とすることも、密かな、しかし確かな目標です。WEB制作のご依頼をいただけることはもちろん、皆様に「お!これは面白い!」と思ってもらえるような記事をたくさん書き、ゆくゆくはブログ運営そのものを一大事業として大きくしていくことに、今からワクワクが止まりません!

    私的癒しと探求のマイペースワールド

    さてさて、WEB制作への情熱と同じくらい、私にはいくつかのどハマりしている趣味があります。どれも始めたばかりの初心者レベルではあるのですが、一度ハマるとこれがまた、とことんのめり込む凝り性なのが私の性格。マイペースに、心ゆくまで楽しんでいます。

    • 野鳥観察&写真撮影:休日はカメラ片手に、いざ公園や野山へ! 小さくて可愛らしい鳥たちを見つけた時の喜びといったら! 時間を忘れてシャッターを切っています。まだ「これは何ドリ!?」と図鑑とにらめっこする日々ですが、その探求の時間こそが、実に楽しいんです。
    • ハムスター飼育:少し前まで、小さき友ジャンガリアンハムスターと共に過ごしていました。約1畳もの広大なケージにたくさんの床材を入れて、巣作りをするハムスターの生態を垣間見るのが大好きだったので、また遠くないうちに新しい盟友を迎えたいと画策中です。
    • イラスト作成:気分転換に、タブレット片手にキュイイイイッ!と。ええ、まだ人様にお見せできるレベルではありませんが、頭の中に描いたイメージを形にしていく作業は、実に楽しいものです。これぞ創造の喜び!

    こんな風に、WEB制作のことだけでなく、私の日常に散りばめられた小さな“好き”も、このブログで皆様と共有していけたら、これほど嬉しいことはありません!

    さあ、このブログで繋がりを深めようではありませんか!

    このブログでは、私がこれまで培ってきたWEB制作の知識や経験を活かして、皆様のビジネスや活動をサポートできるような情報を、どんどん発信していきます!

    「こんなWEBサイトを作りたいけど、どこに頼めばいいんだろう?」 「もっと気軽に、確かなウェブサイトを手に入れたい!」

    もしも、そんな風にお考えの方がいらっしゃいましたら、ぜひともお気軽にご相談ください! あなたの「作りたい!」という熱い想いを、私が全力で形にするお手伝いをさせていただきますよ!

    そして、私の趣味の話題で「わかる!」と共感してもらえたり、「むむ!これは面白そうではないか!」と興味を持ってもらえたりしたら、もう感無量です!

    それでは皆様、これからどうぞ、末永くよろしくお願い申し上げます!