ホームページおまかせ.com
制作実績のご紹介
スタッフのご紹介
採用情報
twitter

モバイルフレンドリーへの道

フリーマーケットで車まで販売
[ No. 75 ]

イメージパークでは楽天の年間シートを会社で買てもらっており、そのチケットで順番に社員が観戦に行かせてもらってます。
先日自分も今年初観戦をさせてもらいました。
自分が行かせてもらったのは9連敗からの脱出がかかった一戦でした。
結果は何とか10連敗を阻止!松井裕樹が抑えてくれて一安心でした。


その後の試合はまた2連敗とあまり良いものではありませんでした。
交流戦第1試合目の阪神戦は同課のメンバーが応援に。
こちらも奇跡的に阪神に勝つという結果。
WEB制作課は引きが強いのかもしれません。
昨日はまた負け越してしまうという結果でした。
今日は楽天ふんばってくれるのでしょうか。


ちなみに9連敗は球団創設2年目の06年以来、10年ぶりの結果ということです。


20160602


さて、話しは変わりますが数年前からスマホではフリーマーケットアプリが賑わいを増しています。
特に有名なのは「メルカリ」ではないでしょうか。
自分も購入や出品はしたことはありませんがどのようなものが出品されているのかとアプリをダウンロードしたことはあります。
このメルカリで「自動車・オートバイ」の取引がスタートしました。
今まではどちらかというと小物(洋服や雑貨など)が多かったように感じますが、今回「自動車・オートバイ」が出品可能になったという点はヤフオクや楽天オークションなどにいよいよ対抗するものになっていくかもしれません。
自分的にはフリーマーケットで車の販売というのも規模が大きくなるすぎているようにも感じますが。


基本個人間取引ですし、「メルカリ」の使用者は若い層が多いということもあり、、様々な注意は必要ですが物品販売の形態がまた少し変化していくかもしれません。


イメージパークでは楽天、Yahooは初めとするECサイトも多く手がけておりますので、動向は今後も広い目線で見ていくようにしたいと思います。




フォトコンテストのスマホ部門
[ No. 74 ]

5/26-27は三重県志摩市で「伊勢志摩サミット」が開催されています。
厳戒態勢で全国から警察官が1万6000人も集まっているという話もあります。
先週の20-21日は仙台市の秋保地区でG7の「財務大臣・中央銀行総裁会議」が行われ、こちらもいつも以上の警察官の出動でした。
テレビの番組の中でも様々な角度から「伊勢志摩サミット」について特集を組んだりしているようですが視点が別な部分にばかりいっており、肝心の内容についてはあまり取り立たされていないようにも感じてしまっています。

 

さて、この伊勢志摩サミットに合わせて「世界に届けたい日本」フォトコンテストというものが開催されていたことを皆さんはご存じでしたか?
内閣官房、内閣府が主体となり開催されたこのコンテストで、コンテスト自体は既に受賞者も決定した状態です。
では自分がなぜ話題にだしたかというと、このコンテスト通常のカメラで撮影した「ネイチャー部門、カルチャー部門、ライフ部門」という3部門とスマートフォンで撮影した「スマホ部門」という部門に分かれております。
しかもスマホ部門に関しては『アプリケーションでの加工可』というところまで。

 

今までのカメラのコンテストと言えばカメラの技術、カメラの性能など様々な部分が重要視されてきましたが、いい意味で大分敷居が下がったように感じています。

 

そしてさらに注目するのが、応募数の割合です。
ネイチャー部門4,914点、カルチャー部門4,919点、ライフ部門2,210点、スマホ部門5,061点。この数字はオフィシャルサイトに出ている数値ですが、部門の中ではスマホ部門が1番の応募数を誇っています。

 


最近ではお客様からもレスポンシブWebデザインというキーワードが広まり、打ち合わせや相談の中でも出てくるようになりました。
しかしちょっと作る側として気になる点としてはPC版を作るだけで「簡単に」スマホ、タブレットにも対応できると思われている方が本当に多いということです。

スマホというデバイスに特化した点やSNSでの応募など今を見た企画が合致した結果なのではないでしょうか。

 

写真のことはあまり詳しい自分ではありませんが、受賞作品はどの部門も素晴らしいものばかりです。
一度見てみたはいかがでしょうか。

▼伊勢志摩サミット「世界に届けたい日本」フォトコンテスト
http://photocon-summit.jp/




スマートフォンの利用率が携帯電話を上回りました
[ No. 73 ]

当社の新しい期が始まって早くも半月がたちました。
GWを挟んだということもありあっという間に時間が過ぎていきます。
年々一年が早く感じ気づくと正月を迎えているような気がする今日この頃です。

 

先日世論調査機関から発表されたデータでスマートフォンの利用率が56.3%となり、スマホ以外の携帯電話をはじめて上回ったというデータがでました。

 

スマートフォンの利用率の拡大は年々言われていたことでしたが、2007年にiPhoneが販売されてからわずか10年足らずでここまでの市場になっている。
スマートフォンの原型は1900年代末には出ていたようだが日本でと考えるとiPhoneの存在が大きな起源だと自分は考えます。

 

有る程度飽和状態にはなってきているとは思うので、今後は携帯と同じように日本独自の進化を遂げガラパゴスかしていくのか、それともまた新たなデバイスが出てくるのかと今後の展開も気になりますが、HPなどに携わる人間としては極端な変化はできるだけゆっくり行っていただけると助かる次第です。

 


最近ではお客様からもレスポンシブWebデザインというキーワードが広まり、打ち合わせや相談の中でも出てくるようになりました。
しかしちょっと作る側として気になる点としてはPC版を作るだけで「簡単に」スマホ、タブレットにも対応できると思われている方が本当に多いということです。

 

今まではデバイスに合わせてそれぞれのサイトを作っていたものを1つのソースを元にデバイスで表示を変えるように作っているので、実質はそれぞれのサイトを作っているのと変わらず、更に全てのデバイスで対応できるデザインや変動というところを計算しながら作っていかなくてはいけません。
決して「簡単」になっている訳ではないのです。

 

是非そこらへんの情報も浸透していってもらえると助かります。

 

今年度はお客様との交渉や対応面などのスキルもつけて行きたいと思って老いますので、多くのお客様とお話をしてスキルアップできるようにしていきたいと思います。




オリンピックエンブレム
[ No. 72 ]

一時期結構な話題になったオリンピックのエンブレム問題ですが、
時が過ぎると騒動も落ちつき過去のこととなっています。

 

そんなエンブレムですが今はあまり大きな話題にはなっていませんが、
昨年の12月に一般公募を締め切り、14,599点のなかから現在4作品に絞り込まれたところにきています。
そして4月25日来週の月曜日には新エンブレムが決まります。

 

このエンブレムの最終決定は一般の意見を参考にしながら、芸術・美術界に関わる人やスポーツ界に関わる人など計21人から構成されるエンブレム委員会が決定をします。

 

自分のこどもの時のような時勢であれば一般による投票などで決定していたのではないかと思います。
しかしエンブレムとは別な話しになりますが、最近ではネットの人気投票などで一部のにぎやかしがおもしろい、ネタになるものを1位にするように盛り上がったりすることが多く企画自体が無くなったりするなどということもありますので、様々なことを考慮して代表者による選定となっているのでしょう。

 

前のエンブレムの時には公にはしているものの閉じられた中でエンブレムが決まっていましたので、今回は選定委員を公開したり、都度の報告をこまめに情報提供していると感じます。

 

しかし多くの人はマスコミによる情報から得る情報がほとんどで、盗作問題の時の放映時間と比べたらきっと現在の決定までにいたる報道は半分にも満たないではないかと感じています。

 

きっと決定した暁には「知らないうちに決まっていた」「今回のも気に入らない」など決定されたものに対しての不満がでてくると思います。
今回はそのような対策の為にエンブレム候補に対しての意見を集める期間も設けていました。

 

少し前にテレビで芸能人の問題を「たたきたい人は何パーセントか必ずいる。絶対許さない人たちは何で許さないのかというと、そもそも本気で怒ってない。怒ってない人に許されるのは不可能。」というをタレントが言って話題になりましたが、きっと「もともと興味のない人は、何をやってもなっとくしない」ということにも言い換えられるのではないかと感じました。

 

まとまりがなくなってきてしまいましたが、世界からの意識も高くなるオリンピックですので恥ずかしい報道にならないように良い進み方をすることを祈ります。




LINE
[ No. 71 ]

昨晩熊本で大きな地震が発生しました。
犠牲になられた方々のご冥福をお祈りし
また甚大な被害に遭われました皆さま方には心よりお見舞いを申し上げます。


映像を見るとどうしても当時を思い出すシーンがいくつか。
自分なんかは沿岸地域ではないので、被害と言っても比べればひどいものではありませんでしたが、当時の目で見た映像というものは強く残っているのだと感じました。


有事の際には様々な技術も同時に発展する傾向にあり、
今でこそ連絡ツールの中心になっている「LINE」ですが、
リリースされたのは2011年の6月とのことでした。
イメージでは震災の時も使っていたような感覚なのですが
その当時は使用してなかったようです。

LINEの開発プロジェクトは震災前からも進行していたようですが、
本格的な開発始動は震災後すぐの4月末に始まり、6月にリリースというすごいスピードで作られました。
その後の進展も早くリリースから4か月後には無料通話とスタンプの機能を追加した現在の形の原型となっていました。

その間メッセージツールとして生み出したLINEを「何を売りにすればいいのか!?」と試行錯誤が続いたそうです。


現在LINEの登録者数は全世界で5億人とも言われており、2012年末に1億人の利用者を目指していた企業が数年で大きな発展をしました。
自分自身も現在「何を売りにすればいいのか!?」と自分の開発に試行錯誤しています。
今後LINEのような大きな発展ができるように自分自身を生み出していきたいと思います。




画像のアニメーション3
[ No. 70 ]

4月がスタートしました。
4月の始まりの日はエイプリルフールでしたね。
今年も各企業年度の初めから結構色々やってくれました。


コカコーラでは「炭酸電池」の販売、
SONYは映画ゴーストバスターズに出てくる「ゴースト捕獲装置・プロトンパック」の開発に成功、
あらいぐまラスカルは全世界に1台となる完全限定生産の「全自動洗濯機ラスカル」として販売され、
WWFジャパン(公益財団法人世界自然保護基金ジャパン)は龍の保護プロジェクトを発表など、どの企業もまじめにおふざけしてくれました。


しかし中にはやりすぎてしまった企業も。
今年はgoogleでした。
googleが提供するGmailに「Mic Drop」というエイプリルフール機能を設置したのですが、
この機能に対してユーザーからの苦情が相次ぎ数時間で削除をする形になってしまいました。

「Mic Drop」は送信の際に、「Send & Mic Drop」ボタンを押すと相手にメッセージは届きますが、相手が返信しようとしても、メールの返信は届かないというもので、送信時に自動的に映画『怪盗グルー』に出てくるミニオンのGIFアニメーション画像を追加するというものでした。

この機能を気づかずに使ってしまい、仕事をなくしたなどという声も上がっており、楽しい企画でも内容を本当に考えて行わなければ逆効果になってしまうという事例でした。


年々参加企業が増していくエイプリルフール企画。
今後はどのような展開になっていくのでしょうか。
来年も期待したいと思います。

ちなみに自分はつく前に日付が変わってしまいました。


画像のアニメーション3

前回からの続きです。
slickはベースを元に数通りの見せ方ができる便利なscriptです。
前回でhead部分の記述を記載しましたので、
今回はベースとなる共通部分から書いていきます。


<共通html>

<ul class="your-class">
<li><a href="#"><img src="../images/hoge.jpg"></a></li>
<li><a href="#"><img src="../images/hoge.jpg"></a></li>
<li><a href="#"><img src="../images/hoge.jpg"></a></li>
<li><a href="#"><img src="../images/hoge.jpg"></a></li>
</ul>

共通htmlはスライドの親要素に任意のクラス名を付与すれば適応してきれますので、リストタグじゃなくても大丈夫です。


<共通CSS>

/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
right: 20px;
z-index: 99;
}
.slick-prev {
left: 15px;
z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
color: #fff;
}
/*スライド画像の横幅可変*/
img {
max-width: 100%;
height: auto;

左右の矢印はwebフォントになっています。色はCSSで変更が可能です。
初期設定では白になっています。
色などの設定はslick-theme.cssで変更できます。

これらを設定したら、slickのサイトを参考にしながら設置したい形式に合わせて記述を追加していきます。


<Single Item設置の例>

<ul class="single-item">
<li><a href="#"><img src="images/01.jpg"></a></li>
<li><a href="#"><img src="images/02.jpg"></a></li>
<li><a href="#"><img src="images/03.jpg"></a></li>
<li><a href="#"><img src="images/04.jpg"></a></li>
</ul>

<script type="text/javascript">
$(document).ready(function(){
$(‘.single-item’).slick();
});
</script>



画像のアニメーション2
[ No. 69 ]

先週末プロ野球が開幕しました。
今年はホーム開幕となった楽天。ソフトバンクとの3連戦1勝1敗1分と開幕戦は快勝したものの、残る2日が徐々に落ちてしまったような結果に。
今年の開幕は楽天自体もですが、ルーキーのオコエ選手に注目が集まっています。
打席での結果は出なかったものの開幕から盗塁を決めたりと素人目にも自分の武器を活かした活躍をしているように感じました。


オコエ選手は高校野球の時から俊足を活かしたプレイを武器にしていたように覚えています。
その武器を更に磨き、盗塁の軌道の調整やスライディングの際の足の向きなど細部を調整し、プロで通用するプレイまで昇華させたとニュースでやっていました。


自分は自身の武器はなんなのだろうと考えたとき正直パッと出てくるものがありませんでした。
秀でた部分もありませんし、人以上努力したという自負できるものもありません。
しかし逆に考えればまだまだ、なんでも自分の武器に出来るということでもあると思います。
もうすぐ新しいスタートが多くなる4月です。
来年の今頃には小さくても自分の武器が見えている自分になっていたいものです。


画像のアニメーション2

今日では便利なことにWEB上に様々なベースとなるスクリプトやソースが公開されています。
今回のアニメーションの設置でもWEB上に公開されている『slick』というものをダウンロードして使用したいとおもいます。
slickはレスポンシブWebデザインにも強いカルーセルスライダーですので、多くの部分に活用できます。


まずは配布もとのサイトから必要なファイルをダウンロードします。
▼slick
http://kenwheeler.github.io/slick/


メニューの「get it now」をクリックするとダウンロードボタンの箇所に移動してくれるので、移動先のボタンからファイルをダウンロードします。


ダウンロードしたフォルダから今回使用するのは以下のファイルです。

■ slick
├■ fonts
├ slick.css
├ slick-theme.css
├ slick.min.js
└ ajax-loader.gif

head部分の記述は以下を参考ください。
jqueryの読み込みも忘れずに設置します。

<記述例>

<link rel="stylesheet" type="text/css" href="slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="slick-theme.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="slick.min.js"></script>

次回も引き続き画像のアニメーションについて書いていきます。




画像のアニメーション
[ No. 68 ]

東京では桜の開花宣言がされ、日本列島の半分が春になったといえるのでしょうか。
仙台は暖かい日が続いたと思ったら急に肌寒さが出てきたりとまだ冬物を安心してしまえる時期ではありません。


東京で開花宣言された3月21日Appleは新製品の発表を行いました。
早い時期での発表でしたので今回はiPhone7の情報は無かったのですが、
以前より話題に上がっていたiPhoneSEの販売が発表になりました。
4インチディスプレーのiPhoneSEは特に女性には使いやすいサイズだと思います。
自分自身現在は6Sを使用しており、いい加減慣れてしまったのですが、
買い替え時には以前使用していた5Sのサイズ感がとても持ちやすいサイズだったと感じていました。
こうなってくると次回のiPhone7がどのような形態になるかが気になってきます。
曲面ディスプレイやホームボタンレスなど様々な憶測が飛び交っています。
例年通りですと9月頃にまた発表があると思われますので、正式発表を待ちたいと思います。
制作側として個人的にはあまり画面サイズが多様化になりすぎないで欲しいとことろです。



画像のアニメーション

Webサイトの制作でアニメーションと言えば以前はFLASHが主な制作のツールでしたが、iOSやAndroidのシェアの拡大によって状況は大きく変化しました。
特にiPhone、iPadはFlashに対応していない為、古いサイトはメイン部分が欠けて表示されることが多くあります。


そのような流れで現在はjQueryが主なツールとなってると言えます。
アニメーション動画のような複雑な動きは難しいところがありますが、一般的にWebサイトで使用されているスライドショーやスクロールといった動きはjQueryで実装が可能です。
jQueryを活用すれば3Dの動きをするスライドショーの実装等も可能です。
他サイトと差別化をしようとした際の1つの手法にもなります。
多くのサイトでベースとなるソースの配布も行われており、
多少知識があれば誰でも設置が可能にもなってきました。


次回からはjQueryを用いたスライドショーの設置について書いていきたいと思います。




検索の方法
[ No. 67 ]

iPhone界隈の情報が最近忙しくなっています。
アップルの新製品発表イベントが来週開催されるとされ、新型iPhoneや新型iPadの情報がネットに噂を含め数多く出て来ています。
最近では個人、企業問わずブログ等で記事配信をする人が増えていますので、古い情報から最新の情報までが入り乱れてもいます。
ネット上のトピックスとして話題になる情報や記事も数年前のものが「なぜ今?」ということもよくあります。


自分なんかはネットの情報は100%真に受けないようにしているのですが、うまく情報整理ができないと大変なことになってしまうと感じています。


検索といえばgoogle、Yahooなどの検索サイトで調べるのが普通になっていますが、最近ではSNSを利用した検索も10代、20代ではよく使われているそうです。
twitterではより生の声に近いものをリアルタイムに検索ができたり、Instagramでは無駄なテキストを読まずに直感的に検索ができるということで使用されているそうです。
この話しを知ったとき検索=検索サイトと決めている自分に気づかされました。


最近プライベートを含め、自分の考え方や方法が凝り固まってしまっているように感じる事例が多々ありました。
もう少し柔軟にそして素直に吸収できるようにしていきたいと思った今日この頃でした。




高校入試
[ No. 66 ]

今朝は高校入試があり通勤路にある高校の前では普段ない渋滞と人だかりが起きていました。
高校の正門の前には塾の講師なのか学校の先生なのか分かりませんが列になって声援を送っていました。


自分が高校受験をした時にはそこまでのものはなかったように覚えています。
最近ではテストのようなものは全くと言っていいほど受けてないと思います。
結構周りの友人は資格試験や会社内での試験など意外と受けているというのを話しの中でも聞いているような気がしますので、新年度な何か形に残るものに挑戦も考えてみたいと思います。


高校入試と言えば最近では勉強の方法も変わってきて、自分の時代は進研ゼミのテキスト問題をやったり、暗記長をちくちくとつくったりとしましたが、ここ数年では暗記はスマホのアプリで、勉強も動画学習でとこんな場所にもスマホというツールが必須になっています。分からないことはすぐに検索ができるので、利にはかなっていると思いますが、効率的になったのか、楽になったのか受け方はそれぞれかと思ってしまいました。



以前友人との間で中学生のテストをやったことがありますが思ったよりも覚えていたのですが、簡単なものほど忘れてしまっていました。
普段つかわないものはやはり忘れてしまいますね。