Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
なぜ、的外れなのでしょうか？ それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた
2017年10月の、これだけは押さえておきたいWeb関連の動き
Webニュース 2017年10月の、これだけは押さえておきたいWeb関連の動き Thursday, November 2nd, 2017 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 正式版がついにリリース！CCライブラリで画像もPhotoshopと連携 #AdobeMAX #AdobeMAXJP | Adobe Creative Station Macだけでなく、Windows版も正式版がリリース。名前は Adobe Experience Design から Adobe XD に変わったそうです。 Adobe XD CCに今後追加される機能は？#AdobeMAX #AdobeMAXJP | Adobe Crea
海外企業のWEB版アニュアルレポートの調査で見えた4つの特徴 - DESIGN JOURNAL - 株式会社モンスターラボ
海外のWEB版アニュアルレポートを調査してみた こんにちは、A.C.O.編集部です。A.C.O.ではR&Dの1つとして、定期的にグローバル環境の市場調査・研究を続けています。そのなかで最近は、海外のWEB版アニュアルレポートがさらに進化してきたな、と感じたので簡単に調べてみました。 そもそも、アニュアルレポートって何のためのもの？ アニュアルレポートは、企業における前年度の経営戦略や事業概況を報告するための年次報告書です。ここ数年では、CSR活動報告を取り込んだ「年次統合報告書」とする企業も増えています。そして、もっと多くの人に企業の価値を伝えるために、特に海外企業のアニュアルレポートのWEB化が加速しています。ここからは実例をもとにアニュアルレポートの特徴を見ていきたいと思います。 かなりクリエイティブな海外企業の事例 事例01：信念や情熱が伝わりやすいビデオメッセージ 海外では、多くの
プロトタイプやワイヤーフレーム作成ツールまとめ | WordPressやWebデザインなど紹介 Ocadweb
Webサイトやアプリの制作をするときには必須となるプロトタイプやワイヤーフレーム。 WEB制作を依頼するときにワイヤープレームありますかと聞かれることがあると思います。 Web制作依頼する前に、サイトの内容やイメージするデザインサイトやこういう風サイトにしたい、そしてワイヤーフレームを作っておくと話が早いと思います。 もちろんパワポでも、Keynoteでも作ることができます。 今回はプロトタイプやワイヤーフレームを作成するときに便利なプロトタイプやワイヤーフレーム作成ツールをご紹介します。 まずは「プロトタイプ」や「ワイヤーフレーム」について。 プロトタイプやワイヤーフレームとは プロトタイプとは ページを構成する要素や機能だけでなく、ページ間の遷移やクリックしたときの動きや操作感などの確認ができるものをプロトタイプ（試作品）と言います。 本格的な制作に入る前にプロトタイプを作成することで
大塚製薬株式会社 Otsuka Pharmaceutical
病気を治すこと。健康を守ること。 大塚製薬は「人々の健康をカラダ全体で考える」 トータルヘルスケアカンパニーです。
既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針
アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基本的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基本とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ
2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と
著作権とは？Web担当者、デザイナーが知るべき著作権
ferret編集部：2015年8月18日に公開された記事を再編集しています。 Webサービスを運営していると、必ずぶつかるのが著作権の問題です。 著作権の侵害を侵していないのか、また自サイトの著作権を侵されていないのか、なかなか取っ付きづらいイメージを持っているのではないでしょうか。 しかし、基本的なことをしっかりと理解すれば、意外ととっつきやすいものでもあります。 今回は、著作権の基礎をご紹介します。 1. 著作権とは 著作権とは、著作者の保持する権利の一つで、著作者の保持する権利には「財産的な権利である著作権」と「人格的な権利である著作者人格権」があります。 Web担当者やWebデザイナーが気にすべき著作権は、「財産的な権利である著作権」を指しています。 1-1.著作者人格権 著作者人格権とは、著作物に存在する著作者の人格を保護する権利。簡単に言えば、著作物を公表する際の時期、形式、方
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
Google、マテリアルデザインWebサイト作成キットを無償公開
米Googleは7月6日（現地時間）、マテリアルデザイン仕様のWebサイトを構築するためのツールキット「Material Design Lite」を公開したと発表した。 基本的なCSS、HTML、JavaScriptのコンポーネントとテンプレートで構成されており、公式サイト（これもMaterial Design Liteで構築されたようだ）からダウンロードできる。 マテリアルデザインとは、Googleが昨年6月に発表したモバイルOS「Android 5.0 Lollipop」から採用しているデザインコンセプト。シンプルで直感的なユーザーインタフェースで、ディスプレイサイズに応じてデザインが最適化されるのが特徴だ。 Material Design Liteの「Lite」には、依存性の少なさ、コードサイズの小ささ（27Kバイトに圧縮されている）、手軽にインストールして使えること、などの意味が込
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
HTMLメールワークフローに役立つGruntプラグイン | チャットワーククリエーターズブログ
こんにちは、先日Web開発チームに加わりました西口です。 HTMLメールの制作って煩わしくないですか？ おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。 HTMLメールの制作って大変特に下記のような点が挙げられると思います。 テーブルレイアウト（コーディング面倒…）インラインCSS（コーディング面倒…）メールクライントごとで差のあるCSS対応（表示チェックどうすんの…）各種メールクライアントでの表示テスト（古い環境もまだまだ現役…）などなど… 弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。 ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用の
[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法
こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見ているページのソースをMacで見ながらデバッグできる機能です。 使うには双方へのちょっとした設定と、お互いをケーブルで繋ぐことが条件。 みんなだいすきGoogle Chromeの開発者ツールと同じようなものですね。 必要なもの 1.Mac 2.iPhone 3.ケーブル 次の章で使い方を書いていきたいと思います。 Webインスペクタ機能を利用する手順 1：iPhoneとMacをケーブルで繋ぐ まず
![[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f32f22625c07917861df73b24c82b03b4b6348/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Ff58a46be76400f23debbeacb9e1cc899.png)
【初心者向け】CSSを綺麗に書くために決めている基本ルール - Qiita
CSSは綺麗に書きたいですよね。 BEM、SMACCSS、CSS設計、詳細度。色々覚えたけどどうもCSSが汚くてなんとなく見にくいと思ってる人もいるかもしれません。 なので、今回は見やすいCSSを書くために僕が決めている基本ルールを書きます。 どんどんアップデートしていく予定です。 色々自分の中で決めているマイルールのようなものはたくさんあるのですが、まだ全て洗い出せていないのでひとまず公開。まとめて書くと一生公開できなさそうなので…。 随時更新していく予定です。 HTML/CSSのコーディング規約も書いていきたいです。(別の記事かもしれませんが・・) それではこれより下からスタートです。 プロパティはアルファベット順に書く プロパティは、下のようにアルファベットの順をバラバラに書くのではなく、
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory
デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS
![[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1cb6498582cf16c5feffd074f068f12f4d958a9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040901.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーが考慮すべき「錯視」のあれこれ | Swings
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
