Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
なぜ、的外れなのでしょうか？ それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた
Web制作に超便利なおすすめ無料ワイヤーフレームツール4選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
無料で便利なワイヤーフレームツール4選 POP https://marvelapp.com/pop/ スマートフォンから手書きのワイヤーフレームを撮影して、ページとページを紐付けることができるアプリです。 こちらの動画を見ていただく方が、言葉でご説明するより早そうです。 スマートフォンサイトのワイヤーフレームはどうしても縦長になりがちな印象がありますが、このように実際のスマートフォンから確認ができれば、そこまで気にならなくなるかもしれません。プレゼンテーションにもオススメです。 Justinmind Prototyper http://www.justinmind.com こちらはインストールして使用するツールです。 インストールすると、最初にデバイスを選択する画面がポップアップで表示されます。 次に作成するサイズを選択します。 するとこのような画面になります。 あとは必要な要素を左からド
Webサイトガイド類の整備 | 政府CIOポータル
内閣官房情報通信技術(IT)総合戦略室では、各府省等のWebサイトが利用者にとって、より使いやすいWebサイトになるよう、デザインポリシーやアクセシビリティの統一等、Webサイトの構築や見直し時に留意すべき事項を以下の各種ガイドに示しています。 各種ガイドの内容については、Web関連技術のトレンドやニーズ等に応じて、定期的に改善と拡充を行っていきます。 日本語版Webサイトガイド 名称 日本語版Webサイトガイド バージョン 1.1 対象 各府省等 概要 各府省等がWebサイトを構築又は見直しする際のデザイン、府省横断的に情報収集を容易にするためのタグの統一、利用者視点での情報提供等を行うための留意すべき事項を示したもの。 英語版Webサイトガイド 名称 英語版Webサイトガイド バージョン 1.0 対象 各府省等 概要 英語版のWebサイトを対象に留意すべき事項を示したもの。 政策目的別
国税庁Webサイト、全URL変更で混乱 サイト内検索も役立たず、「無限ループ」状態に
国税庁のWebサイトがリニューアルされ、ほぼすべてのURLが変わった。旧URLはすべてトップページにリダイレクトされているが、トップページからサイト内検索を使っても旧URLが表示されるため、トップページに「無限ループ」してしまう状態だ。 国税庁のWebサイトが3月31日にリニューアルされ、トップページを除くほぼすべてのURLが変わった。旧URLにアクセスすると、国税庁のトップページにリダイレクトされる仕様だ。トップページにはYahoo！検索を使ったサイト内検索機能があるが、4月2日午後3時現在、これで検索しても過去のURLがヒットし、トップページにリダイレクトされてしまうため、「トップページの無限ループ」「目的のページにたどり着けない」と混乱が起きている。 国税庁広報広聴室は「検索が現状、機能していない状態だ」と認め、検索エンジン側にURL更新のリクエストを出しているという。検索エンジンが
無料利用でも人数制限なくチーム内で共有可能なサイトマップを作れる「Flowmapp」を使ってみた
ウェブサイトを設計するとき、必ず考えないといけないのがサイトマップです。ウェブサイト内のページを優先度の高いものと低いものに分けて、ユーザーがあまり多くの操作をせず、必要なページにアクセスするために、ページをどのように配置するかを書きます。サイトマップの出来次第では、ユーザビリティが良いサイトになって、リピーター増えることも。しかし、大規模なウェブサイトを作るとなれば、一人では大変。「Flowmapp」を使えば、サイトマップを作りつつ、チーム内で共有も可能とのことなので、試しに使ってみました。 FlowMapp is UX planning tool for creating a visual sitemaps https://flowmapp.com/ ◆登録 「Flowmapp」にアクセスし、「Get your free account!」をクリック。 「First Name」に名前、
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
Wirify – The web as wireframes
Wirify bookmarklet lets you turn any web page into a wireframe in one click ← Drag the link on the left to your browser Booksmarks toolbar, then go to a website and click "Wirify by Volkside" to wirify the page! I agree to the terms of service by accessing, installing or using Wirify Wirify is free, easy and fun to use Step back and see the big picture of a web page Focus on page structure by hidi
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
Sneakpeekit Sketch Sheets
Catch insights, sketch ideas.Printable Wireframe Templates for Designers Planning apps or websites is not always completely digital: sometimes you may need pencil, paper and some good sketch sheet templates to speed up your creative process. Precision GridMultipurpose grid with column marks A generic A4 grid template with column marks ideal for website wireframes as well as icon, font and logo des
GoogleがプロトタイピングツールPixateを買収。無料化される。オススメ。 | fladdict
Googleが、ローカルベースのプロトタイピングツールPixateを買収した模様。以後、Pixateアプリは無料となり引き続き開発が続けられるようです。 2013年頃、Pixateに$600払ってた俺は泣いた。おめでとうございます。 Invisionを主流に百花繚乱の分断化で割と困っていたプロトタイピング業界。Googleがこの分野に手を出したことで変動は起きるのだろうか。 これがプロトタイピングツールの決定版になるとよいですね。高性能だし無料だし。クラウド版も$5だし。 日本でプロトタイピングサービスばパッとしない究極の問題は、サービスがオンラインのことなんですよね。SI系の人たちは「セキュリティ的な事情でオンラインの共有サービスを使えない」という事情がありました。Pixateはローカルアプリなので、その辺の心配をする必要がないのがポイントですね。そのうち大手SIとかでもこういうツールが
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
ツール不要でもちろん無料！私がやってるブログ用画像の作り方を紹介します - ラブグアバ
ブログを読みやすくするためにイメージ画像をつけろ！というのはよく言われてることです。 私もとりあえず記事の先頭に表示する用の画像はいつも作成して挿入するようにしています。 以前はどんな画像にしようか…と頭を悩ませていたものですが、最近ではフリー画像を集めたサイトもいろいろ出てきて便利になりましたよね（私が知らないだけで昔からあったかなｗ）。 でも認知度が上がってくると避けられないのが「あーこの写真、別のブログでも見たなあ…」という、他のサイトと被っちゃうこと。 ぱくたそさんで扱ってるOZPAさんの画像なんか、それはもう至る所に使われてますよね。 まあそれは別にいいんですが、同じ画像でもちょっと一手間かけて加工してやると「お、なんかいい感じ！」と思うのは私だけでしょうか。 というわけで、今回は私がやってる「ブログ用画像の作り方」をご紹介したいと思います。ツールなどをインストールする必要は一切
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
たった1年でPV数を10倍以上に伸ばした「東洋経済オンライン」は、どれだけスゴイのか？ - 空気椅子
2013-11-23 たった1年でPV数を10倍以上に伸ばした「東洋経済オンライン」は、どれだけスゴイのか？ メディア研究 Web メディア運営 PV数が500万から5000万超に 東洋経済オンラインのPV（ページビュー）数が伸びているという記事をここ半年の間で何度か目にした。今年の3月時点で5000万PVを超えているとのことだったので、今はもっと伸びている可能性は高い。以前は、500万PV程度だっというから、10倍以上の急成長だ。 東洋経済オンラインは、昨年11月に編集長が代わり、サイトも一新。リニューアル後の今年3月には、PCとスマートフォン（スマホ）を合わせて月間5300万PVを突破した。 なぜ東洋経済オンラインは4カ月でビジネス誌系サイトNo.1になれた？編集長に聞く - ビジネスジャーナル 月間5300万PVなんて、個人ブロガーからすれば夢のまた夢の数字。Googleアドセンスだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Website Explorer
Gridulator: Make pixel grids, lickety-split
ゲゲゲのハンズ - 東急ハンズ
