この記事では、日本語が使用できるWebフォントを10個厳選して紹介しています。有料・無料のどちらも紹介しています。英語のWebフォントと比較して、日本語のものは文字数の多さからまだまだ使用に課題が残りますが、サブセット化等をしてWebページの表現を広げることが可能です。無料のWebフォント※すぐに利用できるWebフォントにはHTML・CSS内で使用するコードも一緒に記載しています。１. Noto ……
一枚の絵は、千の言葉に匹敵する価値がある。この格言は、アイコンについて語るとき、より大きな意味を持ちます。「保存」「開く」「印刷する」などの言葉を聞けば、すぐにそれらのアイコンを思い浮かべられるでしょう。「ハンバーガーアイコン（メニューを示す三本線のアイコンを、ハンバーガーに見立ててこう呼ぶ）」も、ハンバーガーそのものほど有名ではありませんが、最近よく見るようになったアイコンの一つです。ところが、……
こんな場面を想像してみてください。 皆さんはテレビゲームをしていて、他のキャラクターとやり取りをしたいと考えています。しかし、普段のようにマウスを使ってやり取りをするのではなく、代わりに特定のキャラクターの上で目を閉じることで、そのキャラクターから反応をもらえるとしたら？ そんなことができたら素晴らしいと思いませんか？ アイトラッキングによる視線の追跡が、マウスの代わりになるのです！ このインタ……
あなたは「サービスの価値は、そのサービス自体が物語るものだ」と考えていませんか？ 映画『フィールド・オブ・ドリームズ』に“build it and they will come”（作ってしまえば、結果は後から付いてくる）という言葉が出てきますが、たいていの人はそのように考えているため、サービス開発に莫大なコストをかけても、そのサービスに関するメールにはほとんどコストをかけません。また、メールを送っ……
スタンプ感覚で簡単に使えて、あらゆる表現を可能にしてくれるPhotoshopのブラシ。グリーティングカードやポスター、webサイトなどあらゆるところで活躍してくれそうな、雲っぽいブラシ10選をご紹介します。24 Clouds見本のように、まるで写真のようなリアルな雲が再現できるブラシ24種類のセットです。バリエーションが豊富なため、春夏秋冬、晴天、曇天などイメージに合わせて色々と使えそうです。商用……
ファミコンの初代スーパーマリオブラザーズには優れたUXを作りあげるためのヒントがたくさんあります。 今回の記事では、スーパーマリオの１－１に散りばめられた「ユーザーに新しいことを自然に覚えてもらう工夫」を紹介します。 新規コンテンツの「色々覚えるのめんどくさい問題」 新しいコンテンツでは、ユーザーにいかに使い方や遊び方を理解してもらうかが非常に大きな課題です。 クリエイターは「新しくて誰も見たこと……
メアリーはバスルームの改修に使う水道の蛇口を探すためにThe Home Depotの配管関連のページを探しましたが、見つけることができませんでした。そのページには様々なパイプやバルブ、温水器などとその商品の使い方を説明するビデオはありましたが、彼女の探しているものはありませんでした。メアリーは失望しながらそのページのフッターに辿り着き、The Home Depotのすべての商品部門のリストを見つけ……
<header>タグは、イントロダクションやナビゲーショングループなどを表す際に、セクションの先頭で利用するものです。今回は、HTML5における<header>タグの使い方をご紹介します。HTML5における<header>タグの使い方<header>は新しいセクションを作りませんが、セクションの先頭になります。文書のヘッダ情報を記述する<hea……
<head>タグは、文書のヘッダ情報を表す場合に使用するものです。今回は、HTML5における<head>タグの使い方をご紹介します。HTML5における<head>タグの使い方<head>タグは、文書のヘッダ情報を表すのに使用します。ヘッダ情報とは、文書に関する情報、<title>,<style>,<meta>などの……
<h1><h2><h3><h4><h5><h6>のタグは、見出しをつける際に使用するタグです。頻繁に使用するものですし、簡単で便利なので多用する人も多いと思います。だからこそ、しっかりと正しい使い方を知っておく必要があるでしょう。今回は、HTML5における<h1>-<h6>タグの使い方をご紹介します。H……