制作者のためのHTML
主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは「全部入りHTML太郎」という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット
うわっ、日本のWebデザイナーの年収、低すぎ…？
以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど？」という記事が話題になっていました。 記事そのものではなく、記事に対する Twitter や、はてなブックマークのコメントでの反応を見ていて個人的に気になったことがありましたのでここにまとめました。 「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで… ※この記事は、2013年に公開したものを2019年にリライトしたものです。 Webデザイナーは、海外に移住すれば給料が上がる？ 特定の方を晒しあげるつもりはないのでツイートを埋め込むのはやめておきますが、Twitter では「世界のWebデザイナーのお給料はいかほど？」という記事をツイートするときに、以下のようなコメントをつけている方が何名か
言語切替のUIデザインについて考えてみる。｜灰色ハイジ
いま、自分のポートフォリオを英語/日本語どちらにも対応しようと思っていて、どのように切り替えるべきか、リサーチのためにいろんなサイトを見て回った。その時にこれは良い、これは避けたほうが良さそう、と気付いたことがある。 国旗を使うことによる問題 デザイン上のスペースの節約からか、あるいはグラフィカルに補助したいという理由からか、言語切替のUIで国旗を見かけることがある。 日本にいると「日本=日本語」と、国と言語が対応しているので気付きづらいのだけれど、世界はそういう風には出来ていない。例えば英語を提供する際に、どの国旗が相応しいのか考えてみよう。イギリス？アメリカ？英語を第一言語とする国はいくつもある。 決して国旗は言語を代表するものではないのだ。 また、提供する言語が多くなると、ごちゃごちゃして見づらいという問題も含んでいる。 ただし、言語の切り替えではなく、ECサイトなど提供するコンテン
IE6がコーダーに嫌われていたなんて知らなかった | スタッフブログ | マイネ王
インターネットを閲覧するときに使うソフト「ブラウザ」。Windowsに最初からついているInternet Explorer（IE）やEdgeを使う方が多いのではないでしょうか。 しかし、ブラウザにはOperaやFirefox、Google Chromeなどさまざまな種類があります。特にWeb制作者の方にとっては、Internet Explorer 6（IE6）が思い出深い存在だったようで……。 こんにちは。斎藤充博です。 今回はブラウザの思い出です。少し前まで、WindowsにはInternet Explorer（IE）というブラウザが標準で搭載されていました。Windows 10になってからEdgeが標準になりましたね。 最初はもちろんIEを使ってインターネットをしていたのですが、だんだんと使い勝手を良くしたくなってきます。最初はIEにツールバーなどをつけてカスタマイズしていたのですが、
dev.toと阿部寛のホームページについてちゃんと計測させてくれ - Qiita
Twitter見てたら、以下のツイートを見た。 数時間後、dev.toと阿部寛のホームページどっちが速いですか？というブログがTLに現れた。 GoogleのPageSpeed Insightsで測って阿部寛のホームページの方が早かったという結論付けてよいのかという疑問が浮かび、webpagetest.orgで計測することにした。 設定 阿部寛のホームページに関しては、Tokyoリージョンにあるものとする。 そして、dev.toはNY発らしいので、サーバーの設定をNYにして測定する。 The platform was created in 2016. The twitter account, @ThePraticalWeb 評価結果 Webpagetest - 阿部寛のホームページ Webpagetest - dev.to
HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
クソ酷いウェブサイト
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ？ お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ？ お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ？ どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確（もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな） よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
その記事最後まで読まれている？ページの読了率をGoogleTagManagerを利用して取得する方法のまとめ - ゆとりずむ
こんにちは、らくからちゃです。 ここ最近、Googleより『低品質なコンテンツは検索順位下げるからね！』という大本営発表が出されました。 以前より、Googleの検索順位については『コンテンツの量が長ければ長いほうが良い』、俗に長文SEOと呼ばれる仮説がまことしやかに語られてきました。その真偽はさておき、多くのウェブサイトが内容量の充実によるアクセス増を狙った結果、『ただ長いだけで最後まで読まれることのない駄文長文コンテンツ』が増えてきたのも事実です。 おそらくGoogleは『読むに値するコンテンツか否か？』の判断に、ページの滞在時間も採用しているのでしょう。しかしただ長いだけのコンテンツはむしろ価値のない物として評価されている可能性もあります。ネット上に文章を公開するならば、より多くの人に読まれる＝PVが増えることを望むことは自然なことです。しかしPVはあくまで『アクセスがあったかどうか
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
HTML の a 要素に target=”_blank” をつけるのはもうやめよう
HTML の a 要素に target 属性をつけて、リンク先の文書をどこで開くのかを指定できますね。 デフォルトは _self で、元のドキュメントと同じフレーム。無指定だとこれになるので、わざわざこれを書くことは少ないと思うけど。 一番よく使うのは target="_blank" じゃないでしょうか。リンク先のドキュメントを新しいタブやウィンドウで開くやつですね。 これ、以前はよくつかってました。ルールとして サイト内リンクは target 指定なし 外部サイトへのリンクは target="_blank" というのが多かったんじゃないかな。 でも最近、これはもうリンク先がどこであろうと指定しない方がいいんじゃないか、と思ってます。 もちろんサイトによってそれぞれ使いわけはあると思うんだけど、少なくともほとんどの手元のサイトの場合はいらない。 target="_blank" を使ってきた
デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた
デザインを語る上で重要な要素のひとつ、「フォント」。デザインを実際に手がける人だけでなく、それを見る多くの人にとってなじみ深いフォントとして、Windowsのプリインストールフォント「MS Pゴシック」は代表的なもののひとつかもしれません。 「MS Pゴシック」 「MS Pゴシック」は過去にマイナビニュースで実施した美大生の「お気に入りフォント」アンケートにも名前が挙がった実力派(?)ですが、実際に日々グラフィック/エディトリアルデザインを手がけているデザイナーの目には、この定番フォントはどう映るのでしょうか。 今回は、デザイン会社にてエディトリアルデザイン/Webのレイアウトデザインを手がけているSさんに、「MS Pゴシック」についての率直な思いを伺いました。 ――「MS Pゴシック」、デザイン業務で使うことはありますか? 私は主にエディトリアル(雑誌や書籍など)、グラフィック、Web領
4.5Pさん「『ホームページが作れて、チラシとかも作れる人が欲しい』っていうけど、ホームページそのものがいくつの技術を内包してると思ってるんだよ」から始まる新入社員教育論
きく_いけ_そう @so_harunohi 「ホームページが作れて、チラシとかも作れる人が１人ほしい」という会社があったのだけど、「職能として別物ですよ？」という話をしてもなかなか伝わらなかったので放っておいたら先日新人が入ってた。が、技術的には可能な範囲という感じで絶望的。彼、多分すぐ辞めると思う。 2015-05-17 04:35:33
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
Webクリエイター専用定規「Web型定規」 手描きラフを美しく仕上げるために
テイ・デイ・エス リプラグ事業部は4月13日、Webページの構成案を美しく描くためのWebクリエイター向け「Web型定規」を発売した。価格は1500円と2000円（いずれも税別）。 Web制作で使用頻度の高い「4：3」「16：9」の基本的な画面比率や、「ホーム」「ショッピングカート」などよく使うアイコンなどのテンプレート、画面をグリッド分けするのに便利な12分割用の目盛りが入っている。 手描きでも歪みなく描けるテンプレートを使用することで、アイデア出しやブレストで必要になる手描きのラフを清書する手間を省けるとうたう。社内のWebディレクターのアイデアを元に作られた商品だという。 関連記事 MicrosoftのWebコンテンツ作成ツール「Sway」で共同編集が可能に Microsoftがオンライン版Officeスイートのβアプリとして提供しているWebコンテンツ作成ツール「Sway」に共同編
今年こそホームページ作成に独学で挑戦したい初心者にはHTMLテンプレートがおすすめ
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる HTMLテンプレートをいじくると、「こんなデザインにするには、これが必要なのか」と実践的に技術を学べます。それに、手を動かした結果がすぐにデザインに反映されるので、何よりやってて楽しい。今まで何度もホームページ作りを断念してきたヒトにおすすめしたい独学の方法です。 そもそも、自分で全部やろうとすると、ホームページ作成に必要なスキルは、「HTML／CSS」「JavaScript」「画像編集・処理」「コピーライティング」「ライティング」など、あげだすと切りがないです。 ありがちな失敗パターンは、最初から全
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
manualstinger.com
通販サイトがアルマゲドン状態のニトリ、SE(開発)12人とSE(運用)10人を急募 : 市況かぶ全力２階建
