ブログ

WordBench岐阜の宣伝用フライヤーを作りました

WordBench岐阜を再開するにあたり、利用する施設を「みんなの森 メディアコスモス」に変更したのですが、そちらには事前にイベントのチラシなどを設置して告知してもらえる場所があります。

カラフルなクッションの右側がフライヤー設置場所

WordPress自体を知っている人は岐阜市近郊に一定数いるとしても、WordBench岐阜を知っている人はごくわずかです。なので、認知を広げる方法があるならどんどんと試していくべきだと思っています。

なので、早速チラシを作ってみました!

続きを読む WordBench岐阜の宣伝用フライヤーを作りました

WordBench岐阜の会場となる「みんなの森 メディアコスモス」あつまるスタジオへの行き方をご紹介します

駐車場エリアからメディアコスモスを見る

去年まで2回開催しましたWordbench岐阜では、JR岐阜駅前のコワーキングスペース「SORASIA」さんにもご協力いただき開催させていただいておりましたが、中断期間もありまして、この度再開するタイミングでメインで利用させていただく会場を変更させていただくことにしました。

理由としてはやはり「会場費用」が一番大きな理由となります。

コワーキングスペースさんの貸会議室スペースを利用させていただいていましたので、どうしても3時間利用するのに何千円という費用が必要になります。そして、参加者さんからいただく参加費用で賄うことを考えると、どうしても最低催行人数を設けないと経済的な負担が発生してくるという問題がありました。

まだまだ立ち上がって間もないコミュニティですので当然スポンサーなどいるわけもなく、全て参加費用で賄うか僕の自腹かという状況でしたので、今後これが続くとなるとちょっと厳しいなという気持ちでした。

ですが関係者からのリクエスト等々もあり、少しお休みさせていただく期間を経て、この度、みんなの森 メディアコスモスをお借りして再開させていただくことにしました。
続きを読む WordBench岐阜の会場となる「みんなの森 メディアコスモス」あつまるスタジオへの行き方をご紹介します

[WordPress]画像を挿入する際にalt属性を設定する方法とその必要性

WordPressで画像を挿入する際にalt属性をどこで設定するのか

モバイルファーストインデックスが騒がれ始めて、随分長い時間が経ちましたが、あまり目立った動きは聞きませんね。

しかし、いつ本格導入されるかわからないので、ある程度必要なことは準備しておくことも大切です。

こちらの記事で僕個人もあたらめてalt属性の必要性を再確認させられました。

参照:モバイル向けページの画像にはalt属性を必ず設定すること。MFIへの切り替えで検索順位に悪影響が出る可能性あり

WordPressにおける画像のalt属性の設定方法

意外にも画像を投稿や固定ページなどに挿入する際、タイトルやキャプション、alt属性などの項目を何も修正せずに挿入してしまうことは多いのではないでしょうか?

簡単にalt属性を設定して画像を挿入する方法を確認しておきましょう。

投稿画面より画像をメディアから選択しようとすると、下のような画面になります。

WordPressで画像を挿入する際にalt属性をどこで設定するのか

この「代替テキスト」という部分にテキストを挿入すると、それが自動的にalt属性になります。簡単ですね。

すでに投稿されている画像のalt属性を修正する場合

すでに投稿してある画像のalt属性を修正する方法を紹介します。WordPressでは2つのエディタモードがあり、「ビジュアルエディタ」と「テキストエディタ」というモードがあります。

ビジュアルエディタは、HTMLコードなどを書くことなく、Wordで文章を作成するような感覚で記事内容を入力していくことができます。

テキストエディタは、HTMLなどのコードを利用しながら記事を書くことができるモードになります。

両者特徴があるので、好き嫌いもあるとは思いますが、今回は両方の方法を紹介しておきます。

ビジュアルエディタで画像のalt属性を修正・変更する場合

まず、投稿や固定ページの編集画面で変更したい画像を探します。

ビジュアルエディタで画像のalt属性を修正・変更する場合〜その1

変更したい画像をクリックすると、このようなツールバーが表示されるはずです。その中のえんぴつのアイコンボタンを押します。

ビジュアルエディタで画像のalt属性を修正・変更する場合〜その2

すると、代替テキストという項目があるので、そちらのテキストを入力・修正します。

ビジュアルエディタで画像のalt属性を修正・変更する場合〜その3

上のサンプルではすでにalt属性が設定されているため、あらかじめテキストが入っていますが、何も設定されてない場合には空白になっていると思います。完了したら右下の【更新】ボタンを押して終了です。

テキストエディタで画像のalt属性を修正・変更する場合

テキストエディタで修正する場合にも同様に、記事の編集画面にて該当する写真を掲載している部分を確認します。

テキストエディタで画像のalt属性を修正・変更する場合

ソースコード内にalt属性を確認することができるかと思いますので、そちらのalt="から"の間のテキストを修正します。何も設定されていない場合にはalt=""と空白になっていると思いますので、その間にテキストを設置します。

alt属性の必要性とは

alt属性って何に使われるの?と思われる方も多いかと思いますが、Googleインデックスを考慮するのであればとても大切な要素になります。

そもそもalt属性とは、その画像が何を表しているのかと示すものとして利用されています。Google検索エンジンはとても頭が良いのですが、しかし自分で画像を解析してどんな画像なのかを認識することはできません。(そのうちできるようになるかもしれないけど…

ですので、 こちら側が「これは○○の画像ですよ」と教えてあげる必要があります。

Googleの画像検索などで出てくるのは、このalt属性などを参考にして検索結果に表示されています。

また、目の不自由な方がテキストリーダーなどを利用してウェブサイトを閲覧した際に、alt属性を設定されていない画像は読まれずスルーされてしまいます。アクセシビリティの観点からも必要であれば設置する必要がありますね。

ということで、Googleに認識してもらいたい場合とテキストリーダーに対応したい画像にはalt属性設定が必要ということを覚えておきましょう。

しかし、全ての画像に設定する必要はない

ウェブサイトの中には様々な用途で画像が用いられています。

ロゴであったり、飾り用(デザイン上必要な装飾)であったり、アイコンであったり。様々です。

先ほど書いたように、alt属性を全ての画像に設定しないといけないかというと全てではないと考えています。

上に書いたようにGoogleに読み込んで欲しい画像テキストリーダーに対応したい画像には設置するべき、ということですので、逆に言うとコンテンツに関係のない画像には設定する必要はないと考えることもできます。

まとめ

ある程度、alt属性について理解していただけたかと思います。

どの画像に必要かどうかは、みなさんそれぞれで判断していただくとして、今後、いずれ始まるであろうモバイルファーストインデックスに対応する為にもalt属性設定を見直す必要があることはお分りいただけるかと思います。

当然、PCページでのインデックスでも有用ですので、モバイル・PC関係なく必要あれば設置するルーティンを組むことをオススメします。

SNSとウェブサイトとアナログツールのこれから

職業上、ウェブサイト制作に携わっているせいか、どうしても考えのファーストチョイスとして「ウェブサイトをまずは持って」と惰性で考えてしまいがちです。

おなじように、クライアントからも「ウェブサイトありき」のご相談も少なくないことも事実です。しかし、これからの時代、それで良いのでしょうか。

こちらの記事を拝見して、個人的に思ったことをまとめてみようと思います。

参照:ソーシャルメディアで変わったwebサイトの役割

私たちの生活とSNS

まず、自分たちの生活にどれだけSNSが浸透しているのかを考え直す必要があります。

僕の場合、特に意識的にSNS断捨離をしていないときには、FacebookやTwitterとの関わりはとても深いです。仕事中でもリアルタイムでTwitterは見える状況になっていることが多いですし、Facebookも気になる投稿に関しては通知が届きます。

しかし、それは僕自身の職業からくるものでもあるでしょう。同じくらいの年齢層で会社勤めをされている方々になると、その関わり具合も全く変わってきますよね。

もう少し若い世代に目を向けてみましょう。彼らの場合、僕たち世代よりも、より一層SNSとの関わり方は深くなっていると統計からも確認することができます。

総務省|平成27年版 情報通信白書|SNSの利用率 より

そういった世代に伝えたいビジネス的なメッセージがある場合、一体どんな方法が良いのか。そこを真剣に考え悩む必要があります。

40代、50代、60代とSNS

僕は現在、30代に属するので、それ以上の年齢層のみなさんがSNSとどのように関わっているのかを考えてみましょう。

40代のみなさんは、比較的関わっている方も多いように感じます。Twitter、Facebook、instagram、LINEといったSNSを利用されている方が多いと思いますが、統計から見るとLINEもFacebookもそれほど30代と変わりません。instagramは若干割合が落ちていますね。

これはinstagram自体が若者向けというか「写真をよく撮る層」もしくは「写真をよく撮る時間がある層」と考えることもできます。ですので、必然的な流れかと思います。

50代のみなさんは、40代に比べて全体的に割合が落ちてくる形になりますね。ここら辺の年齢層になると、かなり「個人差」や「環境」が強く出るのではないかと思います。

「個人差」というのは、「そもそもSNSに興味があるか。好奇心が強いか」といった部分の影響が大きいでしょう。興味のある方は書籍片手にでも試してみるという方も多いです。

「環境」というのは「お子さんや友達に相談・質問できる人が近くにいるかどうか」ということを指しています。先ほどの「個人差」で書いたように書籍を見てまではやらないけど、若干の興味や好奇心と相談・質問できる相手が近くにいるかどうかで使ってみるかどうかは大きく変わってくると想像できます。

60代のみなさんは、統計的に50代よりも全体的に下がってきている形で、特徴的な動きはありませんね。ということは、50代の方々のところで書いたように「個人差」や「環境」が大きく影響して、60代になるとより一層二極化してくることが想像できますね。

どの年齢層のどんな人たちに届けるメッセージか

ビジネスで「商品を売りたい」「サービスを届けたい」と、ターゲットにメッセージを届けたいと考える際に、まずは届けたい相手のことを考えることがとても大切になってきます。

例えば、60代以上向けのマッサージチェア

こちらを販売したいと考えたとします。方法は2通り。

  • 利用者にメッセージを届ける
  • お子さん「親へのプレゼント」としてメッセージを届ける

ざっくりと2つに分けました。

実際に使ってもらう60代の方にメッセージを届ける場合、TwitterやFacebook、instagramに広告を出稿して反響が出ると思いますか?思いませんよね。

上の統計からみても明らかなように、ユーザー数から見ても大きな結果は望めません。しかし、比較的操作が凝っていてハイテク好きな方に向けて、とういう場合には狭い範囲で広告出稿を指定できるFacebookなどでは試してみる価値があるかもしれません。

ではどうするか。

マッサージチェアという特性と価格帯から、折込チラシだけでの購入は考えづらいでしょう。ですので、どこか催事場もしくは展示場へ足を運んでもらう工夫をするべきです。

来場特典やお試ししていただいた方には特典を、という具合です。そして使ってもらう。購入云々はそれ以降です。まずは来場していただいて体感してもらうことがゴールになるでしょう。

では、お子さんに向けたメッセージはどう届けるべきでしょう。60代の親を持つ子供ですので、おそらく30代がメインになってくるかと思います。経済的にはある程度足場が固まってきたころでしょう。

一番無難な流れでは、プレゼントとして贈れるかどうかを30代向けにアピールできるかどうかでしょう。

プレゼントしたら親がどんな風に使ってくれるのか、喜んでくれるのか、そういったポジティブなイメージを伝えて、お子さんから親に欲しいか聞いてみたり、試してみたらと促してもらえるかどうかもポイントです。

その流れの中でどういったことを伝えられるか、そこがとても大切になってくるでしょう。

メッセージを届けたいターゲット層をしっかり観察・研究することが大切

当然のことなのですが、メッセージを届けたい相手のことをしっかりと観察・研究することが大切です。

どうしても自身が属しているビジネスや業界などの一般常識を、その周りの人も持っていると自然に考えてしまいがちです。しかし、それは間違いです。

多くの人が様々な考え方や知識を持っているので、良くも悪くも自分で思ったようにはなりません。

ですので、この「メッセージを届けたいターゲット層をしっかり観察・研究することが大切」というのも、「その人」にフォーカスせずに、少し広い視野で考える必要があります。

当然、「あの人に届けたい!!!」というようなメッセージなのであれば、その方法でも構いませんが。ビジネスにおける届けたいメッセージとは、主にお客さん相手というケースが多いので広い枠で考えながらもしっかりと想定することが大切です。

あと、トライ&エラーです。これは何度も繰り返さないといけません。意外にも、この点を理解していただけない方が少なくありません。神様でもない限り、ドンピシャで成功する方法がわかる人間はいません。

これからのウェブサイトは

では、これからのウェブサイトはどういった役割を持つべきなのでしょうか。

SNS利用者のシェアが広がっていく中、どうしてもSNS経由での集客・アピールというのが多くなってくると思います。

「なので、頑張ってブログを書いて発信しましょう!!!」という方もみえるのですが、ブログを書くことが得意ではない人も多くいますし、そんな時間はないという方も多いでしょうね。だからブログが万全の武器でもありません。更新されないブログはマイナス要素になりかねませんし。

では、どういった形でこれからウェブサイトを使っていくべきなのでしょうか。

まずは最低限の情報を掲載しましょう

まずは最低限の情報で良いと思います。

会社情報やアクセス、業務内容、取り扱っている商品など、カタログみたいなものです。ポイントとしては、名刺にウェブサイトURLを乗せてアクセスされた時に必要な情報を掲載することをオススメします。

名刺に掲載されているアドレスを見てアクセスしてくれている人なので、何かしら興味があって見にきてくれています。そういった方々に、最低限必要な情報を持って帰ってもらえるようなレベルの情報詳細度を意識しましょう。

ブログは無理にやらない

ブログは無理にやらなくても良いです。確かに、運用方法次第ではありますが、ビジネスの大きな力になります。

しかし、逆に運用を止めてしまって放置されるようなことになるのであれば、閲覧者にはネガティブな印象を与えかねません。ですので、なかなか判断が難しいですが、まずはやるのか・やらないのかをはっきりと決断するべきでしょう。

個人的な感想ですが「徐々に慣れて書けるように・・・」とお思いの方は、十中八九更新が途絶えます。やはり本業の傍に定期的に文章を投稿するのは大変なことなのです。

ランディングページと広告

売りたい商品がある。知って欲しいサービスがある。少々コストをかけてでも打ち出したい。そういった場合には、ランディングページ(通称LP)と広告出稿を試してみることをオススメします。

詳しくターゲットを調べないとわかりませんが、乱暴な言い方をするならば「若者向けならSNS、中高年向けならばSNSとアナログを使い分け」という方向性で良いかもです。

実際にはSNSそれぞれの特性(使っている人たちの属性や年齢層・趣向など)の違いもあるので一概に言えませんが、そういった部分も加味した計画が必要になります。

ランディングページ自体も、現在持っているウェブサイトに併設する形で制作しても良いですし、ペライチなどのサービスを利用してスピーディーに試してみることも可能です。

定番商品ができてからウェブサイトを整備する

売れる商品や定番商品、人気商品が出てきたらウェブサイトを整備しましょう。それからでも遅くありません。

Q&Aであったり、特集ページであったり、様々な企画をウェブサイトやSNSと連動してユーザーを巻き込んでいくことで、より一層メッセージが届きやすくなります。

結果的に、それがブランディングとなり、企業イメージとなっていきます。最初から全て揃っているウェブサイトが必要という訳でもないのです。

まとめ

これからのウェブサイト利用方法、どうなるか先は読めませんが、現時点で僕はこのような流れが一番ベターなのではないかと考えています。

個人・中小企業さまを相手にした場合に限るのかもしれませんが、多くの予算を最初から投資できることは稀なので、早く小さく初めて、大きく長く伸ばしていくというスタイルが大切かと思います。

その中で、どうしてもSNSは切り離せない時代になってくるでしょう。活用するかどうかは別として動向は注視しておく必要があります。いざ使おう!となった時に、お手上げになってしまっては困りますしね。

日々、勉強ですね。がんばりましょう。

10のコーポレートサイトデザインを見比べても重要なことがわかる「写真」という要素

みなさん、既にご存知だとは思いますが、ウェブサイトを作る際に画像を利用しないということはほぼありません。

何かしらの画像を利用することが多いです。ヘッダー部分、メイン部分やブログのアイキャッチ画像、フッターに掲載する会社外観写真など、使わないことはほとんどありません。

しかし、実際の制作では(特にクライアントさんと直接やりとりすることが多いフリーランスでは?)クライアントさんが画像素材を持ち合わせていないといった場合は、適当に見繕ってと言われることも少なくないでしょう。

確かにインターネットの世界では画像素材を探すのに苦労はしません。無償・有償問わず多くの画像素材を入手することは大変なことではなくなったからです。クライアントさんも同じようにインターネットを利用されて画像などを検索されたことがある方も多いでしょう。その流れで「適当になんとかなるでしょう」と思われている方も少なくありません。

しかし、ここで考えていただきたいことがあります。「御社は他にありますか?」ということです。

世間に流用されている画像素材(無償・有償問わず)でクライアントのビジネスを100%表現することができるでしょうか?言葉は悪いですが、そんな他人の画像素材を多く利用するようなサイトのビジネスは、すぐに淘汰されてしまうでしょう。

特にメインとなるビジュアル画像は閲覧者に大きく響く可能性があるパーツになります。そのイメージが言葉よりも先行して閲覧者に届く可能性は大変高いです。

そういった視点を大切にしてもらうために、今回は大手企業様ではありますが、数多くのウェブサイトのファーストビュー(ページを開いたら最初に目に入ってくる部分)部分を数社通して比較してみて、どのようなイメージ画像を利用しているのか、どのようなメッセージを持たせる意図でそのビジュアルを使用しているのかと考えてみましょう。

JAL企業サイト

JALの企業サイトのメインビジュアルには、コマ送り・早送りのムービーが採用されています。

こちらは企業サイトですので、当然「企業」に興味があるユーザーのアクセスが考えられます。そういったターゲットの中には就職活動を行なっている方も多くみえるという観点もあるのか、日々の業務が分かりやすく一目で伝わるようなムービーということで、「コマ送り」で目を引きつけ「早送り」で時間をかけずに認知してもらう、という流れを作っているように考えられます。

井村屋フーズ

井村屋フーズでは、メインビジュアルにスライドショーを利用しています。

掲載されている画像を見ると、まず最初に表示されるスライドには、閲覧者に知ってほしい情報を持ってきています。今回は「会社の合併」をしっかりと伝えるようにしています。

また、実際の業務風景写真をスライドに盛り込むことによって、社内の雰囲気がよく伝わり、透明性のある企業というイメージを自然と与えることにも繋がっていると考えられます。

森永製菓

森永製菓といえば、言わずと知れた老舗お菓子メーカーです。

最新では、お菓子の種類も多くなり、外国から輸入されるものも多く市場は飽和状態ではないでしょうか。

そんな中、メインビジュアルでは、「老舗」というポイントを代表的なお菓子のビジュアルと一緒にアピールし、それと同時に「安心感」も与えてくれるような、そんなビジュアルになっています。

飛鳥交通グループ

タクシー料金の初乗り運賃の値上げニュースというのは、毎度大きく取り扱われることが多いせいか、タクシー業界への新しい人材(求職者)も含めて、人員確保も簡単ではないのかもしれません。

その影響もあるのか、ファーストビューを見て印象に残るのは、「ドライバーになろうとする方へのメッセージ」が強く感じられます。ファーストビューにも求職者へのアクセスを促すバナーやボタンが複数見受けられ、企業サイトへ訪れた求職者を逃したくないという意図が感じられます。

また、メインビジュアルのスライダー内に訴えたいメッセージコンテンツを常設するというスタイルは、とても面白いなと感じました。

アイスペース

一目でターゲットは若い女性ということがよくわかるデザインになっています。また、メインビジュアルも画像素材だけでなく、そこにグラフィックデザインの要素も織りまぜることで、アーティスティックでナチュラルな印象を受けます。

コンタクトの導入や購入を検討している方が見る場合も多いのでしょう。ファーストビューの下部には「キャンペーン情報」の存在をしっかりと見せることによって、スクロールして情報を見てもらえうように導線を考えて作られています。

JAながの

「JAながの」と聞くだけで、ある程度掲載内容は把握できるくらい強烈な情報を「JA」部分が持っていますが、ここでは「ながの」の部分をしっかりとメインビジュアルでスライドショーを織り交ぜながら紹介しています。

自然の風景から、農作物を作っている田畑の様子などをスライドショーにて紹介することによって、「農作物」や「JA」、「ながの」の魅力をアピールしようという狙いが感じられます。

「JAながの農産物情報」というタイトルがスクロールを誘い、下位コンテンツも見てもらえるようにと導線を作っている点にも注目です。

亀田産業株式会社

こちらのサイトは、ウェブサイトのロード画面にも注目を集めることも大切にしているようです。

ウェブページを読み込んでいる間に表示されるロード画面もとても特徴を出して作られています。メインビジュアルにはスライドショー機能を採用して、会社外観や作業風景の様子、企業として推進するコンセプトなどを前面に押し出したメッセージ性を持たせています。

株式会社ビューティ花壇

お花に関係する企業ということが一目でわかるメインビジュアルです。

スライドショーの下には、取り扱う事業を紹介するページを掲載しています。こちらもビジュアルを用いてイメージと簡単なタイトルで認知してもらおうという流れを感じます。

株式会社リアリット

IT企業ということで、爽やかなイメージと共に企業が伝えたいメッセージを大きなタイポグラフィとビジュアルでアピールしています。

また、そこに徐々に吸い込まれるようなアニメーション機能を追加している点も工夫が見られます。画像切り替え時のフェードイン・アウトのスピードもストレスないタイミングで良いですね。

ヤマト運輸

先日から、色々とニュースに取り上げられることが多かったヤマト運輸ですが、ウェブサイトではメインビジュアルでメッセージを配信しています。

フェードイン・アウトのスライドショーでは、まず最初に企業からの大事なお知らせを打ち出すようにしています。そして、その後にはヤマト運輸が運営しているサービスの紹介に続きます。

シンプルなアイコンやイラストに加えて大きなタイポグラフィで確実にメッセージを届けようとしている点からも、新しいデザインテイストを取り入れつつも、ターゲット層を狭めない(若者だけではなく幅広い年齢層)配慮がされていることが感じられます。

まとめ

10のウェブサイトを実際にキャプチャを紹介しながらコメントさせていただきましたが、どのサイトもメインビジュアルを大きく設置し、方法は様々ではありますが、独自に考えた方法で色々なメッセージを訴求していることがよくわかっていただけるかと思います。

「うちはこんな大きな会社じゃないし、そこまでしなくても…」と言われることもあるでしょう。しかし、競合ではないからといって、わざわざ手抜きして競合にチャンスを与える必要はありません。

また、大きな会社だからオリジナルの画像素材を用意できる、というわけでもありません。

当方でもそうですが、クライアントさんにビジュアルの大切さを理解していただければ、しっかりと予算をいただいて写真撮影を当方で行うことも可能です。

ぜひ、メインビジュアルを軽く考えずに、オリジナルなものを採用することも検討していただければと思います。