フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
フォームにおけるエラーの通知方法： 10のデザインガイドライン
問題を明確に特定し、エラーのある入力欄にユーザーがアクセスして、すぐに修正できるようにすることで、ユーザーがエラーから復帰できる手助けをしよう。 How to Report Errors in Forms: 10 Design Guidelines by Rachel Krause on February 3, 2019 日本語版2019年9月3日公開 フォームは、多くのアプリケーションやWebサイトに必要なコンポーネントで、ログインや商品の購入、フィードバックの送信、個人情報の入力に利用される。自分が使っているWebサイトで、情報の入力を何回おこなっているかを考えてみてほしい。その結果、それがエラーになる頻度はどのくらいあるだろうか。また、そうしたエラーをうまく切り抜けるのにイライラすることはないか。 エラーメッセージとは、システムの状態表示の1つだ。すなわち、ユーザーに彼らが直面してい
「サイトの会員登録増加」に効果が出た施策の話 | MEDLEY Developer Portal
2018-04-06「サイトの会員登録増加」に効果が出た施策の話こんにちは。開発本部で医療介護の求人サイト「ジョブメドレー」の開発を担当している田村です。 メドレー開発本部で行われている勉強会「TechLunch」で、ジョブメドレーについて「求人サイトでやって良かった会員登録施策」というタイトルでお話させていただきました。インターネットで検索するとこういう内容はたくさん出てきますが、そのうちの一つとして、参考にしていただければ幸いです。 背景医療介護の求人サイト「ジョブメドレー」は、創業当初（2009 年）にリリースし会社と共に進化し続けてきたメドレーで最も歴史のあるサービスです。リリース開始から 9 年ほど経ちますが、個人・事業所にとって使いやすく愛されるサービスとなるよう、日々改善を続けています。その中でも、サービスの成長に重要な要素の 1 つである「ユーザの獲得」に向けた施策は、とて
イベントを成功させるために！"集客"で最低限意識するべき6つのこと
取引先との新年会や顧客との交流会、学生向け会社説明会など、企業にとってイベントを開催する機会は数多くあります。 イベントを成功させるには、集客が欠かせないでしょう。 今回は、イベント集客で意識するべき6つのポイントをご紹介します。 どんなに魅力的なイベントであっても、参加者が少ないと盛り上がりに欠けてしまいます。 開催直前になって慌てないよう、集客のプランを考えて取り組みましょう。 イベント集客で意識すべき6つのこと イベント開催にあたっては会場やスタッフの手配、参加者への案内の作成など多くの作業が必要となります。 ですが、作業に追われて集客をおざなりにしてしまうと、開催日当日になって予想指していた参加者が集まらないということになりかねません。 イベント開催前に意識すべきことを把握して、事前に計画をねるようにしましょう。 1.目的・目標を明確に持つ チラシの配布やSNSでの告知などの施策の
第6回 D2D アクセシビリティ勉強会：フォーム編 - CodingMania
前回デザインしたフォームをグループでマークアップ！またより実践的なあるあるなフォームもイジワル問題として出題され、ドドーンと延長（汗。 勉強会のツィートまとめ @SawadaStdDesignさんの第6回 D2D アクセシビリティ勉強会資料 「アクセシブルな入力フォームを作ろう」 @milk54さんの第6回 D2D アクセシビリティ勉強会振り返り 第6回 D2D アクセシビリティ勉強会でアクセシブルなフォームを作成！ 今回は勉強会の振り返りというより勉強会で学んで、日々できるフォームの書き方をズラリまとめてみました。 label要素でテキストラベルとテキストフィールドを関連付ける。 例） <label for="name">名前</label> <input type="text" id="name" /> 例）必須項目の場合 <label for="name">名前<span>[必須]<
【ページ改善】コンバージョン率（CVR）を2％にするためには？ | 福岡・大阪・東京 SEO対策・ホームページ制作・広告運用代行なら株式会社スゴヨク
【ページ改善】コンバージョン率（CVR）を2％にするためには？ コンバージョン率２%・・・この数字はウェブの中では驚異的な数字ですよね？ 一般的なホームページでは1%あればいいと言われます。 ユーザーが欲しているホームページでは２%！ （ブランドサイトであれば10%前後です） コンバージョン率とは ウェブサイトではお問い合わせ、資料請求、来店予約の3つが目標達成になるかと思います。 計測する期間を設けてユニークユーザーまたはアクセス数で目標達成を割った数値的な指標のことです。 コンバージョン率の出し方 ユニークユーザーまたはアクセス数÷目標達成数＝コンバージョン率 で計算をしていきます。 地方では月間のユーザーが10000人前後になるといいホームページと言っていいです！ なので、10000人×２%＝200人（のお問い合わせ・資料請求・来店予約の達成数）が目安になってきます。 ユーザーを取り
なぜこれまで活用されてこなかったの？実は便利な9つのCSS機能をご紹介！
CSSの歴史は古く、1994年から開発がはじまっており、現在のCSS4モジュールなど継続的に新しい機能が追加されています。 今回はそんな広いCSSの世界から実はあまり使われていない機能9つ紹介します。 1. CSS clac() Clac()自体は広く知られていますが、この場でもう一度紹介するほど重要なのです。例のようにエレメントの幅と位置をピクセルで指定することに使えます。 2. pointerメディアクエリ タブレットやPC、スマートフォンなど様々なデバイスが存在する現代のトレンドに適応するための機能です。none(ポインティングデバイスが存在しない)、coarse(タッチスクリーンやモーションセンサーデバイス等)、fine(マウスやタッチパッド等)の入力値によりデバイスを識別し、ボタンのデザインを変更したりする際に活用します。 3. CurrentColor variable CSS
[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ
Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。 有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な
![[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/11d487ffaa0d8f97196e7f7cedd83ea94e889a64/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016102601.png)
上司や関係者も納得する、エントリーフォーム改善施策の提案書はコレを見て作れ！ | 勝手にEFO分析-エントリーフォーム改善
この連載ではこれまで15回にわたり、エントリーフォームの完了率を上げるための考え方や改善ノウハウについて取り上げてきました。 今回は連載の「おまけ」として、これから新たにエントリーフォーム改善に取り組もうというWeb担当者を対象に、エントリーフォーム改善施策の提案書をどのように作成すべきか、提案書の構成や作成時のポイントを紹介します。 過去の連載は、こちら → http://web-tan.forum.impressrd.jp/e/2014/02/28/16995 EFO（エントリーフォーム最適化）とは？提案書について紹介する前に、EFO（エントリーフォーム最適化）についておさらいしておきましょう。もはや言うまでもありませんが、エントリーフォーム最適化は、エントリーフォームの完了率を上げるための施策全般を指します。 メルマガ登録フォーム資料ダウンロードフォーム資料請求フォームメンバー登録フ
14.コンタクトフォーム－Jetpack by WordPress.com -
wordpressを利用していて一番利用されているプラグインが、 このwordpress.comが提供しているJetPackではないでしょうか。 JetPackプラグインは機能が多いのですが、 ここでは「コンタクトフォーム」の機能についてご紹介します。 はじめに Jetpack by WordPress.comのすべての機能を使っているでしょうか。 私はこれまで必要なものだけを使って、ほかの機能はあまり気にしていない状態でした。 ざっと全体の機能を確認しましたので、ご紹介しておきます。 Jetpack の一括検索の機能概要は以下のように表示されます。 コンタクトフォーム コンタクトフォームを使えば、個人メールアドレスを知られることなく読者からのコメントを受け取る事ができます。 コンタクトフォームはそれぞれ、必要に応じてカスタマイズできます。ユーザーがフォームを送信すると、フィードバックがス
ECフォームに取り入れたい！クレジットカード情報入力を楽にする最新EFO手法 | UI改善ブログ by f-tra
ECサイトの購入フォームでは、多くの場合クレジットカードによる決済方法を用意していることがほどんどです。 銀行振込みや代引き、コンビニ支払いなどほかの決済方法に比べ、その場で情報を入力するだけで手続きが済み、手数料もかからないことの多いクレジットカードは、オンラインショッピングを楽しむユーザーにとってもなくてはならないものです。 とはいえ、カード番号や有効期限、セキュリティコードなどと入力量が比較定期多いというのもクレジットカードの特徴。 今回はそんなクレジットカード情報の入力フォームの最適化についてポイントをお伝えしていきます。 余計な入力欄はなるべく減らす クレジットカード情報のフォーム入力でよくあるのが、カード会社を選択させる入力欄です。 しかし結論から言うと、このカードブランドの入力欄は用意する必要がありません。 カード番号とブランドは対応している なぜならば、実はカード番号の冒頭
【保存版】スマートフォンEFO（フォーム改善）のための15カ条 | UI改善ブログ by f-tra
スマートフォンの利用者が年々増加するなか、フォームのスマートフォン対策はもはや必須のものとなりつつあります。 このとき、ただスマートフォン向けにデザインを最適化するだけではなく、スマートフォン特有の制約や特徴をおさえたうえで改善することが大切です。 本日はスマートフォンの特徴をふまえながら、スマートフォン向けエントリーフォーム最適化（EFO）のポイントを「15カ条」にまとめてご紹介したいと思います。 スマートフォンEFO15カ条！ 本日ご紹介する「スマートフォンEFO 15カ条」は以下のとおりです！ 第1条: 表組みにするべからず 第2条: 拡大はオフにするべし 第3条: 項目は大きくするべし 第4条: 余白を充分に保たせるべし 第5条: リンクは極力配置するべからず 第6条: タップエリアとわかりやすくするべし 第7条: 項目数は極力減らすべし 第8条: 負担の少ない入力形式を使うべし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AIがランディングページを評価してくれる「Landing Page Analyzer」