速くて安いWebサイトを目指して作ったときのポイントです。 追記 2/20：Cloudflare Pagesの毎月の無料枠のビルド回数が誤っていたので修正しました（50→500）
速くて安いWebサイトを目指して作ったときのポイントです。 追記 2/20：Cloudflare Pagesの毎月の無料枠のビルド回数が誤っていたので修正しました（50→500）
SEOとは、「Search Engine Optimization」（検索エンジン最適化）という意味で、今の日本においては主にGoogleの検索エンジンで上位に表示されるための一連の施策のことだ。（Yahoo!やBingなどの検索エンジンも対象となる）わかりやすくいえば「自社サイトを1位に表示させるための対策」とも言える。 このページでは、よりビジネスを成長させたい方にSEOを攻略するために必要な具体的な知識とスキルを解説している。 ここで解説している通りに、真剣に取り組んでもらえれば、どのような業種の方でも今までをはるかに上回る流入と、コンバージョンを実現することができるようになるだろう。 現在、思うようにサイトにアクセスが集まらなくて困っている方はもちろん、ある程度アクセスは集まるようになっているのになぜかコンバージョンに繋がらないという方でも、あらためて真っさらな気持ちで当ページを隅
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
ウェブ系の仕事をしてるが気軽にIE対応とか言われることがあるが気軽に対応できるものではない IEは最新の11ですらもう何年も前のものだ もう5年くらいは経つのだろうか セキュリティのアップデートはあるようだが、機能の更新はない ChromeやFirefoxは1,2ヶ月程度に1回アップデートをしていて毎回様々な機能が追加されている 今ではもうIEとで使える機能の差はとても大きい 未だに昔ながらのjQueryのみという作りをしているのであれば大して気にすることではないがモダンブラウザをターゲットに最新機能をどんどん導入している場合はIE対応がかなり辛い 実際に倍くらいの時間がかかることもある JavaScript コア部分であれば Babel で変換したりpolyfillである程度の対応はできるが DOM などブラウザ固有の WebAPI はそうではない 別途それぞれのpolyfillを集めて
ページの読み込み速度が“爆速”のサイトが相次いで登場している。2017年後半、日経電子版がリニューアルし「表示速度を従来比2倍に」と発表した他、米国のプログラマー向けコミュニティーサイト「dev.to」の表示速度が「速すぎて不安になるレベル」と話題を呼んだ。米Googleによれば「モバイルサイトでは読み込みに3秒以上かかると訪問者の53％が離脱する」といい、表示速度の改善が「長く滞在してもらう」一助になるようだ。 こうしたサイトが利用しているのがCDN（Content Delivery Network）という技術だ。なぜ速くなるのか、CDNを提供しているファストリー（米Fastly日本法人）のチュクロ・ダグ代表取締役、松田未央シニアセールスエグゼクティブに聞いた。 CDNの基本的な仕組みは？ ユーザーがインターネットを経由してWebサイトなどコンテンツを見に行くとき、ユーザーとコンテンツの
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
日本語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい！」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日本語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日本語フリーフォントをフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶（てつびん）ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用：OK ひらがな：◯ カタカナ：◯ 漢字：◯ ▷ 鉄瓶ゴシック スマートフォン
これまでに数多くの一部上場企業様のWebサイトのリニューアル・サイト制作にコアメンバーとして参加し、その中で表記ルールもかなりの数を策定してきました。策定時のベースに使用する「ひらく漢字」「ひらかない漢字」の一部を紹介します。 ※以前、公開した記事を再編集したものです。 表記ルール: ひらくことが多い漢字 表記ルール: ひらくことを検討する漢字 表記ルールの策定にあたり 表記ルール: ひらくことが多い漢字 ひら（がなで書）くことが多い漢字。 ※「正・誤」は使用する際の基準であり、日本語としての「正・誤」ではありません。 読み 正 誤
デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなどがそれぞれ10種類以上収録されており、Photoshopを起動後4回選択すればレイアウト
最近、この冒険の書のブログがちょくちょくとアフィリエイターさんのブログで紹介していただけるようになりました。 以前は、目標をブログで公開したり収支報告をすることで、自分にプレッシャーをかけてモチベーションを高めるために更新していましたが、10月に売上が復活したタイミングで収支報告は終わりにしたので、この冒険の書の更新のモチベーションも大きく下がっていました。 今は、公開しているカードローンのサイトのデータなどは公開していますが、他に特に更新することもないなぁと思っていたところ、jumblr.というブログの2015年 副業でアフィリエイトをはじめる人が注目すべきアフィリエイターブログ5選！という記事でこの冒険の書を紹介していただきまして読ませていただいたのですが、そういえばこのブログはアフィリエイトの手法の話はあまりせず、精神論に終始していた気がするので、少しだけ、自分がアフィリエイトを取り
こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基本のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお
Macでウェブ制作に携わる人全員に伝えたい、Windows, Linux, Mac OS Xのさまざまなブラウザでの表示確認ができる無料のMac OS Xアプリを紹介します。 Boot CampやParallelsなどは必要なく動作します。 Sauce -App Store Sauce for Mac -Website Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。
ブログやポートフォリオ、Eコマース、コーポレートサイトなどに、レトロ風、スタイリッシュ、クリーン、スリーク、背景に写真、イラストを使うなど、ウェブページのユーザーインターフェイスをPhotoshopで作成するチュートリアルを紹介します。
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く