公開日 : 2006年8月5日 (2011年1月11日 更新) カテゴリー : 情報設計 (IA) Webサイト設計の「5つの段階」で、Jesse James Garrett（ジェシー・ジェームス・ギャレット）氏の"The Elements of User Experience"を引き合いに出して、Webサイト設計には事前の準備（コンセプトワークを含むプランニング）が大切であると述べました。ここでいう「コンセプトワーク」とは、Webサイトのコンセプトを詰める作業を意味しますが、その際、どんな点に留意すればよいのでしょうか？ ひとことで言うと、使い古された表現ですが「5W1H」が役に立ちます。「いつ、誰が、どこで、どのように、なぜ、サイトを利用するのか...？」と突き詰めてゆくと、取りこぼしを極力防ぐことができます。以下、具体的に見てみましょう。 What サイトの目的や意義は何でしょうか？

HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame WebXRフレームワークの「A-Frame」を使えば、JavaScriptを記述することなく、HTMLにタグを追加するだけでVRコンテンツが作成できます。 次のデモはA-Frameを用いてt作成したオリジナルのVRデモです。中央の円状のカーソルを牛の3Dモデルに重ねることでアニメーションします。 ※パソコンではドラッグ、スマートフォンではジャイロセンサーが検知した傾きで視点が変わります。右下のアイコンをクリックすると、HMDで閲覧できるモードへ切り替わります。 サンプルを別ウィンドウで開く HTMLをマークアップするようにVRコンテンツを作成しよう VRコンテンツをHTMLのマークアップのように作成するには、JavaScriptライブラリ「A-Frameエー・フレーム」を使用します。「やっぱり

はじめに 技術本部Quality Assurance Engineering Unitの杉本です。 QAでPlaywrightを使ったE2Eテストを推進している者です。以前、SETチーム始動 Playwrightで実現した最初の成果 - Sansan Tech Blogという記事で、立ち上げと導入について書きました。この記事を公開してから約1年、私たちのチームであるSET（Software Engineer in Test）は、社内でのE2Eテスト自動化の取り組みをさらに加速させてきました。 現在では、Bill Oneから始まり、Sansan、Contract Oneに導入し、これからEightへ導入しようとしているところです。これで、Sansanが展開する主要プロダクトすべてにE2Eテスト自動化の基盤を整えることができました。 Playwright Agentsの紹介 今回ご紹介するのは

font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。 font-variantプロパティを適用するには、使用するフォントが対応するOpenType機能をサポートしている必要があります。サポートされていない場合、指定したプロパティが適用されないことがあります。 font-variant-east-asian font-variant-east-asianプロパティはその名の通り、日本語や中国語など、東アジアの文字の字形を指定できます。指定できる値はいくつかありますが、その中から2つを紹介します。 fon

ZennのWAFとCDNはそれぞれ Google Cloud の Cloud Armor と Cloud CDN を利用していました。DDoS対策の一環で、WAFはいろいろなサービスを試してみようということになり、Cloudflareを導入したところ、実際に検知・ブロックまでやってくれたことがあったので…

今年流行るのではと話題の「グラスモーフィズム（Glassmorphism）」。半透明のガラスのような表現手法は以前からありましたが、新しいmacOSのBig Surで取り入れられたこともあり、再び注目を集めています。 そんなグラスモーフィズムをUIデザインに取り入れる際に、あなたのヒントになりそうなポイントを挙げてみました。よかったら参考にしてみてください！ （元ネタは私の個人アカウントでツイートしていたものになります。） 1. 1pxの境界線を引く枠に1pxほどの細い線を取り入れることで、よりリアルになるだけでなく、オブジェクトとしての境目も際立たせてくれます。上図の例では、白の境界線を不透明度を少し落として利用しています。 2. 白のグラデーションや光彩を取り入れるオブジェクトを半透明にするだけでなく、上にグラデーションや光彩を重ねることで、また違った表情をみせてくれます。 3. シャ

CSSのtext-decorationって下線や打ち消し線を引くだけでなく、実は色々できたりします。あまり知られていないような気がしたのでまとめておきます。 普通に下線を引く場合 よく使うのは下線だったり、打ち消し線ですね。 .foo { text-decoration: underline; /* 下線 */ } .bar { text-decoration: line-through; /* 打ち消し線 */ }

この記事は、「Web UI 実装勉強会 #1」での同タイトルの発表をもとにしたものです。 ターゲットエリアを広げる工夫 リンクやボタンなどのUI要素を押したときに反応する領域のことをターゲットエリアと呼びます。素朴に実装すれば、その要素の視覚的なサイズがそのままターゲットエリアになります。 しかし場合によっては、これではあまり使い勝手が良くならないことがあります。要素自体のサイズが小さいと押すことができる領域も狭くなるので、その分正確性が求められて押しづらくなります。 そういうときには、視覚的なサイズよりも余分にターゲットエリアを広げるテクニックを使います。paddingプロパティを使って要素自体のサイズを広げつつ、レイアウトが崩れないように同じ大きさのネガティブマージンを適用します。 a { margin: -4px; padding: 4px; } 一方、プレーンなテキストリンクと違っ

Wordpressのブログの記事をベースにRAGを構築し、そのRAGを活用したアプリケーションとしてブログ上にQAボットを構築しました。次の課題は、新規記事の投稿時や既存記事の更新時に、どのようにVectorStoreを更新するかということになります。Wordpressには、記事投稿・更新時にフックできるPHP関数が用意されているので、それを用いて自動的にVectorStoreを更新するシステムを構築してみました。 Wordpressの記事更新時にVectorStoreも自動的に更新するシステム ブログに限らず、Webサイトというのは、常にコンテンツの追加や更新が発生します。RAGを用いたQAボットを提供している場合には、新しいコンテンツに関する質問にも適切に答えられるように、VectorStoreの更新も必要になります。 前回の記事で、Wordpress上でRAGを用いたQAボットを実装

こんにちは。株式会社 Sally エンジニアの @piesukeです。 私たちは、マーダーミステリーを遊べることが出来るアプリ「ウズ」と、マーダーミステリーを制作してウズ上で遊べることが出来るアプリ「ウズスタジオ」を開発しています。 私が最近やって面白かったマーダーミステリーは プライト・フライト です。 弊社は状態管理ライブラリに zustand を使用しています。今回は zustand を使ってブラウザストレージへの状態の永続化を簡単かつ高機能に実現する方法を解説します。 zustand とは Zustand は、React のためのシンプルで高速な状態管理ライブラリです。「状態」を意味するドイツ語から名付けられました。なぜドイツ語なのかは分かりませんがとてもセンスが良いですね。Redux のような複雑なボイラープレートを必要とせず、React のフックをベースにした直感的な API

Chrome 141 ベータ版に追加されたChromeに内蔵されたAIを使用した文章校正機能（Proofreader API）が良さそうだったので試してみました。 Proofreader APIとは Proofreader APIは、ユーザーが入力した文章を校正する機能です。具体的には文法や綴りの間違いを検出し、検出された箇所とその修正内容や修正された文章を出力することができる機能です。これはGoogle I/O 2025で紹介されたGemini NanoというChromeに内蔵されたAI API機能の一つで、 Android、ChromeOS、Linux、macOS、WindowsのChromeで利用できます。 Chromeに内蔵されてるので、もちろんオフラインでも使用できます。 試してみる ざっと検証用ファイルを作成して試してみました。 まずは英語の文章 完璧に修正されていますね。 次

はじめに Chrome 128 で WebAuthn で Hints が使えるようになったということで、使ってみたメモです。 環境 macOS Sonoma 14 Chrome 128 Hints について Hintsとは、WebAuthnでパスキーを作成するときのオプションです。以降は PublicKeyCredentialHints とします。 今までは、パスキーを作成する認証器を制限したい場合、AuthenticatorAttachment を使用してたんですけど、加えてPublicKeyCredentialHints を使うことができるようになった、とのことです。 パスキーを作成する場所はたくさんある 最近はとにかくいろんなところにパスキーを作成できるようになってます。OSやブラウザ、使っている拡張機能などによっていろいろですが、例えば私の環境の場合、以下の場所にパスキーが作成でき

こんにちは🌤 ソーシャルデータバンクのデザインチームでインターンをしている河合です。 普段の業務では、弊社のプロダクトであるLinyのUI改善やデザインシステム構築に関する業務、さらに社内で使うシステムのUIデザインをしています！ この記事では、私が他職種（主にエンジニア）にとって見やすいFigmaでのデザインデータ作成を行うために、日頃心がけていることについてお話しできたらと思います。 前提：UIデザインに従事するのであればマークアップの知識はあったほうがいい 「デザイナーはコードも理解できたほうがいいのか？」という議論は業界でたくさんあるかと思いますが、個人的にはデザイナーもエンジニアリング領域の知見は持っておいたほうがいいと思っています。 なぜならデザイナー（特にこの記事でいうデザイナーはデジタルプロダクトのUIデザイナーを指す）は、「絵を描く人」ではなく「開発者」である からです

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

ウェブとリアルタイム通信は、もはや切り離せない関係となりました。 ロングポーリングやそれを応用したComet、チャンク通信を利用したServer-Sent Event、新しくはWebSocketという技術は、 いずれもリアルタイム通信を実現するために先人たちが築き上げてきた礎です。 それらの技術の中に、次は WebTransport が加わろうとしています。 WebSocketとTCP WebSocketという偉大な発明は、ひとつの時代を作りました。 双方向性のリアルタイム通信がもたらした恩恵は計り知れません。 しかし一方で問題もありました。 WebSocketはTCP上に構築されたプロトコルであり、当然ながらTCPの特性による制約を受けます。 顕著な例としてTCPの到達保証や順序保証があります。TCPにおいてはパケットが途中でロスした場合は再送制御が行われます。 また、パケットには番号が

IETFでも、WebにおけるAIエージェント(クローラ)の議論がいくつかあります 1つ目のテーマは、robots.txtの拡張など、AIクローラの制御仕組みです。AI Preferences WGでは、コンテンツの取り扱いについてAIを制御できるように議論をしています。いくつかの提案が出てきてはいますが、引き続き議論が進んでおります。 2つ目のテーマは、WebにアクセスするクローラおよびAIエージェントを認証・識別する仕組みです。今まではUser-Agentで識別していましたが、署名などを利用して適切に識別したいという背景です。Cloudflareらが『HTTP Message Signatures for automated traffic Architecture』 などを提案しており、IETFでもWeb Bot Auth Bofが立ち上がっています。 Paid Web Crawlin

WEBソリューション課の田畑です。 現在Figmaというデザインツールを使ってUIデザイン（ウェブサイトの見た目や使い勝手を設計すること）や画面デザインなどを行なっています。 Figmaでデザインを作成後に、それを元にHTMLとCSSでwebページを作成しています。 もっと効率的にページ作成を行いたいと思ったので、Figmaのデザイン画面をHTMLやCSSへ変換する方法について調べてみました。 Figmaとは FigmaのデザインからHTML/CSSへ変換する方法 1.Figmaの開発モード(Dev Mode）を使う 2.プラグインを使ってデザインをHTML/CSSへ変換する 試したプラグイン プラグインの使い方 プラグインで変換した結果 3.AIにFIgmaデザイン画像を読ませてHTML/CSSへ変換する まとめ Figmaとは Figmaとはウェブ上で使えるデザインツールです。 Fig

Hono Advent Calendar 2024 4 日目の記事です。遅れてすみません！！！！！！！！！！！！！！！！！！！！！ 去年はかけなかったけど今年は書けたのでよかったです.......... TL;DR Cloudflare Images を使えば、Next.js の next/image による画像最適化を再現できます。さらに、Cloudflare Images の「blur」オプションを利用することで、base64 プレースホルダー画像をサーバー側で生成する必要がなくなり、処理が効率化されます。コスト面でも、Vercel の画像最適化機能（$5/1000 枚[1]）に比べ、Cloudflare Images は大幅に安価（$0.5/1000 枚[2]）です。 デモ はじめに この記事は @cloudflare/next-on-pages や @opennextjs/clou

Automattic/wordpress-mcp - Github WordPress MCP を使うことで、AI との自然な対話で WordPress を操作できるようになります。AI エージェントを介することで、管理画面で何度もクリックを重ねて行わなければできない作業や複数の作業を連続して実行(バッチ処理)できるようになります。 開発元は WordPress.com を運営する Automattic 社。JWT 認証による堅牢なセキュリティシステムと詳細な監査ログ機能により、企業レベルでも安心して使えそうです。 WordPress MCP を使ってできること WordPress を API (JSON-RPC 2.0) 経由で操作できるようになります。 投稿の作成、編集、削除 コメントの取得・承認・削除 メディアのアップロードと取得 ユーザーの作成、更新、削除 プラグインの管理 (イン

2025年6月17日、FigmaはPayloadというCMSを提供する企業を買収しました。Figmaは、なぜCMSを買収したのか、なぜCMSの中でもPayloadなのかについて考察してみたいと思います。 Figmaのアナウンスはこちら Payloadのアナウンスはこちら 最近のFigmaの動向 Figmaは、2025年5月7日に開かれたConfig 2025で、Figma Sitesという新しい機能を発表しました。Figma Sitesとは、Figma上でデザインしたWebサイトをそのまま公開できる機能で、従来行なってきたデザインをもとにフロントエンドのコーディングを行ないWebサイトを実装するという一連の作業が不要になります。Figmaは単なるデザインツールではなく、ノーコード開発ツールへと進化を遂げようとしているわけです。 ただし、Webサイト開発と一口に言ってもその規模は大小様々です