各OSの標準搭載フォント一覧へのリンク集
最近あらためてウェブサイトの本文の文字の読みやすさの大切さを実感していてfont-familyの指定を見直しています。そこで、まずは基本に戻って各OSに標準で搭載されているフォントの一覧を探してみたんですが、けっこう情報を見つけるのに苦労しました。 ということで、今後のためにWondows、Mac、iOSの標準搭載フォント一覧へのリンク集を作ってみました。Androidは一覧が見つけられず、基本情報だけ載せておきました。 おすすめのfont-familyの指定は、ありがたいこんな記事 やあんな記事 やそんな記事 で詳しく説明されてるんですが、自分でも特定のプロジェクトにあったfont-family指定ができるように、各OSの標準搭載フォント一覧にはさくっとアクセスできるようにしておきたいです。 ついでに、各OSのバージョンごとのマーケットシェアへのリンクもはっておきました。 目次 以下はペ
解像度を指定してフルページのスクリーンショットを撮る方法
ウェブサイトのフルページのスクリーンショットを撮るとき、普段はFirefox Screenshotsを使っています。でも、これだと高解像度のスクリーンショットが撮れないんですね。 最近はDPR（デバイスピクセル比）が2倍、3倍といった高解像度のスクリーンも多いので、そういったスクリーンでもくっきり表示できるように、高解像度のスクリーンショットが必要な時ってあるんですよね。印刷物にスクリーンショットを使いたい時にも必要です。 ということで、探してみたら、なんとFirefoxにそんな機能がありました！ Firefox、いいですよ。おすすめですw Firefoxで解像度を指定してフルページのスクリーンショットを撮る方法 Firefoxのウェブコンソールを開く。Macでは⌘ + Option + K（WinではCtrl + Shift + K / メニューのツール → 開発ツールからもアクセスでき
WebP画像の使い方
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
macOS CatalinaにするとVirtualBoxで発生するWindows 10のクラッシュがアップデートで解消
macOSをCatalinaにアップグレードしたらVirtualBox 6.0.12でWindows 10を起動するとクラッシュするようになってしまいました。2019年10月17日10:00現在、このバグが修正された6.0.14が公開されているのでインストールすると良いかもしれません。僕の環境ではアップデートをインストールしたら問題が解消されました。いまのところ問題なく動いています。 Downloads – Oracle VM VirtualBox Catalinaへのアップグレード後に発生したVirtualBox 6.0.12のバグ 僕の場合、macOSをCatalinaにアップレードしたらVirtualBox（6.0.12）自体は問題なく起動するのですが、Windows 10を起動してウィンドウを切り替えたりリサイズしようとすると、すぐにクラッシュしてしまう症状が出ました。 バグとして
ウェブ制作に便利な各ブラウザの開発ツール「キャッシュ無効化」機能
コードを書いて、ブラウザでチェックして… 画像を書き出して、ブラウザでチェックして…という作業をしていて、ブラウザのキャッシュが残っていて困ったことってありませんか？ そんな時に便利なのが開発ツールのキャッシュ無効化機能です。Firefox、Chrome、Safari、Microsoft Edgeのそれぞれの開発ツールに搭載されている機能です。ちょっとしたことなんですけど、知っているのとそうでないのとでは作業効率がだいぶ変わってくるんですよね。 以下、各ブラウザの開発ツールで設定を変える方法です。 Firefoxの開発ツールのキャッシュ無効化 Firefoxの開発ツールで「ネットワーク」タブを開くと「キャッシュを無効化」というオプションがあります。ここにチェックを入れるとツールボックスが開いている時はキャッシュが無効化されます。 開発ツールの設定からオプションを変更する 開発ツールの設定画
アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）
先日、ふと「アクセシビリティを考慮したデータ・テーブルのコーディングってどうやるんだっけ？」と、思ったのでやり方をまとめてみます。これまでもセマンティックなコーディングはしていたものの、セマンティックス以外に注意すべき点はあるのか？データ・テーブルはスクリーンリーダーでどのように読まれるのか？が気になったので、調べて整理してみました。 主にWebAIMの「Creating Accessible Tables 」とWAI Web Accessibility Tutorialsの「Table Concepts 」という2つのサイトを参考にさせてもらいました。 ちなみに、データ・テーブルとはデータを表形式で表示する以下のようなテーブルのことを言います。
色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利
テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guidelines（WCAG） に準拠した色のコントラストになっているかすぐにチェックができます。キーボード・ショートカットを設定できるので手軽に色のコントラスト比の確認ができてかなり便利です。 こんなツールです ツールバーのアイコンをクリックするとアプリが出てきます。 文字の色と背景の色を選択するとWCAGの評価基準であるAA、AA+、AAA、Failのいずれかの判定を表示してくれます。評価と合わせてコントラストの数値も表示してくれます。各スコアの意味はアプ
JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた
オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては81%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。91% → 85%の方が85% → 81%より圧縮率がいいんですね。 サンプル画像 上の表にある「sampleXX.jpg」の画像をまとめて圧縮したファイルを用意しました。ご参考までに以下からダウンロードどうぞ。 サンプル画像をまとめて圧縮したファイル（ZIP / 3.4MB） ちなみに、表で91%と81%になっているのはImageOptimで設定できるのが、なぜかその数値だったからです。90%、80%には設定できませんでした（v1.8.0）。 職場で作業するときのプロセスはだいたい以下のような感じです。 PhotoshopやAffinity Desi
iPad向けのイラスト・UI設計・グラフィックデザインツール「Affinity Designer for iPad」が最強かも
iPad向けのイラスト・UI設計・グラフィックデザインツール「Affinity Designer for iPad」が最強かも なんとAffinity DesignerのiPad版 が公開されました！ Mac版を好きで使っていて、このブログでも何度か使い方を紹介したことがあるグラフィックデザインツールです。 早速iPad版を購入して使ってみたんですが衝撃を受けました。Affinity Designer for iPad まじでやばいです。操作性も良く、ウェブ制作向けの機能も充実していて、iPad用のベクターイラストツールとしては最高レベルだと思います。 ということで、7月25日（って、明日じゃん！）7月31日までの割引キャンペーン（延長されました！）が終わらないうちにサクッとご紹介します！ イラスト・UI設計・グラフィックデザインに使える万能ツール クリスタ（CLIP STUDIO PAI
ウェブ制作者のための「はじめてのiOS VoiceOver」チュートリアル（初級編）
先日Twitterでアンケートをしたらウェブ制作に関わる方々でスマホの読み上げ機能を使ったことがある方が少ないとのことだったので、はじめてiOS VoiceOverを使うときに困らないように、スクリーンリーダーの超初心者の僕がハマったところや難しいと感じたところをふまえて、チュートリアル的に使い方をまとめてみます。 iOS VoiceOverを初めて使う方のお役に立てれば幸いです。順を追ってiOS VoiceOverに一緒にチャレンジして行きましょう！ 中級編（ローター編）も書きました！ 目次 以下、ページ内のセクションへのリンクです。 VoiceOverをショートカットに入れておく VoiceOverがオンの時にロックスクリーンを解除する方法 iPhoneの画面が突然真っ暗になってしまったら VoiceOverでページを読んでみる ページの最初から続けて要素を読み上げる ページをスクロー
スマホシフトとUIデザインが情報消費に与える影響について思うこと
日経新聞 にはスマホやタブレットで新聞を読める2種類のアプリがあるんですが、UIが違うとこんなにも情報への印象が変わるというのがよくわかるいい例になっています。そして、こういったレイアウトやデザインの違いがユーザの情報消費に与える影響を紐解いておくと、今後のマルチデバイス向けの制作に役に立つと感じています。微妙なニュアンスだったりするんですけどね。 ということで、今回は日経新聞の2つのアプリに見る情報消費の違いと、それに関連して、スマホシフト がもたらすユーザの情報消費への影響について書いてみます。 では早速、2つのアプリの紹介から行ってみましょう！ 日本経済新聞の2つのアプリ 紙面ビューアー 紙面ビューアー は見た目が紙面と同じなので、紙で読むのと同じ感覚で使えます。 これは2017年2月12日の朝刊をiPadの紙面ビューアーで見たときのキャプチャです。大きさ以外は紙面そのもですね。タッ
RightFontで変わる。Macのフォント選びの新しいワークフローの可能性
SketchとかPhotoshopでのフォント選びって、あまり使い勝手が良くないですよね？ フォントのドロップダウンは小さくて見にくいし、日本語フォントは英語フォントの中から探し出すのに一苦労です。たとえばSketchの場合もドロップダウンが小さくて。。。フォント選びに無駄に時間を浪費している気がするのは僕だけでしょうか？ そんなデザイナーのストレスを解消してくれそうなのが、Mac向けフォント管理ツールの「RightFont for Mac 」です。$39.95（約4,500円／2016年3月1日現在）とちょっとだけ値は張るんですけど、多機能でサクサク動くので、メリットを考えたらその価値はありそうです。ただ、残念なことに重要な機能でうまく動かない場合があるので注意が必要です。 RightFontの便利機能 気に入ったのは以下の機能です。 SketchやPhotoshopにドラッグ＆ドロップ
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。 特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。 スタイルガイド 企業や組織のブランドイメージを統一するためにまとめられたガイドライン ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を
アイコンフォントとアクセシビリティ： ディスレクシア（失読症）向けフォントでの表示問題について
「Death to Icon Fonts（アイコンフォントに死を） 」というSeren D さんのスライドプレゼンテーションで、アイコンフォントではディスレクシア向けのフォントで問題が起こるし、他にも課題があるので使用は控えたほうが良いですよ、ということを訴えています。A List Apartブログ で紹介されていて気になったので、どんな問題が起こるのか確認してみました。 どんな問題が起こるのか 「Death to Icon Fonts 」では、ディスレクシア（日本では失読症、難読症、読字障害などと呼ばれている）向けに作られたフォント「OpenDyslexic 」で問題が起こることが紹介されていて、アイコンフォントにはその他にもアクセシビリティ上の問題がいくつかあるため、使わないほうが良いと勧めています。 これはフォントを強制的にOpenDyslexicなどのディスレクシア対応のもので表示
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
マルチデバイス時代の制作手法の選び方
遅ればせながら、あけましておめでとうございます。 昨年10月後半から職場での環境が大きく変わったこともあり、ブログは放置状態で、ソーシャルメディアでの投稿すらあまりできませんでした（言いわけ）。 2014年も1月も後半に差し掛かってしまいましたが、今年もRriverを、どうぞよろしくお願いします。役に立つ情報を掲載することを目標に、今年も1年頑張ります。 2012年5月に「レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと」という記事を書いてから、はやくも1年半以上が過ぎ、RWDの本を出してから約1年もの年月が過ぎました。2014年のはじめということもありますし、これから何回かに分けて、これからのレスポンシブWebデザインについて考察をまとめていきたいと思います。 今回は、以下の2つについて： 「レスポンシブWebデザイン」はどうなる？ 制作手法を選択する際の判断基準とは
レスポンシブWebデザインで使えそうな2つのテーブル実装例
以前の投稿で書きましたが、レスポンシブWebデザインでサイトを制作する際の課題の一つは、データの多いテーブルの見せ方です。その課題をクリアする「この方法なら行けるかも！」と思えるものが2つほどあったのでご紹介します。 どちらも甲乙つけがたい良い実装例で、技術的な問題がなければレスポンシブなテーブルの代表的な実装手法になっていくのでは？と思っています。 ドロップダウンでカラムの表示・非表示を選択 まずは、レスポンシブWebデザインの情報を探していると良く出てくるボストンの制作会社、Filament GroupのMaggie Costello Wachsさんが考案したものをご紹介します。オープンソース（GPL License）で、コードは自由に使って良いようです。 以下の画像のように、ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由
レスポンシブWebデザイン（RWD）で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要？」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。 モバイル版ブラウザの「デスクトップ表示」機能 たとえばDolphinやChromeといったモバイル向けブラウザにはデスクトップ版を表示するための機能が用意されています（FirefoxやMobile Operaにもついてるそうです）。わざわざこういうった機能が装備されているということは、これがユーザに求められる機能だからだと思います。（以下はiPhone
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
さすが、Apple！刷新されたウェブサイトで見つけた3つのこだわりとは？