コミュニケーションをデザインすること

チラシやウェブサイトはただの道具。 チラシで広報、ウェブサイトで拡散、動画でPR。 どれもこれも、コミュニケーションを生むための道具と方法です。 ただし、あくまで、道具と方法なのです。

釣りが趣味の人が、車が趣味の人と話をするためにどうしたらいいのか それを本気で考えます。

コミュニケーションとは「人と人との接点」だと考えています。 釣りが趣味の人に、自分の趣味である車の話をしても 有意義なコミュニケーションは生まれません。 その間に何があるか。 釣り〜車までの道を見つけるのです。 釣り道具を積むのに適したSUV車がいいとか、 海釣りに行くなら潮風に強い塗装があるとか、 (すみません、釣りも車もそんなに知識ありません・・・) そういうことを考えます。 もっと分かりやすく極端に言えば、目の見えない人にとっては チラシもウェブも動画も、どれを使ってもコミュニケーション不足です。 「そんなの当たり前にわかる」と思うかもしれませんが、 そんな「当たり前」を、深く深く掘り下げて その在り方を本気で考えています。それをデザイン(設計)しています。

接点が、ただの点ではなく「面」になるように

どれだけ濃く、どれだけ広く、どれだけ深い接点になるか、 そうするためにはどうしたらいいのかを考えています。 目の見えない人にとって、ウェブサイトが不要なのか 目の見えない人でも使えるウェブサイトを作るのか。 これは大きく違うことで、目指せる場所も変わります。

「当たり前」すぎて考えないこと

例えばウェブサイトを使って情報発信をするとします。 情報発信をして「どうなりたいですか?」と聞くと、 返答できないお客さんがいます。 そして、もっと根本で「なぜ、情報発信をしたいのですか」 ということ。 「時代だから」とはいえ、 口コミだけで流行るお店もあるくらいです。 その一言では片付けられません。

まずは理解して、一緒に考える

このように、いろんな切り口から考えて行きます。 そのために、より深く理解し、一緒に考えていく必要があります。 「お任せ」ではなく、当事者として手を取り合いながら悩む必要があります。 まずすることは、
  •  バックグラウンドを理解する
    • コンセプトやテーマ、これまでの歩みなど
  • ゴールや目標を理解する
    • 最終的にどうなりたいか(理想)
これらを踏まえた上で
  • ゴールにたどり着くための入口から出口までを考える
    • 理想のために何をすることがベストなのか
これが、コミュニケーションをデザインする、ということだと考えるからです。 チラシやウェブサイト、映像、商品パッケージ、販促物などは、 コミュニケーションのための道具です。 つまり、コミュニケーションの仕方を考えていなければ、 道具を闇雲に制作しても意味がありません。 だからこそ、しっかり理解して考え抜きたいのです。]]>

視聴者の好奇心を煽る映画の予告編のような映像

カツクエとは

  四国は徳島。まちの中央を流れる清流、緑なす山々に囲まれたまち。 勝浦町と周りの地域を舞台に繰り広げられる体験イベント!その名も「カツクエ探検隊」  まちを探索したり、暗号を解読したり、ときには工作物を作ってみたり、いろんな体験イベントが開催されるよ。  カツクエ探検隊に参加して、地域を冒険し、まちの魅力を再発見しよう! (Facebookページより)
ということで、子供向けの体験イベントの名称で、「カツウラクエスト」に由来しています。

ひな祭りを舞台にした謎解きイベント

今回の映像は、そんなカツクエが勝浦町のビッグイベントである「ひな祭り」を舞台に、謎解きイベントを開催した際に制作した映像です。 カツクエのイメージの根底には、かの有名な冒険映画のような世界観があったため、それに近づけて制作しています。

すでに認知されていたため「あえて何も見せない」演出

カツクエ参加者の多くがリピーターであること、また、そういった参加者は謎解きイベントの基本を知っていること。 そのような方々を対象とした映像であったため「ワクワク感」「何か始まる」という気持ちを煽るような映像に仕上げました。 そのためには「冒険が始まりそうな予感」「ひな祭り」など最低限のキーワードを如何に「楽しそうに」「興味をそそるように」見せるか(魅せるか)が重要なポイントです。

子供イベントだからといって子供を子供扱いしない

カツクエは子供向けのイベントですが、子供たちの自立心や協調性を養う目的があります。 ですので、子供扱いしないということを念頭に置いてイベントが制作されております。 そのコンセプトに基づき、予告編の映像も子供向け番組のような映像ではなく、 映画のオープニングのようなリアリティを加えました。

ワクワクするといえば映画の予告編

ワクワクさを出すには

ワクワクするといえば、映画の予告編が一つ挙げられます。 予告編というのは限られた時間の中で如何にストーリーを伝え、結末を見せないように興味を煽るかという部分がポイントになります。

音楽の重要性

また、個人的には映像と音楽の連携というものを常に大事にしています。 どんなに綺麗な映像でも、合わさった音楽が台無しにすることもよくあります。 BGMやSE(効果音)の選択も、映像制作でこだわっている部分です。 カツクエの映像の場合はSE(足音や扉の音など)は全て後からつけており、 それらは別にレコーディング(録音)したものです。

テンポの重要性

それだけではなく、シーンの切り替えやカット・構図などのテンポや緩急が重要です。 とても感覚的な話ではありますが、 予告を見ている人の心拍数と映像の切り替えが同調すると、すごくいい仕上がりになると考えます。 カツクエの映像では18秒あたりで雰囲気をガラッと変えます。 前半では、何かが始まりそうな不穏な空気を、後半では何かが起こり切迫した雰囲気を演出しています。

さりげないエフェクトで味付け

言われなければ気づかないような、さりげないエフェクトなどが多用されているのも特徴です。 しかし、このエフェクトは味の調整に使うだけなので、映像の本質にはあまり関係なく、 このエフェクトで映像自体がガラッと変わるようなことはありません。 イメージをより完成に近づけるための方法です。

ポイントをまとめると

  • 概要を伝え、核心を見せないシナリオ
  • BGMとの連携
  • シーンの切り替えのテンポ
  • さりげないエフェクトで整える

+Life Studioでは、シナリオ作成から行います。

+Life Studioでは映像制作をシナリオ作成から行います。 お客様のご要望を伺い、どのような見せ方で映像を作るべきか、 こちらからご提案もさせていただいております。 まずはお問い合わせください  ]]>

Font Awesomeがうまく表示されない。

Font Awesomeでcontent指定してるのに、□になる・・・ そうです。 この四角!何でよ! 何しても直らない!

Font AwesomeをCSS内でcontent指定して使う手順

絶対にいろんなところでつまづいている人いると思う。

CSS内で指定するときは まず、headerでCDN読み込み

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

そんで、CSS内擬似要素(:after、:before)で指定

.fontawe:after{
    display:block;
    content:"\f061";
    font-family: "Font Awesome";
    width:20px;
    height:20px;

}
これだと□になります。

間違い要素をまとめていくと

擬似要素の使い方は自分で調べてもらうとして、 擬似要素内でどうしてFont Awesomeが□になってしまうのか、をまとめました。

(間違い要素1) font-familyは「Font Awesome 5 Free」

正しいフォント指定は
font-family: "Font Awesome 5 Free";
2018年8月現在で、Font Awesome のバージョン5フリー版を使う場合です。 古いブログだと「5 Free」がない記載があります。

(間違い要素2)contentは「\(バックスラッシュ)」付きのUnicode

正しいアイコン指定は
content:"\f061";
バックスラッシュがなかったり、半角¥マークになってたりしたら間違い。 よくありがちなのは、Font-awesomeのアイコン画面の一番左のコードを直接書くこと。 content:”<i class=”fas~~~~~~~”> は違いますよ。 contentで指定するときは、ユニコードをコピーしてください。 バックスラッシュもお忘れなく。

font-weightの指定がないと表示されない

ワタクシ、これによって1時間も悩まされました。
font-weight:900;
いろんなページをまさぐりまくっていたら確かに書いてありましたよ。こんな表がこのページに。 こんなページ誰も見ないでしょ!使い方のページに書いといてくれ〜と叫んだ。 Free版を表示するときは、font-weightを「900」か「bold」で指定しないといけないようです。 確かにfont-weightを指定したら、表示されました。 ここまでの道のり長かったなぁ〜・・・・。

コピペ用

.fontawe:after{
    display:block;
    content:"\f061";
    width:20px;
    height:20px;
    font-family: "Font Awesome 5 Free";
    font-weight:900;
}
これをぶち込んだら、とりあえずいけるはずです。 [wpap service=”with” type=”detail” id=”4839960224″ title=”6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポ…”]]]>

応募多数らしいです。内容に少し触れてみます。

超・初心者向けの講座です。 おそらく、ウェブサイトの初歩知識を身につけている方にとっては退屈な講義かと思います。 「目から鱗!」的な情報はあまり期待しないように。笑 もうちょっとツッコんだ話は、 この講義を終えた後、何かしらの手応えを感じたらまた別途やって見ようかな、と思います。

ウェブサイトをぱぱっと作っちゃう講座です。

基本を押さえつつ、必要最小限のページ構成で「作り方」も学べます。 あまり細かい部分には言及せず、みんなで教科書通りの同じレイアウトでウェブサイトを作ります。 (もちろん、コンテンツについては考えてもらいます。)

情報発信の基本を学ぶ講座です。

ただし、ウェブサイトを「作ること」に重きを置くわけではなく ウェブを使った「情報発信」についての基本の”キ”を学ぶことを中心に据えます。 WIXの使い方や、WIXを使ったウェブサイト制作について、もちろん講義をするわけですが、 どちらかと言えば「作り方」よりも「情報発信」がメインです。 それはなぜか、 情報発信の道具の一つが、ウェブサイトというメディアだからです。 ウェブサイトは作るだけでは意味がないのです。

情報発信メディアはたくさんある

情報発信といえば、SNSやウェブサイト、と真っ先に思い浮かぶ人が多いと思います。 正確にいえば、チラシや新聞も「情報発信」のためのメディアであり、 ビジネスで多用されるメディアといえば「名刺」も挙げられます。 今や、高齢者もスマートフォンを利用する時代なので、ウェブサイトがカバーできる年齢層は広がりつつありますが、それでも、チラシの方が情報発信効果がある場合もあります。 情報発信はメディア選びからすでに始まってます。 大切なのは 100歳のおじいちゃんたちに情報発信したければ、ウェブではない方が得策です。 そんな話を中心に話したいと思います。]]>

モバイルファーストインデックスについて

ウェブ = モバイル となるわけです。 わかりやすく説明します。

今後はモバイルサイトの内容が検索順位にかかわってくる

Googleは公式のサイトでこう発表しています。
将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用するようになります。つまり、ページのランキングを決定したり、構造化データを理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテンツが使用されるようになります。もちろん、Google のインデックスがモバイル版のコンテンツで形成されるようになっても、デスクトップ端末かモバイル端末かに関わらず、すべてのユーザーに素晴らしい検索体験を提供し続ける点は変わりません。
検索結果に反映する際に、モバイル版のコンテンツを主に使用するようになる。 モバイル版のウェブサイトのコンテンツが如何に、ユーザのことを考え作られているかが重要になります。 もっと簡単に言うと、スマホで使いやすいサイト作れよ!ってことです。

すでにレスポンシブデザインのサイトは特に何もしなくてよい

レスポンシブデザイン動的な配信を行っているサイトで、主要なコンテンツやマークアップがモバイル版とデスクトップ版で同一である場合は、何も変更する必要はありません。
レスポンシブデザインの場合は何もせずにそのほかのSEO対策をしていきましょう。

スマホ・PCがそれぞれ独立している場合

スマホサイト・PCサイトが独立している場合、以下の対応が必須になります。
  • 構造化データ マークアップがデスクトップ版とモバイル版の両方で配信されるようにします。構造化データ マークアップの同一性を確認するには、構造化データ テストツールにデスクトップ版とモバイル版の両方の URL を入力し、出力結果を比較します。モバイルサイトへ構造化データを追加する際は、それぞれのドキュメント特有の情報に関係のないマークアップを大量に追加するのは控えます。
  • robots.txt テスターを使用してモバイル版のコンテンツに Googlebot がアクセス可能であることを確認します。
  • rel=”canonical” リンク要素を変更する必要はありません。デスクトップとモバイルのそれぞれの検索ユーザーにとって適切な結果を表示するために、Google はそれらのリンク要素を引き続き使用します。
 

PC版しかない場合はどうすりゃいいのさ

では、PC版のウェブサイトしかない場合、どうすればいいのか。 新たにスマホサイトを作るべきなのか、無理やりレスポンシブ対応したほうがいいのか、 それともPC版だけでいいのか。 Googleさんはこう言っています。
デスクトップ版のサイトしか存在しない場合、Google は引き続きデスクトップ版のサイトをインデックスします。モバイルユーザーエージェントを使用してアクセスする際も問題ありません。 デスクトップ ユーザーにとって使いやすいサイトは、壊れたり不完全なモバイルサイトよりも、モバイルユーザーにとって好ましい場合があります。モバイルサイトを作成する際は、サイトが完成し準備が整ってから公開することをおすすめします。
つまり、変なスマホサイト作るくらいなら、ちゃんとしたPCサイト”だけ”の方がいいよということです。

読み込みスピードも評価対象

この ”Speed Update” (と私たちは呼んでいます)は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。 そのページがどのような技術を用いて制作されたかに関係なく、すべてのページに同じ基準を適用します。
PHPによる動的なサイトでも、htmlによる静的なサイトでも、一緒くたに評価されるようですね。 ただし、次の文言が気になる。
検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。
つまり、ユーザが検索したワードによっては、読み込み速度にかかわらず上位表示されるということ? となると、そもそも「上位表示」に対する対策が難しくなりますね。(これも検索エンジンのあるべき姿かもしれませんが。)

そのほか、追加があれば追記します。

ほかに追加があれば随時追記していきます!]]>

謹賀新年

  • ウェブ:4件
  • チラシ類:9件
  • 映像:5件
  • その他:3件
  • と多くのクライアント様にお世話になりました。 様々なイベントやクライアント様を通して、地域との関わりを大きく考える年でもありました。 本年は、昨年の学びを「実行」へと移していく年にしようと思っております。 +Life Studioとして更なる地域密着をテーマに様々に展開していこうと思案しておりますので、 引き続き、応援とご愛顧のほどよろしくお願いいたします。]]>