今AI検索エンジンがアツい！ 近年、AIの進歩がすごいのはもちろんですが、なかでも近ごろはAI検索エンジンの登場によって検索体験が大きな変化を遂げました。 それこそAI検索エンジンといえばPerplexityやGensparkが代表的ですが、個人的に最近お気に入りなのが国産AI検索エンジンのFeloです。 正直、知名度では上記2種のAI検索エンジンに負けるFeloですが、能力はかなり優秀です。そこで今回はFeloの機能・使い方についてご紹介します！ Feloとは？Feloは、東京を拠点とするAIスタートアップ企業・Sparticle株式会社によって開発されたAI検索エンジン。2024年にリリースされ、わずか1ヵ月で世界中で15万人以上が利用しています。 Feloの主な特徴は以下のとおり。 多言語検索機能: 言語の壁を超えて世界中の情報を検索することが可能フォーカス機能: 検索テーマや文脈を

皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも

The Easiest Tailwind CSS Components LibraryFlyonUI is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins.

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

CSSの@starting-styleが先日リリースされたFirefoxでもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。 @starting-styleはアニメーション化させる要素に対して開始時のスタイルを設定でき、display: none;からアニメーション化する要素に対して必須となります。 Now in Baseline: animating entry effects by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSの@starting-styleとは allow-discreteで離散アニメーションを有効にする アニメーションさせる要素に対して開始値を設定するデモ 終わりに はじめに Four ne

はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 今回は記事1本で初心者が必要な知識を全て学べるGitチュートリアルを紹介していきます。 世の中にはたくさんのGitに関する教材があります。しかし、真に良いと思える教材はありません。 もちろん私も4年前はGitという言葉を知らない状態から、書籍などで学習をしました。 しかし、書籍で知識を得たとしても実際にコマンドを使って実践的に学んだわけではなかったのでほとんど身になりませんでした。 私が思う世の中にあるGitの教材のイケてない点は2つです。 結局ほとんどの人が、教材ではなく実際に使ってみて使えるようになっているはずです。 書籍でやったことを全部ちゃんとできるようになった人はいないと考えています。 実際に利用するコマンドは限られている、たまに使うコマンドを紹介しとしても「この記事1本」で説明することができると思

select 要素がカスタマイズできるようになる これまで HTML の<select>要素はカスタマイズが難しい部分でした。各ブラウザのデフォルトスタイルに依存しデザインや機能を統一するのが困難でした。かといってオリジナルのセレクトボックスを作成するとなると CSS と JavaScript でイチから作成する必要がありました。 しかし今後、HTML ネイティブの<select>要素に柔軟にスタイルを加えることができるようになるようです。イチから作成したセレクトボックスをネイティブのselect要素と同等レベルでアクセシビリティやパフォーマンスに配慮して、各 OS に最適化されたユーザー体験にするのは至難の業ですので、ネイティブ<select>要素がカスタマイズできるということは革命的なことだと思います。 本記事では、実際に<select>要素のカスタマイズ機能が先行的に実装されている

Intro 前回までは <dialog> が標準化されるまでの経緯と、 API の概要や関連仕様を解説した。 今回は <dialog> の API としての使い方について、具体的に解説していく。 各要素の使用 open 属性 <dialog> は、デフォルトでは不可視(display: none)な要素となっている。 open 属性が付くと表示される。 <dialog open> <div> <h1>Hello Dialog</h1> </div> </dialog> show()/showModal() しかし、基本的に <dialog> は動的に出てくるため、JS で開くことになるだろう。しかし、 open 属性を動的に付けるのではなく、 show()/showModal() を用いるのが基本だ。 document.querySelector("button.show").addEve

JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の

古いiPhoneを先に売却する場合は、自宅にWi-Fiがある人であれば、iCloud経由のデータのバックアップが便利です。 iCloudは無料プランだと本来は5GBですが、新しいiPhoneを購入してデータを転送する場合は、一時的（21日間）に無料で追加のストレージが利用できます（「設定」→「一般」→「転送またはiPhoneをリセット」）。詳しくは以下のページを参照してください（「新しいiPhoneやiPadの購入時にiCloudストレージを一時利用する」）。 「設定」からAppleアカウントをサインアウト 時間がかかることがあるので、余裕を持って作業する データのバックアップしたら、iPhoneをリセット……はまだ早い！　Appleアカウントをサインアウトして、「デバイスを探す」機能をオフにします。サインアウト時にはパスワードの入力が必要です（簡単にオフできたら、泥棒もできちゃいますから

毎日新しいWebデザインを手掛けていれば、レイアウトや構成が思い浮かばないことがあっても当然です。 そんなときは新しく公開された、話題になっている国内外のホームページを覗いて、次のデザインアイデアやヒントを手に入れましょう。 この記事では、ここ2か月くらいで公開されたデザインが際立つ最新ホームページ事例40個をまとめてご紹介します。 どのようにUIデザインテクニックを活用するのか分かる、目からウロコの事例を中心に集めています。 Webデザイン見本リスト こがしバターケーキ スクロールで袋に入ったこがしバターケーキが下へと移動するようなエフェクトは、その手があったかと思わせるユニークさ。使用されているキアロフォントもブランドイメージにぴったり。 採用サイト｜株式会社 伊藤農園 | ページ全体に散りばめられた素敵な手描きイラストはもちろん、水平スクロール型コンテンツなど読みやすさも工夫されたデ

DuolingoとはDuolingoは、英語だけでなく中国語や韓国語など、さまざまな言語が学べる言語学習アプリです。スマホ版とWeb（ブラウザ）版の2種類があり、1日数分間の言語学習がテンポよくでき、世界で最も使われている言語学習アプリです。 Duolingoは、2011年にカーネギーメロン大学の教授でありReCAPTCHAの創始者のルイス・フォン・アン（Luis von Ahn）氏と、彼の大学院生であるセヴァリン・ハッカーによって研究プロジェクトとして開始されました。 研究者が作ったアプリとして、行動心理学や科学的な学習、アプリの機能、アイコン、プロダクトデザインなど、すべてにおいて根拠があって実装されている感があります。 言語学習アプリ「Lingvist」というのもありますが、こちらも素粒子物理学者が開発したものです。 DuolingoのBusiness Model Canvasタクシ

ユネスコ無形文化遺産登録から10年を経て、登録当時には約5.5万店だった海外の日本料理店が、2023年には約18.7万店にまで増えるなど日々関心が高まっています。 京都府立大学、日本料理アカデミーでは京都から国内外を問わず和食のさらなる発展と和食文化を担う人材の育成を目指し、「日本料理大全 デジタルブック」を公開します。 ある料理を知るためには、まずその背景を知らないと始まりません。「日本料理大全」シリーズは手法のみを解説するのではなく、考え方の基礎を示していくことを目指しています。経験や勘に頼るのではなく、なぜこの味が生まれるのか、どうしてこの調理法になるのか、といった根拠や科学的な理由を示しています。それらをもとに料理する人が考え、取り入れ、オリジナルの料理を生み出す手助けとなることを目指しています。 このシリーズが日本料理の発展・普及の一助となり、多くの人々の健康と喜びを導くことにな

WebサイトやスマホアプリのUIデザインで重要になるのは、構成です。前景要素があり、背景をぼかしたり、モーション振付、アニメーションのタイミングをずらすなど、アフォーダンスを示すためのUI/UXデザインのテクニックを紹介します。 奥行きを取り入れることで、デザインに深みと視覚的な興味を生み出すだけでなく、ユーザーの次の操作の助けにもなります。 Designing Depth by rauno 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ぼやけた背景 モーションの振付 わずかにずらすアニメーション アフォーダンスを示す 謝辞 はじめに ビジュアルデザインにおいてもっとも難しく、基本的な柱の一つが構成です。ストーリーや奥行きを伝えながら、三次元の世界を二次元（静止画）のフレームに収めるにはどうすればよいのでしょうか。こ

Curated collection of A/B test results from best-in-class apps Powered by

はじめに 言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。 このように、画像の一部が切り抜かれたようなデザイン。 このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。 augmented-ui - Integrate your apps with technology https://augmented-ui.com/ このライブラリ以外でこの名称を使用している例はまったく見当たりませんでしたが、共通認識を持つためにも、この名称がもっと広まることを願います。 なんでこのような形が Augmented UI なのかについて個人的に考えて

デザイントークンとは、UI要素のスタイルに関する値を定義したものです。デザイナー、開発者、プロジェクトマネージャーなど、プロダクトに関わる関係者がトークンを使用することで、コミュニケーションコストを削減し、正確な情報共有を実現できます。また、変化に強いコンポーネントを作成するためにも欠かせない要素です。 デザイントークンについて詳しく知りたい方はAdobe Blogに掲載されている以下の記事が参考になります。 デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo 今回は、Figmaのプラグイン「Tokens Studio for Figma」（デザイントークン管理ツール）の基本編について書いてみたいと思います。本記事は、2024年8月時点の無料版に基づいたレビューです。 tokens studio公式サイト トークンの作成・定義 Primiti