STAFFBLOG スタッフブログ

スタッフブログを AMP 対応しました!

fujie
2016/08/30
閲覧所要時間:約6

amp-thumb ※画像のスライダーはこんな感じになればいいな…というパロディイメージ

AMP ( アンプ ) 対応になったスタッフブログからこんにちは。
アンプと読むらしいです。読み方は知っていてもエーエムピーと読む癖がついているので、いきなりアンプが~と言われてもまったく認識できませんでした。

対応方法や情報だけは前々から仕入れていましたが、個人的に盛り上がってない感やニュースサイトだけでいいのではと思っておりましたが、

スマホ対応が不要になる!? Google、通常のモバイル検索結果でスマホ向けページの代わりにAMPページを表示する実験を開始
https://www.suzukikenichi.com/blog/google-starts-experiment-to-replace-mobile-friendly-pages-with-amp-pages/

などを読むうちに急にやる気になり、重い腰をあげました。

WordPressを利用しているので、便利なプラグインにてささっと対応もできますが、( 現段階のプラグインだと、AMP の厳しい制限によりエラーがかなり多くなるようですが… ) より深く理解したかったので、オリジナルテンプレートで対応することにしました!

ということで実際作業した感想のレポートです。
※詳しい対応方法は解説記事を探すと大量に出てくるので省きます。

対応方法にて大変お世話になったサイト



URL はどうするか?

AMP 化の URL は自由に決めることができます。

使用できるタグや属性などが厳しく制限されているなか、URL は特に定まっていないのに衝撃を少し覚えました。

既に AMP 対応なされているメディアのブログ、個人のブログなどを参考に URL の末尾に ?amp を付与すると AMP 対応のテンプレートを見るように設定しました。

この記事の実際の AMP ページは下記のとおりです。

スタッフブログを AMP 対応にしました! ( AMP )
https://www.fvs-net.co.jp/blog/11607?amp




どういうデザインにするか?

制限されているタグや属性の中で表現できる範囲内に関しては、デザインは自由なので、こちらもすでに AMP 対応なされているところを参考にしました。

いくつか見ていくうちに共通点がありました。

  • スマホ対応にてよくつかわれるハンバーガメニュー ( ドロワー ) などは無し
  • 記事のみに集中 ( サイドバーなどは排除 )
  • 前後記事や似た記事などはあったりなかったり
  • オリジナルテンプレートで対応している場合は、レスポンシブウェブデザインとかなり近い形で表現が可能
以上のことを踏まえ、レスポンシブウェブデザインの時に書いた CSS をもとに、ハンバーガーメニューやサイドバーを排除したテンプレートを用意し、細かい調整を行いました。



HTMLタグを AMP 用に置き換えるときに苦労したこと

画像 ( img ) や フレーム ( iframe ) などは、それぞれ対応したタグに置き換えなければならないので、テンプレート上にて処理を記述します。
何度も繰り返しになりますが、タグの制限などが厳しいため、間違いがあると、デベロッパーモードにて、すぐにエラーが出てしまいます。
URL の末尾に #development=1 を付与するとエラーチェックができます。

WordPress なので、 PHP の正規表現を駆使していくことになりますが、
iframe というタグだけても
  • 普通の iframe を amp-iframe
  • WordPress の記事埋め込みカード機能の iframe も amp-iframe
  • YouTube の埋め込み iframe は amp-youtube
といろいろあり、正規表現が苦手なので、分岐に苦労させられました。

正規表現作るときはいつもこちらのリファレンスとにらめっこ…。
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php




インデックスまでに1日!

AMP 対応ページは元の記事にメタタグにて指定を行うので、即時に公開できるのですが、サイトマップや Fetch as Google を行ったとしても、Search Console の Accelerated Mobile Pages にてインデックスされるまでに1日かかりました。



検索結果に雷マーク!

また、インデックスされたとしても、話題性がない普通のブログ記事は、トップニュースには載らないようです。
今日だったら台風とか天気に関することを書いて、アクセスが伸びれば載るのかな?という感じだと思います。

でもでも、ちゃんとインデックスされれば、下記のように検索結果に雷マークが付与されます。
名称未設定-1 いい感じ!

また余談ですが、スマホ対応のラベルは撤回されました。
( ラベルがなくなっただけでランキングシグナルからは外れてません )
こちらが参考になると思います。
「スマホ対応」ラベルをGoogleが廃止!?モバイル検索結果から削除される・・・
https://www.peko.co.jp/seo/smartphone/sumaho-corresponding-label-google-abolition



エラーへの対処とまとめ

弊社の今までのブログ記事は、648件です。

毎日20件前後 AMP 対応ページがインデックスされ、
その中で1・2件ほどエラーが上がってきている ( PHP の置き換え漏れ、カバーできない範囲 ) のが現状です。

とりあえずの AMP 化対応はプラグインを使えばすぐ、オリジナルなら半日か1日で終わるけど、その後の対応でエラーへの対処を図っていく必要があり、さらに今後の記事への品質管理も考えなければ ( AMP を意識した記事の書き方のマニュアルの整備など )、検索エンジンに対してよい評価がもらえないと思うので、今回の AMP 対応を通して仕組みづくりが大切で、大変なことだと学ぶことができました。

また、取り掛かり前と後では正規表現に関する知識もより一層蓄えることができたので、総じてプラスになったと感じております。

以上です。



過去の対応 or 導入しましたの記事

可愛い友と旅をせよ:猫

hashimoto
2016/08/25
閲覧所要時間:約5

おつかれさまです。橋本です。
top 夏ももう終わりですね・・
みなさんは夏らしいことしましたか?浴衣でキャピキャピ夏祭り、みんなでキャピキャピ花火、海でキャピキャピバーベキュー・・。
( ゚д゚)ハッ! 私ぜんぜん誰かとキャピキャピしてない・・嫌だ!アラサーだってキャピキャピしたい!
そうだ!何処かへ誰かと旅に出よう!夏といえば・・島! 
ということで前から行きたかった「猫島」に友人を連れてキャピキャピしに行ってきました!

猫島とは


どこか特定の島を指す言葉ではなく、島全体に猫が多く、それも人口に匹敵する、もしくは超えるほどの猫の割合が多い島を、猫好きの人達が指して、猫島と呼んでいます。多くは島で猫が大漁の象徴だったりして大切にされた結果たくさんの猫さんになったと言われます。

出典:NAVERまとめ


実は熊本にもある猫島
地図 その名は「湯島」熊本県上天草市大矢野町。島原半島と天草諸島のほぼ中間に位置する周囲約6.5kmの島。人口は島民より猫の数が多いと言われているそうな・・・これは期待!

ということで猫島へGO!

きっぷ まず熊本駅に集合し、JR熊本→JR三角線で三角駅まで お弁当食べ、キャピキャピ話しながら約50分(740円)。
三角駅 三角駅到着!なんか可愛いーいー!キャピ☆
湯島には船で行くのですが、船の時間に余裕があったので、駅近の三角港にあった三角の建物へ向かいました。
三角 こちらはフェリーターミナルだそうで中には螺旋階段が!!テンションがあがります。キャピ☆
螺旋 登ると・・・
海 海が一望できます!眺めも良いですねー
三角に来た際には寄られてみては?オススメスポットです!☆(ゝω・)vキャピ

さてさて時間もほどよい頃になってきたので、タクシーで江樋戸港へ!(約15分)
江樋戸港から湯島へは、1日5往復の便しかないのでご注意を!(所要時間約30分。運賃片道600円。)
船
友人も私も最近一眼レフを購入し、カメラ女子になったばかりなので、「猫を撮るどー!」と意気込みながら乗り込みました。お盆休みだったので船の中には里帰りの人ばかり。

そして到着

着いた瞬間に猫が!お出迎え・・・ではなく、猫の石像「猫神様」がお出迎え。猫のハウスもありました。島の人達から愛されてるんですね〜。
猫 島は歩いて一周できるぐらいということなので、とりあえず一周してみることに。歩いていたら猫にも会えるだろう・・・
歩いていて思ったのですが、通りすがる島の人はみんな自ら挨拶してくれます。市内に住んでいるとそういう事がないので、とてもそれが新鮮に感じました。小さい島だからこそかもしれませんが、良い習慣なので見習いたいですね。
・・と!第一島猫発見!!!
猫1 子猫〜!!この後めっちゃじゃれてきました。キャピキャピ☆

進んでいくと海水浴している子が・・
海々 海の水が透き通ってて綺麗!気持ちよさそー!!この時の熊本の温度は全国で最も高い38・7度を記録。水着もってくればよかったな・・
炎天下と夏の高揚感でこんな調子ノッた写真を撮影。でも誰も見てないんだから恥ずかしくありません!それが島の良いところ☆キャピ☆
きゃぴっ それからも道の先には海が続きます・・海・・・海・・う・・猫が居ない・・・しばらくして住宅街に入りました。

住宅地

きゃぴっきゃぴっ 雰囲気がありますねー写真好きにはとても良い場所☆キャピ☆
・・・約1時間半(少しの休憩含む)歩いて、やっと猫発見か!?
と思いきや家の中!この猛暑で猫達もバテて涼しいところへ避難しているようです。そりゃそうだよね。。
避難 後半で気づいたのですが猫が居るところには猫マークがついています!!テヘペロ☆

お食事処

足もお腹も限界だったのでお食事処「乙姫屋」へ・・
乙姫屋 ここは採れたての海鮮料理が美味しいそうなんですが、バテてていたのでかき氷を注文しました。初回ミルクかけ放題!生き返ったー!キャピ☆
かき氷

そして猫

帰りの船の時間もそろそろだったので、船乗り場へ・・・
そこで猫現る!!こんな時の為にと、所持していたチクワを与えると膝の上まで乗ってきました^^;  島の方もフレンドリーですが、猫も全く人見知りしませんね。
☆ 今回は猛暑で猫をうじゃうじゃ見ることは出来ませんでしたが、猫以外にも良いところがある島でした♪丁度これからの季節、秋の時期に行くと丁度いいと思いますよ!!猫も出てくると思います!!!

今回学んだこと

色んなパータンを考えて備えよう
旅は予測しないことが起こります。
「暑い・・・せっかくだから水着を用意しとけばよかった。。」「汗だらけになったので近場の温泉をさがしとけばよかった。。」「必死に歩いて行ったのにお目当ての海鮮丼がお店の準備中で食べれなかった。。ちくしょー!!」などなど・・
Aパターン、Bパターン、さらにはCパターンまで考えとくと良いですね。

体調管理に気をつけよう
まだギリ20代だから!と調子に乗っていました。。水分補給などはしていたものの、この猛暑に負け、帰り頃には熱中症にかかり大変な事に・・・友人に多大な迷惑をかけてしまいました。。。
旅路で具合が悪くなってしまったら、全て台無しになります。長時間過ごす時はこまめに休んだり、やり過ぎぐらいの体調管理をしましょう。

友人と一緒だと楽しい
今回ひたすら歩くという事が多かったですが、友人と話しながら歩いていたので苦になりませんでした。いい写真もいっぱい撮れたし!最後の最後はほんとに友人の優しさに救われました・・・(泣)
皆さまも良いキャピキャピライフをお過ごしください!☆(ゝω・)vキャピ

PlayStation®VRを体験してみた

shuhei
2016/08/23
閲覧所要時間:約4

dam-psvr-hardware-hard
年々更新されていく最高気温。
この鬱陶しい暑さの中、皆さんいかがお過ごしでしょうか?

こんにちは、西村です。
僕は今日も元気にモンスターボール投げてます。
まだまだ暑い日も続きそうですので、トレーナーの皆さんもそうでない皆さんも、熱中症にはお気をつけ下さい。

さて、PSVRの発売日まで、残り2ヶ月を切りましたね!
なにそれって人は僕が年始に書いたこちらの記事をご覧ください。
仕事に直結するものではないけど最近気になるアイツ
https://www.fvs-net.co.jp/blog/10245


去る6月18日に勃発した第一次予約戦争には敗退しましたが、後日たまたま見つけたソニーストアでの体験会&予約販売会の枠に滑り込むことができました!

体験会@ソニーストア福岡天神

体験できるソフトは3本くらいの中からランダムで決められちゃうんですが、僕が体験したのは「The London Heist」というシューティングゲームでした。
コンパニオンのお姉さんに、基本の操作方法を教えてもらって頭にPSVR、両手にPSMoveを持っていざ!

※こちらの動画には一部暴力的なシーンやグロテスクな描写がありますのでご注意下さい!

どんなゲーム?

ストーリーとかはよく分かりませんが、スキンヘッドのおじさんが運転している車の助手席から、襲ってくるバイクや車を撃ちまくるゲームでした(ざっくり
両手のコントローラーはゲーム内での自分の手と連動していて、動きはもちろんトリガーを引くことで物を「つかむ・はなす」といった操作が可能でした。
例えばジュースを取ろうと思ったら「手を伸ばす>ジュースを掴む」という動きが必要になるわけです。
これがなかなか秀逸で、操作の一連の流れが現実の動きと似ているせいか、いつの間にか本当に助手席に座っているような感覚になるのです。
僕も周りにコンパニオンのお姉さんがいるのを完全に忘れて変な声出してた気がします(白目)
この他にも、車のドアを開けて後ろを覗きこんだり、銃の弾を補充する為にマガジンを銃のグリップ部分に挿入する動きが必要だったりと、VRならではの操作感に感動しました。

ちょっと気になった部分

唯一難点を挙げるとすれば、PSMoveのセンサーの精密性でしょうか。
おそらくわざとでしょうが、少し遊びを持たせているように感じました。
現実と違い触れた感覚がないので、ものを掴む操作などはこの遊びの部分がないと操作が難しくなるのだと思われます。
先ほどのジュースの例だと、だいたいの位置に手を伸ばしてトリガーを引けば掴めるようになっており、操作しやすく感じます。
ただこれが銃を使ったシューティングになると、手先で行ったわずかな操作は「ブレ」と判定されてなかなか認識されないようです。
ガンコンのようなポインターを感知するのに特化したハード程の精度はないように感じました。
(※あくまで個人的、なおかつプレイ時間10分程度の人間の感想です。)
ただ個人的にはそこまで気になるほどのものでもなかったですし、ゲームとしての完成度は十分だと感じました。
どうしても無理って人は「実際問題ジュース飲むのは簡単だけど、銃撃つのは難しい」とでも脳内補完すればいいんじゃないですかね^^

だがしかし!!

とまあなんかゴチャゴチャと言ってますが、プレイ中の圧倒的没入感にはぐうの音も出ません。
いつのまにか助手席にいるような感覚と言いましたが、あの時確実に僕はあちらの世界に行ってました。
興奮冷めやらぬままに予約を済ませて来ましたが、悔いはありません。ええありませんとも。

まとめ

今まで想像でものを言ってる内容しかありませんでしたが、実際やってみるとやはり違いますね―
予想以上のクオリティでお腹いっぱいでした。
thumb_IMG_1263_1024 ちょうど先日三年坂のTSUTAYAで体験会やってたので覗きに行きましたが、周りがびっくりするような悲鳴をあげながらホラーゲーム体験してる方もいらっしゃいましたね。
今後各地で体験会も開催されると思いますので、購入するにはちょっと高いなーという方も、機会があれば是非一度試して頂ければと思います。

PlayStation®VR
http://www.jp.playstation.com/psvr/

一緒に学ぼう!「著作権」基本のキ。

yamamoto
2016/08/18
閲覧所要時間:約4

image3432184
こんにちは!ヤマモトです。

今回は著作権について取り上げたいと思います。
WEB制作会社としても、必ず知っておくべき話ですし、ブログやSNSが当たり前になった今
知らず知らずのうちに著作権侵害をしていた!…なんてことがないとも限りません。
どなたにも関係ある内容ですので、一緒に学んでいきましょう!

著作権とは?

お絵描き 著作権とは、自らの思想・感情を言語、音楽、絵画、建築、図形、映画、コンピュータプログラムなどの表現形式によって創作的に表現した著作物を保護するための権利のことです。

日本では特許や商標のような権利の申請や表示がなくても、著作物を制作したと同時に著作権が与えられる「無方式主義」を採用しているため、思想や感情を創作的に表現した制作物にはすべてに著作権が発生します。

つまり、「こどもの絵や作文」であっても立派な著作物となります。

著作権にはどんな種類があるの?

著作権には、大きく分けて【著作財産権】と【著作人格権】の2つがあります。
一般に「著作権」として扱われているのは「著作財産権」の方です。

著作財産権とは「著作物で発生する財産権に関する権利」のことです。
著作物を運用していくことによって発生する著作権者の利益を守る役割があります。

主な著作財産権

著作財産権1複製権) 著作物を印刷、写真、複写、録音、録画などの方法によって有形的に再製する権利
上演権・演奏権)著作物を公に上演したり、演奏したりする権利
展示権)美術の著作物と未発行の写真著作物の原作品を公に展示する権利
頒布権)映画の著作物の複製物を販売・貸与する権利
譲渡権)映画以外の著作物の原作品又は複製物を公衆へ譲渡する権利
貸与権)映画以外の著作物の複製物を公衆へ貸与する権利

 

著作人格権の種類

著作人格権公表権)自分の著作物を公表するかしないか、するとすれば、いつ、どのような方法で公表するかを決めることができる権利
氏名表示権)自分の著作物を公表するときに、著作者名を表示するかしないか、するとすれば、実名か変名かを決めることができる権利
同一性保持権)自分の著作物の内容又は題号を自分の意に反して勝手に改変されない権利

※参考・・・公益社団法人 著作権情報センター 「はじめての著作権講座 著作権って何?」

 

WEBデザインに関する著作権

WEB
ここまで、著作権の定義や基本情報についてみてきました。
それでは私たちWEB制作のお仕事で考えたとき、どのように関わってくるでしょうか?

 

制作会社がつくったWebサイトの著作権はだれのもの?

例えクライアント様がお金を払って制作したサイトでも、基本的にはWEBサイトの著作権は作った制作会社側にあります。
※企業に勤めている従業員が制作したものは制作者個人ではなく、企業に著作権が帰属する。

よって、クライアント様側に著作権をうつしたい場合は、著作権の譲渡や利用許諾を取り決める契約書などをかわす必要があります。

 

サイトのレイアウトや配色も参考にしちゃダメなの?

著作権は著作権法 第二条1で
「著作物 思想又は感情を創作的に表現したものであつて、文芸、学術、美術又は音楽の範囲に属するものをいう。」
と定義されており、レイアウトは「創作的に表現」したものではなく、「アイディア、手法」と解釈されます。
手法(技法)ですので、たとえレイアウトを真似したとしても著作権侵害にはなりません。
配色についても同じで、真似しても問題ありません。
※すべて丸ごと真似してしまってはもちろんダメです。あくまでも参考にとどめておきましょう。

 

キャッチコピー(標語、キャッチフレーズ)は著作物?

基本的には著作物ではないと考えられます。
ただし、キャッチコピー(標語、キャッチフレーズ)とっても様々な内容がありますので中には著作物といえるものも存在します。
キャッチコピーは短い表現のため、著作物として認められるためのハードルが高くなります。
よっぽど「思想や感情の表現」「創作的な表現」が含まれるものであれば、著作物として認められる場合はあります。
いずれにしても個別的検討が必要になってきます。

 

人の写真をトレースして使っていいの?

著作権が発生している写真をイラスト化したりすると、「複製行為」にあたり、上記でも記述した「複製権」侵害になります。
写真を元にトレースする場合は、自分で撮影した写真、または著作権に問題の無い写真を利用しましょう。

 

まとめ

以上、著作権の基本的な内容をご紹介しました。
さらに詳しく著作権について知りたい方は著作権情報センター(CRIC)のサイトで
著作権について分かりやすくまとめてあるパンフレットが閲覧できるのでおすすめです。

著作権情報センター(CRIC)
http://www.cric.or.jp/publication/pamphlet/index.html


自分もまだ、完全には理解できていないのですが、自分達の仕事・生活・文化に関わることなので
引き続き勉強していきたいと思います!

それではまた!

Adobe XDは想像以上にサクサクだった!

2016/08/15
閲覧所要時間:約3

Adobe XD

こんにちはー、ゾエです。今更ながらAdobe Experience Design(以下:Adobe XD)を使う機会があったので、簡単にですが感想を書いてみます。
今回はあくまでも感想であり、詳しい使い方は説明していませんのであしからず。


Adobe XDって何ができるの?

プロトタイプ作成

Adobe XDは、アプリ・Webサイトのワイヤーフレームやプロトタイプを作成するためのソフトウェア(アプリケーション)です。本格的にデザインやプログラミングを行う前に、サクッと設計図や試作品を作って試してみよう!って感じですね。


Adobe XDのココがサクサク!

Adobe XDを操作している様子を動画にしてみました。かなり適当ですが、サクサク制作を進められている様子は分かるかと思います。


操作が直感的にサクサク分かる

使ったことがないツールはどんなに便利でも、使い方を覚えるまでの学習コストがネックになります。しかし、Adobe XDは機能・インターフェース共にシンプルで、すぐに・直感的に操作が分かりました。
僕は今までもAdobe製品を幾つか使っているので特にそう感じのかもしれませんが、初めての方でもすんなり使い始められると思います。


動作が軽くてサクサク動く

同じAdobe製品でもPhotoshopやIllustratorなどは、PCのスペックによっては動作が重くなることがあります。しかしAdobe XDは非常に動作が軽く、アートボードをたくさん並べてもサクサク動いてくれます。


面倒な処理を自動でサクサクやってくれる

要素のサイズを変更した際、それに関連する要素も自動的にリサイズしてくれたり、角丸の処理なども簡単です。
特に便利なのが「リピートグリッド」機能。写真+キャプションを並べる場合など、水平・垂直に素早くコンテンツを繰り返すことができます


Adobe XDのココがおしい!

アニメーション機能がやや不足

カルーセルで画像が切り替わったり、タップ(クリック)すると色や形状が変わる、モーダルウィンドウを表示させるなど、その場でアクションを起こすことが現段階ではできないようです。


レイヤー機能がない

Illustratorとの相性はまずまずですが、レイヤー機能が無いためPhotoshopのデータでレイヤーを保持したまま配置することはできないようです。
個人的にデザインはPhotoshopで行うことが多いので、そのままコピペできたら便利なのですが、コピペでオブジェクトを持ってくると当然ですが統合されてしまいます。


閲覧にパスワード制限がかけられない

制作したプロトタイプを他の人と共有することができるのですが、現段階ではパスワードなどによる閲覧制限ができないようです。


さいごに

Adobe XDは、まだ開発中のアプリケーションです。今後更に使いやすく便利になることを期待しています。現状でも簡単なワイヤーフレームやプロトタイプであれば十分作成できるので、ぜひ一度使ってみてください。
Adobe XDのダウンロードはこちら(※現在はMac OSX のみ対応)

今年のIoTは爆発寸前の状態、足りない最後のピースは?

渡邉 直登
2016/08/09
閲覧所要時間:約4

iot 8月になりましたね!皆様いかがお過ごしでしょうか?

暑いですね〜、みんな暑いと言ってますね。私も最近もっとも口にしている単語かもしれません^^; アツイといえば、IoTが今猛烈にアツイのです。

当社ではIoT(モノのインターネット)の事業化に昨年より水面下で取り組んでおります。今年は無事にものづくり補助金を獲得できたので、一気に開発を進める形で取り組んでおります。

 

IoTはインターネット登場以来の大革命!?

IoTがバズワードになって久しいですが、本当に凄いことが起きるのか?ということに対して懐疑的な見方も一部では言われていますが、私は間違いなくIoTは生活や仕事を豊かにすると確信しています!

インターネットに繋がる前のパソコンやサーバをイメージしてください(私は年齢的にあんまり知りませんが)。コンピュータがインターネットにつながることで生活は劇的に変わりました(そして、ビジネスモデルも大きく変化しました)。

あらゆるモノ(電化製品等)がインターネットと繋がるということは、より生活が劇的に変わることを意味します。今回凄いことが起きていると感じる理由は、つながったモノを制御したり(センサー、通信技術等)、データを保持したり(クラウド)、自動化と最適化(人工知能)するまで一本の線で各事象が1つの方向(IoT化)に向かってセットで進行中だからです。

 

IoTの現在とその背景とは?

上記のように、テクノロジー業界ではものすごいことが、今まさに起きている状況で、かなり大きな変化がIoTによりこの5年以内にもたらされるのは99.99%といっても過言ではないほどだと個人的に思っています。

その背景はというと、センサー類が安価に高性能化したこと(スマホがセンサーの固まりでそのために部品が大量生産されて実現)、システム開発の拡張性、容易性が高まったこと(AWSを中心としたクラウドサーバの普及)、人工知能の技術がブレークスルーしだしたこと(ディープラーニング等)といったことが重なっているためです。これらが安価でオープンなものになっており、費用対効果の合う提案ができる状態になっています。

目に見える大きなインパクトとしては、自動運転です。自動運転技術は、全ての要素で高いレベルを求められますが、これが実現すればほとんどの事柄はIoTで制御可能となります。その自動運転技術が後5年と言われています。トヨタも含む世界の大手自動車メーカーやテスラモーターズといったベンチャーも開発に注力している状況です。

 

IoTが普及するための最後のピースとは?

ピース それでも、IoTによる変化がなかなか表面に出てきていないのはなぜでしょうか?特にビジネス面ではそれを感じています。それは、最後のピースがはまっていないからです。

その最後のピースがはまっていない理由は、現場の課題がIoT関連の開発研究サイドでは分からないからだと私は感じています。当たり前ですが、真の課題が分かっていなければ提案しようがありませんし、机上の空論のぼやけた提案をしても採用されません。

私たちが今、悩んでいるのはそこです(そして、多くのIoT企業も)。色々できる、しかも安くできる、課題も解決できるはずだ。あんなこと、そんなこと、できたらいいながそこら中にあるけど、ぼんやりしていて超もどかしい!そんな状況にあるのが開発や研究者サイドである私の本音です。

 

BtoBビジネスをIoTで変える!イノベーションを起こしたい!

最後のピースを埋めるためには、現場の生の声が必要です。これを見ているあなたへお願いです。「これって、どうにかならないかな?」「これがこうなったら便利だけど」「これが解決できれば相当変化するのに」というようなニーズはございませんか?

そんな方がいらっしゃいましたら、ぜひ一度お会いしてお話をお聞かせください!ビジネスの可能性があれば協業してIoTビジネスを進められるかもしれません。IoT市場は爆発寸前です。必ず伸びます。最初にやったもん勝ちです。

もしくは、あなたの会社がいち早くIoTによる変革を行えて競合他社をリードする一手にもなるはずです!

課題や改善について明確であり、IoTについて気になることがありましたら、お問い合わせフォームか電話で渡邉までご連絡ください!

いつでもご連絡をお待ちしております!今後3年ぐらいはお待ちし続けます(この記事は2016年8月記載です)。

こんにちは。くまほんにんです。。。

yuri
2016/07/25
閲覧所要時間:約2

こんにちは。
豆柴くんと一緒に寝るのが夢の渡邉です。(現在犬は飼っていません☆)

P8143767
さて。
先日実際にあった出来事です。
あるsnsのグループ内でわたくしがこんな発言をしました。

「熊本市内中心部(熊本人が「街」と読んでいるところ)で、お食事会を開催します。」

この文章。
わたしから見れば特に違和感を感じるところはありません。
ですが、衝撃的なことは、その後起きました。

(熊本人が「街」と読んでいるところ)

↑ここを

(くまほんにんが「まち」と読んでいるところ)

そう。

熊本人=くまほんにん=熊さんご本人

kuma
そ、そんな読み方が、出来るなんて。。。

生まれも育ちも熊本で、父も母も『熊本人』だったわたしにとっては『くまもとじん』以外の読み方は、頭の中に全くありませんでした。
そして、最初は「くまほんにん」と読んだのも、その方の冗談かと思っていたのですが、思いの外、本気だったようで…

ということで!
今日は我が家の子ども達もほとんど理解できない熊本弁を、いくつかご紹介したいと思います。

共通語【今日は、本当に暑いね。】

さあ、熊本弁では、どのように言うのでしょうか。

・今日は、あちーねー
・なーばあちー
・今日は、ほんなこて暑かー
・今日は、なんさま暑か
・今日は、だこあちー
・今日は、たいぎゃな暑かね

たぶん、まだまだ他の言い方があると思います。
熊本弁と一言で言っても、隣町に行けば違う言い方をしたり、熊本の中でも通じないものもあったり…

さあ、そんな熊本弁。
みなさんは、この熊本弁の意味わかりますか?

なーんさまむぞらしかけん、とっとってよ。

では。

池島アゲイン (ほぼ写真・・。)

sonoda
2016/07/19
閲覧所要時間:約1

blog-20160719-05
お陰様でつねに多忙中のわがフロンティアビジョンですが、
先々月に池島へ社員旅行に行ってきました。

↓スタッフがすでに当日のゆかいなレポートをあげております↓

社員旅行で池島炭鉱に行ってきました



行く前は最近流行りの? HDRで写真を撮ろうと準備に余念がなく、
レンズなど意味もなく3回ほど磨いて臨んだのですが、
何と、船で島へ向かう前の港でカメラを置き忘れてしまいました。。

と、ゆーことで、島で観光中、自慢のカメラでみんな思いおもいに写真を撮っているのを尻目に
終始ボーっとしてはワタシですが、帰る間際持参してたiPadにカメラが付いているのに気付き(普段カメラ機能は全く使いません)
ギリギリ、なんとかその姿をデジタル化することができました。

人に写真を見せるたびに、「よくわからん」、「暗い」、「どこだかわからん」と、よく言われるのですが、
撮っている本人はFV1明るい人間です^^

おそらく。
そして。。。


blog-20160719-01



blog-20160719-06



blog-20160719-04



blog-20160719-03



blog-20160719-02

ウェブは5年ひと昔ではなく5年ひと時代みたいです。

井上武明
2016/07/15
閲覧所要時間:約6

ポケモンGOがアメリカで大フィーバー!!
今日がファミコン発売開始日らしいので日本解禁を期待していました・・・まだみたいですね。

『Pokémon GO』公式サイト
http://www.pokemon.co.jp/ex/PokemonGO/


そんな今日誕生日のファミコンが発売された1983年をインターネットの歴史で見ると


1983年のインターネット

  • 学術研究と軍事技術に作られていたものが分離
  • TCP/IPが標準プロトコルとして採用
  • IPv4アドレスが使われるようになり
  • DNSが誕生

出典:インターネット歴史年表 – JPNIC / 【1983年】


だそうで、つまりインターネット誕生前のようです。

そんな事を考えてたら大学で建築学を学んでいたためか、1年ほど前のウェブデザインの進化の過程を西洋建築史になぞらえた記事の事を思い出しました。

この記事ではウェブデザインと建築は以下の4つの共通点があるとし、その共通点から西洋建築史からウェブデザインの歴史を分析しています。


ウェブデザインと西洋建築史の共通点

  1. 人が集まる場所として機能する
  2. 実用的に作られている
  3. 技術の進歩に大きく左右される
  4. 実用的だが、間違いなくアートでもある

出典:建築史に隠されたウェブデザインの未来 — Japanese Official — Medium



詳しくは実際のページを参考にしてもらうとして、ウェブデザインは約5年程度のサイクルで西洋建築史における一つの時代に相当する変化が起こっているみたいです。

ウェブの新石器時代(1990〜1995年頃)

テキストとハイパーリンクしか扱えなかった最も古い時代

世界最初のウェブサイト
上は世界最初のウェブサイト info.cern.ch の画面です。
現在は復刻版として公開されています。

世界最初のウェブサイト info.cern.ch
http://info.cern.ch/hypertext/WWW/TheProject.html


ちなみに日本で最初のウェブサイトは1992年9月30日で文部省高エネルギー加速器研究機構 計算科学センターの森田洋平博士によって発信されたものだそうです。
こちらも復刻版として公開されています。

日本で最初のウェブサイト
http://www.ibarakiken.gr.jp/www/


さすがに新石器時代だとオタクというよりも研究者の世界ですね。
この当時もパソコンは存在してパソコン通信と呼ばれるサービスがありました。(やったことはありません)
パソコン通信はインターネットとはちょっと違いますがデザイン的には同じようなものだったようです。

ウェブの古典建築時代(1996〜2000年頃)

要素や構造が整理され、小さな画像がいくつか利用できる程度の時代

通常の電話回線を使ってインターネット接続するダイヤルアップで、遅い通信速度しかなかった時代ですね。
小さな画像1枚を表示するにも数秒〜数十秒待たされて、本当に重要なところにだけ画像が使われていました。

YAHOO! JAPANがスタートしたのが1996年で、冒頭の話題となったポケットモンスターも初代発売が同じ1996年。(同級生!)
その頃のページはインターネット・アーカイブで見ることができます。

1996年11月20日のYAHOO! JAPAN
http://web.archive.org/web/19961120065342/http://www03.yahoo.co.jp/


ソースコードを見るとgif画像が4枚しかなく、それぐらいしか使えない時代ですね。

ちなみに私がインターネットを初めて知ったのが1999年頃。
当時はパソコンではなくドリームキャストでネットサーフィン(←死語)していたオールドタイプです。

ウェブのロマネスク建築時代(2001〜2005年頃)

画像が多く利用できるようになり、質感が表現され始めた時代

ADSLなどブロードバンド化の恩恵で多数の画像を使っても大丈夫になり、カラフルになってきました。
とりあえずホームページを持ちたいブームで、ホームページ・ビルダー風味満載の原色系ウェブサイトがいっぱいありました。

印刷物などは基本的にプロが作ったものを通常目にしますが、この頃のウェブサイトを見てると「配色センスが大切」と感ますね。

ちなみにガラケーのiモードなどもこの頃からです。
当時は絵文字で文字化けとかよく聞きました。

ウェブのゴシック建築時代(2006〜2010年頃)

Flashブームでそれまで不可能だったアニメーションや過剰な装飾が好まれた時代

Flashだけで作られたページが本当に多くありました。
無駄に凄いアニメーションのFlashサイトが大人気でした。
Flashで動画再生が出来るようになりYouTubeもこの頃生まれました。

\\  !! Flash大人気 !! //

そして2010年4月、ジョブズが「iPhoneでFlashをサポートしない(使わせない)」と宣言。

Flashは一気に衰退していきます。

ちなみにこの時代にGoogleMAPが登場し、それまで嫌われていたJavaScriptがAjaxの流行と共に見直され始めます。
jQueryが登場し、それまでFlashでしかできなかった事ができるようになりました。

昔のJavaScriptは「いらない子」扱いだったんですよ。

特にFlashはその中でしか動作させられませんが、jQueryはウェブページ全体で離れた場所でも動作させられるのが特徴です。
今では当たり前のタブ表示やアコーディオン処理、画像をクリックすると大きな画像を表示させるliteboxなどが生まれました。

JavaScriptの復活(?)です。

ウェブのルネサンス建築時代(2011〜2015年頃)

過剰な装飾の反動から基本に立ち返ってシンプルでスッキリとしたものが好まれる時代

この時代最大の要素はスマートフォンの急速な普及ですね。

初期のスマートフォンサイトといえばiモードと同程度の感覚で情報を絞り込んで表示させる感覚でしたが、すぐにパソコンと同程度の情報が求められるようになり、それに対応するための方法として「レスポンシブサイト」の考えが登場します。

しかし、レスポンシブサイトは画面の大きさに応じてレイアウトが変わるので完成形がイメージしにくいのが欠点ですよね。
その解決案として「とりあえず動くもの」を用意してデザインを確認しながら作る手法が登場してきましたが、これってデザイン能力とコーディング能力の双方が必要になるので制作サイドで必要とされる能力がまた上がったなぁと感じます。

ウェブのバロック建築時代(2016〜2020年頃)

シンプルさにあきてルールを壊し、複雑化してくる時代?

さて、現在は西洋建築史で言うところのバロック時代初頭にあたりますが、どんな風にルールが壊されて複雑化していくんでしょうか?

今やスマートフォンも高性能・大画面化して動画や複雑な処理も可能になってきています。

以前はFlashやJavaScriptでしかできなかったアニメーション処理もCSSだけで実現できるようになり始めていますし、SVGやWebフォントなども普及し始めています。

そして制作サイドはますます勉強が必要です。(泣)

次の次代に向けて今後ルネサンス時代を作ったスマートフォン級の影響力を与えるかもしれないのがARとVRでしょうか。
ちょうど今話題のポケモンGoは一つの転換期になるかも?

ウェブの新古典主義建築時代(2021〜2025年頃)

古典的なデザインを再評価し始めてレトロが好まれる時代?

本格的なVRを実現するには今のパソコンやスマートフォンの能力では厳しく、現在だとマインクラフト程度の映像が現実的なラインでしょうが、5年後には大きく進歩してくるんでしょう。

その頃には人工知能のサポートでもう少し制作しやすくなる事を期待しますが、おそらく人工知能をうまく使うための勉強などでパソコンの前に座って苦労していそうです。

ちなみに・・・

ポケモンGoを楽しみにしていますが実はポケモンはクリアするまで遊んだことはありません。

シーン別!人物撮影の基本【初級編】

yamamoto
2016/07/12
閲覧所要時間:約5

photo1
こんにちは、ヤマモトです!

さて、今回は「シーン別人物撮影の基本」ということで
色んなシーンがある中でも会社のホームページには必ずといっていいほどある
「代表あいさつ」のカットを撮るという想定でやってみたいと思います!

みなさんが「ホームページの素材写真を撮らなきゃいけない!」ということになった時、
少しでも参考になったら嬉しいです。

※初級編なのでかなり「当たり前だろ!」って解説だらけですが、ご了承くださいm(__)m
あくまでも「初級編」です。

早速撮ってみた!


モデルはフロンティアビジョンNo.1のオシャレボーイ荒木くん
です!
まずはあまり難しく考えずにどんどん撮ってみましょう!

パシャリ!!
さーー、どんな写真が撮れたんでしょうか?

before
なんでしょう・・・なんかかなりわざとらしい写真になってしまいましたね(笑)

それにどうしたんでしょう・・・表情が暗いですね。
普段は明るい荒木くん。何か嫌なことでもあったんでしょうか?
(※荒木くんは数日前、愛車を水没させてしまい。少しメンタルがやばくなっています。)


改善ポイントを発見しよう!


NG
一度、撮った写真を見返してみて「どこがダメだったか」自分なりに考えてみましょう。
この写真のダメなポイントはたくさんあるかと思いますが
今回は、丸枠の5つのポイントに絞って改善ポイントを解説していきます!
ひとつひとつみていきましよう!

1.カレンダーなど『季節感』の出るものは片付けよう

カレンダーが写ってしまうと、いつ撮ったものかがバレバレですね。
ホームページは一年中見られるものです。なるべく、季節感がですぎない方が好ましいでしょう。

2.棚の書類を片付けよう

デスクのまわりには普段の書類が山積みになっていることが多いでしょう。
そうしたものがあると雑然としてしまい、印象がよくありません。書類は整頓するか、写る範囲からどかしてしまいましょう。

3.服装・身だしなみを整えよう

上の写真ではどんだけネクタイ締めるのヘタなんだって感じですが、ゆるんでいたり曲がっていたりというのはよくあることです。
一度、鏡の前で身だしなみを整えてもらいましょう。髪も同様です、メガネの方はメガネ拭きを使ってピカピカに!

4.胸ポケットの中は空に!

普段、胸ポケットにペンや名刺入れ、タバコなど色々入れてる方がいらっしゃいます。
このまま撮ってしまうと、非常にだらしない印象を与えてしまいます。
撮影の際は全て出してしまいましょう!

5.机の上はスッキリさせよう!

これも、書類と同じく出来るだけ机の上は整理しましょう。余計なものは全て撤去してください。
逆に何もなさすぎるのも変なので、場合によっては電話やパソコンは残しておいてもいいと思います。

改善点を意識して撮り直してみた!


上記も含め、色々改善点を考え撮り直してみました!
今度はどうなったでしょうか!?

after
おーー、荒木くん笑顔です!よかった!
(※車は無事保険がおりることになったそうです)

メンタルを取り戻した荒木くんはおいといて写真を見ていきましょう。
上記の5つのポイント以外にどこが変わったでしょうか?

見て欲しいものを大きく写す

まず、分かりやすいのが【横構図】から【縦構図】になったことですね!
最初の写真では横位置だったため、人物以外の余計なものが映り込みやすかったです。
物も雑然としていたため、人物の印象が薄くなっていました。

縦構図にすることで、余計な物が写り込まずスッキリしました。
また、この写真は「代表あいさつ」として使用するものですので、
人物の顔・表情をより大きく写すことで人柄が伝わりやすくしています。

※必ずしも縦構図が良いということではありません。目的や意図によって使い分けましょう!

背景に気を遣おう

被写体そのものだけでなく、その背景にも気を遣いましょう。
今回は、カレンダーや書類など余計なものを撤去し、代わりに「観葉植物」を置いてみました。
緑がはいることで「爽やか」で「明るい」印象の写真になりましたね(^_^)

笑顔が一番

色々、改善点がありましたが何より大切なのは「いい表情」を撮ることです!
暗い表情では、暗い社長・暗い会社なんだと誤解されてしまします。
写真を撮る前や撮りながら、色々お話をしてみましょう!
いい笑顔が撮れたら、それだけで大成功です!

まとめ


いかがでしたでしょうか?
たった一枚の写真ですが、意外と色んなことを考えながら撮らないといけないので、
大変だなっと思った方もいらっしゃるかもしれません。

でも、その一枚の写真で会社の印象が大きく変わってしまうのも事実です。
どうせなら、ホームページには素敵な写真をのせて見た方にいい印象を持ってもらいたいですね(^o^)

写真シリーズは今後も続けて行いたいと思います!
それではまた!!

=======================================================================
弊社ではオプションとして、提携しているプロのカメラマンさんによる撮影が可能です!
HPを作る際は、クオリティの高い写真が必要ですので、ぜひご検討ください!

※注
ブログ内の写真は、へっぽこスタッフヤマモトによる撮影です。
=======================================================================

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介