Kaka

IT・通信業界のデザイナーとして働く傍ら，大学院で（音声）対話型情報検索の研究をしてい…

Kaka

IT・通信業界のデザイナーとして働く傍ら，大学院で（音声）対話型情報検索の研究をしています． 2024年4月から博士後期課程． 音楽，哲学，SF，香港映画等，自身が面白いと思うことを追求するのが趣味．

JS Practice 05 Hamburger Menu

本記事で紹介すること 今回は，JS勉強第５弾ということで，Webページのトップ画面によくあるハンバーガーメニューを押下すると，ナビゲーションがニョキっと生えてくる画面の実装を行う． 準備 まずは，例のごとくサクッとFigmaでデザインを起こす． イメージとしては，ミネラルウォータを研究している機関のトップページだ． 背景画像は，unSplashから拝借する． また，ナビゲーションメニューをホバーすると，左から右に向かって，borderが伸びていく実装をCSSで行う．こ

Kaka

    • JS Practice 04 FAQ

      本記事で紹介すること 今回JSの勉強第４弾ということで，WebサイトによくあるFAQページを実装することにする． 今回FAQを作るにあたって，面白いサイトを見つけた． FAQに特化したデザインを紹介してくれるサイトだ． ここから，デザインを参考にして実装してみよう． 準備 まずは，いつも通り，figmaで絵を描く． ちなみに，COCOSのFAQを参考にしている． ポイントとしては，ボタンを押下すると，アコーディオンが開くところと， アコーディオンが開いた後に，背景

      Kaka

      • How Query Cost Affects Search Behavior

        本記事の紹介 現在，修士論文の仕上げと国際会議への論文提出を並行しつつ，来年度の博士後期に向けてテーマを教授と詰めているところである． 詳細は割愛するが，検索コストとの関係性を見ても面白いかもしれないねということとなり，着想を得るために，関連する論文を精読しているところである． 次週，自分の研究を発表しないといけないが，特にネタがない．． というわけで，今回読んだ論文を発表用資料としてまとめたので，それを公開する. Leif AzzopardiさんのHow Query

        Kaka

        • JS Practice 03 Testimonial Slider

          本記事で紹介すること JSの練習第３弾として，Testimonial Sliderを実装する． Testimonial Sliderとは，端的にいうとユーザレビューのことである． 3人ユーザレビューを用意し，数秒ごとに切り替わるものを実装しようと思う． これまでとあまりやっていることは変わらないが，実装の際，分割代入を用いているところがこれまでになかったところである． デザインの準備 今回は，CSSもちゃんと書こうと思い，数値も意識して厳密にFigmaで作成． 起業

          Kaka

        JS Practice 05 Hamburger Menu

        Kaka

          JS practice 02 Loading

          本記事での紹介 今回は，WebデザインのJS勉強第２弾として，Webページに訪れた際のページローディングを実装する 実装するデザイン サクッとFigmaで，デザインを起こす． ページを読み込むと，%表示に合わせて，バーが連動して動く仕組みだ． 100%になると，色が変わり"ロード中…"が"Go!"に変わる． 本当は，雲の画像ひとつひとつを配置しておきたかったのだが，CSSがうまく書けなかったので，一つにまとめて背景画像として，figmaからエクスポートした． 今回

          Kaka

          JS practice 02 Loading

          Kaka

          JS Practice 01 Text Animation

          この記事で紹介すること Webデザインの練習としてText Animationを実装した． 注：大したものではない （アウトプットしていかないとモチベーションがあがらないため，適宜記事化していく）． これまで，個人開発する時は，react，materialUIでフロント側を実装することが多かった． また，仕事では，業務用アプリのUI/UXデザインを行うことが多く，Webデザインに関してあまり深入りしていなかったが， 奥さんの運営する協会のホームページを作成するする詐欺を

          Kaka

          JS Practice 01 Text Animation

          Kaka

          筋金入りのワル

          私は筋金入りのワルだ． 私がどれだけのワルなのかを紹介したい． 〜小学校入学前 時は1990年代． ドラゴンボールが空前のブームを巻き起こしていた． 私は，漫画を描くのが大好きな子供だった． 悟空が好きで，特にその髪型の刺々しい感じが大好きで，友達が外で遊んでいるのをよそに，それはもう泣きながら，自分の顔面を精一杯，紙に近づけ，ものすごい筆圧で，表情も悟空と同じ顔で，うまく書けるまで，何度もその髪を描いたものである． また，ゲームボーイも近所の兄ちゃんに貸してもらい，親に

          Kaka

          筋金入りのワル

          Kaka

          ChatGPTで音声対話システムを作る

          2023年11月7日　OpenAI DevDayが開催された． 既に触れられた方も多いだろうが，GPT-4 Turbo,Assitants API,GPTs,Text-to-Speech等，大幅にアップデートされた． 本記事の主題 本記事では，OpenAIのAPIのみで，音声対話システムを構築する方法を書き記す． 背景 私は，IT・通信会社でUI/UXデザイナーをしつつ，大学院で音声情報検索を研究している，しがない社会人大学院生である． 昨年度まで，音声対話型情報検

          Kaka

          ChatGPTで音声対話システムを作る

          Kaka