ホームページ制作のアレ

まず、最近の弊社の製作実績をご覧ください。
https://props-koho.jp/
こちらのサイトで使用しているのが、fullpage.jsというスクリプトです。
ゲーム等の単一の商品のブランディングに使われる事が多いのですが、このスクリプトひとつで
■ウィンドウサイズに合わせた自動リサイズ
■ページ位置に合わせたメニューのactive処理
■ホイールスクロールにも対応した全画面スクロール
■スライダーの実装も簡単（おそらく専用のスライダーのjsより楽）
と、かなりの高機能を誇ります。
導入するだけでも全体にリッチな雰囲気を与え、サービス等のブランディングに効果的かと思います。

欠点としては
■ホイールスクロールにも対応した全画面スクロール…の裏返しで、スクロールすると次のページに行ってしまう＝あるページのコンテンツ量が多くなっても、下にスクロールさせることができない■
というのが最大の問題点になります。
一見たいしたことなさそうな問題に見えますが、こちらのスクリプトはスマホでも有効なため、スマホで閲覧した際のコンテンツの収まりに気を付けないといけません。
どうしても収まらない場合、モーダル等をフル活用する等、回避方法はいろいろ考えられますが、そもそも、そういう状況になりそうなWEBの場合、最初からこちらの導入はしない、というのが正解かと思います。

Tweet

弊社のメールフォーム自体もそうなのですが、問い合わせフォームの[必須]項目については、よくある処理の「赤文字は入力必須です」は採用せず、[*は入力必須です]や[必須]という文字をつけるようにしています。
最近はスマホが普及しておりますので、画面の狭さゆえに各項目に*だけついていてもその説明が上にいってしまって分からない、という事もあるかと思い、主に[必須]とそれぞれの項目に書くことにしています。

さて、色だけに意味合いをもたせない理由ですが、
facebookのグループで流れていたこちら
https://www.shopify.com/partners/blog/86314118-5-ways-to-improve-your-ecommerce-design-for-colourblind-users
下のほうにあるTIP3にずばり書かれていますが、「ある色だけで意味合いを持たせてしまうと、その色が判別できない方にはユーザビリティが最悪になってしまう」ためです。

他にも、これは相当昔（どのくらい昔かというと、googlemapの埋め込みがなかった頃です）の経験なのですが、あるお客様の所に打ち合わせに伺うのに、お客様のホームページの地図を白黒で印刷してみたら、明度差のあまりない地図だったせいか、何がなんだかほとんど判別ができない地図が印刷されてびっくりしたことがあります。
いまは大抵googlemapの埋め込みにしてしまっていますが、地図の作図にも注意が必要ですね。

Tweet

まず、最近の弊社の製作実績をご覧ください。
http://maruta-kaikei.com/
http://beauty.aura-aile.com/

今に始まった話ではないのですが、TOP上部、真っ先に目にはいる場所に大きく、綺麗な写真を使うスタイルが流行っています。
インパクト充分で目を引きやすいのですが、その代わり欠点として「画像のサイズが大きくなるほど、容量が多くなる＝読み込みが遅くなる」という点があります。

室内のパソコンでインターネットを使用している環境ならまだしも、スマホ等モバイル機器で閲覧していると、わずかな読み込み時間の増加が大きなストレスになる事があります。

弊社が納品させて頂く際は、画像の綺麗さを損ねない範囲で限界までの「データ圧縮」をかけているのですが、納品後、自分でホームページを更新する機能などをお使いの際、新しく画像を差し替える時に圧縮をしないと、データ容量が増え、読み込み速度が落ちてしまうかもしれません。

そういったときは是非、以前にもご紹介した
https://tinyjpg.com/
このようなサービスでのデータ圧縮をお試しください。

Tweet

参考URL:http://japan.zdnet.com/article/35076105/

トレンドマイクロ、というとピンとこないかもしれませんが「ウィルスバスター」といえば思い当たる方もおられるのではないでしょうか。
その「パスワード管理ツール」に深刻な脆弱性が発見されたというニュースです。
この弱点により、外部からこっそり管理していたパスワードを盗み取ったり、逆にプログラムを実行させる事も可能になっていたとの事。

現在は修正されたという事ですが、逆にいうと「現在まで野放しになっていた」とも言えますので、このツールを使っていた方は注意が必要かもしれません。

ちなみに弊社が使用しているセキュリティソフトウェアは別の会社のものです。

Tweet

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への更新を促すメッセージが表示されるようになるとの事です。

Tweet

最近すっかりメジャーになったwordpress用の問い合わせフォームプラグインMW WP Form。その機能の一つに、問い合わせデータをデータベースに保存し、管理画面から閲覧できるというのがあります。

で、保存したデータを管理画面で閲覧できるだけでなく、CSVでダウンロードできるのもポイントの一つですが、ある日突然そのCSVダウンロードボタンが消えて困った思いをした事はありませんでしょうか。
本日、その原因のひとつを突き止めました。原因はずばり、これまたメジャーどころのバックアッププラグイン「BackWPUp」の出力するcssでした。
修正方法ですが、
plugins/bakwpup/assets/css の中に backwp.min.cssがありますので、その中の
#wpfooter{overflow:hidden}
こちらを削除してしまえばOKです。※.min系ですので、改行なしで横にだーっと一列に記述されていますが、一番後ろの方にあります。
#wpfooterは管理画面の共用idですので、他にも思い当たるフシがありましたら、上記のcssを疑ったほうが良いかもしれません。

Tweet

2つ前の記事「CSSスプライトは意味がなかったのかもしれない」で、js等の読み込みはgoogleの読み込み速度フラグには関係ないようだ…という記事を紹介してみましたが、やはり気になったのでその後を追ってみました。
すると、
http://googlewebmastercentral-ja.blogspot.jp/2014/05/understanding-web-pages-better.html
googleの公式で、はっきりと「javascriptを実行して検証している」と書かれていました。
実行しているという事は読み込んでいるという事です（当たり前）
したがって、上記の記事は半分は誤報だと確定されました。元記事にも追記しておきます。

Tweet

一個前のエントリにも書いた通り、「googleが順位づけの要素のひとつに、ページの読み込み速度を参考にしているのではないか」という話ですが、その強力な根拠となるのが、googleが提供しているPageSpeed Insightsというサービスです。
簡単にいうと「そのページがどれくらいの速さで読み込めるか」と「おっそい場合はどこを改良すれば良いか」を教えてくれるサービスです。
読み込み速度をランクづけの参考にしていなければ、わざわざこんなサービスを提供しませんよね、という事です。
※ちなみに弊社はcssやjsを統合したり、htmlの中に展開したりという事はメンテナンス性を損ねるためしたくない。ページスピード系プラグインはキャッシュ関連の処理がイヤ、ということでスコア結構わるいまんまです。

で、このサービスで表示される改善点のうち、最もさっくりと改善できるのが、「画像のロスレス圧縮」です。

こんな感じで警告がでるやつですね。

対処方法は色々あるのですが、最もお勧めなのが「別にロスレスじゃなくてもよくね？」という事で、「ロスレス圧縮」よりも更に圧縮率のよい「ロスあり圧縮」の
https://tinypng.com/
こちらのサービスを使う方法です。
使い方はもうそのみたまんま

ここに画像をドラッグ＆ドロップするだけ。
中身にもよりますが、透過ありのpngなら、今までの経験からいって脅威の平均6割超えの圧縮をしてくれます。

———-
なお「ロスレス」とは「圧縮によるロスがない」つまり、「元の画像の品質を一切損ねないから何回でもやり直しできるよ」的な意味です。
が、
普通「何回でもやりなおしできる」意味はありません。圧縮前のデータを別に保存しておけばいいのですから。
なので、上記のサービスがお奨めなのです。

Tweet

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を組み込んだレンダリングも計算していると思っていたのですが、なかなか興味深い記事で、手があいたら追ってみようかと思います。

Tweet

wordpress用フォームといえば、最近ではもうインストールすると自動的についてくるくらいの勢いのContactform7がメジャー中のメジャーですが、Contactform7は、制作者のポリシーから「確認画面」というものがありません。
一方、添付ファイル機能はあるのですが、有志の方が作成してくださっているcontactform7用確認画面プラグインと組み合わせても、確認画面で添付が確認できない…となります。
（実際試しました。泣けました）
そこでお奨めなのが「MW WP Form」です。
http://plugins.2inc.org/mw-wp-form/
まだまだ若いプラグインですが、デフォルトで添付ファイルOK+確認画面OKの機能を持ち、ページへの組み込みもcontactform7と似た形式（フォームパーツを組んだら、その固有のID記号を目当ての投稿に貼るだけ）で分かりやすく、また入力確認ルールが必須以外にも恐ろしく充実している、とサブの機能も光ります。ひらがなとカタカナで別々にチェックできるとか気合入りすぎです。

唯一といって良いほどの注意点が、ブラウザキャッシュで投稿した事を記憶しているらしく、一旦投稿したフォームを再度開くと、フォームをすっ飛ばして即「有難うございました」画面が表示されます。
普通に使うユーザーには問題ないと思いますが、実装して確認をする側にとっては、都度ブラウザを再起動する必要がでてきますので、チェックの手順は効率的に行いたいところです。

欠点らしい欠点といえば、mqtranslateと組み合わせている場合、フォーム組立て中に気をつける点があるくらいで、今後とも使用頻度高そうなメールフォームプラグインです。

Tweet