公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得

2016年5月にはてなブログをはじめてすでに3年半超。このブログは開設から半年経過したくらいで月10万の収益を超え、それ以降も順調に増収が続き、今もコンスタントにブログから収入を得ている。 下のグラフは1年目のブログ売上推移。（※正確な数字を出すと色々面倒なのでボカします…） 正直、自分自身もここまでになるとは思っていなかったけれど、「"ちゃんとやれば"誰にでもチャンスはある」ということを実感できた。 4年経過したので、改めてこちらに収益付きでまとめました。 関連ページ【はてなブログ5年目へ】アフィエイト収益とASPについて ●　●　● この記事では、僕が4年間ブログ運営をしていく中で収益化に役立った手法やツールを紹介してみたい。基本的には初心者向けに書いている。 前半は、収益化のステップと「ブログで稼ぐための必須ツール」に関して。誰もが収益化のために使っている必須のツールを紹介している。

Webサイトの暗号化（SSL化、HTTPS対応）はこれまでEコマースやプライバシを守る目的で部分的に導入されてきたが、SHA1からSHA2への切り替え、モバイル端末の普及やHTTP/2の登場によって、サイト全体を常にHTTPS通信にする常時SSL化の動きが活発になっている。さらにSSLサーバー証明書を無償で入手可能なLet’s Encryptのサービス開始や主要なWebサーバーソフトウェアの安定版でHTTP/2が利用できるようになったことでその動きは加速している。本稿ではSSL化を取り巻く最近の状況を整理し、NginxとLet’s EncryptによるHTTP/2＆SSL化の実装例も紹介していく。 これまで証明書の無償入手は限定的 HTTPSのWebサイトを運用するには通常、商用の認証局にSSLサーバー証明書の発行を申し込み、必ず費用が発生するものだった。一部限定した目的では無償で利用でき

「常時SSL化」とは、Webサイトのすべてのページをhttpsにすることだ。しかし、Web制作を請け負ったとき、クライアントにきちんと説明して、常時SSL化を進言できるだろうか。そのためにはWeb制作者がまず、常時SSL化のメリットを理解しなければならない。 「SSLは、セキュリティ向上のために入力フォームに導入するもの」というのが一般的なイメージだが、今はそうではなく、全ページをSSLにするメリットがあるのだ。また、SSLサーバー証明書には複数の種類があり、どれでもいいというわけではない。常時SSL化のメリットとSSLサーバー証明書の選び方を紹介しよう。 常時SSL化は待ったなし大多数のホスティングサービスでは、9割のユーザーがhttpのみを使っている。つまり、これまでは大多数のユーザーにとってSSLは無関係なものと思われていた。しかし、これからはすべてのWeb担当者にとって、SSLが関

Webサービス開発にしてもアプリ開発にしても、ユーザーに気持よく使ってもらうにはUI / UXを工夫する必要があります。 多くのユーザーに支持されている大規模WebサービスやアプリのUI / UXをよく見てみると、ユーザーにストレスがかからないよう細やかな工夫が施されていることがわかります。 エンジニアにとってもUI / UXに関心をもっておくことは重要です。 フロントエンドエンジニアはもちろん、バックエンドエンジニアもユーザーにより良い体験を届けるためにUI / UXを学ぶことをおすすめします。 今回は、エンジニアがUI / UXを基礎から学ぶ際に参考になるスライドを厳選して10個まとめました。

2016年6月14日 Webサイト制作, Webデザイン Webデザインのプロセスが変化しています。以前「実践で学ぶWebサイト制作ガイド まとめ」という記事でWebサイトの制作手順を紹介しましたが、この方法はまだ使えるものの、徐々に廃れていくでしょう。最近ではこの記事で書かれているように、画面にあるパーツ（部品）のみを用いてデザイン・コーディングするのではなく、あらかじめ様々なパーツを作っておいて、それを組み合わせて画面を構成していく方法に移りつつあります。今回はそんなパーツをまとめた「コンポーネント」について考えてみましょう。 ↑私が10年以上利用している会計ソフト！ コンポーネントとは？ Webデザインにおいて、コンポーネントとは機能を持つ各パーツ（部品）の集合体です。例えば料金表ひとつとっても、テキストや線、ボタン、色など、様々な情報を組み合わせて作られていることがわかります。それ

どもです、水野です。 サイトを作って更新していると最初のサイト設計が甘かったり、知識が増えたことによって、サイトのカテゴリや構造を変更したくなる時がサイト運営者なら一度はあると思います。 まさに自分のことなのですが、手持ちのサイトで初期計画よりも記事が予想以上に増えて、1万記事以上入っているサイトがあります。なんとこのサイト、1万記事入っているのにカテゴリーが9個しかないという・・・ずさんすぎるサイト管理です、ハイ。 まずはそんな可哀想なサイトの概要をお伝えします。 女性の美学 http://josei-bigaku.jp/ ・運営歴2012年~現在 ・記事数12,000ほど ・1日のオーガニック流入10万UUほど ・リニューアル前のカテゴリ数9個 このサイトは2012年から運営していて、2013年頃からサイト構造の最適化をしていかなければいけないと思いつつ、 ・めんどくさ ・手間だから

ＳＥＯを学びたい・・でもどのサイトがいいの？ ＳＥＯ（検索エンジン最適化）やブログ集客について情報を集めていると、本当に沢山のサイトが出てきますね。その中から、初心者でも抵抗なく学べて、かつ情報がまとまっていると思えるサイトを選びました。ブログ初心者の方は参考にご覧ください。 １　ヨッセンス yossense.com オンラインサロンも運営している、プロブロガー「ヨス」さんのブログです。ヨスさんのブログはとっても親切で、画像も多用してくれてわかりやすい！ストレスなくブログについて学べる親切なサイトです。 お勧め記事はこちら ▶[ブログ]その記事タイトルでは響かない! 初心者が知っておくべき7つの基本 | ヨッセンス この記事は、記事タイトルの付け方を本当にわかりやすく解説してくれています。ドラゴンボールの例えが秀逸！ ▶SEOに強いブログへ! 高品質コンテンツを書くために重要な5つの本質

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし

WordPressの制作の準備、制作、公開、SEOやセキュリティやメンテナンスなど運用における、WordPressでサイトやブログを運営する際の大切なポイントをまとめたチェックリストを紹介します。 Killer WordPress Checklist: 101+ easy steps to launch your next website! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 チェックリストはインフォグラフィックにもなっており、元ページでダウンロードできます。 インフォグラフィックの一部 はじめに WordPressの制作準備時のチェックリスト WordPressの制作時のチェックリスト WordPressの公開時のチェックリスト WordPessのSEOのチェックリスト WordPessのセキュリティのチェックリスト W

SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ こんにちは、じつかわです。ナイルという会社でSEOコンサルタントをやっています。 さて、いきなりですが、皆さんがSEOを勉強し始めたとき、一番最初に覚えたことはどんなことでしょうか。おそらく「titleに対策キーワードを入れる」ことではなかったでしょうか。 「title」「meta description（メタディスクリプション）」「h1」というあたりのHTMLタグは、SEOでは非常に重要な役割を果たします。 とくに「titleに対策キーワードが入っていなければ、SEOはほとんどできない」といっても過言ではないほど、検索エンジンの評価において主要HTMLタグにキーワードが含まれていることは重要です。 SEOに取り組んでいる人であれば「そんなの普通にやってるよ！」と言われ

WEB界隈でよく聞く言葉に「チートシート」というものがあるのですが、これは「cheat（チート） = 騙す、ズルする」という言葉から「ズルするシート」要するに「カンニングペーパー」のことを意味していて、これが転じてWEB界隈ではプログラミング言語やコマンドやショートカットなどを見やすく一覧にまとめてある表のことを指します。 ちなみにこの記事では少し趣向を変えて、WEB界隈で働く人が「これは便利かも」と重宝しそうな「マーケティング」と「SEO」に関するチートシートを集めてみました。 WEBマーケティング関連のチートシート3+2個 大きな意味での「WEBマーケティング」全般に重宝しそうなチートシートを集めてみました。 www.seojapan.com リスティング広告運用チートシート LPO改善チェックリスト チートシートではないけど「これはWEBマーケティングに重宝するかもなー」というチェッ

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. SEOとは、「Search Engine Optimization（検索エンジン最適化）」の頭文字を取ったもので、簡単に表すなら「検索エンジンで上位表示を達成するための技術」と言える。 現在では85%以上の企業が、第一にコンバージョンの獲得、第二にブランドの浸透を目的として、SEOに取り組んでいると言われている[1.2]。 特にWEBマーケティング先進国のアメリカでは、WEB関連費用のうち、実に30%以上をSEOに費やしている[3]。 実際に、このバズ部や、SEOに取り組んで成功している弊社クライアント様事例を平均すると獲得しているお問い合わせの約80%はSEO経由だ。そのため私は、SEOが上述のデータ以上に必要不可欠であることを実感して

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. サイトの規模も大きくなり、あなたは今サイトの更なる利便性向上の為に404エラーページの改善を考えている事だろう。 404エラーページの改善は、サイトの更なる利便性向上を実現する上で欠かせない立派なSEO内部対策の1つだ。 それにも関わらず、多くのSEO関係者、デザイナー、そしてエンジニアは、404エラーページが本来どのような目的で設置するべきもので、ユーザーに対してどういうメリットを提供するものなのかを理解していない。 そして気づかない内に、検索ユーザーやSEOに対して役に立たない404エラーページを設置しまっている。 そこでこの記事では「404エラーページが果たすべき本当の役割」から、それを踏まえたサイトの利便性を最大限に高める「404

職業柄色々な会社のWebディレクターと一緒に仕事をします。画面設計やスケジューリングなど、人によって一つひとつやり方が違うので、仕事をしながらディレクション業務を学べるメリットがあります。その中で、仕事がしやすい、進行がスムーズだなと感じた方の特徴をまとめてみました。 連絡がまめでレスポンスが早い個人的に一番の特徴はこれでしょうか。進行管理が上手な方はとにかく連絡がまめです。いつでも連絡がつくし、必要なことはその都度報告がきます。そして反応が早い。こちらが何か質問すると、すぐにクライアントに確認をとり、即座に返信がきます。場合によっては、質問している間に作業が止まることもあるので、レスポンスが早いというのは、それだけで制作側にとっては心強い存在なのです。 スケジュールにディレクターチェックと、その修正作業の時間をいれている例えばデザインの初稿を提出する時、一般的にはクライアントの前にディレ

2015年2月27日 著 レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由という記事を読みました。冒頭の最近では、新規にウェブサイトを構築する場合、避けた方が良い＝PCとスマホのページは分けて作った方が良いと考えられていますというくだりにしろ、末尾にある手間もコストもかかるわりに表示の不具合が多発するレスポンシブデザインは、導入を検討される企業はまだまだ多いものの、現在は下火になってきていますというくだりにしろ、自分の経験や認識とはだいぶ乖離しているように感じるのですが、それはさておき、挙げられていたレスポンシブを避けるべき3つの理由のどれ一つとっても、賛同できるものではありませんでした。 コストが増える？ 1つのファイルでPCとスマホのサイトをうまく表示させるのは、非常に複雑な作業です。CSSで調整を行っていくことになりますが、これは別々のサイトを作るよりも手間の

作成：2015/02/23 更新：2016/06/29 WordPress > 本番サーバ移行前に何をすればよかったのか確認しておきたい、自作テーマに記述し忘れたことはなかっただろうか。今回はサイト移行時や構築時に毎回確認してしまう使用頻度の高い小技をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 移行中 １．移行中にメンテナンス画面を表示する ２．旧url から新url へのリダイレクト ３．一時的にキャッシュを制御させる パフォーマンス ４．非同期で読み込む ５．jQueryや外部 JavaScript の競合を避ける ６．旧IEでCSS3を再現 ７．問い合わせのコンバージョン設定 functions.php に追加しておきたいもの ８．メディアアップローダーを自作テーマに組み込む ９．ビジュアルエディタをカスタマイズ １０．RSSにサムネ