[レベル: 中級] Googleは、Mobile First Index（モバイル ファースト インデックス）の導入を正式にアナウンスしました。 Mobile-first Indexing モバイル ファースト インデックスに向けて モバイル ファースト インデックスでは、PC向けページではなく、モバイル向けページの評価に主に基づいてランキングが決定されます。 Gary Illyes（ゲイリー・イリェーシュ）氏が米ラスベガスで10月に開催されたPubCon Las Vegas 2016で発表していたGoogle検索の仕様変更です。 正式な実施時期はまだ決まっていません。 今後数か月にわたり小規模な実験を行ったうえでの判断になるとのことです。 評価対象がPC向けページからモバイル向けページへ 詳細は公式アナウウンスを読んでいただくとして、概要としてはモバイル ファースト インデックス（以下、

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

各掲載順位に対する、CTR平均は以上のようになっています。1位と6位では10倍近くの開きがあります。 次の節で、この平均数値と運営しているサイトの実際のCTRを照らし合わせて、各ページがうまくいっているのかどうか調査していきましょう。 Search Consoleで平均値よりCTRが低い記事を調査する それではSearch Consoleで、サイトのCTRをチェックする具体的なステップを確認していきます。まずは、ダッシューボードから、検索トラフィックの検索アナリティクスを選択します。 次に、クリック数、表示回数、CTR、掲載順位の全てにチェックを入れます。通常、日付は過去28日間となっていますが、選択し、期間を設定することもできます。ページ、デバイス、国などでフィルタをかけることができるので、慣れてきたら、うまく使い分けていきましょう。ここでは、クエリのみで調べていきます。 スクロールする

たくさんありすぎて選べないWordPressのプラグイン。SEO、セキュリティ、バックアップなど、ビジネスサイトの運営に必ず使う7分野のプラグインを厳選して紹介します。 私見にすぎないかもしれませんが、WordPressは最高です。使い勝手が良く直感的なので、HTMLコーディングの知識がまったくなくても、Webサイトを一からすべて作り上げられます。WordPressのユーザー数がほぼ7500万人というのも驚きに値しません。ビジネス用のWebサイトを開発中なら、WordPressをのぞくことをお勧めします。 WordPressの誇る最高の機能の1つに、WordPressプラットホームで使える多数のプラグインがあります。プラグインを使うと、プラットホームとしてすでに十分なほどパワフルなWordPressがさらにパワフルになります。Webサイトが自分のビジネスを完全に表現できるまで好きなだけ修正

今回はオールアバウトのnnmrが弊社サイトAll About Japanの速度を高速化した経緯についてまとめます。 All About Japanとは そもそもAll About Japan（以下AAJ）とは何かといいますと、弊社が提供している訪日外国人向けの日本紹介サイトです。 外国人向けサイトで、英語、中国語（繁体字）、中国語（簡体字）、タイ語、韓国語の5か国語に対応しております。 「Anime」「Izakaya」「Ninja」といったような特集や、実際に観光する人向けのモデルルート記事が特色です。 ■ 特集 (url : http://allabout-japan.com/en/tag/sushi/ ) ■ モデルルート記事 (url : http://allabout-japan.com/en/article/222/ ) 技術的な紹介 LAMP環境です。 （サーバー構成は後に記述

オープンソースのコンテナ管理ソフトウェア・Dockerは、軽量な仮想実行環境であり、少ないリソースで効率よくアプリケーションを動かせるとして注目を集めています。また、2016年6月にはソフトウェアのマーケットプレイス「Docker Store」をオープンすることを発表し、プライベートベータ版として開始しています。 今後の利用拡大が見込まれるDockerの使い方について、わかりやすく解説している記事・スライドを11個ピックアップして紹介します。これからDockerをはじめたいと考えている方はぜひ参考にしてください。 Dockerの使い方の参考になるサイト・記事 隔離の技術Dockerの考え方と使い方の基本 / TECHSCORE BLOG http://www.techscore.com/blog/2014/08/05/introduction-to-docker/ Dockerの概要、よく

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

サーバレスアーキテクチャ構成にしたときに 実際のところ、どれくらいの料金になるのか気になったので算出してみようと思います。 (あくまでシミュレーションしたものでAWS側で値段や計算方法が変わったりするため、責任は負いかねますので導入する際は自己責任でお願いします。) AWSのどこにどれくらいの料金がかかっているのか知ることは大事だと思ったのですが、トータルだとなかなかまとまってなかったのでまとめてみました。 間違ってたらご指摘いただけると助かります。 サーバレスアーキテクチャって何？って方はこちら参照してください 世界に先駆けてAWSサーバレスアーキテクチャでユーザ認証とAPI認可の実装をしてみた AWSサーバレスアーキテクチャでCloudFrontからWAFをかけてAPI Gatewayを呼ぶ Lambda+RDSはアンチパターン 全部教えます！ サーバレスアプリのアンチパターン とチュ

WordPressで開発をするなら、いまどきどんなツールを使うのがいい？　WordPress専門のデベロッパーであり、コアコントリビューターでもあるMatt Geriさんがおすすめるする、最高の開発環境とは？ 近年、WordPressによる開発は大きな進展を遂げています。特に、ツールに関しては。以前は、WordPressでサイトを構築しようものなら、ほぼ確実にMAMP/WAMPのローカルホスティングの設定をしなければならず、それはもう悩みの種でしたよね。ひょっとしたら、本番の状態でサイトの開発を進めなければならなかったりしました。 そう、私もその一人でした。 幸い、時代は変わり、いまではそんな頭痛の種や反復作業を取り除くツールが出てきました。 WordPress開発業者としてフルタイムで開発をしていた私は、WordPressから離れて丸3年後の2015年12月、再びフルタイムのWordPr

※このお話はたぶんフィクションです。実在の人物や団体とはあんまり関係ありません。 序 planetter.comをバージョンアップすることにした。数年前にリリースしてからずっと放置していたけど、そろそろ手を付けないとやばいと思った。 しかしウェブの世界はドッグイヤーだ。3年も経てば何もかもが変わっている。しばらく開発から遠ざかっていた僕には、最近の技術トレンドなんてさっぱりわからない。 まずは自分自身をアップデートするところから始めよう。 Atom 最初はIDEだ。以前はEclipseを使っていたけど、いまはもうウェブ系言語の進化速度に追いつけていないようだった。ウェブ開発用のIDEならいまはWebStormが人気のようだ。有料だけど、最新の技術に対応しているし、使い勝手もいい。 でも最終的にはAtomを選んだ。IDE(統合開発環境)ではなくエディタなので、これ自体は単機能だけど、不足分は

最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり

2015年10月1日の記事を更新しています。 新しいWebサービスのアイデアがあっても、何から手をつけたらいいか分からない、進め方が分からないという方は多くいらっしゃるんのではないでしょうか。 なにより、同じようにWebサービスを立ち上げた人からの助言や参考にしたいというような後押しが欲しいと感じる場合もあるでしょう。 今回は、Webサービスを作りたい方が読むべき記事をまとめてご紹介します。 経験者によるサービス立ち上げ時にやったこと、失敗例、考え方と言うような生々しい実体験までを知ることができます。 新たにWebサービス立ち上げ時に役立つ内容ばかりですので、これから始めようと思っている方は参考にしてみてください。 Webサービスを始める際に読んでおきたい記事まとめ 1.立ち上げたウェブサービスを失敗させないために ウェブサービスの立ち上げ時に大切なこと｜ウェブストリートメディア 計画を立

メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要

ひとつの日常 この間、仕事でちょっとしたハイブリッドアプリ(ネイティブアプリのWebViewの上で動くWebアプリ、とここでは定義しておく)をリリースした。 そのアプリにはタブがあって、(当たり前だが)タブでコンテンツが切り替わる。 リリースして3日くらい経って、企画の人から「なんか、ここのタブ、反応悪くない？」という話が来た。たしかにタブに触れても、すぐには反応しなくて1~2秒経ってからタブが切り替わる。しかも、切り替えたタブのコンテンツが表示されるのにも1~2秒かかっている、うへー... 改善するぞ！ ということは、クライアントの開発をおこなっていると、ちょくちょくあるのではなかろうか。意識、あるいは無意識におこなっている改善の手順について、先の問題の改善に至るまでの具体的は話、ツールも含めながら書く。 計測する 「計測するまでは速度のための調整をしてはならない」という有名な格言がある

W3CでHTML5仕様の策定を行っているWeb Platform Working Groupは、W3Cのブログにて「WORKING ON HTML5.1」という記事を公開し、2016年9月にHTML5.1仕様を勧告にする計画を明らかにしました。 6月中旬までにHTML5.1の勧告候補を公開し、9月に勧告にするとのこと。 The plan is to ship an HTML5.1 Recommendation in September 2016. This means we will need to have a Candidate Recommendation by the middle of June, following a Call For Consensus based on the most recent Working Draft. 計画ではHTML5.1の勧告を2016年9

私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？

一昔前まではjavascriptを使ったSEOに弱いというのがあったりしましたが、今ではGooglebotが大分賢くなりjavascriptを実行できるようになってきてます。 とはいえ何も考えなくてもいいかというとそうでもないので、javascriptを使った場合にSEO対策として意識しないといけないことをまとめてみました。 いろいろ書きましたが、 Hisory APIを使ってURLをきちんと書き換えよう っていうのが主です。(pjaxと呼ばれている手法です） クリックやスクロールでDOMを生成するコンテンツはインデックスされない ページロード時点ではhtml内に生成されていないが、あるイベントが起きた時にDOM要素を生成するパターン。 Qiitaで言うとTOPページ下部にある「もっと見る」とかがそうですね。 Googlebotはjavascriptを実行することはできるのですが、clic

今回のサイトを含め、WordPressでのサイト構築Tipsをこちらで更新中です。 http://qiita.com/yousan/items/c925f0a241be02a55292 はじめに 一日のPVが100万、月の3000万PVのサイトを某ブログシステムからWordPressに移行する案件がありました。 ウェブサイトの規模感を計る指標はいくつかありますが、僕の中では100万PV/月を超えてくると中規模かな、と思っています。 3000万PV/月ですとそこそこの規模感ですね。 「WordPressで大規模サイトって大丈夫なの？」と聞かれる事がありますが結構大丈夫です。 このサイトをさくらのクラウドへ移行しました。OSパッケージとしてKUSANAGIを利用しました。 KUSANAGIを使えばCentOS + nginx + php-fpm (or hhvm) 周りをそこそこの初期状態で設

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。