Twitterの自動検閲機能が大活躍をされているらしく、先日は「蚊に死ね」と呟いたTwitterユーザーが凍結をくらい、そのニュースがBBC経由で世界に報道された。 じゃあ「アン・シネはGカップだって」も呟けないのか（女優のパク・シネもヤバいな）、「シネ・リーブル池袋に行ってくる」もダメなのか、「死ね死ね団のライブに行ってきた」もツイートできないのか……　など考えているうち、本エントリーのタイトルは当初「Webプッシュはとっととおっ死ね」と考えていてのですが、「このタイトルだとツイートできない可能性があるのでは？」となり、「死ね」から「滅んで欲しい」に変更しました。 で、「Webプッシュ」って邪魔じゃないですか?　ネットをブラブラしていると、時々、ポップウインドウで 「×××が次の許可を求めています　通知の表示　許可・ブロック」 とでるやつですよ。 親分、こいつですよ、こいつ！ Webプッ

Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで

5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show

お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/

なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです

Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの

フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源（リソース）を効果的に分配するのもプロとして欠かせない姿勢です。今後もこうしたCSSのフレームワークを活用した流れは続くのではないでしょうか。 そこで本稿では制作の現場で使えるWebデザイナーのための「CSSフレームワーク」ベスト10をご紹介します！下記にご紹介するフレームワークをうまく活用して、ぜひ日々の業務の効率化にお役立てください。 そもそもフレームワークとは何か？ フレームワークとは、本来ファイルとフォルダを含むパッケージのことです。CSSフレームワークの場合だと標準化されたHTML、CSS、JSコードを含んだ機能群のことを指します。こうしたフレームワークを使うことで、一からフロントエンド開発を行うよりも飛躍的にWeb制作の生産性

AMP（Accelerated Mobile Pages＝アンプ）とは、2016年2月にGoogleが導入した、モバイル端末（スマートフォン・タブレット）でのウェブページの表示を高速化するためのプロジェクトです。AMP対応のウェブページは従来に比べ平均4倍程の速度で表示できるため、さまざまなメリットがあります。 本記事ではAMP導入のメリットと作り方を紹介します。AMP対応することによってアクセス数が増大した話もありますので、記事のシリーズで紹介します。 導入の利点① ページ表示が超高速になる モバイルブラウザで、AMPページにアクセスしたときにものすごいスピードでウェブページが表示されます。読み込み待ちのイライラがなくなるため、ユーザーストレスの軽減につながります。 導入の利点② 検索結果でAMP（稲妻マーク）が表示される モバイルでのGoogle検索で、AMP対応のウェブページは稲妻マ

この記事には広告を含む場合があります。 記事内で紹介する商品の購入やアプリをダウンロードすることで、当サイトに売り上げの一部が還元されることがあります。 ブログをやっている皆様、amp対応していますか？ ▼ ampって何？おいしいの？って人はこちらをどうぞ。 はてなブログのAMP対応に伸るか反るか ampだとアドセンスが表示されない（やる方法あるという噂もあるけど僕はできませんでした。誰か教えて）ので対応させたくないっていう人もいると思います。 僕の場合は「いろいろ問題あるけど100%やるべき」っていうのが主張なんですけど、最近アナリティクスとか見ているとなおのことやるべきだなと思っています。 今日はその辺を実例を交えつつ書いていこうかなと。 amp対応しておけばとんでもないビッグワードで上位表示できる可能性がグンと上がるよ ampをやるべきと僕が主張していた一番大きな理由は「検索結果のか

僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。 先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻 テキストファイルになるとできることあぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ

日本では、2016年1月13日でIE8の正式サポートが終了しました。 それでも、まだIE8でもちゃんと閲覧できるサイトを作って欲しいと言われることがあります。 正式なサポートが終了したブラウザを使うリスクや対応工数を考えると、 クライアントには「IE8は対応外です」としっかり説得すべきです。 でも、大人の事情で対応することになった際に、気をつけるべきことをまとめました。 1. IE8は対応外と突っぱねるべし 一番良いIE8対策は、動作確認対応外にすることだと思います。 公式サポートが止まったことで予期せぬ攻撃を受け、そのリスクを誰が負うのかクライアントさんにも説明してください。 ブラウザシェアなどをお見せして、そろそろ推奨環境をアップデートしませんかと説得してみてください。 古いユーザーさんに支えられているサービスは…頑張って対応してください。 2. HTML5とCSS3が使えない ついく

ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？　聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti

By Wicker Paradise アイコンに関するニュースから販売まで手がけるサービス「Icons8」の中の人が、ウェブサイトのデザインを大幅に変更したところ47％ものユーザーを失ったことをブログで明らかにしました。ブログではユーザーを失うまでの経緯や、なぜ失ってしまったのかの分析結果まで書かれていて、興味深い内容になっています。 How We Lost 47% of Our Users After a Redesign | Icons8 https://icons8.com/articles/how-we-lost-47-of-our-users-after-a-redesign/ サービス開始当初、Icons8はアイコンの開発・販売を手がけるサービスでしたが、毎日新しいアイコンを作り続けるのには無理があるため、「リクエストアイコン」という機能を実装しました。リクエストアイコンとは、

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 未だに form の validation って, とりあえずなんでも受け付けてサーバー側で してエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... ユーザーさんからすると入力した段階で何かしら間違いがあったらすぐに教えて欲しいですよね. 実はこの辺って HTML5 からクライアントサイドでもある程度チェックできるように整備されています. なのでライブラリを使わなくてもある程度サーバーに送る前に

・ポップアップブロックを解除しないと表示できない ・ブラウザバックしても、リダイレクトで再度同じページが表示される。 ・ページを表示し終わるまでにどんどんスクロールがズレて、リンクをタップしようとした瞬間に別のリンクにすり替わる（スマホ限定） ストレスMAX！

可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を