リンクを別タブで開くためにHTML上でリンクにtarget="_blank"を指定することには「セキュリティとパフォーマンスの点で問題がある」と、グーグルのエンジニアが注意している。 一般的な書き方だと思うのだが、どういうことなのだろうか。何が問題なのか、どうすればいいのかを、わかりやすく解説する。 ほかにも今回は、SEOコンサルタントを採用するときのポイント、グーグル検索に有利なCMS、AMPストーリーのSEOなどなど、幅広い観点からSEOの理解を深められる情報をまとめてお届けする。 SEOコンサルタント採用時のグーグル流ベストプラクティスグーグル検索ではShopifyが優遇されている！? CMSで違いはあるのか？AMPストーリーに特化したSEOをグーグルが解説グーグル検索でニュース記事を目立たせるコツをグーグルが解説グーグルは、GAやChromeのデータを検索に使っていないグーグルSE
Webサイトをどうやって作っているか？を調べるツールがありました。 「Wappalyzer」というツールです。 www.wappalyzer.com Wappalyzerは、ChromeやFirefoxのプラグインとして提供されており、インストールすると使えます。 ブラウザーでWebサイトを閲覧したとき、Wappalyzerのアイコンをクリックすると、そのWebサイトで使われているソフトやサービスなどが表示されます。 （例）はてなブックマークを見たときは、以下のような内容が表示されました。 Webサーバーソフトは「Nginx」、キャッシュソフトには「Varnish」を使っていることなどが分かります。 これでいろんなWebサービスを調査してみれば、Webサイト制作の参考になりそうですね！ Wappalyzerの参考情報 forest.watch.impress.co.jp www.leon-
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単！ Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Describe first 3 min of F2P games. Or basic rules for first directive tutorialRead less
こんにちは。レバレジーズ サイトディレクションチームです。 レバレジーズでは、2014年から特に力を入れて既存サイトのリニューアルや新規サイトの立ち上げをいくつか行っています。 その際に必ず必要になるのが、「仕様をエンジニアに伝える」という工程。 ここが上手くいかないと、どれだけいいサービスや機能を考えても、実現がままなりません。 エンジニアの方がよく、「これは『バグ』ではなく『仕様変更』ですね」と口にしますが この言葉が表している通り、仕様が正しく伝わらないと、本来期待していたものとは異なるものが実装されるリスクが高まるだけでなく、スケジュールの遅れや、チーム間での摩擦を引き起こす要因にもなり得ます。 認識違いや仕様漏れを極力減らし、プロジェクトを円滑に進めるために、 今回の記事では「Webディレクターが気を付けるべきエンジニアへの仕様の伝え方」の注意点を5つご紹介いたします。 １．全体
ブラケット社員がセレクトした気になる今週のサービスなどを、まとめてお送りします！ （サービス下のコメントはセレクトした社員からのコメントです。） 1. KlikR 赤外線で家電をつなぐIoT装置。赤外線リモコンで操作できる家電をスマホでコントロール可能に。 2. 大腸菌のＤＮＡに動画データを保存 米の研究グループが成功 よくわからないけどすごい。 地球の生態系的に影響はないのだろうか？ 3. 小説「ルビンの壺が割れた」 キャッチコピー募集 発売前の小説を現段階での全文掲載を行って、キャッチコピーを募集している。twitterとフォームで応募できる。題材と物語の長さ的に親和性が高いなと感じた。なぜfacebookで募集は行わなかったのだろう 4. アイコス充電器 IQO-CHARGER 是非みんなアイコスになってほしい！ 5. 蚊取りスティック 画期的 6. ローソン ぷるるん水ゼリー 水
体制は変えず、手法を変えた ――昨年５月、東洋経済オンラインの当時の編集長だった佐々木紀彦さんにインタビューしました。その時は「ＰＶは月間５千万が現体制での限界だ」と。それが山田編集長になって半年で倍増し、１億ＰＶに届こうとしています。編集部の人員増など、なにか体制を変えたのでしょうか。 「オンライン編集部員の数は、当時も今も８人で変わりません。ちなみに当時の８人のうち、佐々木君を含め３人がニューズピックスで活躍中です（笑）。佐々木君についていったので」 ――人員を増やさないのにＰＶ倍増は驚きです。外部ライターが増えたんでしょうか。 「記事の本数は多くても１日１５本。少ないと１０本もない。そのうち、外部筆者が書く記事が３分の２というのも、従来から変わっていません」 ――データを見ると、ＵＵ（ユニークユーザー＝サイトの訪問者）１人あたり、８ページを読んでいます。この数字は佐々木さん時代と変わ
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
時々「どうやって知識を身につけてるのですか？」と聞かれるので、ちょっとメモ。 最初のスタートは、僕は知恵が足りない、という自覚から。 知恵を身につけるのは、すごく難しい。たぶん、かなりの部分はtalentedなんじゃないだろうか。 ぼちぼち40になるが、未だに知恵がついたという感覚がない。一生この程度かもしれない。 知識を身につけるのは、それより少し易しい。本や雑誌、ネットの記事、有識者のFB wallやtwitterの タイムラインを読みまくれば良い。 ただ、知識を身につけるにはそれなりの理解力の素地というか、基礎体力がいる。 そこもまだ覚束ないなら、自分の仕事に関係するありとあらゆる数字を丸暗記すると良い。 世界の人口、経済、大企業の名前と概要。 日本の経済規模、税率、人口。 市場規模、各社のシェア、会社の売上、利益、時価総額。 自分の扱う商品の定価、コスト構造、仕組み、提供する価値。
何かこのシリーズ、異様な支持？を頂いており パート３を書かせていただきます。 さて、広告市場縮小の「直接の」理由は ポイントサイトの乱立バブルの崩壊にあり、その原因は 市場の縮小、つまり本当の意味で業界外から広告費を注入してくれる クライアントの減少がターニングポイントにありました。 金融・公式CPクライアントについては 前回のコメントで頂いたご意見が的を射ていると思います。 ポイントサイトの数だけは増えてユーザが回遊する（させる）ことで 売上・流通額は飛躍的に拡大したわけですが、本当の意味での対象顧客数は 全く拡がらなかったため、獲得が一巡し、実際の売上インパクトが見えた時点で 急速にクライアントのポイントサイト離れが起き、バブル崩壊につながりました。 実は、モバイル広告業界でのバブル崩壊は これが初めてではなく、2004年くらいに「クリック広告バブル」が 発生し、崩壊してきたという歴史
先日グーグルは「Web Starter Kit」、さまざまなデバイスとディスプレイ解像度で機能するサイト構築のための開発者向けテンプレートとツール集をリリースした。 最近のインターネット利用者は単に１つのデバイスを持っている訳ではない。彼らはPCでは物理的なキーボードを使い、モバイルではタッチスクリーンで操作する。最近では、スクリーンサイズもデバイスによって様々だ。ユーザーは同じサイトが、アクセスされるデバイスに応じて違った振る舞いをしてくれることを期待している。 こういった機能は、新しく作成するウェブサイトにはあらかじめ組み込まれていないため、開発者はサイトを作るたびに何度も繰り返してそれらを置かなければならない。これは「Boilerplate（ボイラープレート）」（ウェブサイト上でいかなる創作的な業務を行う前に手動で挿入される必要のある基本的なコード集）と呼ばれている。 グーグルのWe
効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない３つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし
いい年して、まだまだウェブ業界歴は短い鈴木です。 この年齢から、経験無しでこの業界に移る人は少ないと思います。そんな鈴木がウェブ業界に勤めだして間もない方にお薦めしたい本１０冊を紹介します。 WACA初級ウェブ解析士 認定試験公式テキスト第5版 作者: WACA 一般社団法人ウェブ解析士協会,WACA 一般社団法人ウェブ解析士協会カリキュラム委員会 出版社/メーカー: WACA 一般社団法人ウェブ解析士協会 発売日: 2014 メディア: 大型本 この商品を含むブログを見る 初級ウェブ解析士という試験の教本ですが、この資格を受ける受けない関係なしに読んでおいて損の無い１冊です。ウェブ業界にいる以上覚えないといけないアクセス解析やウェブマーケティングの事が体系的に学べます。しかし、この書籍で学べるのは表面上の体系です。ただ、繋がりが見えてくるので、その中で自分で覚えないといけない事を中心に他
コーディング学習サービス「Code.org」が提供するコード学習アプリ「Hour of Code」が、たった5日間で1,500万人のユーザー登録を達成しました。 1,500万人といえば、あのフェイスブックが3年かけてようやく達成したユーザー数。Code.orgはいかにしてこの偉業を成し遂げたのでしょうか。 Optimizely 「Optimizely(オプティマイズリー)」は、サイトデザインの変更が各種メトリックにどのような影響をもたらすかを可視化するA/Bテストに特化したグロースハックツールです。 以下の動画からお分かり頂けるように、Optimizely(オプティマイズリー)を使えば、①デザインや文言の変更と②変更によるコンバージョンレートの推移の計測が簡単に実行出来るのです。 今流行りのバイラルメディア「Upworthy」やおしゃれなデザイン雑貨や家具の通販で人気の「Fab.com」も
A/Bテストに関する記事を（たぶん）今後書くと思われるので、その前に解説的なものを書いておきます。試しにこのブログで実施したテストを例に解説します。 A/Bテストとは 文章やレイアウトなどが違う2パターン以上のページに訪問者を振り分けて、どれが一番ゴールされるかを検証するテストのこと。 一デザイナー視点で言うと、デザインの効果が（思い込みじゃなくて）数値でわかることや、人にデザインについて説明する時に、数値を交えて話すことで理解や納得がされやすくなることなどが利点だと思います。 Google ウェブサイト オプティマイザーとは ぐーぐる様が無料で提供している、A/Bテスト・多変量テストを実施できるツール。 「多変量テスト」が何なのかについては、ここらへんを見たりググったりしていただければと思いますが、とても簡単に言うと、ページ内のパーツごとに複数のパターンを用意して、なんていうかめっちゃ多
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く