ナビゲーションの3クリックルールは誤り
重要な情報にアクセスしやすくすることは重要だが、3クリックルールはデータの裏づけのない恣意的な目安である。 The 3-Click Rule for Navigation Is False by Page Laubheimer on August 11, 2019 日本語版2020年4月9日公開 3クリックルール どんなページもアクセスするのに3回以上のクリック（またはタッチスクリーンでのタップ）を必要としてはならない、という3クリックルールは、根強く残る、正式には認められていないヒューリスティックである。このバリエーションに、最も重要な情報には3クリック以下で到達しなければならない、というのもある。デザイナーはこのルールをWebサイトのナビゲーションや情報探索タスクによく適用するが、中には、（フォームやウィザードの入力など）他の種類のタスクにもこのルールを用いるデザイナーもいる。 タスク
Google Discoverへの最適化と、注力すべき領域 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ すでに無視できないほどの流入獲得を見込めるGoogle Discover。 SEO Japanでも何度か取り上げていますが、まだまだ解明されていない要素も多いです。そのため、最適化を行える箇所は、通常のSEOと比較すると、少ないと言わざるを得ません。 もちろん、従来の最適化は確実に必要なのですが、Google Discoverに焦点をあてると、どの部分の最適化が重要なのでしょうか。今回紹介するSearch Engine Journalの記事が１つの参考になればと思います。 Google Discoverは最新の機能ではない。 しかし、SEOの新しい時代（検索が発生しない検索）の始まりとして認識す
CSSフレームワークからみる、フォーカス・インジケータの違いを考察 - ME to FE
CSSフレームワークからみる、フォーカス・インジケータの違いを考察 フォーカスってなに？ フォーカスの可視化について フォーカスのスタイル CSSフレームワークはどのような対応をしているのか？ BULMA 特徴 Bootstrap 特徴 Materialize 特徴 Pure.css 特徴 skeleton 特徴 CSSフレームワークの総評 1. Bootstrap 2. BULMA 3. Pure.css 4. Skeleton 5. Materialize まとめ フォーカスってなに？ 「フォーカス」とは、パソコン画面上でウインドウや入力ボックス、アイコンやボタン、画像といった対象物が「次の操作」を受けられる（アクティブな、選択された）状態のことです。 引用：weblio辞書「フォーカス」（別窓でリンク） 上記の動作サンプルを例にすると、テキストフォーム、セレクトフォーム、ラジオボタン
コードの可読性についてのプレゼンテーション紹介 vol. 2: "命名とコメント" 編
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは。コミュニケーションアプリ "LINE" の Android クライアントチームの石川です。 この記事は、 "コードの可読性についてのプレゼンテーション紹介" の不定期連載記事の第二回です。前回の記事は こちら です。 今回は、プログラム中に書く自然言語として、第二章 "命名" と第三章 "コメント" の解説をします。 第二章: 命名 プログラムを書くときは、クラスやリソースなどの様々なものに名前をつける必要があります。その名前が、正確・明確・記述的であると、コードはより読みやすくなります。この章では、どのような名前がコードを読みやすくするかについて、特に型 (クラス, インターフェース, トレイト等)、値
CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31
web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を
BtoB企業は、オウンド「メディア」より「インデックス型コンテンツ」がおすすめ｜栗原康太
「オウンドメディアを立ち上げたい」という相談を月に2回ぐらいされますが、「オウンドメディアの立ち上げ・運用」はBtoBマーケティングにおける「言うは易し行うは難し」のTOP3に入るほど難易度の高い取り組みです。 そんな話を社内でしていて、当社の黒須に教えてもらったのが、キーエンスが実践している「情報サイト」の話です。 BtoBマーケティングで施策の一環としてメディアを始めると①終わり方をどうする②内容が面白くない問題直面する。マーケティングが強いキーエンスはメディアは作らずまるで辞書のような情報サイトを大量に立ち上げてこの問題を回避できてる。SEOも強くCTAを個別化しているのでリード貢献高そう。 pic.twitter.com/FysOYWvGMu — 黒須敏行 (@kurosutoshiyuki) March 15, 2019 キーエンスも実践する「インデックス型コンテンツ」とは キー
CSS フレームワークを使いたくない - ジンジャー研究室
CSS フレームワークが辛い。 ここでいう CSS フレームワークとは Bootstrap とか Bulma とかそういうやつのことである。昔から自分はこういうのが苦手で、一定の便利さは感じつつもどうしても馴染めないという状態が続いていて、それでも「それは使い方が悪いだけで、ちゃんと使いこなせばペイするんだろう」と思って今までズルズル使ってきてしまったのだが、やっぱりそれでもどうしても辛くなり脱フレームワークしようと思う。 もちろん使いこなせる人には使いこなせるんだろうし「使うべきでない！」という主張をするつもりはない。頭のいい人には使えるんだろう。昔は「今すぐ〜すべき 10 の理由」みたいなことを適当に書いてたんだけど、どうせ自分がやってることは「 Web 系」のメインストリームからは外れてるんだろうし、合わせるつもりもなければ合わせさせるつもりでもない。使う理由も使わない理由も人それぞ
【HTML】divタグの使い方や意味・役割を徹底解説！ | creive【クリーブ】
上記のタグで対応できない場合に「divタグ」というものがあります。学習を始めたうちは、どのタグを使えば良いのかわからずに、ついつい「divタグ」を多用しがちですが、「html5の主要タグ」を簡単に見ておくと良いでしょう。では、「divタグ」の説明を始めましょう。 定義 「divタグ」は、特別な意味が与えられていないタグです。つまり、「用途を決めていないため、制作者の判断で名前をつけて良い」タグです。無色のタグで、検索エンジンに明確な目的を伝えることもしませんが、ページのデザイン上、この自由度がどうしても必要となります。 目的 制作をすすめると、決まったタグだけを使ってサイトを作るのは難しく、ページの構造をわかりやすく見せるには、既にあるタグをまとめあげた上で、いくつかのブロックからなるグループを作った方が分かりやすいのです。 「divタグ」は、要素を自由にまとめ、ブロックとして認識させるこ
「手段が目的化」してしまうシンプルな原因｜播磨 直希
みなさんは先輩や上司から「お前は手段が目的化してんだよ！」って言われたこと、ありませんか？ 何故そんなことを言われなければならないのか、解説しましょうそうしましょう。 目次1.トイレが汚れてきた時の解決手段 2.手段が目的化する原因 3.具体と抽象を使いこなす 1.トイレが汚れたら普通どうする？ ※そもそも今回はロジカルシンキングの話なので、ロジックツリーを使って説明していきます 【トイレが汚れてきたので、対策を考える】 みなさんは、トイレが汚れてきたらどうしますか？ 恐らく大体の人は掃除をします。 例えば上の図は、社内のトイレが汚れてきた時の対策をロジックツリーで書き出したものです。 この図を見る限り、「トイレが汚れてきた時の解決手段はA社に依頼することだ」という解決手段が一つの手としてあげられます。 ただこの図に記載されている手段が、本当に全ての解決策であると言えるのでしょうか？ 2.
iframeの高さをJavaScriptで自動的に調整する方法
実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
SCONE - Get a Comfortable Development Environment.
必要なファイルだけを納品したいですか？それなら、SCONE Diff におまかせください。様々な条件で絞り込んだファイルを、ディレクトリ構造を保ったままコピーできます。 SCONE Diff SCONE Diff Pro About SCONE Diff ? SCONE Diff は、差分ファイルを抽出するためのアプリです。 編集したファイルだけを納品するのに、困ったことはありませんか？ バージョン管理のない案件であったり、画像ファイルだけを納品しなくてはならなかったり……。 SCONE Diff は、日時（秒まで指定できます）、拡張子、正規表現などでファイルを自在に抽出します。 また、不可視ファイル（「.」から始まるファイル）や、Adobe© Dreamweaver が生成する「_note」を除外したり、Sass や圧縮前の JavaScript など、納品したくないファイルを除外するな
SVGで始めるマイクロインタラクション入門 - ICS MEDIA
ボタンのタップ、ページのスクロールで開始される「マイクロインタラクション」は、ウェブサイトやアプリを印象的に魅せる効果があります。画像の拡大縮小に強いSVGは、さまざまなデバイス向けのマイクロインタラクションの実装に効果的です。今回は、はじめてマイクロインタラクションやSVGに触れるウェブクリエイターを対象に基礎知識を紹介します。 マイクロインタラクションとは 「マイクロインタラクション」とは、ある目的を果たすために1つの作業を行うインタラクションのことで、Dan Saffer氏が著書「マイクロインタラクション」の中で定義したものです。「部屋のライトをつける」「SNSでいいねボタンを押す」「ウェブサイトでスクロール時にグラフを表示する」といったことが、マイクロインタラクションの例として挙げられています。 マイクロインタラクションの構造 マイクロインタラクションは、次の4つの構造に分解できま
Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能
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
「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう
「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。 しかし、2009年の「モバイルファースト」と、今の「モバイルファースト」は大きく中身が成長しました。モバイルフレームワークであるIonic 2も先日リリースされましたので、ここで改めて「モバイルファースト」とは何かを考え、モバイルの設計を見直していきます。 レスポンシブとモバイルファースト モバイルファース
おじさんが React で Hello World するのに 3 時間弱かかった話
おじさんが React で Hello World するのに 3 時間弱かかった話 公開日: 2017年3月19日 タグ: javascript, react なんとなく React とかいうやつを試したくなって、とりあえず Hello World って表示するだけのものでも作るか…と思ったのだけど、まったく前提知識がないものだから完成するのにめっちゃ時間がかかった、という話でも書いておく。多少脚色はある。 いきなりつまづく まずは react と react-dom ってのがいるらしいんで入れるぞ、最近 npm にも慣れてきたしこれくらいは簡単…と、とりあえず適当なディレクトリ作って npm init -y してから $ npm install --save react react-dom とかやるんだけど、これがエラーが出てインストールできない訳だ。やる前に Node.js のバージョ
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
わずか1行のコード追加で、どんなWebサイトもCMSっぽくできる！「Simpla」の驚くべき使い方を徹底解説 - paiza開発日誌
どうも、まさとらん（@0310lan）です。 今回は、既存のWebサイトを究極にシンプルなCMSっぽく管理することができる無料のWebサービスをご紹介しようと思います！ このサービスを活用すれば、Webサイトのテキストや画像などの編集、サイトの更新作業などを直感的に誰でも行うことができるようになります。 【 Simpla 】 ■「Simpla」とは？ まず最初に、「Simpla」がどのようなサービスなのかを実際に見ていきましょう！ 以下に、「Simpla」を導入したサンプルサイトがあります。 見た目はごく普通のWebサイトですが、URLの末尾に「#edit」と追記して再読み込みします。 すると、専用の「ログイン画面」が表示されます！ 「Simpla」アカウントでログインすると、画面上でそのままコンテンツを編集できるようになります！ （編集できる箇所、できない箇所の設定も可能です） また、画
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」
http://www.okuni.me/entry/css-slide-animation-keyframes
