最新のアプリやサービスのニュースを書くのが仕事の筆者にとって情報の整理は永遠の課題だ。 もちろん書くことを仕事にしている人に限らず、氾濫する大量の情報を必要な時に取り出して利用したいという欲求は多くの人が持っているはずだ。 以前は手書きノートやファイルのような紙媒体に保存していた情報も、時代とともに完全にデジタルに移行し、Evernote、Microsoft OneNote、Notionといったメモを作成することに特化したクラウドアプリを利用している人も多いだろう。 筆者はおそらく普通の人よりは多くのサービスに触れているはずだが、どれも帯に短したすきに長しに感じてしまい、複数のメモアプリに情報が散乱してしまっているのが実情だ。 そこで6月6日に日本でも提供が開始されたグーグルの「NotebookLM」だ。 「AI駆動型のリサーチ、執筆アシスタント」と説明されているように、参照文献（ソース）

この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。 きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。 グローバルセレクターや要素セレクターを避ける 詳細度が高すぎるセレクターは使わない セマンティックなクラス名を使う マークアップ構造とCSSを密結合しすぎない ルールを1つずつ説明していきます。 グローバルセレクターを避ける グローバルセレクターには全称セレクター（*）、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例

UXを大げさに捉えていませんか？ ちょっとした工夫でユーザーの負担を軽減し、気持ちよく操作できるようにする5つのテクニックを紹介します。 Webサイトを作り終えたら、できるだけ早く公開したいものです。しかし、すぐに公開することの犠牲もあります。重大なUX要素を見逃し、ユーザーにとって使いにくいWebサイトができ上がってしまうのです。 問題は、公開前に「近道」をすると、1時間かそこらで解決できたであろうUXのミスのために、長期的にWebサイトを使い続けてくれるユーザーを永遠に失ってしまうことです。この記事ではすばやくUXを改善する簡単な技を紹介します。 1. ユーザーに計算させないこと ■シナリオ：「この投稿は新しいものか？」 いま読んでいる記事が今日、昨日、または先週公開されたものなのか調べようとした経験は誰にでもあると思います。そして公開日を探そうとWebページをくまなく探し回り、ようや

レスポンシブWebデザインで使うメディアクエリーを進歩させ、要素ごとに条件を設定できる「エレメントクエリー」。どこがどう便利なのか？ 専用ライブラリー「EQCSS」による使い方を紹介します。 CSSのメディアクエリー（Media Query）を使い、画面幅に基づいて要素の表示方法を変える方法はもうおなじみでしょう。エレメントクエリー（Element Query）はメディアクエリーと似ているものの、なんとビューポートではなくWebページ上の個々の要素にレスポンシブな条件を適用します。条件とは、たとえば、要素の幅、含まれる文字数、ユーザーのスクロール状況などで、要素に異なるスタイルルールを適用できるのです。 エレメントクエリーが必要とされる理由 最初に述べたように、エレメントクエリーはビューポートの幅と高さだけでなく、たくさんのプロパティに基づいて要素をスタイリングするのに役立ちます。ほかにも

2016年話題になったキュレーションサイト問題は、いまだSEOによって順位を上げることが可能だと証明してしまいました。ブラックハットな手法や過度なSEOは迷惑そのものですが、コンテンツをユーザーに届ける手段としてのSEOもまったく必要ないのでしょうか？ リンク構築はまだ重要か？ Googleオリジナルのランキングアルゴリズムにおいて、被リンクは常にランキングを決める重要な指標になってきました。リンクで信頼やオーソリティを獲得するやり方はGoogle最大の強みで、ほかの競合検索エンジンをしのいできました。 しかし2012年のペンギンアップデート以降、SEOのためにリンク構築する時代は終わったと言われています。これにはいくつか理由があります。 スパムリンクは悪質と評価されるので、リンク構築で評価を上げにくくなった リンク構築を誤るとペナルティを受けるので、リンク構築のリスクがさらに大きくなった

リリースされたWordPress 4.7は、最近のアップデートの中でもかなり魅力的なものだったようです。WordPressヘビーユーザーを自認する筆者が解説します。 WordPress 4.7 「Vaughan（ヴォーン）」がつい最近（編注：12月6日）、公開されました。ジャズ・ヴォーカリストのSarah Vaughan にちなんで「Vaughan」と名付けられています。 WordPress 4.6（『Web制作者が最低限押さえておきたいWordPress 4.6新機能まとめ』参照）の最後のリリースからわずか4カ月での登場です。最新版は数々のすばらしい機能を兼ね備えており、WordPressサイトを一層充実できるはずです。WordPressのヘビーユーザーである私は毎回新しい改良点を待ち望んでいますが、今回の4.7は興奮に値するリリースの1つと断言して間違いありません。 本記事では、Wor

11月1日にW3Cから勧告されたHTML 5.1。およそ2年ぶりのアップデートでどこが変わったのか？ 主要な変更点を押さえておきましょう。 HTML 5.1とは 2年ほど前のHTML5スタンダードのリリースは、Web開発界隈における大きな出来事でした。一連のすばらしい新機能が搭載されただけでなく、1999年のHTML 4.01リリース以降初のメジャーアップデートでもあったからです。「モダンな」HTML 5スタンダードを意気揚々と使ったWebサイトをいまでも見かけることがあります。 幸い、HTMLの次のアップデートまでそう長くはかかりませんでした。2015年10月、W3CはHTML5で未解決となっていたいくつかの問題の修復を目的としたHTML 5.1ドラフトの策定に着手しました。多くのアップデートを経て2016年6月に「勧告候補（Candidate Recommendation）」、2016

かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換

WordPressのテーマやプラグインを開発するときに絶対必要なデバッグの知識。知っているときっと役立つ、デバッグのTipsとツールをお届けします。 デバッグのスキルはどのような開発者にも不可欠です。この記事では、WordPressとPHPのエラーをデバッグする際のパワフルな11の方法を紹介します。 最初に有名な「WP_Debug」を取り上げ、そのあとさらに高度な方法へと進みます。 PHPでの一般的なエラーの種類を説明しておきます。 A –Notice（注意）：PHPで表示されるもっとも重要度の低いエラーメッセージ。必ずしも問題があることを示すわけではないが、改善可能な点が提案される 例：文字列を待ち受ける関数にnull要素が渡されている B – Warning（警告）：Noticeより深刻なエラーではあるが、スクリプトの停止には至らない 例：存在しないファイルが「include()」に与

jQueryのコードといえば、$(document).ready(function() {}で書くのがお決まり。でもそのコードの書き方はもう古いかもしれません。 jQueryでreadyメソッドはDOMが完全にロードされたタイミングでコードを実行するように実装されていました。このメソッドはすべてのDOM要素が利用可能になった時点で所定の関数を実行するので、要素へ確実にアクセスしたり操作したりできます。 jQuery 3.0がリリースされるまでは、次のように無名関数で使うのが一般的でした。 $(document).ready(function() { // Handler for .ready() called. }); jQuery 3.0での「ready()」メソッドの変更 jQuery 3.0のリリースまでは、readyメソッドを呼び出す方法はいくつかありました。 document要素

見栄え良く、使いやすいフォーム作りに役立つ、便利なセレクトボックス系jQueryプラグインのまとめ。現在のメンテナンス状態まで徹底調査しました。 誰もがselect要素がデフォルトのスタイルで良いと思っているわけではありません。スタイルの見え方をコントロールしたい（複数のブラウザーやデバイスで一貫性を保ちたい）と考えたり、はじめからサポートされていない追加機能が欲しいと考える人もいるかもしれません。 幸い、簡単にそうしたことができるすばらしいjQueryのプラグインはたくさんあります。 次のプロジェクトに組み込める、すばらしいプラグインを厳選して紹介します。オプション、メソッド、イベントなどにより自由自在に設定を変えられるプラグインもあれば、スタイリング変更や、使いやすさに配慮し単にselect要素を置き換えるものもあります。 Chosen Chosenは拡張性のあるプラグインで、sele

CSSレイアウトが捗るFlexbox、もう使っていますか？ ページ全体のレイアウトのような大掛かりなところよりも、今回紹介するフォームのような小さなところから試してみると便利さを実感できるかもしれません。 HTMLフォーム作成はWeb開発において避けては通れないものですが、その作業が楽しいことはまれなことです。幸いなことに、CSSのFlexboxを使えばこれまで困難だったことでも解決できることがあります。 Flexboxを使用せずに、フォームの一般的なコーディング方法を考えてみます。次のようなフィールドをHTMLでどのようにマークアップしますか？ たいてい次のようにマークアップしますね。 <div> <label for="name">name</label> <input id="name" name="name" type="text" /> </div> <div> <label f

いろいろなサイトで使われるようになったSVG。でも、WordPressはなぜかSVGファイルをサポートしていません。その理由と、メディアライブラリを拡張して対応する方法を徹底的に解説します。 ベクターイメージはWebの世界でますます一般的になりつつあります。SVGは標準的なイメージに代わる、スケーラブルでレスポンシブかつ高速な代替手段を提供します。SVGの主なメリットは、どのデバイスからでもくっきり鮮明に見え、通常はファイルサイズを小さく抑えられるという点です。 いまやSVGは特定のブラウザーに依存せず、サポートは広範囲であり、すべてのモダンブラウザーはイメージタグで指定されたSVGや、CSSのbackgroundプロパティの一部として指定されたSVGをサポートしています。 WordPressを使用しているなら、メディアライブラリーがどのようにメディアアセットの中央リポジトリとして動作する

「SEOを意識してさ」「もっと検索フレンドリーに」なんてあいまいで抽象的な指示が飛んできたら、Webエンジニアはまずこの5項目からチェックしてみて。 オーガニック検索エンジンの結果をWebサイトへのトラフィックの主なけん引役として利用する場合（有料検索のトラフィックまたは表示広告とは対照的に）、コーディングに注意する必要があります。SEOはキーワード、同義語、コンテンツマーケティングだけではありません。水面下で使われているたくさんの技術的側面があり、検索結果のページランク位置の判定に役立ちます。 最初のステップはWebページが検索エンジンからアクセス可能であるか、さらに検索エンジンのロボットがページのコンテンツを閲覧できるかを確認することです。Googleサーチコンソールで、「クロール」セクションの「Fetch as Google」を使用すると、そのページが検索エンジンからどのように見える

マジメにサイトを運営していただけなのに、ある日突然検索順位が下がってしまったら…。もしかすると、逆SEO（ネガティブSEO）の影響かもしれません。 2012年4月にGoogleが最初のペンギンアップデートを発表してから、SEO業界は大きく変化してきました。このアップデートはスパム的な被リンクプロフィールを構築しているWebサイトをターゲットにし、 SEO業者がホワイトハットとはいえないリンクビルディング（被リンクの確保）の手法を使うことをはるかに難しくしました。一方で、ブラックハットSEOを排除しようとしたこのアップデートは、ネガティブSEOを可能にしてしまいました。 ネガティブSEOとは？ Googleボウリングとしても知られるネガティブSEOは 、「スパム」と判断する検索エンジンのアルゴリズムを利用し、ターゲットとするWebサイトが順位を上げるためにブラックハット的なリンクビルディング

SEOでまず重要なのがキーワードの選定。狙うべきキーワードを調べて決定するまでの3つの基本的なステップを解説します。ベーシックな内容なのでブックマークをオススメ。 GoogleやBingなどの検索エンジンで順位を上げるために、Webサイトを最適化する最終的な目的は、サイトの訪問者を増やすことです。オーガニックであれPPCであれ、デジタルマーケティングキャンペーンの基礎はキーワードです。どれだけ検索エンジンがアルゴリズムをアップデートしようと、正しいキーワードを見つける必要性は変わらず残されたままです。そしてその正しいキーワードを見つけるために キーワードリサーチの必要があるのです。 キーワードリサーチとはなにか？ それはWebサイトの検索に実際に使われている キーワードを探し、検索結果に上位表示できるターゲットキーワードのリストを作るための取り組みです。キーワードリサーチの基本は次の3つで

Googleが常時SSLを推奨するようになって、HTTPSへ移行するサイトも増えていますね。SEO的な観点で見た、サイトを移行するときに気をつけたいこととは？ 長くWebサイトを運営していたり、最適化した経験が豊富だったりすると、Webサイトの移行を数多く目の当たりにしてきたはずです。Webサイトの移行は1つ手順を間違えるとオーガニック検索トラフィックに深刻な影響を及ぼし、SEOにも長期間にわたって悪影響を及ぼすため、Webのスキルの高さに関わらず技術的に難しいことなのかもしれません。 この記事ではWebサイトの移行前、移行時、移行後の主要な実装方法をいくつか紹介します。紹介する方法によって、SEOにかけた苦労を水の泡にしてしまう可能性を小さくできるはずです。 まず、移行とはなんでしょうか？　簡単に言うと、1つのドメイン、サーバーやプラットフォームから別のドメインなどにWebサイトのファイ

2012年11月のサービス開始から約3年間、公式発表ではすでに20万アカウントを超えて利用されている人気のネットショップ開設サービスが『BASE』だ。 初期費用ゼロ・月額無料のフリーミアム型。「お母さん」でも作れる手軽さの一方で、アクセス解析や多彩なカスタマイズ、さらには仲介決済機能も備えている。 BASEはサービス自体が管理画面内で完結するようにできており、ECサイトの構成から売り上げの振り込みまで簡単に操作できる。振込申請からの入金手配も10営業日（土日祝除く）と、中小企業にとってキャッシュフローがコントロールしやすい環境を作っている。 「流通総額は発表していないが、それなりになっている。当初、母親のようなリテラシーが足りない人向けに作ったが、現在は幅広い需要にプロダクトを提供できるようになり、より多くの人に使ってもらえる環境になっている」と語るのはBASEの鶴岡裕太代表取締役CEO（

Webサイトやアプリを訪れたユーザーに対して、ゴールまでの最適な道筋をつけるのがCTA（Call to Action：行動喚起）。このCTAを意識してボタンをデザインすることで、クリック率やコンバージョン率を大幅に改善できます。ボタンを実装するときにチェックしておきたい7つの法則を紹介します。 1.ユーザーの言葉を使う ネットで買い物しているところを想像してみましょう。以下の2つのボタンがあったら、どちらを押したくなるでしょうか。 ほとんどの方は、右の「注文する」を選んだはずです。デザインがまったく同じボタンがあったとしたら、自分が日ごろから使っている言葉のほうがピンときて押しやすい。企業側の言い回しと、ユーザー側の言い回しがずれているほど、ユーザーはアクションを起こしづらくなります。ボタンのラベルにはユーザーが普段使っている言葉を使いましょう。 Webサイトの制作ではつい企業目線の言葉を

小さな企業やサイトで役立つユニバーサルアナリティクスの便利な使い方を紹介する本連載。今回はユニバーサルアナリティクスに追加された「Measurement Protocol」でHTMLメールの開封率を調べる方法を解説します。 応用自在のMeasurement Protocol Measurement Protocolは、Googleアナリティクスに直接データを送信する仕組みのことです。<img>タグなどのソースに、パラメーター付きのURLを指定することで、JavaScriptをユニバーサルアナリティクスに何かの指標の元になるデータを送信できます。 アプリのスクリーンヒット、イベント、ソーシャル、eコマースなど、Measurement Protocol を使うと、Googleアナリティクスで扱うデータはおおむね送信できます。 店舗のPOSシステムのデータなど、Webやアプリ以外のデータを送れる