2017/02/21
まず、最近の弊社の製作実績をご覧ください。
https://props-koho.jp/
こちらのサイトで使用しているのが、fullpage.jsというスクリプトです。
ゲーム等の単一の商品のブランディングに使われる事が多いのですが、このスクリプトひとつで
■ウィンドウサイズに合わせた自動リサイズ
■ページ位置に合わせたメニューのactive処理
■ホイールスクロールにも対応した全画面スクロール
■スライダーの実装も簡単（おそらく専用のスライダーのjsより楽）
と、かなりの高機能を誇ります。
導入するだけでも全体にリッチな雰囲気を与え、サービス等のブランディングに効果的かと思います。
欠点としては
■ホイールスクロールにも対応した全画面スクロール…の裏返しで、スクロールすると次のページに行ってしまう＝あるページのコンテンツ量が多くなっても、下にスクロールさせることができない■
というのが最大の問題点になります。
一見たいしたことなさそうな問題に見えますが、こちらのスクリプトはスマホでも有効なため、スマホで閲覧した際のコンテンツの収まりに気を付けないといけません。
どうしても収まらない場合、モーダル等をフル活用する等、回避方法はいろいろ考えられますが、そもそも、そういう状況になりそうなWEBの場合、最初からこちらの導入はしない、というのが正解かと思います。
2016/02/12
弊社のメールフォーム自体もそうなのですが、問い合わせフォームの[必須]項目については、よくある処理の「赤文字は入力必須です」は採用せず、[*は入力必須です]や[必須]という文字をつけるようにしています。
最近はスマホが普及しておりますので、画面の狭さゆえに各項目に*だけついていてもその説明が上にいってしまって分からない、という事もあるかと思い、主に[必須]とそれぞれの項目に書くことにしています。
さて、色だけに意味合いをもたせない理由ですが、
facebookのグループで流れていたこちら
https://www.shopify.com/partners/blog/86314118-5-ways-to-improve-your-ecommerce-design-for-colourblind-users
下のほうにあるTIP3にずばり書かれていますが、「ある色だけで意味合いを持たせてしまうと、その色が判別できない方にはユーザビリティが最悪になってしまう」ためです。
他にも、これは相当昔（どのくらい昔かというと、googlemapの埋め込みがなかった頃です）の経験なのですが、あるお客様の所に打ち合わせに伺うのに、お客様のホームページの地図を白黒で印刷してみたら、明度差のあまりない地図だったせいか、何がなんだかほとんど判別ができない地図が印刷されてびっくりしたことがあります。
いまは大抵googlemapの埋め込みにしてしまっていますが、地図の作図にも注意が必要ですね。
2016/01/26
まず、最近の弊社の製作実績をご覧ください。
http://maruta-kaikei.com/
http://beauty.aura-aile.com/
今に始まった話ではないのですが、TOP上部、真っ先に目にはいる場所に大きく、綺麗な写真を使うスタイルが流行っています。
インパクト充分で目を引きやすいのですが、その代わり欠点として「画像のサイズが大きくなるほど、容量が多くなる＝読み込みが遅くなる」という点があります。
室内のパソコンでインターネットを使用している環境ならまだしも、スマホ等モバイル機器で閲覧していると、わずかな読み込み時間の増加が大きなストレスになる事があります。
弊社が納品させて頂く際は、画像の綺麗さを損ねない範囲で限界までの「データ圧縮」をかけているのですが、納品後、自分でホームページを更新する機能などをお使いの際、新しく画像を差し替える時に圧縮をしないと、データ容量が増え、読み込み速度が落ちてしまうかもしれません。
そういったときは是非、以前にもご紹介した
https://tinyjpg.com/
このようなサービスでのデータ圧縮をお試しください。
2016/01/14
参考URL:http://japan.zdnet.com/article/35076105/
トレンドマイクロ、というとピンとこないかもしれませんが「ウィルスバスター」といえば思い当たる方もおられるのではないでしょうか。
その「パスワード管理ツール」に深刻な脆弱性が発見されたというニュースです。
この弱点により、外部からこっそり管理していたパスワードを盗み取ったり、逆にプログラムを実行させる事も可能になっていたとの事。
現在は修正されたという事ですが、逆にいうと「現在まで野放しになっていた」とも言えますので、このツールを使っていた方は注意が必要かもしれません。
ちなみに弊社が使用しているセキュリティソフトウェアは別の会社のものです。
2016/01/07
2016年1月12日をもちまして、IE9、IE10のサポートが終了いたします。
これに伴い、1月13日以降発効の契約では、弊社では確認対応ブラウザのうち、IEの最低限を原則「IE11」に変更させて頂きます。
同時に、IE8向けに行っていた、便宜的にjavascriptでレイアウト構造だけは、IE8でみても崩壊しない構造とする処置も終了いたします。
尚、windowsvistaに限り、IE9は2017年4月12日までサポートがされるため、当面の間、IE9でも閲覧ができるような記述法は継続して行います。
2016年1月12日以降は、windows7以降をお使いの方でIE9、IE10にセキュリティ的な問題が発見されても、修正される事はありませんので、IE9、IE10をお使いの方はアップデートをお奨めいたします。
なお、windowsupdateの自動更新をオンにしていれば自動的にIE11にアップデートがされており、また
自動更新を設定していなくとも、1月12日以降のwindowsupdateを適用すると、IE9、IE10をお使いの方はIE11への更新を促すメッセージが表示されるようになるとの事です。
2015/03/23
2つ前の記事「CSSスプライトは意味がなかったのかもしれない」で、js等の読み込みはgoogleの読み込み速度フラグには関係ないようだ…という記事を紹介してみましたが、やはり気になったのでその後を追ってみました。
すると、
http://googlewebmastercentral-ja.blogspot.jp/2014/05/understanding-web-pages-better.html
googleの公式で、はっきりと「javascriptを実行して検証している」と書かれていました。
実行しているという事は読み込んでいるという事です（当たり前）
したがって、上記の記事は半分は誤報だと確定されました。元記事にも追記しておきます。
2015/03/23
一個前のエントリにも書いた通り、「googleが順位づけの要素のひとつに、ページの読み込み速度を参考にしているのではないか」という話ですが、その強力な根拠となるのが、googleが提供しているPageSpeed Insightsというサービスです。
簡単にいうと「そのページがどれくらいの速さで読み込めるか」と「おっそい場合はどこを改良すれば良いか」を教えてくれるサービスです。
読み込み速度をランクづけの参考にしていなければ、わざわざこんなサービスを提供しませんよね、という事です。
※ちなみに弊社はcssやjsを統合したり、htmlの中に展開したりという事はメンテナンス性を損ねるためしたくない。ページスピード系プラグインはキャッシュ関連の処理がイヤ、ということでスコア結構わるいまんまです。
で、このサービスで表示される改善点のうち、最もさっくりと改善できるのが、「画像のロスレス圧縮」です。
こんな感じで警告がでるやつですね。
対処方法は色々あるのですが、最もお勧めなのが「別にロスレスじゃなくてもよくね？」という事で、「ロスレス圧縮」よりも更に圧縮率のよい「ロスあり圧縮」の
https://tinypng.com/
こちらのサービスを使う方法です。
使い方はもうそのみたまんま
ここに画像をドラッグ＆ドロップするだけ。
中身にもよりますが、透過ありのpngなら、今までの経験からいって脅威の平均6割超えの圧縮をしてくれます。
———-
なお「ロスレス」とは「圧縮によるロスがない」つまり、「元の画像の品質を一切損ねないから何回でもやり直しできるよ」的な意味です。
が、
普通「何回でもやりなおしできる」意味はありません。圧縮前のデータを別に保存しておけばいいのですから。
なので、上記のサービスがお奨めなのです。
2015/03/04
2015/03/23 追記いたしました
googleが順位づけの要素のひとつに、ページの読み込み速度を参考にしているのではないか、という話は良く言われます。（※断定ではありません。断定できるのはgoogleの中の人だけ、というのが弊社のスタンスです）
そこで読み込みの高速化を図るため、cssスプライトを使ったり、ページスピード系の処理でcssをhtmlの中にぶちまけたり、と色々な努力があちこちでされているわけですが、
昨日、それらを全てひっくり返すような研究結果が発表されました。
http://web-tan.forum.impressrd.jp/e/2015/03/03/19447
要約していいますと、
今まで→html、css、js、img全て読み込んだときの速度を判定していた、というのが定説
今回の研究→htmlだけで判断しているぽい
となります。
繰り返していいますが、正確なところは「googleの中の人しかわからない」ので上記の研究結果もまた憶測なのですが、こちらが本当だとすると、CSSスプライトなんて作業時間のムダ、見づらいのを我慢してjsのコードの改行とかとっていたなんてお疲れさん、となります。
ですが、googleのPageSpeed Insightsではcssスプライトはともかく、jsの読み込みタイミングなども判定しているので、当然jsを組み込んだレンダリングも計算していると思っていたのですが、なかなか興味深い記事で、手があいたら追ってみようかと思います。
2014/05/19
リニューアルから数ヶ月経ちますので、TOPの背景画像を変更してみました。
元々、TOPのイメージを大きく変えるには画像の差し替えが一番、しかしその上のメニュー等の色調整は面倒、という事で、今回のデザインでは、上から
メニュー等部品
メインコンテンツ部分
差し替えが利く画像のスタイル
背景（ここがアニメーションしている）
の順で優先度を振って重ねてあります。
さて、背景の画像ですが、基本的にあまりでかい画像は使いたくない、という事で、
横幅1280pixel程度とし、それを背景にあて、
background-size:cover
というプロパティで枠にフィットさせています。
このプロパティにより、要素の枠内に画像の辺がぴったりくっつくように拡大・縮小してくれます。しかも縦横比はそのまま（はみだした部分はオートで切ってくれる）キープしてくれるので、レスポンシブデザインにはぴったりです。
display:table-cellと並んで、激しく使うcss3要素の一つです。
そこから更に、opacityで要素全体の透明度を強制的に下げ、背景の色変化アニメーションをわずかに透かしてみせることで、時間と共に色が微妙に変化するようになっています。
…できたら上記のような方法ではなく、ずばり背景の上に画像要素を乗算したいのですが、今のcssでは正式にそちらの方法に対応していません。
是非、background-blend-mode を正式に実装して頂きたいものです。
2014/05/07
弊社は自社ではSEOの外部施策を行っておらず、ご要望があった場合はSEO会社をご紹介する形になります。
さて、弊社がSEO会社を選定するとき、最低限、これを守っていない会社は絶対に使用してはいけない、というラインがあります。
それは
（１）「どこにリンクをはるか」を明らかにする事
（２）「どういう施策をしたか」をこちらに作業書として文面で公開する事。
企業秘密等を理由に上記を一部でも公開しない会社は、利用しない事をお奨めいたします。検索で上位にあがるどころか、逆にペナルティを被る可能性だってあります。
標的になったブログには大変恐縮ですが、一例をあげさせて頂きます。
昨今ではGoogleのリンク分析もかなり精度が上がってきましたので、ブログ、SNS等で一般ユーザーが製品/サービスを善意で取り上げてくれる「ナチュラルリンク」が有望であるとされています。が、
例えば「弊社では○○個のブログからナチュラルリンクを獲得できますよ」的な話で、そのブログのURLを教えてもらえなかった場合、以下のような状況になってしまう可能性があります。
http://blogsearch.longseller.org/w/14375.html
こちらのURLをご覧ください。（かなり極端な例ですが）
見た目一般ユーザーのブログで、URLもバラバラですが、どういう事か素人目にも分かる状況になっています。
これで何らかのペナルティが将来に向っても無い、と考えるほうが無理があります。
SEOは「秘密のノウハウで稼ぐ」ものではなく、「ノウハウは簡単だが、実施するには手間と時間とコネがかかるので、それを代行するもの」です。
ですので、一部/全体をブラックボックス化するSEO企業は、信頼なさらないほうが宜しいかと思います。
