目次 配信品質とは 配信品質の重要性 配信品質の推奨基準 サイト表示速度の確認方法 課題分析にアクセス解析だけでは不十分 まとめ 配信品質とは 配信品質とは、ウェブサイトが素早く、そして確実にエラーなく表示される度合を測

配信品質を用いたコンテンツの品質管理をしよう




Tumblrの邪魔な広告を削除する方法(2017年5月) 【MEMO】

気がついたらTumblrの仕様が変わって広告が色々出るようになっていたようです。

Tumblrは無料ブログで広告がないことでメリットあったのに残念です。 しかも昨年は広告は出なかったのに今年に入ってから出てきていたようです。


自分が普段閲覧していない方のブラウザでサイトを確認してTumblrサイトで広告表示されていることに気づきました。

このブログも最近になってアドセンス広告以外のTumblr側が出してる広告が表示されていることに気づきました。

私は仕事用ポートフォリオ制作もTumblrで制作していたので慌てて削除しました。

パソコンだけじゃなくてスマホで閲覧しないとわからないTumblrアプリのインストール広告まで出てくる仕様でサイト運営者が気づきにくいのでタチが悪いような気がします。

ネットでは広告の消し方がわからない人はWordPressとか他のブログサービスへ引っ越してしまったようです。

私も広告を消す方法がわからなければWordPressへ即移転するかもしれません。

私は以下の方法で広告を削除することができました。


PC、スマホでサイトを閲覧すると右端の下部に広告がホップアップされる場合
管理画面の「広告」、「アフィリエイトリンク」のチェックを外します。

image

スマホで閲覧するとTumblrアプリインストールのボタンが下部に出てくる場合
管理画面を開いて「外観→テーマの編集→詳細設定」の順にクリックして以下の項目の「Tumblrを広める」のチェックを外します。

image

Tumblrの邪魔な広告を削除する方法(2017年5月)…




GoogleフォントをIllustrator,Photoshopで使う方法(他、追加された日本語フォント等)

(1)Google Fontのサイトから好みのフォントを選びます。 https://fonts.google.com

(2)選んだフォントのページのFamily Selectedのタブをクリックします。 「Download」ボタンをクリックするとフォントがインストールされます。 

image

(3)ZIP形式のファイルを解凍するとフォントデータが入っているのでダブルクリックするとフォントがPCにインストールされます。 

image

(4)フォントをインストールした後は下記のようにIllustrator、Photoshop内のデザインに使用できます。 

image


GoogleFontsは商用・非商用問わず利用できるから安心して使うことができます。
私はブログのロゴのフォントに使用しようと思っています。

GoogleFontsは日本語フォントが少ないからWebデザイン制作でも選択肢から除外しがちでした。

ググって検索してみたらいつのまにかGoogleFontsで日本語フォントが増えてました! https://googlefonts.github.io/japanese/

自分がいつも使っていてブログにも導入予定だった「M+ 1p」フォントがあったので嬉しいです。 細字があるからフラットデザインに合うから好きです。柔らかめの文字ですし。
仕事のwebやLPのデザインにも使えそうです。

「M+ 1p」フォント

image

「ニクキュウ」フォントはGoogleフォントらしからぬ漫画っぽいフォントでユニークです。
「ニクキュウ」フォント

image

「はんなり明朝」フォントは縦文字だと明朝体が美しく感じます。
「はんなり明朝」フォント

image

「ニコもじ」まであるんですね‥(^^;)日本のオタク文化が世界のGoogleまで認められてる??と思った瞬間でした。
「ニコもじ」フォント

image

GoogleフォントをIllustrator,Photoshopで使う方法(他、追加された日本語フォント等) (1)Google…





TumblrサイトがGoogle検索順位で1ページ目に表示されたので方法とメモ(HTMLのSEO内部対策)

Google検索で「イラスト ランディングページ」で自サイトのポートフォリオが検索順位6番目に浮上してきました。一時的なものかもしれませんが今後の参考のためにメモしておきます。

LPのようなペライチのポートフォリオサイトだったのでこの結果には驚きました。

Google検索1ページ目に表示されました。

image

2,3日前にサイト文章を変更しただけなのにGoogle検索1ページ目にくるということはサイトのマークアップやSEO内部対策は上手くいっている方だと思います。

Tumblrでtitle、descriptionの文章を変更するには下記の管理画面で「テーマの編集」をクリックします。

image

左のメニューからタイトル(<title>タグ)、説明(descriptionのメタタグ)の編集が行えます。

image

過去記事で行ったTumblrテーマのSEO対策が効いてるのかもしれません。

Search Console(ウェブマスターツール)で「検索トラフィック→検索アナリティクス」で自分のサイトがどういうキーワードで検索されているかわかるのでサイトのSEO改善の参考になります。

今回の件で自社サイトの場合は強豪相手が多そうなキーワードは避けてニッチなキーワードでかつ人に必要とされているキーワードを入れると効果があると思いました。

▼Tumblrテーマのtitle,descriptionメタタグは下記のようにカスタマイズしています。

・Tumblrテーマに使用した言語とフレームワーク:HTML5/CSS(SCSS)、Bootstrap4

{block:PreviousPage}{CurrentPage}ページ目|{/block:PreviousPage}{block:TagPage}{Tag}|{/block:TagPage}{block:SearchPage}検索結果: {SearchQuery}|{/block:SearchPage}{block:PermalinkPage}{block:Posts}{block:HasTags}{block:Photo}{block:Tags}{Tag}|{/block:Tags}{/block:Photo}{block:Photoset}{block:Tags}{Tag}|{/block:Tags}{/block:Photoset}{/block:HasTags}{/block:Posts}{/block:PermalinkPage}{block:PostSummary}{PostSummary}|{/block:PostSummary}{Title}{block:IndexPage}|{Description} {/block:IndexPage}
{block:Description}

{/block:Description}

TumblrサイトがGoogle検索順位で1ページ目に表示されたので方法とメモ(HTMLのSEO内部対策)Google検索で「イラ…





ローカル環境のWordPressサイトをBracketsでライブプレビューする方法(MEMO)

PCのローカル環境のWordPressサイトをBracketsでライブプレビューする方法を調べたのでメモします。

ローカル環境はbitnami、MAMPだった場合も手順は変わらないと思います。


bitnami側の準備
(1)bitnamiの「manager-osx」をクリックして起動させます。

image

(2)「Manage Servers」タブで「Start All」で全て起動させます。 

image

(3)「Go to Application」でWordPressサイトを開きます。

開いたWordPressサイトのhttp://localhost:8080/wordpress/のURLをコピーします。 

image

Brackets側の準備
(1)Bracketsで「ファイル→プロジェクト設定」をクリックします。

image

(2)bitnami側の準備の(3)でコピーしたURLを貼り付けて「完了」をクリックします。 

image


(3)Bracketsでライブプレビュー(Command+Ait+P)をするとWordPressサイトがブラウザで表示されます。 

image

BracketsでWordPressサイトをライブプレビューしながらSCSSでコーディングするとコーディングが捗りそうです。

前にWordPress案件をしてた時にBracketsがあれば倍以上は作業が早かったかもしれません。
その時使っていたDreamweaverはコーディングもライブプレビューも使いにくかったです。(2013年頃)

私のWordPressコーディング技術が初心者なせいもありますけど、ソフトの動作が重いと必然的にコーディング作業も遅くなるとは思います。

環境が構築できたら後はCSSコーディングでデザインカスタマイズかなと思います。
従来通りに「静的サイト制作→PHPコーディング」の手順で行く予定です。

GW期間にAMP対応のブログテーマを作成を目標にしています。

結構、BracketsはWebコーディングに関しては何でもできるエディタのような気はしました。
エクステンション(拡張機能)でかゆいところに手が届く的な感じです。

実際Dreamweaverを使っていた時よりコーディング力は上がっていると感じます。
SASSがスムーズに使えてリアルタイムにコンパイルできる分だけDreamweaverよりはコーディングに集中できるからだと思います。

表示されているサイトは下記のWordPress書籍のサンプルです。


▼参考になった記事

ローカル環境でWordPressのテーマ(SASS)をBracketsでライブプレビューしながら編集する

http://qiita.com/hiro_hosono/items/580352247ebaa450d1aa

ローカル環境のWordPressサイトをBracketsでライブプレビューする方法(MEMO) PCのローカル環境のWordPr…



新しくサイトを開設しようとしている方、またはすでにサイトを公開している方へ。 サイトを作るに当たって、キャッチコピーや、使用するテキスト、コンテンツ名など、文章を作る機会はたくさんありますよね。 どうやったらユーザーに興

キャッチコピーの作成で迷ってしまう方へ




不労所得を色々試してみた収入結果 (アドビストック、アドセンス広告ブログ)

Adobe Stockの収入結果


Adobe Stockは3月14日から始めました。 ドクロのイラストを1枚のみアップしました。

その後、4月7日に1枚売れました。

1枚売れたので、4月11日から6枚イラストを追加しました。

その結果、4月に3枚売れました。 合計126円の報酬になりました。

イラストのジャンルはバラバラでも売れるみたいです。

初めのうちは思いついたものを描いてアップするだけでも良さそうです。

私の場合は手探り状態なので色んなテイストでイラストを描いてアップしています。

Adobe Stockの収入結果

アドセンスブログの収入結果

下記は2016年1月〜2017年3月末の収入結果です。

Googleから支払われた報酬は過去に2回です。

  • 2016年7月‥8,508円
  • 2017年1月‥9,010円

合計金額:17,518円

本業の片手間に自分のブログや無料素材サイトをポツポツと更新していました。

このブログも150記事を越えたあたりから収益が発生し始めました。

現在は無料素材サイトの更新もやめて、ブログは月に3〜15記事程度しか更新していません。


自分でサイト運営している場合だと何をテーマにしても良いわけです。

私のようにWebデザイン、イラスト関係の技術系の勉強ブログ的なものでも良いし。 人によっては漫画サイト運営してアドセンス広告で収入得てる人もいます。


AdobeStockとアドセンスブログで結果が出るのが早かったのはAdobeStockだと思いました。わずか1ヶ月で報酬が発生したので。

アドセンスブログの場合は記事をある程度増やさないと収益発生しないし、支払い最低金額8,000円にもなかなかたどり着けません。


デザインやイラストが作れる人が向いている不労所得はAdobeStockのようなストックフォトサイトだと思います。

Adobe Stockの場合は下記サイトの説明にある通り、アカウントの収益が一度50ドルに達すると報酬を受け取ることができます。

50ドル=約5,564円でAdobeに報酬を請求できます。


▼Adobe Stockにコンテンツを投稿

https://helpx.adobe.com/jp/stock/how-to/upload-content-to-adobe-stock.html


個人的にはFotoliaみたいなクレジットで表記されているより何円売れたか表示されているAdobeStockの方がわかりやすいと思いました。

画像アップロードに関してもAdobeStockの方がアップしやすいです。

画像を認識するAI?でタグが出てくるのでタグ記入の手間を減らしてくれています。


▼源泉徴収申請フォーム の入力方法について下記サイトが詳しく説明されていて参考になります。

Adobe Stockに提出する「W-8BEN」を書いたので紹介します。

http://stock-photo.ldblog.jp/archives/13826363.html


ストックフォトの他にはイラストACのような無料素材サイトもありますが、クリエイターが作品の著作権譲渡しなければならないし、 著作権に関してトラブルあればクリエイター側が賠償請求をされるようです。

規約に納得いかない部分も多いし、投稿は審査制で5000円以上にならないと換金できないようになったので今年の1月にイラストACはやめました。

審査制で報酬5000円以上でないと換金できないのはAdobeStockと条件が変わりません。


素材販売はしばらくはAdobeStockで頑張ろうと思います。

まずは100個登録すれば数千円程度の収入を毎月得ることもできそうです。

不労所得を色々試してみた収入結果 (アドビストック、アドセンス広告ブログ) Adobe Stockの収入結果Adobe…




プロフィールに存在感を与えたい!Animate CC(Flash)で歩くアバターを作る方法

(1)ボーンツールを使用します。

シンボル化した手足胴体をなぞるようにつなぎます。

(2)タイムラインで何秒間のアニメを作るか決めてフレームを挿入します。

(3)ボーンツールで作った関節をマウスドラッグして左右に動かして歩いているようにポーズを作るとアニメーションの完成です。私は3箇所でポーズを作りました。

(4)Animate CCでPNGシーケンスを選択し書き出した後でPhotoshopで書き出したpng画像を開きます。 その後、Web用に保存をしてGIF画像として保存します。

こんな感じでプロフィール画像のアニメを作成しています。

▼過去の関連記事

Adobe Animateの基本操作・綺麗にGIFアニメを書き出す方法

▼参考サイト

Adobe Animate CC「アニメーションキャラクターでリアルな動きを表現する 」

プロフィールに存在感を与えたい!Animate…





bitnamiで簡単にMacのローカル環境へWordPressを設置する方法

AMP対応のWordPress構築に興味が湧いてきたのでWordPressブログテーマ構築を久しぶりに始めました。

普段はランディングページのデザインとコーディングの案件ばかり受けているためWordPressに関してはテーマ作成程度の知識しかありません。

私の場合はWordPressは趣味の範囲で楽しむ程度に使っています。

私はMacを使っているのでbitnamiというWordPressをインストールできるツールを使ってローカル環境へWordPressサイトを作りました。

PCにテーマやプラグインのデータがあるとバックアップにもなるので、必ず新しいWordPressサイトを作る時はローカル環境から作ります。


(1)bitnamiのサイトへ行きMac用のインストーラをダウンロードします。
https://bitnami.com/stack/wordpress

image

(2)インストーラをクリックして開きます。

image

(3)言語は日本語がないので「English」を選びます。

image

(4)セットアップ画面が開きます。「Next」をクリックします。

image

(5)インストールするフォルダはデフォルトのままで「Next」をクリックします。

image

(6)WordPressを設置するフォルダを選びます。 初期のままでも問題ないので「Next」をクリックします。

image

(7)アカウント設定をします。 名前、ログイン、パスワードを任意のものに変えて設定します。

image


ログイン名を初期設定の「User」のままにして、次へ進むとエラーみたいになりました。 そのため「admin」に変更しました。

本番サーバーではセキュリティの安全のために変更しようと思います。

(予測されやすい「admin」はWordPressでは絶対ダメです)

(8)ブログ名を決めて入力します。 後で変更可能なので私はデフォルトのままにして「Next」へ進みました。

image

SMTPの設定です。 ローカルでテーマ制作する場合には必要ないと思ったので私は省いて「Next」へ進みました。 必要な場合はSMTPの設定します。


(9)途中、クラウドの設定もありますがここでは省きました。 インストールするかどうか聞かれるので「Next」へ進みます。 

image

インストールが始まるのでしばらく待ちます。

image

(10)最後は「Finish」でインストールが完了します。

image

(11)下記のページがブラウザで表示されます。 下記のURLでWordPressサイトへアクセスできます。

image


初期のWordPressアドレスhttp://127.0.0.1:8080/wordpress/
管理画面アドレスhttp://127.0.0.1:8080/wordpress/wp-admin


bitnamiのWordPressを日本語化する方法

(1)「Settings」→「General」を選択します。

image

(2)「Site Language」を「日本語」に選択し「Save Changes」をクリックするとWordPressが日本語化されます。

image

bitnamiはデフォルトで以下のプラグインが入っています。 「All In One SEO Pack」と「JetPack」はよく入れるので助かるかなと個人的には思いました。


「VersionPress」って知らないから何かな?と思ったらWordPressをGitのバージョン管理してくれるプラグインのようです。

「WP-Mail-SMTP」はSMTPサーバを使ってメールを送信できるようにするプラグインでContact Form 7の補助的なプラグインのようです。

image

▼参考になったサイト

PCにWordPressローカル環境を「Bitnami」で作成する方法
https://nelog.jp/how-to-install-bitnami


Contact Form 7プラグインでGmailのSMTPサーバを使ってメール送信
https://www.adminweb.jp/wordpress-plugin/list/index12.html

▼WordPressテーマ構築の参考になりそうな書籍

bitnamiで簡単にMacのローカル環境へWordPressを設置する方法 AMP対応のWordPress構築に興味が湧いてき…




いちご(苺)柄イラストの壁紙(ブルー) (ホワイト・白)[Adobe Stock素材販売]

いちご(苺)柄イラストの壁紙背景の水色(ブルー)と背景白の2種類をAdobe StockとFotoliaで販売しました。

いちご(苺)柄イラストの壁紙(ブルー)

→Adobe Stockで見てみる

→Fotoliaで見てみる


いちご(苺)柄イラストの壁紙(ホワイト・白)

→Adobe Stockで見てみる

→Fotoliaで見てみる

Illustratorの素材作りにオススメな書籍

井上 のきあ MdN 2010-04-09

いちご(苺)柄イラストの壁紙(ブルー) (ホワイト・白)[Adobe…




Illustrator CC 2017.1.0の新機能「画像の切り抜き」の使い方

Illustrator CC 2017.1.0に「画像の切り抜き」機能が追加されました。

詳細はAdobe公式サイトで確認できます。

▼画像の切り抜き

https://helpx.adobe.com/jp/illustrator/using/crop.html

▼その他、Adobe Color テーマパネルの編集も可能になりました。

https://helpx.adobe.com/jp/illustrator/using/adobe-color-themes.html

画像切り抜きの方法


(1)写真を選択した状態で「画像の切り抜き」をクリックします。

(2)以下のようなメッセージが出てくるので「OK」をクリックします。

(3)ウィジェットコーナーとエッジハンドルをドラッグして切り抜きたい箇所を指定して切り抜きます。


Illustratorでリンク画像や埋め込み画像の切り抜きができると
Webデザインカンプ作成時にクリッピングマスク後の写真の切り抜きができるから便利です。

去年「アセットの書き出し」が使えるようになってIllustratorのWeb画像の書き出しがより便利になりました。

今回追加された「画像の切り抜き」と「アセットの書き出し」の機能を合わせるとWebのデザインカンプ作成が捗りそうです。

クリッピングマスクした写真を「画像の切り抜き」をして「アセットの書き出し」をすると余分な余白がなくなります。

ただし、「画像の切り抜き」をした後の画像は切り抜き前の画像の大きさには元に戻せないようなので、その点注意が必要です。

前回のバージョンではクリッピングマスクした写真で「アセットの書き出し」を行うと白い余白ができてしまうので写真はアートボードで個別に切り抜いていました。

これからはその必要もなくなりますね。

「画像の切り抜き」は今後よく使う機能になると思うのでIllustratorでキーボードショートカットとして登録するのがオススメです。

私はalt+command+でキーボードショートカットを作りました。

command+@でドロップシャドウの効果が使えるようにもしています。

(Webデザインではドロップシャドウもよく使うので)

Illustratorもショートカットを自分好みに割り当てると作業の時短化になります。

Illustrator CC 2017.1.0の新機能「画像の切り抜き」の使い方 Illustrator CC…