2017-06-03（土）にクリエイティブセンター福岡にて行われた「!important04」でのスライドです。
2017-06-03（土）にクリエイティブセンター福岡にて行われた「!important04」でのスライドです。
WebサイトやWebアプリ制作の現場においては、マルチデバイス対応が当たり前となりつつあります。そういった状況に今後どうアプローチしていくべきなのか？その新たな指針となる書籍が相次いで出版されました。 『これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装』 『CSS3&jQueryで作る スマートフォンサイトUI図鑑』 『コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション 』 この3冊のテーマは「モダンなアプローチを紹介する」という点で共通しています。そこで、この3冊の書籍出版を記念し、著者自らが登壇するセミナーイベントを開催します。新しいアプローチが求められる背景や、具体的な手法などを著者から直接聞けるチャンスです。当日は会場にて書籍の販売も行います。 日時：2015年5
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
公開日 : 2014年3月16日 カテゴリー : アクセシビリティ / ユーザビリティ Web サイトのユーザーインターフェース (UI) に「カルーセル (carousel)」と呼ばれるものがあります。文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり) をパネル状に横に並べて、Web ページの幅を超えて隠れている情報も「くるくる」と手繰り寄せて表示できる、という UI です。 Amazon の「この商品を買った人はこんな商品も買っています」が有名な例です。 Amazon (amazon.co.jp) における「この商品を買った人はこんな商品も買っています」のカルーセル また最近では、Web ページのメインビジュアルにカルーセルを採用している例もよく見られます。タッチジェスチャとの親和性が高い (左右方向へのフリックやスワイプで容易にパネルを切り替え
ネコメシ、今年の仕事始めに引越しをしまして、麻布十番から渋谷へと本社を移転しました。パートナー会社さんたちとの業務提携っぷりをいっそう深めるためでありまして、これについては、ほとぼりが冷めないうちに、なるたけ近日、別途ご案内差し上げるつもりです。 さて、本社の住所変更となりますと、いろいろ手続きが必要です。まず何といっても大事なのは登記簿謄本の住所変更ですね。あとは銀行やクレジットカードなど、主に決済関係のやりとりが発生するところには、速やかに変更の連絡をしておく必要があります。 ということで、ドメイン屋さんとかサーバ屋さんのほうも、住所変更やっとくかってことになりまして。銀行とかと違って、こういうところは全部オンラインで手続きできるから楽ちんですよね！ ということで、まず、ヘテムルさん。 お客様情報の入力フォームです。麻布十番の旧住所が入ってるので、これを変更します。 郵便番号の頭3桁を
carousel.md これはWeb Accessibility Advent Calendar 2013 14日目の記事です。 とはいえアクセシビリティの概念的な側面には詳しくないので小手先の内容になってしまい、そうそうたる記事の中で恐縮。 JSで表示を制御するカルーセルについて、非JSの環境で使うためにはどうすればいいか今一度考えてみました。 非JS環境での問題 非JS環境での一番の問題は、そもそもカルーセルは表示できる領域に対してコンテンツが多い場合に利用されるものなので、その中身をすべて表示するには領域が足りない、という点です。（あたりまえですが） そんなわけでできるだけ他のデザイン要素に影響しない、カルーセルの領域の中で収まる代替表現が必要になります。 作ってみたもの サンプル1 サンプル2 1つ目のサンプルではカルーセルのページを重ねて並べつつ、 マウスオーバーで広がるようにし
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
お金を借りたい。でも職場の同僚、友達、家族にバレてしまったらどうしよう？と不安で、なかなか申し込みができずにいませんか。 誰にもバレずにお金を借りる方法が知りたい！とお悩みの方へ、周囲に知られることなくお金を借りる方法を具体的に解説します。カードローンの在籍確認などバレたくない人が気になるポイントについてまとめましたので、ぜひ参考にしてください。 主婦の方は旦那さんに内緒で、バレずにお金を借りる方法を知りたいですよね。結論から言いますと、消費者金融カードローンなら家族はもちろんのこと、会社の人にもバレずにお金を借りることができます。その中でもおすすめの、「バレないカードローン」として口コミで人気の消費者金融カードローンを紹介します。 ただし、バレないようにするためにはいくつか注意して欲しいこともあるので、そのポイントについてもまとめています。 この記事のポイント カードローン利用がバレる原
2013年8月10日 多くのWebページでは、そのページが属するWebサイトの主要なコンテンツ/カテゴリーにアクセスするためのメニュー、俗にグローバルナビゲーション（以下「グロナビ」）と呼ばれるものがページの先頭近くに置かれています。もうだいぶ前から、そんなものは要らない（少なくとも「そこには」要らない）ということを自分は考えており、PCよりも物理的に小さな画面でWebを使うことが一般化した昨今においては益々、その思いを強くしています。 Googleなどの検索サービス経由でアクセスしたにせよそうでないにせよ、ユーザーの目的とするコンテンツは、あくまでもそのページ固有のメインコンテンツ（HTML5的にはmain要素内容）のハズ。であれば、それより前に余計な（メインコンテンツの一部を成さない）情報や機能はなるべく置かないほうが良い。スマートフォンの画面なんかで見たときに、そういった「余計な」情
Webアクセシビリティに関する情報発信を行っているWeb Axeのエントリー、About Carousels and ARIA Tabsでは、ページ内でカルーセルを使用する際にアクセシビリティの観点から注意すべき事柄が紹介されています。 記事を執筆したDennis氏は、カルーセルはそれほどひどいものではないとしながらも、彼が目にしたものにはアクセシビリティやユーザビリティを考慮せずに作成された物が多く、加えてモバイルデバイスで利用する際にも問題があるとしています。そのうえで、どうしてもカルーセルを使用しなければならない場合には、以下のようなことに注意したほうが良いと述べています。 カルーセルのアニメーションは利用者が開始できるようにする 利用者がカルーセルを一時停止できるようにする コントロールにはテキストによるラベルがあることを保証する 表示中のパネルとそのコントロールが、視覚的にも機械
WebデザイナーやWeb開発者のためのオンラインマガジンの.net magazineで、『When RWD goes bad』という記事が掲載されていました。著者のAlastair Campbell氏は、レスポンシブWebデザインがアクセシビリティにとって基本的には好ましいインパクトをもたらすとしながら、同時に注意すべき点もあることを指摘しています。 例に挙げられているのは、比較的小さなスクリーンにおいて、（より大きなスクリーンでは表示させていた）ナビゲーションバーを隠してしまい、ボタン操作によって表示・非表示を切り替えるようにするテクニック。レスポンシブWebデザインを採用したサイトで、割とよく目にするデザインパターンです。それが モバイルデバイス上でVoiceOverのようなスクリーンリーダーを使ってナビゲーションを操作する必要のある人 デスクトップであれモバイルであれ、スクリーンの表
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
公開日 : 2013年3月9日 (2014年5月26日 更新) カテゴリー : アクセシビリティ / ユーザビリティ プレースホルダー (placeholder) とは、入力フォームの記入欄 (テキストボックスやテキストエリア) の中に記述される、入力に関するヒントを示したテキストです。 HTML5 以降は、<input> 要素と <textarea> 要素で placeholder 属性が使えるようになり、HTML の標準仕様として、あらかじめ入力フォーム (記入欄) にプレースホルダーを書き入れておくことができます。 プレースホルダーの例 (Facebook)。検索キーワード入力欄に「友達、スポット等を検索」、投稿入力欄 (近況アップデート) に「今どんな気持ち？」という記述がある。 プレースホルダーをラベル代わりに使わない ところでこのプレースホルダー、記入欄のラベル (項目名) を
W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです（翻訳サイトより抜粋）。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければなら
去る1月22日、W3CのWAI（Web Accessibility Initiative）はIndie UI: Events 1.0の初めてとなる草案を公開しました。これはユーザーの意図をデバイスやプラットフォームに依存せずにスクリプトへ伝えるための仕様です。 「ユーザーの意図」を認識する必要性やメリットは草案で挙げられている例を見るのがわかりやすいでしょう（日本語訳は筆者による）。 例えば、最後のアクションを「元に戻す」というユーザーの意図をWebアプリケーション作者が横取りしたい場合、次の全てのイベントを「監視」する必要があります。 WindowsとLinuxではControl+Z Mac OS XではCOMMAND+Z いくつかのモバイル端末ではシェイク 直前のアクションを「元に戻す」という単一の標準化された要求を監視するほうがよりシンプルでしょう。 今回公開された草案には、操作を「
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
公開日 : 2012年11月26日 (2015年12月14日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 最近、パララックス効果 (parallax scrolling effect) を採り入れた、縦に長いウェブページが注目を集めています。以下の例のように、ページをスクロールしてゆくと、それに呼応して複数の視覚要素が個別に動くことで視差を作り出し、奥行き感や動きを演出する、というものです。 実際の動きを動画キャプチャしてみました。クローズドキャプション (字幕) で補足説明 (動きの解説) も用意してあります。 Anna Safroncik (http://annasafroncik.it) この効果をうまく用いれば、ユーザーの関心を惹きつける (エモーションを刺激する) ことができ、一定時間、ページに滞留してもらえることが期待できます。面白い視覚効果であれば、行きつ戻
世間が彼を見捨てても、私はキムタクの月9を見続けます。 どうもこんばんは Latin です。 今回はエントリーフォームの最適化についてです。 フォームって、ウェブサイトをローンチした後は、メンテナンスが全然されていない･･･って事は結構多いのではないしょうか？ 仕様が思いの外複雑であったり、分析・改善に費やす時間がなかったりと、理由は様々だと思うのですが、今回は最低限把握しておくべき項目をまとめてみました。 フォームの初期実装時やリニューアルなどに少しでもご参考になればと思います。 【入力サポート】 選択項目は、デフォルト値に配慮する 例えばですが、都道府県のプルダウン選択なら、メインターゲット層の多い都道府県にするというヤツです。「東京都」をデフォルトにしているところを良く見かけますよね。 必須アイコン「必須」の表記で目立つ色で配置する 「※」や「*」は不親切だし、伝わりづらいようです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
