カテゴリー: ホームページ作成・管理

  • GoogleコアアップデートはSEO対策の考え方を変えるチャンス

    GoogleコアアップデートはSEO対策の考え方を変えるチャンス

    「ホームページ制作はSEO対策をしっかりやっている会社に依頼したいです。」
    「急にアクセスが落ちたんだけど、調べてみたらGoogleのコアアップテートがあったみたい。ショック!」

    こんにちは。
    みなさんの中には上のセリフのようなことを感じたことがありますか?
    私はありました。

    上の2つのセリフはまったく立場が異なる人の発言を書いてみたものですが、意識していることに共通するものがあります。
    それが「Google」「SEO対策」です。

    [jin_icon_checkcircle color=”#e9546b” size=”18px”]記事更新日:2025年2月10日
    [jin_icon_checkcircle color=”#e9546b” size=”18px”]記事公開日:2021年10月14日
    [jin_icon_checkcircle color=”#e9546b” size=”18px”]むずかしさ:[jinstar4.0 color=”#ffc32c” size=”16px”]

     

    SEOを簡単にいうと?

    そもそもSEO対策って何ですか?というと、ものすごく簡単で乱暴なイメージで説明すると

    [jin_icon_checkcircle color=”#e9546b” size=”18px”]Google社による検索システムを攻略するための施策。検索で上の方に出てくるようにする攻略法。

    のような感じです。

    SEOとはSearch Engine Optimizationの略で、日本語にすると「検索エンジンの最適化」

    検索エンジンとは

    インターネット上にある膨大な情報から探し出す機械システムです。

    最適化とは

    最も適したものに変えていく、というような感じです。

    その検索エンジンの主たる主がGoogle社となります。
    詳しく説明すると長く難しくなってしまうため、~の感じです、というような書き方です。
    すみません。

    SEO対策はこうあるべきという情報があふれている

    「SEO対策」で調べるとSEOに関する情報が無料であふれていますので、興味のある方は検索して見てみてください。
    その内容に関しては私も大変お世話になっています。

    今回は手法ではなく、そのSEOに対する意識の向け方について考えてみた記事となります。

    SEO対策でいわれる具体的な項目

    SEOにはどのような施策があるのでしょうか。
    私がこれまでに見てきた内容を以下に羅列してみますね。

    ・サイト速度
    ・文字数〇〇〇〇文字以上
    ・キーワード選定
    ・見出し項目
    ・パンくず
    ・画像
    ・唯一無二の内容
    ・更新頻度
    ・100記事
    ・SEOに強いテーマを選ぶ
    ・ドメインパワー(年数)
    ・被リンク
    などなど、細かいことを挙げていくと30項目以上あります。

    ちなみに私の経験上、これらの項目の多くは「ないがしろにしてはいけないけれど、重要ではないかな。」という印象です。
    これらは結局「見ている人がどれだけ快適で満足できるか」につながることであり、手段は最終地点へのちょっとした気遣いにも感じます。

    私の扱うWordpressテーマ「JIN」のサイトは4サイト、JINはサイト速度が遅いですが、検索上位はかなりの数で成果がありますし、
    100記事も書いていないサイトで、文字数は数百文字でも検索上位になるページがあります。

    逆に、広告やアフィリエイトプログラムによるブロガーの宣伝が盛んなテーマもあり、初心者はテーマ選びに右往左往してしまいますね。

    さらっとJINのステマのようになっていますが、JINは確かアフィリエイトプログラムを導入していないかと思うので、私には何のメリットもありません。
    そして広告やアフィリエイトプログラムを導入したテーマを否定しているわけもなく、実際そういったテーマ数種類を使っています。

    それらのテーマでもお問い合わせや予約は来ますし、しっかり効果はあります。
    つまり、テーマで検索順位が左右されるほど簡単ではないということです。
    逆に言えば、本質をしっかり持っていればどんなテーマでも、どんなサイトの作り方でも自然と検索上位になるということですね。

     

    Googleコアアップデートによって検索順位が激変することがある

    Googleコアアップデートとは

    コアアルゴリズムアップデートのことで、上で書いた検索エンジンのメンテナンスや改善、更新、バージョンアップ、マイナーorメジャーチェンジのようなイメージです。

    つまり検索される記事の中身がどうあるとどのように評価され、どのくらいの順位になるかの中身の変化です。

    このGoogleコアアップデートは定期的・不定期に行われ、常にWebサイトの順位は変動しています。

    これにより
    「私のブログでキーワード検索1位だったページが、2ページ以降になってしまった。」
    「ブログ自体アクセスが急になくなった。」
    という人の声がとても多いです。
    逆に
    「ブログのアクセスが急に増えた気がする。」
    という経験をされている方も多いです。

    私はどちらも経験したことがあります。

    Googleコアアップデートに対する心構え

    はじめはGoogleコアアップデートは怖いものだと思っていたのですが、10年以上もブログやWebサイトを制作しているとだんだん気にならなくなってきます。

    Googleコアアップデートが気にならない理由

    私が直接管理しているWebサイトは10以上にのぼります。
    ジャンルもバラバラです。

    Googleコアアップデートによってその全体アクセスが減るサイトもありますが、逆に上がるサイトもあるのです。

    現実の世界でも、時期によって売り上げが伸びたり、流行りによって伸びたり、その逆もあります。

    これに気づくと精神的に非常に楽になります。

    多くの人は1つのブログを大切に育てていることが多いため、そのジャンル・そのブログの検索順位が下がると心にダメージを受けてしまう方もいるかもしれません。

    Googleコアアップデートを気にしないようにする考え方

    Googleコアアップデートは永久に完成されないディズニーランドのようなイメージです。
    常により良いサービスのための試行錯誤、そのときそのときに合わせた更新や変更が行われます。

    上で書いたように、1つのサイトだけではなく、2つ以上の違うサイトを持てば良いのでは?
    と思うことも一理ありますが、まずはGoogleコアアップデートによるアクセス低下・上昇に一喜一憂しないことが大切かと思います。

    次に説明することが、このことへの裏付けとなります。

    Googleコアアップデート後に気づいたSEOに対する変化

    Google検索エンジンにはいくつかの枠 (企業・公共・ブログなど) があるなど、いろいろと情報はあふれていますが、2021年9月頃、私はいくつかの検索結果の変化に注目しました。

    数年前までの検索結果の傾向

    数年前までは、検索結果の1位は大手企業や公共機関であったり、大手メディアマガジンだったり、ブログでも長文のやたらと詳しいボリュームのページが出て来ていたのです。

    最近の検索結果の傾向

    現在はキーワードで調べると、辞書のように短文ですっきりとしたページが検索上位にあがってくることが多くなりました。
    実際に当サイトのようなドメインパワーの弱いサイトでも上位に来ている短文ページがあります。

    それが下のページになります。

    https://locoweb.net/blogvlog/

    当サイトのドメイン取得が2021年6月。
    この記事をアップしたのが2021年6月30日。
    文字数はわずか440文字程度。(2021年9月時点)
    10秒ほどで内容が理解できる構成で書き上げたページですが、これが2021年8月には検索1ページ目に上がりました。

    この検索結果の変化を見ているとSEOに対する考え方が変わってきます。

    SEO対策の基本は良質でわかりやすいコンテンツ

    私はSEO対策の基本は「良質」で「わかりやすい」コンテンツだと感じています。

    かつてのSEO対策の流行りのように、情報量を詰め込みすぎて読むのも目的の項目を探すのも疲れてしまうページも多いです。
    しかし最近はスッキリとしたページが検索上位に上がっているのも事実です。

    インターネットを使う人がどんな人かを想像してみる

    インターネットを使っている人のすべての人がインターネットを使い慣れているわけではありません。
    大人もいれば子どももいます。
    視覚にハンディを持った人や漢字を読むのが困難な人もいます。

    そんな人たちのことを考えて、すべての人がわかりやすく信頼できるサイト・ページを提供できているかと言えば、私の管理するサイトもほぼ対象外です。

    しかしGoogle社は世界のインターネットの中心にいるような存在。
    多国籍のスタッフ、多言語のユーザー、さまざまなハンディを背負って働くスタッフもいることでしょう。
    価値観も国によって異なる場合だってあります。
    そんな会社ですから、より多くの人が平等にインターネットを楽しめるためには、私たちが考えるSEO対策とは全く異なるものが求められているかもしれませんね。

    みんなと同じことをするよりユニークさを追求してみる

    私の管理していたサイトは詳しさに重点を置いたボリュームのあるサイトが多かったです。
    実際にブログでランキング3位以内をキープしているものは、ページボリュームのあるものだけでした。

    しかしそれは今までのお話。

    正直言うと、今までのSEO対策を意識してブログで検索上位を狙うと、1記事仕上げるのに10時間~1週間くらいかかってしまっていました。

    単に文章が下手だったりというのもありますが、より正しい情報を追求すると調べる時間や何十枚も使う画像編集などで時間を大きく取られます。

    このサイトは、詳しく説明したページより「はじめての人」にわかりやすいことを目指して、シンプルに仕上げるようにしています。

    内容も専門的なものはプロに任せ、私は私の立場から相手に向けたやり方でやってみよう、と思い立ち上げました。もちろん興味の入り口・きっかけとしての存在程度です。

    それがうまくいったとかうまくいっていないとかは今は証言できません。
    でも、楽しいです。

    SEO対策を全員がしたらどうなるか

    今までインターネット上にあふれているSEO対策の知識を積み上げて、誰もが同じようにやっていたらどうなるでしょうか?
    そこには競合という言葉が生まれ、少ないパイを奪いあうことになります。

    今わかりやすく情報がほしい方が検索したときに、どのページも同じような構成で長々と解説されていたらどうでしょうか。

    みんな同じようなページだった場合、あなたがそれを評価する側だったらどうしますか?

    SEO対策はどれくらいお金がかかるか

    「SEO対策は競争だからお金をかけてでも誰かに任せたい。」
    と思う方もいるかもしれません。

    ちなみにSEO対策はどれくらいお金がかかるか、という質問に関して、私はひどいもので「結果がでるかでないかは管理者さん次第です。」と答えます。

    SEO対策はその対策に対する結果が見えにくく、常に流動的なため、結局は時間をかけてサイトを育て上げることになるためです。

    もし短期間で成果を上げたいという要望があれば、有料広告を使うことをおすすめします。
    有料広告は費用対効果が見えやすいです。
    そのため、「運用にいくらかかります。」と説明しやすいのです。

    しかし広告は単発のアクセスは望めますが、それ以降のコンテンツに対するファン獲得につながるとは限りません。

    インターネットを楽しむ気持ちで続けたい

    今あなたが管理しているサイト。
    今日、誰かから1億円もらっても続けますか?

    売れる法則やページ構成にはある程度「型」があります。
    しかし、SEO対策には基本的な「型」はあるかもしれませんが、それ以上は常に流動的で形の見えないものではないでしょうか。

    会社も長く経営していれば山あり谷あり。
    ブログもWebサイトもアクセスが上がる時もあれば下がる時もあります。
    収益だって時期やタイミング、時代によって波があります。

    私は何かのご縁があってこのページをここまで読んでいただいた方には、インターネットのツールを楽しんでもらいたいです…。

    この記事はあくまで一個人の考え方です。
    公式でもなければ、メジャーな考え方でもありません。
    でも、もし何かのスパイスとして感じてもらえれば、それだけでうれしいです。

    読んでいただいた方のサイトがより豊かなものになりますよう願っています。

  • 【簡単説明】Googleアナリティクス4(GA4)に移行する方法|既存プロパティから追加設定

    【簡単説明】Googleアナリティクス4(GA4)に移行する方法|既存プロパティから追加設定

    本記事では、
    「今までGoogleアナリティクス 「ユニバーサルアナリティクス (UA)」 を使っていた人」
    が、

    「「Googleアナリティクス4 (GA4)」へ移行設定するための方法」
    を、
    できるだけ難しい解説を省いて説明します。

    Googleアナリティクス

    Googleが提供する無料のアクセス解析ツールです。

    [jin_icon_checkcircle color=”#e9546b” size=”18px”]記事公開:2022年3月31日
    [jin_icon_checkcircle color=”#e9546b” size=”18px”]むずかしさ:[jinstar4.0 color=”#ffc32c” size=”16px”]

    いままでのGoogleアナリティクスについて

    2020年までにGoogleアナリティクスの設定を行っていた方の多くは、
    「ユニバーサルアナリティクス (UA)」
    という設定がされています。いわゆるこんな感じの画面です。

    Googleユニバーサルアナリティクスのビュー
    引用元:Googleアナリティクス

    ユニバーサルアナリティクスとかUAだとかの名前は置いておいて、
    俗にアナリティクスとは多くはこのことを指していました。

    GoogleからGA4プロパティ設定の案内

    2021年頃

    Googleアナリティクス4というまったく新しいアクセス解析の設定が可能になりました。

    アナリティクスの設定をがんばって行い、どれくらいのアクセスがあるのかがわかる便利さに流れを任せていたというのに、新しい設定なんて・・・ということで保留。

    新たにアナリティクスを設定する時には「Googleアナリティクス4 (GA4)」で設定することが可能でしたし、お試しでいかが?というような情報はチラチラ見ていました。

    しかし今までの「ユニバーサルアナリティクス (UA)」はアナリティクスのダッシュボード (ビュー) を見るとぱっと見でサイトごとに訪問ユーザーやアクセス数がわかりますし、それ以前にこれに慣れている人はなかなか前に踏み出せなかったのではないでしょうか。

    私はいつかやらないとなぁ、とは思いつつもGA4の設定をスルーしていました。

    2022年初頭
    Googleアナリティクス4の案内
    引用元:Googleアナリティクス

    Googleアナリティクスのダッシュボード上部にこんなお知らせが表示されるようになりました。

    2023 年 7 月 1 日より、ユニバーサル アナリティクスでは標準プロパティで新しいデータの処理ができなくなります。それまでに Google アナリティクス 4 プロパティに切り替えて設定を進めておきましょう。

    いままでの設定におけるサービス終了予告です。

    これを行わないとどうなるかは現時点では詳細は決定づけられていないものの、予想できることは

    今までの「ユニバーサルアナリティクス (UA)」のデータは残るが
    アクセス解析ができなくなる可能性がある

    ということです。

    Googleアナリティクス4(GA4)とは

    Googleアナリティクス4 (GA4) は、Googleアナリティクスの新しいバージョンサービスです。
    第4世代のGoogleアナリティクスということです。

    ・アクセス解析などの機能的なものは今までのような感覚で使えます。
    ・無料でほとんどの機能を使えます。
    ・アプリの分析も可能になりました。

    大きな変更点は「新たにWebとアプリのデータを統合して分析する機能を搭載している」点です。

    この記事を見ている方はさほど気にする点ではないかもしれません。

    UAからGoogleアナリティクス4(GA4)への移行方法

    GA4のプロパティを作成には
    「新たにGA4のプロパティを作成する」
    「今まで使っているもの (プロパティ) に「GA4」を追加する」
    の2通りがあります。

    ここでは今まで慣れ親しんだ「ユニバーサルアナリティクス (UA)」の「プロパティをGoogleアナリティクス4 (GA4)」に移行する方法を説明します。

    厳密に言うとまったく新しいものになりますので、「移行ではなく追加設定」のような感覚です。

     

    1. 管理マーククリック

    Googleアナリティクス4設定方法
    引用元:Googleアナリティクス

    ダッシュボード (ビュー) の左下にある「管理マーク (カギマーク)」をクリックします。

    矢印

    2. サイトを選択 (複数サイト登録してある場合)

    Googleアナリティクス4設定方法

    プロパティのサイト名をクリックし、GA4に設定したいサイトを選択します。
    もし該当のサイト名が選択されていれば、「3. GA4設定アシスタントをクリック」へ進みます。

    矢印

    3. GA4設定アシスタントをクリック

    Googleアナリティクス4設定方法

    「GA4設定アシスタント」をクリックします。

    矢印

    4. 「はじめに」をクリック

    Googleアナリティクス4の移行設定
    引用元:Googleアナリティクス

    「新しいGoogleアナリティクス4プロパティを作成する」の「はじめに」または「ようこそ」をクリックします。(記載が異なる場合があります。)

    矢印

    5. 「プロパティを作成」をクリック

    Googleアナリティクス4のプロパティを作成
    引用元:Googleアナリティクス

    「プロパティを作成」するボタンをクリックします。

    矢印

    6.「タグの設定の矢印」または「データストリーム」をクリック

    Googleアナリティクス4のタグの場所
    引用元:Googleアナリティクス

    作成したGA4設定アシスタント内の「タグの設定」の横の矢印「>」
    左メニューの「データストリーム」をクリックします。

    矢印

    7. サイト名をクリック

    Googleアナリティクス4のデータストリーム

    データストリーム内にある「サイト名」をクリックします。

    矢印

    8. タグを表示する

    Googleアナリティクス4のタグ表示方法

    「データストリームの詳細」の真ん中下にある、
    「グローバル サイトタグ (gtag.js) ウェブサイト作成ツールや、CMSでホストされているサイトをご使用の場合、このタグを設定」をクリックします。

    矢印

    9. グローバルサイトタグをコピーする

    Googleアナリティクス4のタグをコピー
    引用元:Googleアナリティクス

    「グローバル サイトタグ (gtag.js)」をコピーします。

    タグは
    <!– Global site tag (gtag.js) – Google Analitics –>
    からすべてです。

    右側の四角いマークのコピーボタンを押すと全コピーできます。

    矢印

    10. タグをHTMLに貼り付け

    コピー「グローバル サイトタグ (gtag.js)」 を、計測したいサイトに実装 (貼り付け) します。
    このコピーまでは問題なくできても、実装方法でつまづく方が多いかもしれません。

    貼り付ける場所

    基本的な原理としてはすべてのページの「HTML」に貼り付けます。

    もしくはWordPressを利用している方はテーマに備わっている「head」セクションに貼り付けするのが便利です。

    UAのようにトラッキングコードIDを実装する方法もありますが、このタグの実装は今のところ必須となるようです。ちなみにGA4のトラッキングコードは、「測定ID」という名前となります。

    WordPressテーマ「Cocoon」のHEADにコードを貼り付ける方法

    1. WordPress管理画面サイドメニューの「Cocoon設定」→「アクセス解析・認証」をクリックします。

    2. 一番下にある「その他のアクセス解析・認証コード設定」の「ヘッド用コード」という所に貼り付けます。

    3. 一番下の「変更をまとめて保存」をクリック

    WordPressテーマ「JIN」のHEADにコードを貼り付ける方法

    1. WordPress管理画面サイドメニューの「<>HTMLタグ設定」をクリックします。

    2. 【head内】という所に貼り付けます。

    3. 一番下の「変更を保存」をクリック。

    貼り付けたものが何のコードかわかるようにする方法

    今までGoogleアナリティクスやGoogleアドセンスなどを利用していた方の中には、すでにheadセクション内にたくさんの英数字記号のプログラムが貼り付けられています。
    そのうえまた新しいコードを貼り付けると、後々何のコードなのかわからないよ、となりますよね。

    でも大丈夫です。

    <!– Global site tag (gtag.js) – Google Analytics –>

    という部分がアナリティクスのタグですよ~。という意味になります。

    <!–文章–>

    で囲った文章部分はhtmlプログラムには反映しません。
    つまりメモとして書いておけるので、ここにわかりやすく自分なりにメモを追加してしまうのもおすすめです。

    例えば
    <!– ■■GoogleアナリティクスGA4のグローバル サイトタグ(gtag.js)■■–>
    <!– Global site tag (gtag.js) – Google Analytics –>
    以下プログラム…

    という感じで、上に目立つように日本語で記入すれば、ざっとチェックするだけでも何のタグが貼り付けられたのかがわかります。

     

    Googleアナリティクス4が設定されたかチェックする方法

    Googleアナリティクス4の統計を確認する

    Googleアナリティクス4 (GA4) を追加設定すると上の写真のような欄が追加されます。

    このプロパティにはビューがありません。ここをクリックして新しいビューを作成するか、このプロパティを削除してください。

    一瞬間違えて設定したのか、設定がまだできていないのか不安になりますが、
    本来GA4にはビューが反映されませんので、現在はいったんこれでOKです。

    1日ほど待つ

    Googleアナリティクス4の設定を終えたばかりでは、反映されていないかまだ何も統計が取れていない場合があります。
    そのため日付が変わるように1日ほどお待ちください。

     

    GA4のアカウントを選択する

    1日ほどおいて、改めてビュー画面を開いたら、まず画面上の方の大きなURLをクリックしてみます。

    ここに「サイト名〇〇〇〇〇 – GA4」と書かれた選択肢が出てきますので、こちらをクリックします。

    するとGoogleアナリティクス4のデータ表示ダッシュボードで統計を見ることができます。

     

    今までのアクセス解析「ユニバーサルアナリティクス(UA)」の利用は引き続き可能か

    「Gooleアナリティクス4 (GA4)」を無事に設定できた方でも、サイト内のトラッキングコードIDやサイトタグを削除しなければ、今までの「ユニバーサルアナリティクス (UA)」でも並行して集計されます。

    2022年3月現在
    ・UAが使用できなくなることはありません。
    ・UAとGA4は並行して集計されます。
    ・UAの今までのデータも残ります。
    ですので早い段階でGA4を設定しながらも、使い慣れたUAを利用するのもおすすめです。
    しかし将来UAはまったく使用できなくなる可能性はありますのでその状況を想定しておくと良いかもしれませんね。

     

    プロフェッショナルから見れば、本文に書き足りないことやざっくりしすぎている部分などあるかと思いますが、まずはWebにあまり精通していない人がご自身で何も考えず設定でき、使える状態にもっていくことを目的としました。

    そこからまた新たに知りたいこと、知らなければならないこと、わからないことが出てくるかと思います。
    その時はすでに一歩前に前進している証だと感じます。

    あくまで無数にある情報のほんの1つであることを念頭に、Webの世界を楽しんでいけることを願っています。

    ありがとうございました。

  • WordPressの画像設定|代替テキスト・タイトル・キャプション・説明の使い方と入力のコツ

    WordPressの画像設定|代替テキスト・タイトル・キャプション・説明の使い方と入力のコツ

    WordPressのメディアに画像をアップロードすると、
    「代替テキスト」「タイトル」「キャプション」「説明」と項目が出てくるのですが、
    どれをどのように記入すればよいですか?

    毎回それらの項目すべてにテキストを入力するのが面倒なのですが、何かコツはありませんか?

    こんにちは。
    ホームページ (webサイト) やブログをWordpressで制作していると必ずと言ってよいほどついて回る画像の扱い方問題。
    その中で画像に入力する項目は必要なのか、何を入力したらよいのかを説明します。

    [icon name=”exclamation-triangle” style=”solid” class=”” unprefixed_class=””] 注意

    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] 内容は2021年9月現在。
    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] 内容は人によって意見が分かれる部分や、経験によってそれぞれの考え方があることをご容赦ください。
    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] あくまでこれからサイト制作を目指す初心者に向けたひとつの読み物として参考程度に受け止めてもらえれば幸いです。この記事をほんのささやかな踏み台に、より活躍されることを願って・・・

     

    WordPressで画像ファイルに設定できる項目

    Wordpressの画像に入力する項目

    [icon name=”play” style=”solid” class=”” unprefixed_class=””] 代替テキスト
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] タイトル
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] キャプション
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] 説明

    必要とされる主旨をまとめてしまうと、主に使っているのはこのうちの2つ「代替テキスト」と「キャプション」だけです。

    さらに、一般的に推奨されているSEO対策のために入力が必要な項目は「代替テキスト」のみとなります。

    画像の下に文字を表示させるにはキャプションという機能項目があります。

     

    代替テキスト

    Wordpress画像設定の代替テキスト

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 代替テキストとは、画像が表示できない場合に代わりとして表示されるテキスト、またインターネット上の解析用に画像の説明を示した項目です。

    いわゆる「alt属性」のことを指します。

    alt属性は、Google社のロボット型検索エンジン (クローラー) などに読み込ませその画像が何を表しているのかを説明します。

    現在の検索システムは画像を見て何の画像かを判断できません。そのため、代替テキストの説明を判断に画像の中身を認識します。

    また、テキストリーダーなどに対応しています。

    SEO対策として代替テキスト (alt属性) の記入を推奨されています。

    alt属性に何を記入すればよいか、SEO対策で有効な記入はどのようなものかを考察した記事を下記リンク先に書きました。
    画像の説明「ALT属性」に何を書けばよい?書き方・メリット・注意点を考察

     

     

    タイトル

    Wordpress画像設定のタイトル

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] タイトルとは、画像のタイトルのことを指します。

     

    無記入にすると自動的にファイル名が入るようになります。

    HTMLには反映されません。
    管理用の項目になります。
    画像を拡大したときにタイトルが上部に表示されることがあります。

    私はいつも無記入にしています。

     

     

    キャプション

    Wordpressの画像設定のキャプション

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] キャプションとは、画像下に表示する説明文や内容、補足などの項目です。

    画像下に補足や説明文、タイトルなどを表示したい場合に入力します。

    キャプションを空白にした場合と記入した場合の例

    キャプションを空白にした場合と記入した場合の例空白の場合は画像の下には何も表示されません。

    私は必要のない限り無記入にしています。

     

    説明

    Wordpress画像設定の説明の項目

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 説明とは、画像のメモの項目です。

    webサイトの画面上にもHTMLにも反映されません。
    完全な管理用の項目になります。

    私はいつも代替テキストをコピーして貼り付けています。

     

     

    設定方法

    1. WordPressのメディアをクリックします。

    画像の設定方法

    2. ライブラリギャラリーから、設定したい画像を選択するとキャプション・代替テキストを含む4項目を画像に設定することができます。

    Wordpressメディアのライブラリ画面

    メディアにアップロードするとそのまま編集画面となりますので、そのまま記入してもOK。

    ライブラリから編集する場合は、テーマの仕様やインストールされているプラグインによって多少異なります。
    もし設定項目が出てこない場合は「画像編集」「画像の詳細を編集」というようなリンクがありますので、そちらをクリックします。

    3. 各項目に入力します。

    画像の設定の例

    4. 画像編集ウィンドウ右上の✕をクリックします。「保存する」的なボタンはなく、このまま画面を閉じても内容が更新されます。

    インストールしているプラグインによっては更新ボタンが付きますが、多くの場合は記入したまま他の画面に移るだけで更新されます。

    不安な場合はもう一度ライブラリから見てみましょう。

     

    [icon name=”book-reader” style=”solid” class=”” unprefixed_class=””]
    記事について
    ――――――――
    執筆者  :ロコウェブ
    記事作成 :2021年9月1日
    写真・画像:ワードプレスプラグイン公式、ロコウェブ

     

     

  • フォルダ?フォルダー?やプリンタとプリンターどちらが正しい?長音表記「ー」で悩む人へ

    フォルダ?フォルダー?やプリンタとプリンターどちらが正しい?長音表記「ー」で悩む人へ

    こんにちは。
    ブログを書いていても仕事で文書を作っていても、ふと疑問に思うのがカタカナ表記の長音表記 (最後に伸ばす言葉) を入れるか入れないか。

    例えばインターネットの「サーバー (Server)」とするか「サーバ」とするか。
    フォルダーなのかフォルダなのか。
    プリンタなのかプリンターなのか。
    ブラウザなのかブラウザーなのか。

    みなさんもこのようなちょっとした疑問に時間を取られたことはありませんか?

    結論から言えば、「日本における正式な統一はないため、個人的なブログやメールなどで書く場合はどちらでも良い。」というのが答えです。

    プリンターをプリンタと書かれてわからない人はいないと思いますし、
    Google検索上でも不利になることはないと考えられます。
    ただし、検索タイトルとしては「一」の1文字増えるため、あえて省くのも手かもしれませんね。

    私の個人的な方向性としてはなるべく「長音 (ー)」を付けています。

    では参考までに企業や機関で正式に発表されたものを見ていましょう。
    今はこれを基に個人で判断しても良いかと思います。

    [icon name=”exclamation-triangle” style=”solid” class=”” unprefixed_class=””] 注意

    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] 内容は2021年9月現在。

    マイクロソフトは長音付けを発表

    2008年に「Microsoft社 (マイクロソフト)」は、日本語カタカナ用語の末尾にある長音表記「ー」 を付けることで、公式のルールを発表しました。

    その理由は、より自然な発音に近い表記を採用するということで「ー」を付ける方向に決まったとのことです。
    コンピューターやプリンターなどがそれにあたります。
    具体的な用語に関しては最下部でご紹介します。

     

    JIS規格では3音以上で長音表記を省きます

    工業規格となる「JIS規格」は、基本的に3音以上の単語の末尾の長音は「ー」を省きます。2音以下の場合には「ー」を付けると発表されています。

    つまり、コンピュータやプリンタ、サーバ、フォルダなどがそれにあたります。
    ただ、これはJIS規格に関わる業種や分類のオフィシャルな部分に限る話ですので、個人ブログなどで機械やIT関連のものを書いていてもそれに当てはまらないといけないというわけではありません。

     

    国の内閣告示第二号では長音表記を付けます

    国語審議会の報告を基に告示された内閣告示第二号では、英語表記の末尾が「-er」「-or」「-ar」などで終わる場合は長音表記「ー」を付けることを推奨すると定めています。

    身近なものでは公的なものに近い「日本の新聞やメディア」では長音表記「ー」を付けることを推奨します、ということになります。
    国が言っているということはやはり長音表記「ー」は付けたほうが良いのかなと思いますが、これも推奨とありますので、決められたルールではないのですね。

     

    結論:どちらでも良い

    というわけで上記を参考に自分なりに統一したものを持っておくと良いのかなと思います。
    読んでいる人も、同じ記事やメール、文章内で長音表記が付いていたり付いていなかったりしたら少し「ん?」となる人もいるかと思いますので、
    ・本文では付ける、タイトルでは付けない
    ・本文もタイトルも付ける
    ・どちらも付けない
    などで決めておくことをおすすめします。

     

    長音表記の単語例

    Microsoft社 (マイクロソフト) が発表した長音表記の例を挙げてみました。
    また下部には長音表記が付きそうだけれど付かないよ、という用語も紹介しています。
    ぜひ参考程度に読み流してみてくださいね。

    IT・WEB・ブログ関連で使われる用語

    アダプターadapter
    エクスプローラー(explorer)
    アップローダー(uploader)
    アドミニストレーター(administrator)
    インストーラー(installer)
    エディター(editor)
    エンコーダー(encoder)
    コンピューター(computer)
    スキャナー(scanner)
    スクリーンセーバー(screensaver)
    ダウンローダー(downloader)
    チャプター(chapter)
    デバッガー(debugger)
    パラメーター(parameter)
    ビューアー(viewer)
    ファクター(factor)
    フォルダー(folder)
    フッター(footer)
    ブラウザー(browser)
    プリンター(printer)
    プロバイダー(provider)
    ベクター(vector)
    ヘッダー(header)
    ポインター(pointer)
    メッセンジャー(messenger)
    モジュラー(modular)
    モニター(monitor)
    リマインダー(reminder)
    レイヤー(layer)
    レビューアー(reviewer)

    機械に関する用語

    インバーター(inverter)
    エスカレーター(escalator)
    エレベーター(elevator)
    コンデンサー(condenser)
    コントローラー(controller)
    コンバーター(converter)
    シャッター(shutter)
    シンセサイザー(synthesizer)
    スピーカー(speaker)
    スライサー(slicer)
    センサー(sensor)
    タイマー(timer)
    チューナー(tuner)
    ディフューザー(diffuser)
    ドライヤー(dryer)
    トランシーバー(transceiver)
    ナビゲーター(navigator)
    ブースター(booster)
    ブレーカー(breaker)
    プロジェクター(projector)
    プロテクター(protector)
    ミキサー(mixer)
    レコーダー(recorder)

    各分野の仕事に関する用語

    アニメーター(animator)
    インテグレーター(integrator)
    ウォーカー(walker)
    オブザーバー(observer)
    オペレーター(operator)
    カウンター(counter)
    カスタマー(customer)
    クリエーター(creator)
    コーディネーター(coordinator)
    コンシューマー(consumer)
    コンダクター(conductor)
    コンテナー(container)
    シリンダー(cylinder)
    スーパーバイザー(supervisor)
    タイプライター(typewriter)
    ディスパッチャー(dispatcher)
    ディレクター(director)
    デザイナー(designer)
    デベロッパー(developer)
    トランスレーター(translator)
    トリマー(trimmer)
    ドロアー(drawer)
    ナレーター(narrator)
    ビルダー(builder)
    プランナー(planner)
    プレゼンター(presenter)
    ブローカー(broker)
    ブロードキャスター(broadcaster)
    プロデューサー(producer)
    ベンダー(vendor)
    マネージャー(manager)
    ライター(writer)
    レポーター(reporter)

     

    生活に関する用語

    ウォーター(water)
    エクステンダー(extender)
    キャラクター(character)
    クラスター(cluster)
    クリーナー(cleaner)
    コレクター(collector)
    シアター(theater)
    ジャンパー(jumper)
    スライダー(slider)
    センター(center)
    チャレンジャー(challenger)
    テスター(tester)
    ドライバー(driver)
    トラクター(tractor)
    トランスファー(transfer)
    トレーラー(trailer)
    パートナー(partner)
    バインダー(binder)
    ファイバー(fiber)
    ファインダー(finder)
    フィルター(filter)
    フレーバー(flavor)
    ヘリコプター(helicopter)
    ヘルパー(helper)
    ポリマー(polymer)
    ホルダー(holder)
    マイナー(minor)
    マスター(master)
    メンバー(member)
    リスナー(listener)
    レシーバー(receiver)

     

    分類別に一覧を書いてみましたが、ここで何か気づきませんか?

    実はこの悩み、IT関連やパソコン関係、機械などに関わる人特有の悩みになっているかもしれませんね。

    仕事や生活に関わる用語はどう見ても長音表記「ー」を省くと違和感があります。
    こうしてみるとくっきり違和感のある用語と見慣れた用語で分かれています。

     

    長音が付かないもの

    下記はMicrosoft社で長音表記を必要としないものの一例です。
    う~ん、これらがあると混乱しますね。

    アウトドア(outdoor)
    アクセラレータ(accelerator)
    エンジニア(engineer)
    コネクタ(connector)
    スリッパ(slipper)
    トランジスタ(transistor)
    フロア(floor)
    プログラマ(programmer)
    プロセッサ(processor)
    ボランティア(volunteer)
    レジスタ(register)

    [icon name=”book-reader” style=”solid” class=”” unprefixed_class=””]
    記事について
    ――――――――
    執筆者  :ロコウェブ
    記事作成 :2021年8月31日
    写真・画像:ロコウェブ

     

     

  • 画像の説明「ALT属性」に何を書けばよい?書き方・メリット・注意点を考察

    画像の説明「ALT属性」に何を書けばよい?書き方・メリット・注意点を考察

    「画像のalt部分には何を書きこめば良いですか?」
    「画像を説明するのだから、画像について詳しく説明を書いた方が良い?」

    今回はブログやウェブサイトで使用する画像についての考察です。

    画像を使用する際に、内部情報としてalt属性 (altタグ) があるのをご存じですか?
    専門的な説明は割愛して、altというものがどのようなもので、どのような役割なのかをさっとご紹介します。

    画像のALT属性とは

    alt属性 (オルト) とは、画像をテキスト情報で表すことです。画像について説明を入力できる情報部分です。altはそれが何の画像なのかをテキスト説明する部分です。

    Google社などの検索システムに向けて

    検索システムは画像の内容まで把握することができません。そのためその画像を解説してあげることで、サイトページとの照合でどのような画像なのかを伝えてあげることができます。
    つまり検索SEO対策にとってalt属性は大切な部分と考えられます。

    見る側に向けて

    画像が表示されなかったときに代替として表示される「代替テキスト」として、見る人にも優しい情報となります。
    見る側にも行き届いたサイトということで、こちらも検索SEO対策にプラスの部分と考えられます。

    では、altは実際にどのようなことを記入していけばよいでしょうか。

    ここで紹介しているものは、これが正しいという情報ではありません。
    定説や一般的な考え方、そして個人的な考えをもとにみなさんがご自身で最適なALT属性を入力できるきっかけとなれるような記事を目指しています。

    altに入力する最適な言葉

    altに入力する言葉は、その画像や内容に偽りや乖離がなければ、何でも良いと思います。

    とはいったものの、実際はどのように入力されているのか気になりますよね。
    そこで画像のalt部分を軽く調査、私が実際に会社に所属していた時の経験も交えて例をあげてみます。

    altは「全部空欄」「ファイル名だけ」「連番」というのもありますが、あまり理想では無いため割愛します。

    一般的に見られるalt

    ・画像を簡潔に解説
    ・すべての画像にタイトルなどを全コピー
    ・それぞれ画像に適した単語を表記
    ・画像を細かく解説
    ・画像にキーワードがたくさん入っている

    ざっと目を通した感じ、良くも悪くもさまざまなパターンが見受けられました。
    私が調べた結果、上の方が最も多く、下へ行くほど珍しいケースです。

    では、それぞれどのような意図、メリット、デメリットがあるか考えてみたいと思います。

    例として下記画像にalt属性を入力してみましょう。

    パソコンのステップアップ

    画像を簡潔に解説

    SEOを意識した最もシンプルであり、最も頭を使うのがこちら。
    画像が何を示しているのかを簡潔に説明しています。

    上の画像に対するaltの例

    アクセスPVの推移グラフ

    考えられる意図

    画像の説明を簡潔にして機械的にもユーザーにも優しいALT入力を目指したものと考えられます。

    メリット

    ・検索エンジンにも認識してもらいやすいです。
    ・代替テキストになっていても文字数が少なく意味がわかりやすいです。
    ・画像検索でより詳細なキーワードに引っ掛かる可能性があります。

    デメリット

    ・簡潔な解説を作るのに頭や手間を使います。
    ・画像管理でキーワード検索すると文章内容もバラバラになってしまい管理しづらいです。

    すべての画像にページタイトルなどを全コピー

    使われている画像にページ・記事タイトルや、ページの説明を使います。
    すべての画像に同じ文言をコピーして使います。

    上の画像に対するaltの例

    SEO対策に効果あり?alt属性の入力をおすすめする理由

    考えられる意図

    ・画像のALT属性入力の手間を省くことができます。
    ・ある程度のキーボードが入っているのでSEO対策も十分と考えられます。
    ・ページ=画像となり、画像管理がしやすいです。

    メリット

    ・コピー貼り付けなので簡単でalt入力の手間や時間が省けます。
    ・使用するすべての画像とページ内容の照合性がマッチさせるのが楽です。
    ・altが同じだと画像管理がしやすいです。

    デメリット

    ・タイトルや内容とまったく関係のない画像もすべてが同じ文の解説になり、ページとの照合性が合わない場合もあります。
    ※例えば、たまたまそのページで使う記号や人物も同じaltとなります。

    それぞれ画像に適した単語を表記

    カメラの画像やイラストの場合、「カメラ」。人が握手をしている場合は「契約成立」などという感じで、画像が表しているものを単語で入力する方法です。

    上の画像に対するaltの例

    アクセスグラフ

    考えられる意図

    ・画像ごとにことなる意味合いがあるため、画像ごとの内容を簡単な単語で入力します。
    ・説明を考える労力を省くことができます。
    ・画像altにそこまでSEO対策に比重が無いと判断されるため、力を入れすぎない。
    ・画像検索にひかっけるために。

    メリット

    ・画像ごとの的確な説明になります。
    ・単語がメインとなるため、内容を細かく考えずに済みます。
    ・キーワードとしての要素が強いため、画像検索にも引っ掛かるかもしれません。
    ・画像のテキスト代替になった場合もわかりやすいです。
    ・単語での画像管理となり、管理しやすいです。

    デメリット

    気になるほどのデメリットはあまりない気がします。あえて言うなら…
    ・ビックキーワードでざっくりとしているため、かえって検索に乗りにくい可能性もあります。

    画像を細かく解説

    画像が何を示しているのか、何が描かれているのかの詳細を細かく説明します。

    上の画像に対するaltの例

    ビジネスデスク上のパソコンディスプレイ上に表示されたGoogleアナリティクスのpv推移グラフの例

    考えられる意図

    ・細かく説明することでSEO対策にプラスと考えるケース。
    ・検索システムに向けて、細かい解説を意識しています。

    メリット

    検索システムに、より詳細な説明ができます。

    デメリット

    ・内容を考える労力や時間、手間がかかります。
    ・画像の情報量が多すぎ、それぞれバラバラの内容のため、画像管理がしづらくなります。
    ・代替テキストになると文字数が多く何の画像かわからない可能性があります。
    ・検索システムを意識しすぎて、見る人に優しくないため、SEO的にマイナスになる可能性があります。
    ・情報量が多すぎて検索評価がマイナスになる可能性があります。

    画像にキーワードがたくさん入っている

    ごめんなさい。これは実際には見たことがありませんが、過去にはこのようなことが行われていたのを散見していました。
    画像に検索でひっかけたいキーワードをたくさん詰め込むことです。

    上の画像に対するaltの例

    アクセス、パソコン、デスク、アナリティクス、Google、グーグル

    考えられる意図

    ・検索にひっかけるため。

    メリット

    今の検索システムではメリットは無いと感じます。

    デメリット

    ・やみくもなキーワード入力はいったいどのキーワードが主なのか判断しづらく、検索システムの評価がマイナスになる可能性があります。
    ・キーワードが多すぎて画像管理がしづらくなります。

     

    私が実際に行っているalt入力の法則

    法則というといかにもという言い方ですが、あくまで参考程度の個人的ルールです。

    ルール

    ・すべての画像にその画像が何を示しているか簡潔に書きます。
    ・外部素材をそのまま使う場合は、空白またはタイトルのキーワードのみ。

    以上のように、「自作または自分で手を加えた画像」と「素材」を大きく分けました。

    理由は、検索エンジン上には同じ素材がありふれています。それにaltを細かく設定する方がかえって都合が悪い判断を下されかねないからです。
    つまり、素材はあくまで他人のものを使っていますので、というところを割り切って、altを空欄にしてしまうということです。

    自作画像に関しては、上で説明した「画像を簡潔に解説」と同じです。

    メリット

    ・検索システムにそれが何の画像かを解説できます。
    ・代替テキスト上でも簡潔な解説により、見る側にとって優しくなります。
    ・画像検索でより詳細なキーワードに引っ掛かる可能性があります。
    ・それぞれの画像の違った内容をわかりやすく説明できます。

    デメリット

    ・手間がかかる
    ・管理上、あとで画像を探すが面倒 (記事タイトルだったり同じタイトルならわかりやすい)

     

    実際のalt属性記入例とその結果

    実際に記入しているのが下記の画像です。

    画像のalt属性や各項目の記入例

    同じお寺の画像ですが、クローズアップしているものが違います。
    でもしっかりとメインキーワードは入れています。
    その結果Google画像検索でどのようなことが起こったでしょうか。

    Google画像検索の画面

    これは画像一覧の1ページ目です。
    赤枠で囲ったものが同じサイトの画像です。

    どちらが良いかはみなさんの判断と経験によります。

    検索エンジンも日々進化していますし、Googleアップデートにより検索においてこれが絶対プラスということは無いと感じています。

    ただ、画像も丁寧に取り扱うことで、見えないところでアクセスにつながることと信じています。

  • WordPressでファビコンの設定方法|Webサイトのタイトル横のアイコンの絵は何か

    WordPressでファビコンの設定方法|Webサイトのタイトル横のアイコンの絵は何か

    ファビコンとは

    こんにちは。
    パソコンでインターネットを見ていると、お気に入りのサイトを見つけることもあります。
    そのサイトをお気に入りにお登録すると、お気に入り一覧に載ります。
    その一覧を開くと、Webサイトのタイトルの一番左にアイコンのようなちっちゃな絵が付いていませんか?

    ファビコンの位置とアイコン

    これがファビコンと言われるものです。

    ファビコンとは

    下記はWikipediaから

    favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したかばん語である。

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 簡単に言うとWebサイト (ホームページ) のシンボルマーク。サイトアイコンです。

    地図に出てくるセブンイレブンやイオンや出光のマークみたいなものです。

    ファビコンは便利なもので、お気に入りの一覧にたくさんサイト名が並んでいても、ファビコンがあれば目的のWebサイトが一発で見つけられるのではないでしょうか。

    ファビコンは特殊なファイル形式

    実はファビコンのファイルは「.ico」という見慣れないファイル形式になっています。
    インターネットで検索すると簡単に「.ico」ファイルに変換できるページが出てきます。
    私もかつては何度もお世話になりました。

    ファイルを作成し、
    変換し、
    ファイルをアップロードし、
    html上で表示を指定する必要があります。

    しかし、Wordpressなら「.ico」に変換する必要なく、簡単にファビコンを指定することができます。

    WordPressでファビコンを設定する方法

    必要なもの

    WordPress (テーマは何でもOK)
    理想は512×512ピクセルの「.png」画像

    ここでは画像サイズに関わらずファビコン (サイトアイコン) を設定する流れを紹介しますので、あえて600×600ピクセルの画像を選択しています。

    「png.」形式も見慣れない人が多いかもしれませんが、ほとんどの画像編集ソフトに備わっていますのでご安心ください。

     

    1. WordPress管理画面の「外観」→「カスタマイズ」をクリック

    Wordpress管理画面の外観

    WordPress管理画面の左側のメニューの真ん中のあたりにある「外観」の中の「カスタマイズ」をクリックします。

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    2.「サイト基本情報」をクリック

    Wordpress管理画面のサイトの基本情報

     

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    3. 「サイトアイコンを選択」をクリック

    サイトアイコンの選択画面

    画像ファイルを画面に放り込むと画像がアップロードされ、同時に選択されます。

     

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    4. 「ファビコンにしたい画像」を選択し「選択」をクリック

    サイトアイコンを選択する画面

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    画像の編集画面「画像の切り抜き」をクリック

    サイトアイコンのトリミング

    画像のサイズが512×512ピクセルでない場合は、この編集画面でトリミングなどを行います。
    1:1の画像サイズの場合はそのまま「画像の切り抜き」をクリックします。

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    5. サイトアイコンの表示を確認し「公開」をクリック

    Wordpressサイトアイコンの公開画面

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    お疲れ様でした。以上です。

    ファビコンを作る際の注意点やコツ

    ファビコンを作る際は、
    ・背景を透過 (透明) にするかしないか
    ・四隅まで絵や写真がある場合に削られる可能性がある
    ・文字を入れる場合は文字の大きさ
    などに注意して作ってみると上手に作れます。

    ごちゃごちゃした写真より、パキッとした色味の方が見やすいです。

     

    ファビコンを設定できるプラグイン

    このほかにテーマ別に設定できるものがあったり、プラグインで設定できるものもあります。
    参考までにファビコンが簡単に設定できるプラグインをご紹介します。

    → プラグイン「Favicon Rotator
  • 【簡単説明】ホームページやブログ|サイトで使用する画像サイズの例を公開

    【簡単説明】ホームページやブログ|サイトで使用する画像サイズの例を公開

    こんにちは。
    私はWebサイトやブログを制作しはじめる初期のころにいくつか疑問に思うことがありました。

    その中で、「画像のサイズはどのくらいの大きさを使用すればよいか」というのが地味に決められなかったのを覚えています。
    実はほんの1~2年前までこれが決まらなかったですね。
    理由は、パソコン環境の変化が激しかったからです。
    ディスプレイやスマホの大きさ、レスポンシブなどの環境がそれを大きく悩ませました。

    画像サイズ…悩む方はいるでしょうか。

    今回は実際にWeb制作を主として活動する当事務所で使用する画像サイズがどのくらいの大きさなのかを公開します。

    画像サイズを気にするか気にしないか

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 画像サイズを気にする人はすでに一歩先を進んでいると思います。

    特にブログの場合、この画像サイズを悩む時点でわりと一歩前を歩いている方だと推測します。
    というのも、ブログ初心者の方はスマホやデジカメの画像をサイズ縮小せず使用している人が多いからです。

    つまりサイズを気にするということは、SEO対策に意識があったり、サイズ変更のスキルがあり、トリミングや画質調整なども行う用意ができている方になります。

    なぜ画像サイズを気にするの?

    画像の容量が重ければ重いほど、表示にも負担がかかります。

    表示に負担がかかるのは見ている人にとってもストレスになりますし、インターネットのやり取りにも優しくありません。
    結果、サイトやブログの評価が下がってしまい検索でも不利になる可能性もあります。

    しかし、画像が小さければサイトが軽くなるのですが、画像が荒くなったり、見るに堪えないぼやけた画像だとそれもまた気になります。

    結局「中間を取る」ことが近道だとは思いますが、その中間ってどのくらい?と思いますよね。
    私も実際のところ答えは決まっていません。

    5Gが主流になっていく日本で、それほど画像サイズを気にすることは無くなってはいますが、その時代の流れとともにデジカメやスマホの画像サイズも増えているんですよね。
    だから結局サイズを考えなくてはならないのです。

    では、実際に使用しているサイズを公開します。
    これは世間の標準だとは限りません。

    あくまでこの人はこうなんだ、程度でたたき台の参考の一つにしていただけたらと思います。

    実際にやってみて自分なりの最適なサイズを見つけられることを願います。

    ポートレートサイト・ブログ画像サイズ例

    通常画像・記事内画像サイズの例

    800x533ピクセルの画像

    800ピクセルx533ピクセル (3:2)
    800ピクセルx800ピクセル (1:1)
    など

    基本的に縦横は一眼デジカメの撮影比率の3:2を基準としています。
    時には1:1の正方形。
    ポイントは意外と大きめの画像で統一していること。本音を言えば1000ピクセルでも良いのですが、やはり容量が大きくなりすぎるのを考慮して800ピクセルに抑えています。
    600ピクセルでもOKです。

    本来なら300ピクセルなどのような表示だとしても、元画像は600~800ピクセルで作っています。

    「表示サイズ」が大きすぎるという方は、表示だけ600ピクセルなどにしてみると良いと思います。

    理由

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 当事務所での制作サイトの多くは、ページ部分の幅 (ブログでは記事部分) を800~1,000ピクセルにしています。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] レスポンシブにすると、スマホやタブレットなどの表示媒体によって画像がぼやけてしまうので大きめにしています。

    バナー画像サイズの例

    800x533ピクセルの画像

    幅600~800ピクセル

    バナー画像も通常画像と同じサイズ幅で制作しています。
    上の画像は800×533ピクセルの画像を300×200ピクセルのサイズで表示していますが、元の画像が大きいので表示媒体が変わってもそれほど違和感なく表示されます。

    逆に希望表示のサイズ (例えば300×200ピクセル) のままで作ってしまうと、スマホやタブレットなどの表示で見え方が変わり、ぼやけてしまうことも少なくありません。

    理由

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 例え表示サイズを300ピクセルにしても、表示媒体によって見え方が変わる可能性もあります。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 後々大きなバナーに転換したり、転用しやすいように、あらかじめ大きめに制作しています。

     

    フルスクリーン画像サイズ例

    ホームページトップ画像フルスクリーン

    1500×800ピクセル

    理由

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 横幅1500ピクセルだと私の使用しているディスプレイでも両端が空いてしまうのですが、ブラウザを開いている人にはお気に入りブックマークをサイドバーに表示している人も少なくないかと思いこのサイズにしました。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 逆に1500ピクセルを超えるとファイル容量が大きくなり、画像が重くなるためフルスクリーンでもある程度のサイズで決めました。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 1800ピクセルなどの完全な画像の方が、フルスクリーンでは端の余白ができずに画像もきれいですが、あえて1500ピクセルをディスプレイ画面に合わせて拡大しています。
    それほどビジュアルを売りにしたサイトを作っていないのも理由です。

    サイドバー画像サイズの例

    幅600~800ピクセル

    当事務所の場合、サイドバーの幅は300ピクセルで設定するものが多いようです。
    しかし、サイドバー用画像も通常画像と同じサイズ幅で制作しています。

    理由

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 例え表示サイズを300ピクセルにしても、表示媒体によって変わる可能性もあります。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 後々大きなバナーに転換したり、転用しやすいように、あらかじめ大きめに制作しています。

    Retinaディスプレイ対応用画像の例

    Retinaディスプレイはアップル製品で主に利用される高解像度表示ディスプレイです。
    このディスプレイで表示すると、わりと多くの画像がぼやっとした表示になってしいますので、それ相応の画像サイズで対応しなければならないのです。

    しかし当事務所の場合、閲覧者像やサイトの特性によって画像のサイズをある程度絞っています。

    ロゴ

    幅800ピクセル程度

    ロゴはRetina用に大きめに制作していますが、それほどしっかりと大きなサイズで利用しているわけではありません。
    認識できる不快ではない程度の表示として、このサイズにしています。

    その他の画像

    その他の画像は残念ながら通常のサイトの画像と同じサイズにしています。
    当事務所のサイト制作の意図はデザイン性やビジュアル性よりも、マーケティングやSEOに重きを置いているため、妥協と言わざるを得ない判断としました。

     

     

  • ホームページ制作の見積もり|デザイン料とは何?

    ホームページ制作の見積もり|デザイン料とは何?

    こんにちは。

    ホームページを制作会社に作ってもらうときに、
    見積もりや設計・作業工程を見ても、
    「難しい単語が並んでいてよくわからない。」
    「これってお金かかる分野なの?」
    と思ったことはありませんか?

    説明をさらっとされてしまい、「よくわからないからお任せした」という経験をされた方もいらっしゃるかもしれません。

    ここではホームページ (ウェブサイト) 制作の見積もりや明細にたびたび出てくる専門的な項目
    「デザイン料」について簡単に説明します。

    ホームページ作成におけるデザイン料とは

    ホームページ (Webサイト) を制作する上でかかせない、見栄え、画像編集、写真編集などをはじめ、サイト自体の「レイアウト」や「設計」に関わる対価です。

    ホームページを作るうえで、デザイン (設計や作り) は欠かせない分野です。
    そのデザインはテンプレートから持ってくる人もいれば、ゼロから考えて作る人もいるでしょう。

    ゼロから作る場合、たとえ仕上がりがシンプルだとしても、その過程にはとてつもない時間が費やされていることが多いです。

    ではテンプレートではどうでしょうか?
    例えばどこかのサイトからテンプレートを持ってきても、自社で用意しているテンプレートを用意しても、依頼者のイメージやカラーに合わせ、適切なものを選ぶのにも非常に時間と知識が必要です。
    やみくもに選んだテンプレートではバランスが悪くなり、思うような効果が発揮されないからです。

    デザインと言っても、芸術的な描写のデザインだけではなく、サイト全体の設計図作りも含まれます。

    いわゆる家を建てるときの設計図のようなものとイメージしていただければ納得のいくものかと思います。

    デザイン料は必要?

    デザイン無くしてウェブサイトはできないため、必ず必要な分野です。
    デザインはプログラムを組む人とは違うスキルが求められますので、コーディング料と同等またはそれ以上の対価が料金としてかかります。

    もし「デザインは何でもいいから安くしたい、メニューのデザインも位置もお任せ、写真はテキトーにフリー画像で良い。」という方がいらっしゃったとしても、その設計、レイアウト、見栄えはもちろん、コンセプトカラー (色) などは必須です。
    それらをひとつだけとっても大きく状況が変わります。

    フリー画像で良いという要望があったとしても、数十万と世に出回っているフリー画像でどれが適切かを選択し、バランスやサイズを調整し、そこに文字を埋め込むとなればひと手間ではすみません。

    デザインは完成品を見ればなんてことないものでも、その表現に至るまではかなりの時間を費やす分野です。

    コードを記述する人とデザインする人は違う

    プログラマーとデザイナーは全く違う分野の技術者です。

    上記のように、コーディング (プログラムを組んでウェブサイトを構築する人) と、デザイン (見た目やレイアウト、設計、画像の編集や写真編集などを適切に行う人) とは、まったく違う技術が求められます。

    プログラミングを得意とする人は、「デザインはわからないんだよね。」と言う方も多いですし、デザイナーさんたちは「プログラムなんて見たこともない。」という方も多いです。

    コーディングとデザインが両方できる人

    例えば、フリーランスでウェブ制作を行う人には、得意不得意こそあれ、コーディングとデザインの両方のスキルが長けている人も多いです。

    逆に大企業などはプログラムはプロフェッショナルだけど、デザイナーはまったく別の人というケースも多いです。

    どちらが良いかどうかは一長一短あります。

    コーディングとデザイン両方できる人に頼むメリット

    安い・効率が良い・融通が利く

    人件費がかからないし、人を介して作業を行う必要が無いので、効率よく融通が利きます。

    コーディングとデザインが別担当の場合のメリット

    複雑な仕組みづくりやトラブルを信頼してお任せできる

    専属のプログラマーを控えている会社は、仕組みづくりやトラブル対応などに対してとても頼りになります。

    デザイン料金が含まれる場合と含まれない場合

    デザイン料はホームページ制作料金に含まれている会社もあれば、当事務所のように明細で項目別に記載している会社もあります。
    もしくは、各項目をデザイン料という名前で明記している会社もあります。

    どちらが良いかはそれぞれの判断となりますが、当事務所がなぜデザイン料をあえて項目で表記しているのかをご説明します。

    ホームページ制作は中身がわかりづらい

    ホームページ制作料金の内訳は中身が非常にわかりづらいため、全体をわかりやすくするためにデザイン料を含また一括の料金で明記している会社が多い印象です。
    その内訳はプロから見ても「あれは含まれていてあれは含まれていないのね。」というように把握することは困難です。

    逆に言えばあまり詳しくない人にとっては「一括でいくら」と表記してくれた方が助かります。

    通常であればこのような料金表示の方が良いと思います。

    しかし当事務所では、あえてデザイン料として項目を分けています。
    これには理由があります。

    1. 業務の線引きをしやすくするため
    2. 料金が明瞭になるため
    3. ホームページ制作に関する料金に納得していただきたいため

    1. 業務の線引き

    これは当事務所が小さいがゆえの理由です。
    いろいろ含めていくら、にすると内訳でこれはできる、これはできない、ということが後々になって出てきます。
    その線引きをするためにすべての業務を項目分けし、すべてに値段付けをしたのです。

    料金が明瞭になるため

    すべての業務に細かく項目分けし、値段をつけ、それを明示すれば、誰もが要望に合わせた料金がいくらなのか把握することができます。

    保守管理契約で、「かんたんな修正は無料」と書いているところもありますが、簡単な修正とはどこまでか、何回お願いしていいのか、お客様によっては頼みにくい性格の人もいれば、何回でもちょこちょこと頼む方もいます。

    項目ごとに料金を示していれば、例え当事務所でも「それくらいなら無料でやりますよ。」と言っても、本来はこれくらい料金がかかっているんだとわかります。

    つまりホームページに関わるあらゆることに値段を付けたのです。

    ホームページ制作に関する料金に納得していただきたいため

    すべての理由はつながっています。
    当事務所では不明な部分をなくし、これにはこれくらいの報酬をいただいておりますとあらかじめ明記することで、ホームページ制作や管理における対価と内容をお客様が評価できます。
    ご納得されたうえでのご契約ですので、項目によってはお力添えできていなければ、解約またはこの部分が弱いよ、とお申し出いただけます。

     

  • ウェブサイト(ホームページ)は自分で作った方が良い理由

    ウェブサイト(ホームページ)は自分で作った方が良い理由

    こんにちは。
    この記事にたどり着いた人の中で、これからホームページ (ウェブサイト) を持ちたい、と思っている方はいますか?

    ホームページは保有しているだけでは効果が見えにくく、制作費用もあまりかけたくないというのが本音です。

    ウェブサイトは自分で作った方が良い

    私自身がそうだったのですが、ホームページ制作にあたって心の中によぎる疑問があります。

    「安いホームページ制作会社に頼もうとしたけれど、むしろ自分で作ることはできるの?」
    「今は無料でテンプレートを選ぶだけでホームページを作れるなら自分で作った方が良くない?」
    「ホームページ制作会社に依頼するのは無駄なんじゃない?」

    みなさんの中でもこんなことを思ったことはありませんか?

    ちなみに私ならこう答えます。

    「お金もかからないし自分で作った方が絶対良いよ。」

    普段ウェブサイトを制作する事業者の立場にいながら、矛盾した答えです。

    しかし、これにはホームページを持ちたいと考える方、ウェブサイト制作会社双方にとっても有益な話となります。
    おそらくこういう話の展開かなぁ、と予測されている方もいらっしゃるかと思いますが、お付き合いいただければ幸いです。

    ウェブサイトを自分で作るメリット

    ・お金がかからない
    ・好きなように作れる
    ・スキルになる

    お金がかからない

    何よりもまずお金がかかりません。
    かかる費用はサーバー費とドメイン費、あとは制作にかかる電気代くらいです。

    好きなように作れる

    制作会社に頼んだけれど、自分も思うように伝えられないし、もちろん制作会社の意向や制作における制限もあり、思うようなサイトが作れないという方も多いのではないでしょうか。
    制作を自分で行うことで、可能な限り好きな写真を使ったり入れ替えたり、好きなように組み立てることができます。

    スキルになる

    最も有益となるのが自分のスキルになるということです。
    つまりウェブサイト制作技術を自分の手で足で学んでしまうので、その道で仕事を得ることも可能になります。

     

    では、実際にウェブサイトを制作してみたけれど、思うようにいかないというのが現実。
    でもちょっと待って。すぐに制作会社に頼む前にこの過程を経験したかしないかで大きく変わってくることがあります。

    苦労しても自分で作ったほうが良い理由

    ・ウェブサイトのなんたるかがわかってくる
    ・アクセス対策やマネージメントを直に経験できる

    ウェブサイトのなんたるかがわかってくる

    サーバーやドメインなどの固定費やワードプレスなど、初期からちんぷんかんぷんなウェブ制作ですが、自分自身で行うことで少しずつその工程や必要なことや時間がかかる部分などがわかってきます。

    つまり制作会社に頼むときに、どの部分が必要で、どの部分に適正な費用がかかり、どの部分を削減すれば良いかがわかります。

    また、デザイン上も具体的な部分まで直に感じるところがあり、実際に制作会社に依頼するときにも具体的な依頼や指摘、修正を伝えることがあります。

    実はこのことはウェブ制作会社にはとても助かるところでもあります。

    アクセス対策やマネージメントを直に経験できる

    ウェブサイトだけでなくブログやSNSを駆使してみたけれどアクセスも増えない、というようなことを聞きます。

    ウェブサイトを公開した後すぐに簡単に検索で上位に上がってくるかと思ったら、全然出てこない。
    アクセスはあるのに売り上げに直結しない。

    これは自分で実際に直面してみないとわからない問題です。

    ウェブマーケティングは現実の店舗販売にも通じるところがあります。
    名も知れぬものをいかに多くの人に知ってもらい、多くの人に買ってもらうか (予約してもらうか) を、世界というマーケットに向けて発信しているのです。

    この仕組みや難しさを経験することで、実際の営業にも役に立つことと感じます。

    自分で作った場合の結果2パターン

    うまくいかないことも想定してまずは簡単そうな無料のツールなどで実際に自分で作ってみました。

    ここで2つの道に分かれます。

    行き詰まった例

    面倒になって放置している
    アクセスが伸びず挫折した
    予約や問い合わせがこない
    写真がいまいち
    インターネットやシステム上のトラブル対応に時間を割かれる
    著作権など知らずに使用したら炎上した

    成功した例

    自分色が出たおかげでファンが増えた
    ウェブに関するスキルがアップしてほかにもビジネスを広げた
    マネージメントを勉強し、実店舗の売り上げも上がった
    アクセスアップと集客の勉強をし、売り上げが上がった
    管理費がかからない

    はじめてで成功したら天才です。

    行き詰まった例からひとつずつ苦難を解決していくと、成功への道へつながっていきます。

    ウェブ制作会社に頼むべき状況

    成功したら、より販路を拡大したいと思わなければもう制作会社には頼まなくても良いかもしれません。
    ここでは自分で作ってみたけれどなかなかうまくいかくて、ウェブ制作会社に頼んだ方が良いですよ、という状況の例をご紹介します。

    更新が面倒になった

    ウェブサイトやブログは作ったらおしまい、ではなかなか効果を発揮しません。
    少しずつでも良いから更新していくことこそが成功への道です。
    しかしその更新が意外と面倒。
    頭を使って制作したのに、更新までやっている時間も余裕もないという方は多いのではないでしょうか。

    そんな時はウェブ制作会社に頼んでしまいましょう。
    もう具体的にここをこうしたいと伝えられるスキルを持っていますから、上手に運営ができるはずです。

    アクセスや問い合わせ、注文・予約が伸びない

    ウェブマーケティングや検索対策 (SEO対策) はある程度の知識と知識の更新が必要です。
    そこまで学んでいくにはあまりにも本業の時間を犠牲にしすぎるという状況でしたら、制作会社に任せるのも手です。
    ただしこれには2つの問題があります。
    ・制作会社によって技術レベルが違う。
    ・アクセスを増やすためにはこつこつと努力をする必要がある。
    この2点を念頭に、堅実な更新をかけていく必要があります。

    トラブル対応に苦慮

    顧客対応だけでなく、インターネットやウェブ上のトラブルもあります。
    ウェブトラブルは検索すれば大抵出てきますが、症状によって対応方法はさまざま。
    お医者さんが患者さんを見てすぐに病気を当てることは不可能であるように、その状況や過程を見てトラブルを解決していきます。
    その対応にはある程度の経験値も必要です。

    ロケットスタートしたい

    ウェブサイトを作って1日でも早く集客したい。そんな思いは共通してあるかと思います。
    本当に急いで確実に集客したい場合は、自分で作っている時間はありません。
    それなりの費用をかけてそれなりのプランで依頼することをおすすめします。

     

  • ホームページ制作の見積もり内容でよく見るコーディングとは何?料金はかかる?

    ホームページを制作会社に作ってもらうときに、
    見積もりや設計・作業工程を見ても、
    「難しい単語が並んでいてよくわからない。」と思ったことはありませんか?

    説明もさらっとされてしまい、よくわからないからお任せした、という経験をされた方もいらっしゃるかもしれません。

    ここではホームページ (ウェブサイト) 制作の詳細内容や打ち合わせに必ずと言ってよいほど出てくる「コーディング」について簡単に説明します。

    コーディングとは

    コーディングとは、ウェブサイトを表現するためにプログラム言語でコードを作ること。
    いわゆるホームページ作成のプログラムミングのような意味です。

    名前をそのまま意味にした場合は、「コードを書く」ようなイメージです。

    コードとは

    HTML (エイチティーエムエル) ・CSS (シーエスエス)・JavaScript (ジャバスクリプト) というソースコード (パソコン用の言語・言葉) のことを指します。

    言語の種類や名称は置いておいて、これらを組み込んでウェブサイトができあがっていくのですね。

    専門的に携わっている方はいろいろ思うところがある表現だとは思いますが、まずはイメージの入り口としてプログラムの構築のようなものと考えれば、わかりやすいかと思い、こう表現しました。

    コーディングとプログラミングの違い

    ここは読み飛ばしてしまって構いません。

    コーディングとは、プログラム言語でコードを作ること。

    に対して、

    「プログラミングは、プログラムを作る作業自体のこと。」
    その中にコーディングも含まれています。

    または「プログラムを作動させるためにプログラムを組むこと」として認識が区分けされることも多いです。その場合、プログラミングではC言語・Java (ジャバ) などを使用します。

    コーディングは必ず必要?

    現在はホームページを制作する上で、必ずしも必要ではありません。

    ワードプレスやウェブサイトをかんたんに作れるソフトを使った場合は、プログラムやコードがわからなくてもウェブサイトは完成させることができるからです。

    え?では、コードっていらない時代なの?
    と思われるかもしれません。

    「コード」は、ウェブサイトを作成する上では絶対必要です。

    コーディングはそのコードを記述してウェブサイトを表現することを言いますので、テンプレートや並べられた道具を組み合わせてかんたんにウェブサイトを作れる昨今では、コーディングという作業自体必要ないケースも多いかと思います。

    しかし、ホームページ制作会社がお客様の希望のサイトを制作するためには、私はコーディングは必ず必要になります。

    というのも、オリジナリティを出すためにはどうしても多少コードを変更したり組み合わせたりして見た目や仕組みを変えなくてはなりません。

    コーディングに料金はかかるものですか?

    コーディングにはウェブサイトに欠かせない重要なコードを扱う分野のため、専門的なスキルの対価として料金がかかります。

    コーディングは専門的な知識と柔軟な思考が必要です。
    人によりコードの記述方法が異なり、そのコードの書き方一つでウェブサイトの見え方も動作状況もトラブルの頻度も変わることがあります。

    例え少ないコーディングだとしても、あらゆる構成を円滑に進めるためにも、その蓄えられた知識と柔軟な思考が求められます。

    そのため、ほとんどのウェブサイト構築において必要不可欠な技術人材となり、それなりの対価が必要となります。