WEBデザイナーで得たスキルでブログ制作に使える機能をシェアします!

WEBデザイナー ブログ制作 機能
おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

今回は、WEB制作の現場で活用しているツールや使い方について書いていこうかな〜と思います!

 

みみこみみこ
そういうの発信してくれたらサイコーでっす(=゚ω゚)ノ!!
ブログ書いてるだけでは分からない事、もっと知りたいです!
目次

ショートカット

 

まずは、作業の効率化が進むショートカット。

使うパソコンはMacとWindowsだと思うので、できるだけ両方に対応できるように書いてます。

※ここから先、「Macのショートカットキー|Windowsのショートカットキー」の順番で並んでます。

 

『ショートカットキー』

  • 切り取り
    Command+X|Ctrl+X
  • コピー
    Command+C|Ctrl+C
  • 貼り付け(ペースト)
    Command+V|Ctrl+V
  • 全選択
    Command+A|Ctrl+A
  • 上書き保存
    Ctrl+S
  • 名前をつけて保存
    Ctrl+S|F12キー
  • 一つ前に戻る
    Command+Z|Ctrl+Z
  • 検索
    Ctrl+F

 

この中で、コピーやペーストはよく使うと思いますが、
コードのカスタマイズをするときに対象コードを探す場合は「検索」を使って探すのが簡単です。

「目で探してでいいじゃーん」とも思われるかもしれませんが、

対象の箇所が複数ある場合や、コードが多くて見つけにくいときには、漏れなく洗い出して確認することができるので便利です。

検索をかけてからEnterキーを1回ずつ押すと、次の対象箇所に一つずつ移動していくので、目で追わずに済むのも楽ですよ!

 

あと記事を書いて、前の文章に戻したいとなったときに毎回打ち直すのではなく、編集画面で「一つ前に戻る」を使うことで前の内容に簡単に戻していくことができます。

 

キャッシュクリア

 

「CSSをカスタマイズしたときや、画像を変更したときに画面に変化がない!」

そんなときにやるのがこちら。

 

『ブラウザのキャッシュクリア』

  • Chromeの場合
    Ctrl+Shift+R|Shift+F5キー
  • Safariの場合
    Shiftを押しながら更新ボタンをクリック

 

この作業でしていることは、ブラウザ(ChromeやSafariなど)に残ったキャッシュのクリアです。

キャッシュとは、「ブラウザが記憶している前回のデータ」のことで、

実は、あなたが使っていたブラウザは、前回読み込んだ画像データを記憶し、「同じデータは再度読み込みをしない」という機転を効かせてページの表示速度をあげたりしてくれているんです!

 

おかぴーおかぴー
優しさ!けど、ちょっと焦る笑

 

でも、この機能が影響してブログで変更したのに表示が切り替わらないという現象が起こってしまうことがあります。

つまり、WordPress上では切り替わっていたとしても、前回アクセスした人のブラウザでは変更前のデータが表示されてしまう可能性があり、

あなた自身も記事を確認するときに変わっていないのであれば、ブラウザで同様のことが起こっているというわけです。

 

もう一度言うと、

キャッシュクリアとは「前回読み込んだデータをブラウザに一旦忘れてもらって、再度全てのデータを読み込んでもらう」という作業なので、

もし変更したのに変わっていない場合は、慌てずこのキャッシュクリアを試してみてください。

 

おかぴーおかぴー

よくプラグインなどで、キャッシュ系のプラグインを使ったりしているブログもあると思います。

僕も、「Autoptimize」、「WP Fastest Cache」というプラグインを利用していますが、CSSを変更したり画像を変更した場合にはこのプラグイン上のキャッシュクリア作業を必ず行っています。

理由は、自分以外のユーザーが再度このブログを見てくれたときに、変更前のデータが表示されないように相手のブラウザに再読み込みするように伝えるためです。

 

もう少し簡単に言うと、相手のブラウザにも「もう一回全部読み込むようにしてね!」と伝えているんですね。

すると、ユーザーはわざわざ自分のブラウザでキャッシュクリアをする必要がありません。

 

更新されていないかなんて相手はわかりませんし、毎回ブログ記事を見るときにキャッシュクリアしながら記事を見る人なんていないと思いますし^^;

なので、この作業をしておけば、ユーザーは複数回アクセスしていても最新の画像・カスタマイズ内容がきちんと表示されるようになります。

 

「Autoptimize」、「WP Fastest Cache」のプラグインについては、ブログの高速化のための対策をまとめた記事に詳しい内容を書いていますので、

「ちょっとブログが重くて、表示速度が遅いな〜」って方は参考になると思います^^↓

[sitecard subtitle=合わせて読みたい url=https://okap01.com/pagespeed-insights-method target=]

 

キャプチャ機能(スクリーンショット機能)

 

パソコンで表示されている画面を、そのまま画像としてデータ化することができます。

 

『スクリーンショット・ショートカット(Mac)』

  • 画面全体を撮る場合
    Ctrl+Shift+3
  • 特定の範囲だけを撮る場合
    Ctrl+Shift+4

 

と、ここでWindowsの場合は、作業が一つ増えることになるのでこちらで解説します↓

 

●全体をスクリーンショットする場合

①「PrintScreenボタン」を押します。

ただし、これだけだと画像として保存されないため、下の②・③の作業を行います↓

②Windowsのアクセサリから「ペイント」ツールを起動する

③起動したら、「Ctrl+V」を押すと、切り取った画像が貼り付けられるので名前を付けて保存する。

 

●特定の範囲だけをスクリーンショットする場合

①「Alt」+「PrintScreenボタン」を押す

それ以降の操作は、上記の②・③と同じ。

 

おかぴーおかぴー

余談ですが、スマホでもスクリーンショット機能があるのはご存知でしょうか。

最近のスマホにはほとんど備わっていると思いますが、僕はブログであえてスマホで撮ったスクリーンショットを使ったりすることもあります^^

そして、スマホサイズの画像をブログで表現するときにオススメの横幅は「375px」です。

 

こちらは、スマホ画面として表現したい画像の例です↓

画像を挿入するときに横幅375pxで設定して、貼り付けています。

スマホ表示 確認 サイズ

 

ページ全体をスクリーンショットする

 

画面に収まらない長さをスクリーンショットを撮るときに役立ちます。

たとえば、「WordPressの設定画面をパソコン画面で表示される範囲を撮り、画像編集ソフトでつなぎ合わせて長い画像を作る」とかをしなくても、

クリック一つで、ページ全体をスクリーンショットしてくれる機能が「Chromeの拡張機能」にあります。

 

その中でも個人的にオススメなのは、「FireShot」という拡張機能です。

拡張機能とは、Chromeのブラウザに様々な追加機能を足していくことができるもので、FireShotもそのうちの一つです。

 

インストールの手順はこちら↓

 

①Chromeの拡張機能へ

スクリーンショット

 

②Chromeウェブストアを開く

スクリーンショット

 

③FireShotと検索、Chromeに追加ボタンを押す

スクリーンショット

 

インストールできたら、Chromeのブラウザの右上に「S」と書かれたマークが追加されているはずです。

画像だけだと伝わりにくいかもしれないので、操作方法を動画で解説しますね↓

 

このように、「画像として保存」を押すと、対象の画像がダウンロードされます。

また、このFireShotはページ全体だけでなく、先ほどご紹介した表示されている画面だけのスクリーンショットにも対応しています。

 

パソコン画面の拡大・縮小

 

地味に便利!

ブログ全体を見渡すときに、スクロールしないと確認できないってときに役立ちます。

 

『ブラウザ画面の拡大・縮小』

  • ブラウザ画面の縮小
    Ctrl+「ー」
  • ブラウザ画面の拡大
    Ctrl+Shift+「+」
  • 縮小を元に戻す
    Ctrl+0(ゼロ)

 

この機能の応用として、先ほどの画面のスクリーンショットを撮るときに、うまく画面全体に収まりきらないなんてときに使ったりします。

ブラウザの画面自体を少し縮小し、そのままパシャっとキャプチャを撮れて、一つの画面で伝える(見える)情報を多くするために使えますね。

こちらも動画でどうぞ↓

 

スマホ表示の確認

 

毎回スマホでブログの記事を表示させて確認しなくても、パソコン一つでスマホの実際の表示がどうなるか確認することができます。

 

おかぴーおかぴー

記事を公開したり、CSSなどのレイアウトを変更したときは、必ずスマホ表示も確認するようにしましょう!

なぜなら、大丈夫だと思っても、CSSがうまく効かずにスマホ表示が崩れていたなんてこともあるからです。

 

最近のGoogleの評価は「スマホページ>パソコンページ」なので、スマホでも操作しやすい、ユーザーにとって使いやすいブログを作ることであなたのブログの評価も高まっていきます。

なので、評価の高いブログを作れるようにこの手間は惜しまないようにしてくださいね。

 

では、実際に確認する方法ですが、Chromeの「デベロッパーツール(検証ツール)」というのを使っていきます。

 

『デベロッパーツールのショートカットキー』

Command+Option+I(アイ)|Ctrl+Shift+I(アイ)

→ブラウザで「右クリック→検証」を選択しても同じです。

 

パソコンでスマホ表示

 

右上の赤枠のマークをクリックし、ページをリロードすると、下の画像のように、スマホサイズの表示ができます。

パソコンでスマホ表示

 

ちなみに僕が主に確認しているのは、「iPhone6・7・8」のサイズです。

このサイズでレイアウトが崩れていないか確認すればほぼ問題ないでしょう。

 

パソコン表示に戻すときは、もう一度右上の部分をクリックしてリロードします。

 

アニジフ(.gif)

 

「どこが、どう変わったか?」を伝えるのに重宝しています。

主に僕は、Photoshopのソフトを使っていますが、フリーソフトでもアニジフを作成することができるのもあるので、視覚的に読者の方に変更箇所を伝えたいときには役に立つと思います。

たとえば、こんな感じですね↓

JINプロフィール アイコンカスタマイズ

 

この画像は、テーマ「JIN」のプロフィールのSNSボタンに、CSSを使って色付け・回転を加えたカスタマイズ記事で、変更箇所をわかりやすくするために作りました。

こちらがその記事です^^↓

[sitecard subtitle=合わせて読みたい url=https://okap01.com/jin-customize-profile-sns target=]

 

こういったデータは、アニジフ以外にも、動画(MP4)ファイルを作りブログで使用することもできます。

gifデータはMP4ファイルよりもファイルサイズが小さくなるので、ブログを見る人のネット回線・見るデバイスによって影響をあまり受けないファイルとして利用できます。

僕もしていることなのですが、もしブログでアニジフを使う場合はデータ量を圧縮してからアップロードすることをオススメします。

gifデータを圧縮してくれるオンラインサービスがありますので、参考までにご紹介。

GIF Compressor

 

ただし、gifデータは使える色の数が少ないため、以下のような場合は画像が荒くなったりすることがあります。

・色鮮やかな表現をするもの
・動かす時間が長いもの
・動きがなめらかなもの

どうしても荒くなってしまうのであれば、動画を使って表現しましょう。

 

まとめ

 

以上が、実際にWEB制作の現場でも使っているものです。

この中でも特に、スマホでの表示確認は絶対にした方がいいです。

思った以上に画像が見えづらいとか、文字が小さすぎて見えないとか、パソコンで見ていただけではわからなかったことに気づくことがあります。

今やほとんどのユーザーはスマホで情報を探す人が増えてきて、パソコンを持っていないって人も中にはいたりするようですし、どこからブログにアクセスされてもいいように、ブログ表示には気をつけることにこしたことはありませんので。

今回の記事で、あなたのブログ作成の効率が上がること祈ってます!^^

おまけ

ブログを作っていると、ふと

「見た目をもっとカッコよくしたい」「おしゃれでキレイな感じにしたい」っていう衝動が来ませんか?

みみこ

あるあるですね(笑)なんかしっくりこないなーとか、
でも、どう作っていいか操作も含めて分からないことがあります。

おかぴー

そんな時は、WEBデザインの勉強を少しだけでもいいので、
やってみるのもいいと思います^^

僕は見た目が納得がいくものが作れると、モチベーションが上がります。

よーし!また記事を書こうかな〜って思えるし、書いたものを見返して

「 はぁぁぁぁ〜(*´꒳`*)ウキウキ 」

ってなります(笑)

僕がこのブログを通して知り合った方は、みなさん自分のブログの見た目(デザイン性)とか、作り込み(WordPressの操作)に悩んでいる方が多かったです。

僕自身も初めはWordPressの管理画面からよく分からなくて、どこをいじったら何が変わるのか?もそうだし、

色を変えたり大きさ変えたり、基本的な内容でも何時間もかかったことがありました。

知り合った方のお悩みを聞いて改めて感じたことは、

そもそもWordPressでブログを作る=WEBデザインの知識が多少なり必要になるということです。

デザイン知識然り、コーディング知識しかり。。

でも、WEBデザインの勉強と言ってもその範囲はめちゃくちゃ広いし、ぶっちゃけ終わりはありません。

専門用語も多いし、だからと言って初心者の人が幅広く手を出して勉強するのも大変です。(ゴールを見失います)

それなら、

WEBデザイン初心者の人でも、モチベーションが爆上がりできるような必要範囲を絞ったブログ制作の教材があったらいいんじゃないか?と思ったんですが、どうでしょうか?(*^^*)

具体的には、こんな内容を盛り込む予定です↓

  • WEBデザインの知識を活かして魅力的なメインビジュアル(ブログのメイン画像・アイキャッチ画像)を楽しみながら作れるようになれる
  • カスタマイズが一定レベルでできるようになれる
  • パソコン自体の知識も身に付く
  • 程よい範囲のWEB知識がつくから、情報リテラシー(※)が高くなる
  • 登録してくれた方それぞれのお悩みに特化した、特別コンテンツを受け取れる

※情報リテラシー:世の中にあふれる多くの情報を、適切に活用できる能力

これから作っていくことになるのですが、

提供開始まで先行登録してくれた方には別途プレゼントもお送りしたいと考えています

最新の知識を受け取ることができますし、

登録してくれた方それぞれのお悩みに応じたコンテンツの提供ができることも、このLINEの一つの魅力かなと。

少しでも作れるよ〜って人にも、ためになる内容を盛り込む予定もあるので、興味がある方はLINE登録してもらえると嬉しいです^^

↓↓↓

チェックしてね
「お気軽にどうぞ〜」
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次